Prepare a new SvelteKit project for reusable data table components. This setup installs the UI foundation and table engine before you add the components your project needs.
Setup steps
Create a new SvelteKit project
Create a fresh SvelteKit app, then open the new project directory.
Add shadcn-svelte
Run the initializer from your SvelteKit project. It configures the component aliases, utilities, and styling used by the registry components.
Install TanStack Table
Add the headless table engine that manages table state, filtering, sorting, pagination, and row selection.
Read the TanStack Table v9 overview for its core concepts and APIs.
Add the table alias
Add the $table alias inside svelte.config.ts so table component imports stay short and consistent.
Install pagination
Start with the numbered pagination component. The installer also adds any shadcn-svelte dependencies it requires.
Choose the components you need
Add only what your table needs, such as filters, debounced search, column controls, row selection, or export.
What’s included
SV Table includes 16 Components and 11 Blocks . Start with Data Table Filters for advanced filtering, then add only the pieces your project needs.