# Data Table Powerful table and datagrids built using TanStack Table. [Docs](https://tanstack.com/table/v8/docs/introduction) ```svelte

table.getColumn("email")?.setFilterValue(e.currentTarget.value)} onchange={(e) => { table.getColumn("email")?.setFilterValue(e.currentTarget.value); }} class="max-w-sm" /> {#snippet child({ props })} {/snippet} {#each table .getAllColumns() .filter((col) => col.getCanHide()) as column (column)} column.getIsVisible(), (v) => column.toggleVisibility(!!v) } > {column.id} {/each}

{#each table.getHeaderGroups() as headerGroup (headerGroup.id)} {#each headerGroup.headers as header (header.id)} {#if !header.isPlaceholder} {/if} {/each} {/each} {#each table.getRowModel().rows as row (row.id)} {#each row.getVisibleCells() as cell (cell.id)} {/each} {:else} No results. {/each}

{table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s) selected.

``` ## Introduction Data tables are difficult to componentize because of the wide variety of features they support, and the uniqueness of every data set. So instead of trying to create a one-size-fits-all solution, we've created a guide to help you build your own data tables. We'll start with the basic `` component, and work our way up to a fully-featured data table. **Tip:** If you find yourself using the same table in multiple places, you can always extract it into a reusable component. ## Table of Contents This guide will show you how to use [TanStack Table](https://tanstack.com/table) and the `

` component to build your own custom data table. We'll cover the following topics: - [Basic Table](#basic-table) - [Row Actions](#row-actions) - [Pagination](#pagination) - [Sorting](#sorting) - [Filtering](#filtering) - [Visibility](#visibility) - [Row Selection](#row-selection) - [Reusable Components](#reusable-components) ## Installation 1. Add the `

` component to your project along with the `data-table` helpers. These helpers enable TanStack Table v8 to work with Svelte 5 Snippets, Components, etc. ```bash pnpm dlx shadcn-svelte@latest add table data-table ``` ```bash npx shadcn-svelte@latest add table data-table ``` ```bash bun x shadcn-svelte@latest add table data-table ``` 2. Add `@tanstack/table-core` as a dependency: ```bash pnpm i @tanstack/table-core ``` ```bash npm i @tanstack/table-core ``` ```bash bun install @tanstack/table-core ``` ## Prerequisites We're going to build a table to show recent payments. Here's what our data looks like: ```ts type Payment = { id: string; amount: number; status: "pending" | "processing" | "success" | "failed"; email: string; }; export const data: Payment[] = [ { id: "728ed52f", amount: 100, status: "pending", email: "m@example.com", }, { id: "489e1d42", amount: 125, status: "processing", email: "example@gmail.com", }, // ...]; ``` ## Project Structure Start by creating a route where your data table will live (we'll call ours payments), along with the following files: ```txt routes payments columns.ts data-table.svelte data-table-actions.svelte data-table-checkbox.svelte data-table-email-button.svelte +page.svelte ``` - `columns.ts` will contain our column definitions. - `data-table.svelte` will contain the `

` component and the complete `` component. - `data-table-actions.svelte` will contain the actions menu for each row. - `data-table-checkbox.svelte` will contain the checkbox for each row. - `data-table-email-button.svelte` will contain the sortable email header button. - `+page.svelte` is where we'll render and access `` component. ## Basic Table Let's start by building a basic table. ### Column Definitions First, we'll define our columns. routes/payments/columns.ts ```ts import type { ColumnDef } from "@tanstack/table-core"; // This type is used to define the shape of our data. // You can use a Zod schema here if you want. export type Payment = { id: string; amount: number; status: "pending" | "processing" | "success" | "failed"; email: string; }; export const columns: ColumnDef[] = [ { accessorKey: "status", header: "Status", }, { accessorKey: "email", header: "Email", }, { accessorKey: "amount", header: "Amount", },]; ``` **Note:** Columns are where you define the core of what your table will look like. They define the data that will be displayed, how it will be formatted, sorted and filtered. ### `` Component Next, we'll create a `` component to render our table. routes/payments/data-table.svelte ```svelte

``` **Tip**: If you find yourself using `` in multiple places, this is the component you could make reusable by extracting it to `components/ui/data-table.svelte`. `` ### Render the table Finally, we'll render our table in our page component. routes/payments/+page.server.ts ```ts export async function load() { // logic to fetch payments data here const payments = await getPayments(); return { payments, }; } ``` routes/payments/+page.svelte ```svelte ``` ## Cell Formatting Let's format the amount cell to display the dollar amount. We'll also align the cell to the right. ### Update columns definition Update the `header` and `cell` definitions for amount as follows: routes/payments/columns.ts ```ts import type { ColumnDef } from "@tanstack/table-core"; import { createRawSnippet } from "svelte"; import { renderSnippet } from "$lib/components/ui/data-table/index.js"; export const columns: ColumnDef[] = [ { accessorKey: "amount", header: () => { const amountHeaderSnippet = createRawSnippet(() => ({ render: () => `

Amount

`, })); return renderSnippet(amountHeaderSnippet); }, cell: ({ row }) => { const formatter = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", }); const amountCellSnippet = createRawSnippet<[{ amount: number }]>( (getAmount) => { const { amount } = getAmount(); const formatted = formatter.format(amount); return { render: () => `

${formatted}

`, }; } ); return renderSnippet(amountCellSnippet, { amount: row.original.amount, }); }, }, ]; ``` We're using the `createRawSnippet` function to create a Svelte Snippet for rendering simple HTML elements that don't require full lifecycle and state capabilities like a component. We then use the `renderSnippet` helper function to render the snippet. You can use the same approach to format other cells and headers. ## Row Actions Let's add row actions to our table. We'll use the `` and the ` {/snippet} Actions navigator.clipboard.writeText(id)}> Copy payment ID View customer View payment details ``` ### Update columns definition Now that we've defined the `` component, let's update our `actions` column definition to use it. routes/payments/columns.ts ```ts import type { ColumnDef } from "@tanstack/table-core"; import { renderComponent } from "$lib/components/ui/data-table/index.js"; import DataTableActions from "./data-table-actions.svelte"; export const columns: ColumnDef[] = [ // ... { id: "actions", cell: ({ row }) => { // You can pass whatever you need from `row.original` to the component return renderComponent(DataTableActions, { id: row.original.id }); }, },]; ``` You can access the row data using `row.original` in the `cell` function. Use this to handle actions for your row eg. use the `id` to make a DELETE call to your API. ## Pagination Next, we'll add pagination to our table. ### Update `` routes/payments/data-table.svelte ```svelte ``` This will automatically paginate your rows into pages of 10. See the [pagination docs](https://tanstack.com/table/v8/docs/api/features/pagination) for more information on customizing page size and implementing manual pagination. ### Adding pagination controls We can add pagination controls to our table using the ` ``` See [Reusable Components](#reusable-components) section for a more advanced pagination component. ## Sorting Let's make the email column sortable. ### Define `` component We'll start by creating a component to render a sortable email header button. routes/payments/data-table-email-button.svelte ```svelte ``` ### Update `` routes/payments/data-table.svelte ```svelte ``` ### Make header cell sortable We can now update the `email` header cell to add sorting controls. src/routes/payments/columns.ts ```ts import type { ColumnDef } from "@tanstack/table-core"; import { renderComponent } from "$lib/components/ui/data-table/index.js"; import DataTableEmailButton from "./data-table-email-button.svelte"; export const columns: ColumnDef[] = [ // ... { accessorKey: "email", header: ({ column }) => renderComponent(DataTableEmailButton, { onclick: column.getToggleSortingHandler(), }), },]; ``` This will automatically sort the table (asc and desc) when the user toggles on the header cell. ## Filtering Let's add a search input to filter emails in our table. ### Update `` routes/payments/data-table.svelte ```svelte

{ table.getColumn("email")?.setFilterValue(e.currentTarget.value); }} oninput={(e) => { table.getColumn("email")?.setFilterValue(e.currentTarget.value); }} class="max-w-sm" />

``` Filtering is now enabled for the `email` column. You can add filters to other columns as well. See the [filtering docs](https://tanstack.com/table/v8/docs/guide/filters) for more information on customizing filters. ## Visibility Adding column visibility is fairly simple using `@tanstack/table-core` visibility API. ### Update `` routes/payments/data-table.svelte ```svelte

table.getColumn("email")?.setFilterValue(e.currentTarget.value)} oninput={(e) => table.getColumn("email")?.setFilterValue(e.currentTarget.value)} class="max-w-sm" /> {#snippet child({ props })} {/snippet} {#each table .getAllColumns() .filter((col) => col.getCanHide()) as column (column.id)} column.getIsVisible(), (v) => column.toggleVisibility(!!v) } > {column.id} {/each}

``` This adds a dropdown menu that you can use to toggle column visibility. ## Row Selection Next, we're going to add row selection to our table. ### Define `` component We'll start by defining the checkbox component in our `data-table-checkbox.svelte` component. routes/payments/data-table-checkbox.svelte ```svelte checked, onCheckedChange} {...restProps} /> ``` ### Update columns definition Now that we have a new component, we can add a `select` column definition to render a checkbox. routes/payments/columns.ts ```ts import type { ColumnDef } from "@tanstack/table-core"; import { renderComponent } from "$lib/components/ui/data-table/index.js"; import { Checkbox } from "$lib/components/ui/checkbox/index.js"; export const columns: ColumnDef[] = [ // ... { id: "select", header: ({ table }) => renderComponent(Checkbox, { checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected(), onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value), "aria-label": "Select all", }), cell: ({ row }) => renderComponent(Checkbox, { checked: row.getIsSelected(), onCheckedChange: (value) => row.toggleSelected(!!value), "aria-label": "Select row", }), enableSorting: false, enableHiding: false, },]; ``` ### Update `` routes/payments/data-table.svelte ```svelte ``` This adds a checkbox to each row and a checkbox in the header to select all rows. ### Show selected rows You can show the number of selected rows using the `table.getFilteredSelectedRowModel()` API. ```svelte

{table.getFilteredSelectedRowModel().rows.length} of{" "} {table.getFilteredRowModel().rows.length} row(s) selected.

``` ## Reusable Components Check out the [Tasks](https://shadcn-svelte.com/examples/tasks) example to learn about creating reusable components for your data tables.