reactjs 如何添加ag-grid react分页行每页

2j4z5cfb  于 2023-10-17  发布在  React
关注(0)|答案(1)|浏览(156)

默认的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}
/>
mgdq6dx1

mgdq6dx11#

Ag-Grid没有默认的页面大小更改器,但可以创建这样的组件。通常情况下,页面大小转换器放置在网格的底部。为了实现这一点,我通常会在statusBar属性的statusPanels中添加一个statusPanel。
我已经创建了组件,you can see preview at here
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>
  );
};

1.将Pagination组件添加到组件对象,将statusPanel添加到statusPanels。

请注意,statusPanel属性值应与您的Pagination组件名称匹配。

<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}
/>

最后,我建议在this link上学习Ag-Grid文档的“行分页”部分。

相关问题