如何获取TantStack表的当前Page Index
<p>我正在使用 TantStack 和 React Table 库构建一个表。我想在表页脚中显示当前页面索引,例如“第 1 页,共 8 页”,其中“1”表示当前页码,“8”是总页数。我无法弄清楚如何从 TantStack 表状态访问当前页面索引。</p>
<p>它应该放置在这些按钮之间:</p>
<pre class="brush:php;toolbar:false;"><Button
variant="outline"
size="sm"
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
Previous
</Button>
<Button
variant="outline"
size="sm"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
Next
</Button></pre></p>
您需要将页面索引存储在状态变量中,并将 setState 方法传递给 tanstack 表以设置当前页面索引。您可以尝试以下代码:
const [state, setState] = useState(table.initialState); const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: 10 }); const pagination = useMemo( () => ({ pageIndex, pageSize }), [pageIndex, pageSize] ); // override the state managers for the table table.setOptions(prev => ({ ...prev, onStateChange: setState, state: { ...state, pagination, }, onPaginationChange: setPagination, pageCount: Math.ceil(numOfRows / pageSize) }));