Skip to main content

Getting Started

Basic data grid with columns, data, and row links.

Minimal Example​

<script lang="ts">
  import { DataGrid, useDataGrid } from '@repo/table';

  type User = { id: string; name: string; email: string };

  // Data from your source
  const users: User[] = [
    { id: '1', name: 'Alice', email: 'alice@example.com' },
    { id: '2', name: 'Bob', email: 'bob@example.com' },
  ];

  const { table, dataGrid } = useDataGrid({
    tableOptions: {
      columns: [
        { id: 'name', header: 'Name', accessorKey: 'name' },
        { id: 'email', header: 'Email', accessorKey: 'email' },
      ],
    },
    data: { data: users, count: users.length },
    getRowLink: (row) => `/users/${row.original.id}`,
  });
</script>

<DataGrid
  {dataGrid}
  {table}
  title="Users"
  subtitle="All registered users"
  add="/users/add"
/>

What This Gives You​

  • Sortable columns (click headers)
  • Pagination controls
  • URL-based state (sorting, page number persisted in query params)
  • An "Add" button linking to /users/add
  • Clickable rows linking to /users/:id

Next Steps​