DataTable

The DataTable component provides a powerful way to display, sort, filter, and paginate tabular data. Built on top of TanStack Table v8, it offers a comprehensive solution for handling complex data tables with rich functionality.

Installation

Before using the DataTable component, make sure you have the required dependencies installed:

npm install @tanstack/table-core @tanstack/svelte-table

Usage

<script>
  import { 
    createSvelteTable,
    FlexRender, 
    renderComponent
  } from "$lib/components/ui/data-table";
  import { 
    Table,
    TableHeader,
    TableBody,
    TableHead,
    TableRow,
    TableCell
  } from "$lib/components/ui/table";
  
  // Define your data
  const data = [
    { name: 'John', age: 30, status: 'Active' },
    { name: 'Jane', age: 25, status: 'Pending' },
    { name: 'Bob', age: 40, status: 'Inactive' },
  ];
  
  // Define your columns
  const columns = [
    {
      accessorKey: 'name',
      header: 'Name',
    },
    {
      accessorKey: 'age',
      header: 'Age',
    },
    {
      accessorKey: 'status',
      header: 'Status',
    },
  ];
  
  // Create a table instance
  const table = createSvelteTable({
    data,
    columns,
  });
</script>

<Table>
  <TableHeader>
    {#each table.getHeaderGroups() as headerGroup}
      <TableRow>
        {#each headerGroup.headers as header}
          <TableHead>
            <FlexRender 
              content={header.column.columnDef.header} 
              context={header.getContext()} 
            />
          </TableHead>
        {/each}
      </TableRow>
    {/each}
  </TableHeader>
  <TableBody>
    {#each table.getRowModel().rows as row}
      <TableRow>
        {#each row.getVisibleCells() as cell}
          <TableCell>
            <FlexRender 
              content={cell.column.columnDef.cell} 
              context={cell.getContext()} 
            />
          </TableCell>
        {/each}
      </TableRow>
    {/each}
  </TableBody>
</Table>

Examples

Basic DataTable

Here’s a basic example of a data table with film information:

The example above is a static representation. In a real implementation, you would use:

<script>
  import { createSvelteTable, FlexRender } from "$lib/components/ui/data-table";
  import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from "$lib/components/ui/table";
  
  const data = [
    { film: "The Silent Echo", director: "Alex Rivera", year: 2023, genre: "Drama" },
    { film: "Beyond the Horizon", director: "Sophia Chen", year: 2023, genre: "Sci-Fi" },
    // ...more data
  ];
  
  const columns = [
    { accessorKey: 'film', header: 'Film Title' },
    { accessorKey: 'director', header: 'Director' },
    { accessorKey: 'year', header: 'Year' },
    { accessorKey: 'genre', header: 'Genre' },
  ];
  
  const table = createSvelteTable({ data, columns });
</script>

<!-- Table rendering code -->

Custom Cell Rendering

You can customize cell rendering for different data types:

For custom cell rendering, you can use the renderComponent function:

const columns = [
  // ...other columns
  {
    accessorKey: 'availability',
    header: 'Availability',
    cell: info => renderComponent(StatusBadge, { status: info.getValue() }),
  },
];

API Reference

DataTable Core Functions

Function	Description
createSvelteTable	Creates a reactive TanStack table object for Svelte.
FlexRender	A component that renders column cells and headers with proper type-safety.
renderComponent	A helper function to use Svelte components in column definitions.
renderSnippet	A helper function to use Svelte snippets in column definitions.

createSvelteTable Options

Option	Type	Description
data	TData[]	The data array to use for the table.
columns	ColumnDef<TData>[]	The column definitions to use for the table.
state	TableState	The state of the table.
enableSorting	boolean	Whether to enable sorting.
enableFilters	boolean	Whether to enable filtering.
enableRowSelection	boolean	Whether to enable row selection.

Implementation

The DataTable component is an integration of Svelte with TanStack Table v8, providing a powerful way to build data tables in Svelte applications. The implementation leverages Svelte’s reactivity system while maintaining the flexibility and features of TanStack Table.

<script>
  import { createSvelteTable } from "$lib/components/ui/data-table";
  
  // Create a table instance
  const table = createSvelteTable({
    /* options */
  });
</script>

For full documentation of all available options and features, refer to the TanStack Table v8 documentation.