Data Table
Powerful tables and datagrids built with TanStack Table and the Table primitives.
Loading preview…
1<script lang="ts">
2 import DataTable from './data-table.svelte';
3</script>
4
5<div class="w-full max-w-3xl">
6 <DataTable />
7</div>
8Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/data-table/data-table.svelte
- ~/components/data-table/data-table-actions.svelte
- ~/components/data-table/data-table-checkbox.svelte
- ~/components/data-table/data-table-email-button.svelte
Usage
Data tables vary by dataset, so this item ships a full payments example (filtering, sorting, pagination, column visibility, row selection, and row actions) you can adapt.
Requires TanStack Table v9 (@tanstack/svelte-table) and the table, dropdown-menu, button, checkbox, and input registry items.
1<script lang="ts">
2 import DataTable from '~/components/data-table/data-table.svelte';
3</script>
4
5<DataTable />