Tables with TanStack Table

<script>
  import CodeSnippet from '../../components/CodeSnippet.svelte';
  import BasicTable from './BasicTable.svelte';
  import SortableTable from './SortableTable.svelte';
  import { highlightCode } from '../../lib/highlight.server';
  import { files } from './files.ts';

  const sources = await loadSources(files);

  const codeInstall = await highlightCode('bun add @tanstack/svelte-table', 'bash');
  const codeUsage = await highlightCode(
    `import { createTable, FlexRender, tableFeatures } from '@tanstack/svelte-table';

const table = createTable({
  features: tableFeatures({}), // opt into features (sorting, filtering…) as you need them
  columns,
  get data() {
    return people; // a getter keeps the table in sync with your $state
  },
});
// then render table.getHeaderGroups() / table.getRowModel() with <FlexRender />`,
    'typescript',
  );
</script>

<div class="intro">
  <p>
    TanStack Table needs no special setup — it's a headless, framework-agnostic table library with a Svelte 5 runes adapter. You install it and import from <code
      >@tanstack/svelte-table</code
    >; in Mochi it bundles straight into whichever island imports it.
  </p>
  <CodeSnippet html={codeInstall} />
  <p>
    Declare which features you need with <code>tableFeatures</code>, pass your <code>columns</code> and
    <code>data</code>, then render the header/cell definitions with <code>&lt;FlexRender /&gt;</code>:
  </p>
  <CodeSnippet html={codeUsage} />
  <p>
    Full API at <a href="https://tanstack.com/table" target="_blank" rel="noopener noreferrer">tanstack.com/table</a>.
  </p>
</div>

<section class="card">
  <header>
    <h2>Read-only table — server-rendered, zero JS</h2>
    <p>
      The whole table is plain server HTML: no <code>mochi:hydrate</code>, so nothing ships to the browser. This only makes sense when you don't need sorting, filtering, or any
      client interaction — otherwise reach for an island.
    </p>
  </header>
  <BasicTable />
</section>

<section class="card">
  <header>
    <h2>Sortable table — <code>mochi:hydrate</code></h2>
    <p>
      Registering <code>rowSortingFeature</code> makes the headers clickable — cycle ascending → descending → unsorted. Sorting runs on the client, so this card is a hydrated island.
    </p>
  </header>
  <SortableTable mochi:hydrate />
</section>