如何添加ag-grid反应每页下拉分页行

Question

默认的 AG-Grid 没有用于分页的下拉菜单。如何添加如下图所示的分页下拉？

---

<AgGridReact
  rowData={rowData}
  columnDefs={columnDefs}
  defaultColDef={defaultColDef}
  enableRangeSelection={true}
  rowSelection={'multiple'}
  statusBar={{
    statusPanels:
      [
        { statusPanel: 'agTotalRowCountComponent', align: 'center' },
        { statusPanel: 'agFilteredRowCountComponent' },
        { statusPanel: 'agSelectedRowCountComponent' },
        { statusPanel: 'agAggregationComponent' }
      ]
  }}
  onGridReady={onGridReady}
/>

Answer 1

在最新版本的ag-Grid（版本31）中，存在页面大小选择，但ag-Grid没有默认页面大小更改器（版本29）。

但是创建这样的组件是可能的。通常，页面大小更改器放置在网格的底部。为了实现这一点，我通常将 statusPanel 添加到 statusBar 属性的 statusPanels 中。

我已经创建了组件，并且

1. 创建PageSize组件：

export interface PaginationProps {
  api: GridApi;
}

const Pagination: FC<PaginationProps> = ({ api }) => {
  const [pageSize, setPageSize] = useState(api.paginationGetPageSize());

  const pageSizes = [1, 5, 10, 20, 50];

  const handleChangePageSize = (e) => {
    const value = Number(e.target.value);
    setPageSize(value);
    api.paginationSetPageSize(value);
  };

  return (
    <select
      value={pageSize}
      style={{ height: 40, minWidth: 100 }}
      onChange={handleChangePageSize}
    >
      {pageSizes.map((pageSize) => {
        return <option value={pageSize}>{pageSize}</option>;
      })}
    </select>
  );
};

2. 将

   Pagination

   组件添加到 Components 对象，将 statusPanel 添加到 statusPanels。

请注意，statusPanel 属性值应与您的分页组件的名称相匹配。

<AgGridReact
  rowData={rowData}
  columnDefs={columnDefs}
  defaultColDef={defaultColDef}
  enableRangeSelection={true}
  rowSelection={"multiple"}
  components={{
    Pagination,
  }}
  statusBar={{
    statusPanels: [
      { statusPanel: "agTotalRowCountComponent", align: "center" },
      { statusPanel: "agFilteredRowCountComponent" },
      { statusPanel: "agSelectedRowCountComponent" },
      { statusPanel: "agAggregationComponent" },
      {
        statusPanel: "Pagination",
        align: "left",
      },
    ],
  }}
  onGridReady={onGridReady}
/>

最后，我建议您学习 Ag-Grid 文档的“行分页”部分，网址为此链接。