如何在反应中使用tanStack表显示页码列表？

Question

我想使用 react tan Stack 表实现分页，如下所示-

< 1 2 3 … 8 9 10 >

Answer 1

您可以将它们存储在数组中

const paginationButtons = [];
for (let i = 0; i < table.getPageCount(); i++) {
    paginationButtons.push(
        <button key={i} onClick={() => table.setPageIndex(i)}>
            {i + 1}
        </button>
    );
}

然后你就可以使用它了

 <div>{paginationButtons.map((u) => u)}</div>

将它们存储在数组中允许您在渲染它们之前执行任何类型的修改。