Primereact可展开行组结合分页时组拆分问题的解决方法

默认的DataTable分页以单条数据为单位，会导致行组被拆分到不同页面。要解决这个问题，核心是基于行组而非单条数据做分页逻辑，具体步骤如下：

1. 预处理数据，按分组字段整理成组集合 #

先把原始数据按internal_id分组，转换成每个组包含组标识和对应行数据的结构：

// 组件内方法：生成分组数据集合
getGroupedData = () => {
  const groupMap = {};
  this.state.data.forEach(item => {
    const groupKey = item.internal_id;
    if (!groupMap[groupKey]) {
      groupMap[groupKey] = { key: groupKey, rows: [] };
    }
    groupMap[groupKey].rows.push(item);
  });
  return Object.values(groupMap);
};

2. 自定义分页逻辑，以组为单位计算分页 #

维护分页相关状态（当前页、每页显示组数），计算当前页需要展示的所有行数据：

// 组件初始化状态
constructor(props) {
  super(props);
  this.state = {
    // ...原有状态
    currentPage: 1,
    groupsPerPage: 3 // 示例：每页显示3组，对应9条数据
  };
}

// 获取当前页要展示的所有行数据
getCurrentPageData = () => {
  const groupedData = this.getGroupedData();
  const startIdx = (this.state.currentPage - 1) * this.state.groupsPerPage;
  const endIdx = startIdx + this.state.groupsPerPage;
  // 把当前页的所有组的行数据合并成一个数组
  return groupedData.slice(startIdx, endIdx).flatMap(group => group.rows);
};

// 计算总页数
getTotalPages = () => {
  const groupedData = this.getGroupedData();
  return Math.ceil(groupedData.length / this.state.groupsPerPage);
};

3. 修改DataTable配置，替换默认分页为自定义分页 #

去掉DataTable自带的分页器，改用自定义的分页控件，确保分页以组为单位：

{/* 自定义分页控件 */}
<div className="p-paginator p-component p-paginator-bottom">
  <button 
    className="p-paginator-prev p-paginator-element p-link"
    onClick={() => this.setState({ currentPage: Math.max(1, this.state.currentPage - 1) })}
    disabled={this.state.currentPage === 1}
  >
    <span className="p-paginator-icon pi pi-chevron-left"></span>
  </button>
  <span className="p-paginator-current">
    第 {this.state.currentPage} 页，共 {this.getTotalPages()} 页
  </span>
  <button 
    className="p-paginator-next p-paginator-element p-link"
    onClick={() => this.setState({ currentPage: Math.min(this.getTotalPages(), this.state.currentPage + 1) })}
    disabled={this.state.currentPage === this.getTotalPages()}
  >
    <span className="p-paginator-icon pi pi-chevron-right"></span>
  </button>
  <select 
    className="p-paginator-rpp-options p-inputtext p-component"
    value={this.state.groupsPerPage}
    onChange={(e) => this.setState({ groupsPerPage: parseInt(e.target.value), currentPage: 1 })}
  >
    <option value={3}>每页3组</option>
    <option value={5}>每页5组</option>
    <option value={10}>每页10组</option>
  </select>
</div>

{/* 修改后的DataTable */}
<DataTable
  value={this.getCurrentPageData()}
  rowGroupMode="subheader"
  groupRowsBy="internal_id"
  expandableRowGroups
  expandedRows={this.state.expandedRows}
  onRowToggle={(e) => this.setExpandedRows(e.data)}
  rowGroupHeaderTemplate={headerTemplate}
  reorderableColumns
  size="small"
  header={this.headerTemplate}
  filters={this.state.filters}
  emptyMessage="No entry found."
>
  <Column field="id" header="#" align="right" alignHeader="center" sortable></Column>
  <Column field="last_name" header={this.t('last_name')} filter sortable></Column>
  <Column field="first_name" header={this.t('first_name')} filter sortable></Column>
  {/* 其他列定义 */}
</DataTable>

关键注意事项 #

• 若使用筛选功能，需先对原始数据执行筛选，再进行分组计算，保证分组数据的准确性。
• 排序功能若涉及分组字段，需先对分组集合排序，再展开行数据。
• 自定义分页控件的样式可以参考PrimeReact默认分页器的类名，保持UI风格一致。

内容的提问来源于stack exchange，提问作者Kaspatoo