如何在 Material UI X-Grid 中获取过滤后的行数？

Question

我有这个 XGrid：

<XGrid
  pageSize={pageSize}
  page={page}
  rowsPerPageOptions={[25, 50, 100]}
  rowCount={handleRowCount}
  onPageChange={onHandlePageChange}
  onPageSizeChange={onHandlePageSizeChange}
  rows={rows}
  columns={columns}
  paginationMode="server"
  pagination
  disableColumnResize={true}
  hideFooterSelectedRowCount={true}
/>

每当我对网格应用过滤器时，行数保持不变。我正在编写一个函数来让

rowCount

动态变化，但我不知道如何从过滤的行中获取计数。例如，如果我默认有 60 行，并且我对有 2 行的位置应用过滤器，那么我希望网格将 2 显示为

rowCount

。

这是我试图实现的函数的伪代码：

const handleRowCount = () => {
    if (filter) {
        rowCount = filteredRowCount; // I do not know how to get this value.
    } else {
        rowCount = serverRowCount;
    }
    return rowCount;
}

这是正确的做法吗？我尝试删除

rowCount

属性，但我面临的问题是过滤仍然显示后端的行总数，并且网格不会返回到第一页。我尝试将分页更改为“客户端”，但仅显示行的第一页。

Answer 1

您可以使用“gridExpandedRowCountSelector”

    <XGrid
  pageSize={pageSize}
  page={page}
  rowsPerPageOptions={[25, 50, 100]}
  rowCount={handleRowCount}
  onPageChange={onHandlePageChange}
  onPageSizeChange={onHandlePageSizeChange}
  rows={rows}
  columns={columns}
  paginationMode="server"
  pagination
  disableColumnResize={true}
  hideFooterSelectedRowCount={true}
  onFilterModelChange={() => {
    setTimeout(() => { // filteredRowsCount is the number you look for
      setFilteredRowsCount(gridExpandedRowCountSelector(apiRef)) 
    }, 100);
  }}
/>