如何自定义Ag Grid React分页：添加每页行数选择下拉框

问题描述 #

我正在使用Ag Grid React组件，当前代码如下：

<AgGridReact
  rowData={rowData}
  columnDefs={columnDefs}
  autoGroupColumnDef={autoGroupColumnDef}
  defaultColDef={defaultColDef}
  suppressRowClickSelection={true}
  groupSelectsChildren={true}
  rowSelection={'multiple'}
  pivotPanelShow={'always'}
  pagination={true}
  onGridReady={onGridReady}
/>

目前组件底部显示默认分页，样式为：

1 to 10 of 100 |< <page 1 of 10> >|

希望自定义分页，添加包含10、20、30等选项的下拉框，让用户选择每页显示行数，最终分页样式类似：

page 10 inside dropdown 1-10 of 100 < >

实现方案 #

1. 用内置快速实现（推荐） #

Ag Grid自带分页行数选择功能，只需在组件配置中添加两个属性即可：

• paginationPageSize：设置默认每页显示行数
• paginationPageSizeSelector：定义下拉框的选项列表

修改后的组件代码：

<AgGridReact
  rowData={rowData}
  columnDefs={columnDefs}
  autoGroupColumnDef={autoGroupColumnDef}
  defaultColDef={defaultColDef}
  suppressRowClickSelection={true}
  groupSelectsChildren={true}
  rowSelection={'multiple'}
  pivotPanelShow={'always'}
  pagination={true}
  // 新增分页行数配置
  paginationPageSize={10}
  paginationPageSizeSelector={[
    { value: 10, text: '10' },
    { value: 20, text: '20' },
    { value: 30, text: '30' },
    { value: -1, text: '全部' } // 可选：添加显示所有数据的选项
  ]}
  onGridReady={onGridReady}
/>

2. 完全自定义分页组件（按需使用） #

如果内置布局不符合样式要求，可以通过paginationRenderer属性自定义整个分页栏的结构和样式：

步骤1：编写自定义分页组件

const CustomPagination = (props) => {
  const { api, paginationProxy } = props;

  // 获取分页核心数据
  const currentPage = paginationProxy.getCurrentPage() + 1; // Ag Grid页码从0开始计数
  const totalPages = paginationProxy.getTotalPages();
  const totalRows = paginationProxy.getTotalRowCount();
  const pageSize = paginationProxy.getPageSize();
  const startRow = (currentPage - 1) * pageSize + 1;
  const endRow = Math.min(currentPage * pageSize, totalRows);

  // 分页操作方法
  const goPrev = () => api.paginationGoToPreviousPage();
  const goNext = () => api.paginationGoToNextPage();
  const changePageSize = (e) => {
    api.paginationSetPageSize(parseInt(e.target.value));
  };

  return (
    <div className="custom-pagination-bar">
      <select 
        value={pageSize} 
        onChange={changePageSize}
        className="page-size-select"
      >
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
      </select>
      <span className="page-status">{startRow}-{endRow} of {totalRows}</span>
      <button onClick={goPrev} disabled={currentPage === 1}>&lt;</button>
      <button onClick={goNext} disabled={currentPage === totalPages}>&gt;</button>
    </div>
  );
};

步骤2：在AgGridReact中引入自定义组件

<AgGridReact
  // 其他原有属性保持不变
  pagination={true}
  paginationPageSize={10}
  paginationRenderer={CustomPagination} // 绑定自定义分页组件
  onGridReady={onGridReady}
/>

步骤3：添加样式美化（可选）

.custom-pagination-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  justify-content: center;
}

.page-size-select {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.page-status {
  color: #666;
}

.custom-pagination-bar button {
  padding: 4px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.custom-pagination-bar button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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