Before - shadcn Table

<script lang="ts">
  import * as Table from '$lib/components/ui/table'
  let rows = [/* ...orders... */]
</script>

<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.Head>Order</Table.Head>
      <Table.Head>Customer</Table.Head>
      <Table.Head class="text-right">Amount</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    {#each rows as r}
      <Table.Row>
        <Table.Cell>{r.id}</Table.Cell>
        <Table.Cell>{r.customer}</Table.Cell>
        <Table.Cell class="text-right">{r.amount}</Table.Cell>
      </Table.Row>
    {/each}
  </Table.Body>
</Table.Root>
<!-- static markup: no sort, no filter, no virtualization -->

After - <SvGrid>, same tokens

<script lang="ts">
  import { SvGrid, type ColumnDef } from '@svgrid/grid'
  import '@svgrid/grid/themes/shadcn.css'  // 1 line to match shadcn

  let rows = [/* ...same orders... */]
  const columns: ColumnDef[] = [
    { id: 'id',       field: 'id',       header: 'Order' },
    { id: 'customer', field: 'customer', header: 'Customer' },
    { id: 'amount',   field: 'amount',   header: 'Amount', type: 'number' },
  ]
</script>

<SvGrid
  data={rows}
  {columns}
  sortable
  filterable
  class="rounded-md border" />
<!-- sortable, filterable, virtualized, keyboard + a11y -->