如何为AgGridReact添加分页每页行数下拉选择器

默认AG-Grid确实没有内置的分页行数下拉选择器，要实现你图中展示的效果，可以按以下步骤操作：

核心思路 #

先开启AG-Grid的分页功能，再通过自定义组件（集成到状态栏或外部独立添加）控制每页显示行数，调用AG-Grid的API完成分页数据刷新。

步骤一：开启分页并绑定状态 #

给AgGridReact组件添加分页相关配置，同时用状态管理当前每页行数：

import { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const YourComponent = () => {
  // 定义每页行数状态，默认设为10
  const [pageSize, setPageSize] = useState(10);
  let gridApi = null;

  const onGridReady = (params) => {
    gridApi = params.api;
  };

  // 切换每页行数的方法
  const changePageSize = (e) => {
    const newSize = Number(e.target.value);
    setPageSize(newSize);
    // 调用AG-Grid API修改每页行数
    gridApi.paginationSetPageSize(newSize);
  };

步骤二：添加下拉选择器（两种方式可选） #

方式1：集成到状态栏（和现有统计组件放在一起）

自定义一个状态栏组件，注册后加到AG-Grid的状态栏配置里：

// 自定义分页行数选择器组件
const PageSizeSelector = () => {
  const gridApi = useGridApiContext();
  const [localPageSize, setLocalPageSize] = useState(10);

  const handleChange = (e) => {
    const newSize = Number(e.target.value);
    setLocalPageSize(newSize);
    gridApi.paginationSetPageSize(newSize);
  };

  return (
    <div style={{ padding: '0 12px', display: 'flex', alignItems: 'center', gap: '6px' }}>
      <span>每页显示:</span>
      <select value={localPageSize} onChange={handleChange} style={{ padding: '2px' }}>
        <option value="10">10条</option>
        <option value="20">20条</option>
        <option value="50">50条</option>
        <option value="100">100条</option>
      </select>
    </div>
  );
};

// 注册自定义状态栏组件
AgGridReact.registerStatusPanel('pageSizeSelector', PageSizeSelector);

修改statusBar配置，把自定义组件加入：

<AgGridReact
  rowData={rowData}
  columnDefs={columnDefs}
  defaultColDef={defaultColDef}
  enableRangeSelection={true}
  rowSelection={'multiple'}
  // 开启分页
  pagination={true}
  // 绑定每页行数状态
  paginationPageSize={pageSize}
  statusBar={{
    statusPanels: [
      // 自定义行数选择器放在最前面
      { statusPanel: 'pageSizeSelector', align: 'center' },
      { statusPanel: 'agTotalRowCountComponent', align: 'center' },
      { statusPanel: 'agFilteredRowCountComponent' },
      { statusPanel: 'agSelectedRowCountComponent' },
      { statusPanel: 'agAggregationComponent' }
    ]
  }}
  onGridReady={onGridReady}
/>

方式2：外部独立添加下拉框

如果不想集成到状态栏，直接在表格上方加下拉组件即可：

return (
  <div className="ag-theme-alpine" style={{ height: 600 }}>
    <div style={{ padding: '10px 0', display: 'flex', alignItems: 'center', gap: '8px' }}>
      <span>每页显示:</span>
      <select value={pageSize} onChange={changePageSize} style={{ padding: '3px' }}>
        <option value="10">10条</option>
        <option value="20">20条</option>
        <option value="50">50条</option>
        <option value="100">100条</option>
      </select>
    </div>
    <AgGridReact
      rowData={rowData}
      columnDefs={columnDefs}
      defaultColDef={defaultColDef}
      enableRangeSelection={true}
      rowSelection={'multiple'}
      pagination={true}
      paginationPageSize={pageSize}
      statusBar={{
        statusPanels:
          [
            { statusPanel: 'agTotalRowCountComponent', align: 'center' },
            { statusPanel: 'agFilteredRowCountComponent' },
            { statusPanel: 'agSelectedRowCountComponent' },
            { statusPanel: 'agAggregationComponent' }
          ]
      }}
      onGridReady={onGridReady}
    />
  </div>
);

关键注意事项 #

• 必须开启pagination={true}，否则所有分页相关配置和API都不会生效；
• 通过gridApi.paginationSetPageSize()修改行数时，AG-Grid会自动重新加载当前页数据，无需手动刷新表格；
• 下拉选项的数值可根据业务需求自定义调整。

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