Svelte 5 tables proper.

Tables are hard.
..but it doesn't have to be!

I've hacked up an elegant and simple approach to handling table needs using Svelte 5 and Snippets.

In this post we're going to create a table component instance in under 20 lines of code with custom renderers.

Features

- Svelte 5 + Snippets support💖
- Zero dependencies 0️⃣
- Built with override-able TailwindCSS classes 💄.
- Customizable header & cell renderering support.

Installation

npm i @mateothegreat/svelte5-table

Usage

<script lang="ts">
  import { Table } from "@mateothegreat/svelte5-table";
</script>

{#snippet actionsHeader()}
  <div class="flex items-center gap-2">
    My Custom Header
    <PartyPopper class="h-4 w-4 text-pink-500" />
  </div>
{/snippet}

{#snippet actionsColumn(row: any)}
  <div class="flex items-center gap-2">
    <Button variant="outline">Edit</Button>
  </div>
{/snippet}

<Table
  data={$components}
  table={{
    columns: [
      {
        field: "id",
        header: "Component ID"
      },
      {
        field: "name",
        header: "Component Name"
      },
      {
        field: "custom",
        header: actionsHeader
      },
      {
        field: "actions",
        classes: "flex items-center justify-end",
        renderer: actionsColumn
      }
    ]
  }} />

See also