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

Posted 2023-02-22

【中文标题】在 Material-Table 中重新排序后是不是可以获得当前页面数据？

【英文标题】：Is it possible to get the current page data after re-ordering in Material-Table?在 Material-Table 中重新排序后是否可以获得当前页面数据？

【发布时间】：2020-02-05 17:00:39

【问题描述】：

即使在排序后我也需要获取当前页面数据。分页更改后可以获取当前页面数据，但排序后无法获取。这可能吗？ 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
    />
)

【问题讨论】：

我添加了一个PR 将当前显示的数据添加到onOrderChange。希望这会有所帮助

谢谢。我发现我可以通过参考访问数据。

【参考方案1】：

我发现我可以通过 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]
  );

【讨论】：

*tableRef 解决方案不可靠。不要使用

你能描述或展示一些不可靠的代码吗？也许这表明数据结构中存在更深层次的问题？

是的，因为 tableref 是对表的引用，它不会改变，因为它始终是同一个表。为什么不将 sortedData 放入 [] 中？顺便说一句，您使用 create react app 吗？访问者？

不使用 CRA。你的意思是依赖吗？ [tableRef.current.dataManager.sortedData] ?

我猜如果引用永远不会改变，那么每次都需要返回新数据？

【参考方案2】：

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

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

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

【讨论】：

如果您有新问题，请点击 按钮提出问题。如果有助于提供上下文，请包含指向此问题的链接。 - From Review

这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review

【参考方案3】：

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

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