reactjs - 在Material-Table中重新排序后是否可以获得当前页面数据？

Question

即使在排序后我也需要获取当前页面数据。我可以在分页更改后获取当前页面数据，但在排序后无法获取。这可能吗？onOrderChange仅返回列 ID 和方向。

有没有返回排序数组的方法？

const [currentPage, setCurrentPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(5);

const currentPageItems = useMemo(() => removeData.slice(currentPage * rowsPerPage, currentPage * rowsPerPage + rowsPerPage),
    [removeData, currentPage, rowsPerPage]);

return (
    <MaterialTable
        data={remoteData}
        options={{
          pageSize: 5,
          pageSizeOptions: [5, 10, 25],
          sorting: true,
        }}
        onChangePage={setCurrentPage}
        onChangeRowsPerPage={setRowsPerPage}
    />
)

Answer 1

以防万一其他人有同样的问题：

tableRef.current.onQueryChange({page: 0, search: ''})

Answer 2

我发现我可以通过 tableRef 访问排序后的数据。

const tableRef = useRef(null);
const [currentPage, setCurrentPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(5);

const sortedData = tableRef.current?.dataManager?.sortedData ?? [];

const currentPageItems = useMemo(() => sortedData.slice(currentPage * rowsPerPage, currentPage * rowsPerPage + rowsPerPage),
    [removeData, currentPage, rowsPerPage]);

return (
    <MaterialTable
        tableRef={tableRef}
        data={remoteData}
        options={{
          pageSize: 5,
          pageSizeOptions: [5, 10, 25],
          sorting: true,
        }}
        onChangePage={setCurrentPage}
        onChangeRowsPerPage={setRowsPerPage}
    />
)

更新：据我了解，这不可靠，但可能是我正在做的事情。如果我尝试在效果中访问 tableRef 并在进行更改时记录，则不会发生任何事情。（tableRef 没有改变）

useEffect(
    () => {
      tableRef.current?.dataManager?.sortedData &&
        console.log(tableRef.current.dataManager.sortedData);
    },
    [tableRef]
  );

Answer 3

我正在使用如下所示通过代码动态更改页面的工作：

tableRef.current.dataManager.changeCurrentPage(5).
let tableState = tableRef.current.dataManager.getRenderState();
tableRef.current.setState(tableState);

getRenderState() 将返回一个 obj ，它提供表状态的所有信息。