TanStack Table 是一个功能强大的无头表格库，它提供了构建灵活且高性能表格所需的所有工具。虽然它本身不提供 UI 组件，但它允许你使用自己喜欢的 UI 框架（如 Svelte）来构建表格界面。本教程将重点介绍如何在 Svelte 中使用 TanStack Table 实现分页功能。
步骤 1: 引入必要的模块
首先，你需要从 @tanstack/svelte-table 导入 getPaginationRowModel。这个函数是一个行模型，它负责根据当前页码和页面大小来过滤表格数据。
<script>
import {
// ... 其他导入
getPaginationRowModel,
} from '@tanstack/svelte-table';
</script>步骤 2: 配置表格选项
接下来，在你的表格选项中启用 getPaginationRowModel。同时，建议启用 autoResetPageIndex 选项，这样当数据或页面大小更改时，页码会自动重置，避免出现超出页码范围的问题。
<script>
import { writable } from 'svelte/store';
import { getPaginationRowModel } from '@tanstack/svelte-table';
const options = writable({
// ... 其他选项
getPaginationRowModel: getPaginationRowModel(),
autoResetPageIndex: true,
});
</script>步骤 3: 设置初始页面大小
使用 $table.setPageSize() 方法设置表格的初始页面大小。例如，要设置每页显示 10 行数据，可以这样做：
<script>
import { writable } from 'svelte/store';
import { getPaginationRowModel } from '@tanstack/svelte-table';
const options = writable({
// ... 其他选项
getPaginationRowModel: getPaginationRowModel(),
autoResetPageIndex: true,
});
$table.setPageSize(10);
</script>步骤 4: 添加分页控制按钮
最后，你需要添加按钮来控制页码。使用 $table.previousPage() 和 $table.nextPage() 方法来切换到上一页和下一页。使用 $table.getCanPreviousPage() 和 $table.getCanNextPage() 方法来禁用按钮，防止用户超出页码范围。
<button
on:click={() => $table.previousPage()}
disabled={!$table.getCanPreviousPage()}
>
Prev
</button>
<button
on:click={() => $table.nextPage()}
disabled={!$table.getCanNextPage()}
>
Next
</button>完整示例
下面是一个完整的示例，展示了如何在 TanStack Svelte Table 中实现分页功能：
<script>
import { writable } from 'svelte/store';
import {
getCoreRowModel,
getPaginationRowModel,
useSvelteTable,
} from '@tanstack/svelte-table';
const data = writable([
{ firstName: 'John', lastName: 'Doe', age: 30 },
{ firstName: 'Jane', lastName: 'Smith', age: 25 },
{ firstName: 'Peter', lastName: 'Jones', age: 40 },
{ firstName: 'Alice', lastName: 'Brown', age: 28 },
{ firstName: 'Bob', lastName: 'Davis', age: 35 },
{ firstName: 'Emily', lastName: 'Wilson', age: 22 },
{ firstName: 'David', lastName: 'Garcia', age: 45 },
{ firstName: 'Olivia', lastName: 'Rodriguez', age: 29 },
{ firstName: 'Michael', lastName: 'Martinez', age: 32 },
{ firstName: 'Sophia', lastName: 'Hernandez', age: 26 },
{ firstName: 'Daniel', lastName: 'Lopez', age: 38 },
{ firstName: 'Isabella', lastName: 'Gonzalez', age: 24 },
{ firstName: 'Matthew', lastName: 'Perez', age: 31 },
{ firstName: 'Mia', lastName: 'Sanchez', age: 27 },
{ firstName: 'Andrew', lastName: 'Ramirez', age: 34 },
]);
const columns = writable([
{ header: 'First Name', accessorKey: 'firstName' },
{ header: 'Last Name', accessorKey: 'lastName' },
{ header: 'Age', accessorKey: 'age' },
]);
const options = writable({
data: $data,
columns: $columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
autoResetPageIndex: true,
});
const table = useSvelteTable(options);
const $table = writable($table);
$table.setPageSize(5);
</script>
<table>
<thead>
{#each $table.getHeaderGroups() as headerGroup}
<tr>
{#each headerGroup.headers as header}
<th>{header.column.columnDef.header}</th>
{/each}
</tr>
{/each}
</thead>
<tbody>
{#each $table.getRowModel().rows as row}
<tr>
{#each row.getVisibleCells() as cell}
<td>{cell.getValue()}</td>
{/each}
</tr>
{/each}
</tbody>
</table>
<button
on:click={() => $table.previousPage()}
disabled={!$table.getCanPreviousPage()}
>
Prev
</button>
<button
on:click={() => $table.nextPage()}
disabled={!$table.getCanNextPage()}
>
Next
</button>
<div>
Page {$table.getState().pagination.pageIndex + 1} of {$table.getPageCount()}
</div>注意事项
- 确保你已经安装了 @tanstack/svelte-table。
- 根据你的项目需求调整页面大小和样式。
- 可以添加更多分页控制元素，例如页面大小选择器或直接输入页码。
总结
通过本教程，你学习了如何在 TanStack Svelte Table 中实现分页功能。通过简单的几步配置，你可以为你的表格添加分页控制，提升用户体验。希望本教程对你有所帮助！
