## Demo: tanstack-table

### TanStackTable.svelte
```svelte
<script>
  import DemoPage from '../../components/DemoPage.svelte';
  import CodeSnippet from '../../components/CodeSnippet.svelte';
  import BasicTable from './BasicTable.svelte';
  import SortableTable from './SortableTable.svelte';
  import { loadSources } from '../../components/utils.ts';
  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>

<DemoPage
  title="Tables with TanStack Table"
  description="TanStack Table is a headless table library. A read-only table renders entirely on the server and ships zero JavaScript; interactive features like sorting opt into a mochi:hydrate island."
  {sources}
>
  <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>
</DemoPage>

<style>
  .intro {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0 0 1.75rem;
  }

  .intro p {
    margin: 0 0 0.75rem;
  }

  .intro a {
    color: var(--accent);
    text-decoration: underline;
  }

  .intro > p:last-child {
    margin-bottom: 0;
  }

  .intro p code {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-mono);
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-size: 0.85em;
  }

  .card {
    margin-bottom: 2rem;
  }

  .card header {
    margin-bottom: 0.9rem;
  }

  .card header p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0;
  }

  .card header code {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-mono);
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-size: 0.85em;
  }
</style>
```

### BasicTable.svelte
```svelte
<script lang="ts">
  import { createTable, FlexRender, tableFeatures } from '@tanstack/svelte-table';
  import type { ColumnDef } from '@tanstack/svelte-table';
  import { people, type Person } from './data.ts';

  const features = tableFeatures({});

  const columns: ColumnDef<typeof features, Person>[] = [
    { accessorKey: 'firstName', header: 'First name', cell: (info) => info.getValue() },
    { accessorKey: 'lastName', header: 'Last name', cell: (info) => info.getValue() },
    { accessorKey: 'age', header: 'Age', cell: (info) => info.getValue() },
  ];

  const table = createTable({
    features,
    columns,
    get data() {
      return people;
    },
  });
</script>

<div class="table-wrap">
  <table>
    <thead>
      {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
        <tr>
          {#each headerGroup.headers as header (header.id)}
            <th>
              {#if !header.isPlaceholder}
                <FlexRender {header} />
              {/if}
            </th>
          {/each}
        </tr>
      {/each}
    </thead>
    <tbody>
      {#each table.getRowModel().rows as row (row.id)}
        <tr>
          {#each row.getAllCells() as cell (cell.id)}
            <td><FlexRender {cell} /></td>
          {/each}
        </tr>
      {/each}
    </tbody>
  </table>
</div>

<style>
  .table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    background: var(--surface);
  }

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    color: var(--text);
  }

  th,
  td {
    text-align: left;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
  }

  th {
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-muted);
  }

  tbody tr:last-child td {
    border-bottom: none;
  }
</style>
```

### SortableTable.svelte
```svelte
<script lang="ts">
  import { createSortedRowModel, createTable, FlexRender, rowSortingFeature, sortFns, tableFeatures } from '@tanstack/svelte-table';
  import type { ColumnDef } from '@tanstack/svelte-table';
  import { people, type Person } from './data.ts';

  const features = tableFeatures({
    rowSortingFeature,
    sortedRowModel: createSortedRowModel(),
    sortFns,
  });

  const columns: ColumnDef<typeof features, Person>[] = [
    { accessorKey: 'firstName', header: 'First name', cell: (info) => info.getValue() },
    { accessorKey: 'lastName', header: 'Last name', cell: (info) => info.getValue() },
    { accessorKey: 'age', header: 'Age', cell: (info) => info.getValue() },
  ];

  const table = createTable({
    features,
    columns,
    get data() {
      return people;
    },
  });
</script>

<div class="table-wrap">
  <table>
    <thead>
      {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
        <tr>
          {#each headerGroup.headers as header (header.id)}
            <th>
              {#if !header.isPlaceholder}
                <button
                  type="button"
                  class="sort"
                  class:active={header.column.getIsSorted() !== false}
                  disabled={!header.column.getCanSort()}
                  onclick={header.column.getToggleSortingHandler()}
                >
                  <FlexRender {header} />
                  <span class="arrow" aria-hidden="true">
                    {#if header.column.getIsSorted() === 'asc'}
                      ▲
                    {:else if header.column.getIsSorted() === 'desc'}
                      ▼
                    {/if}
                  </span>
                </button>
              {/if}
            </th>
          {/each}
        </tr>
      {/each}
    </thead>
    <tbody>
      {#each table.getRowModel().rows as row (row.id)}
        <tr>
          {#each row.getAllCells() as cell (cell.id)}
            <td><FlexRender {cell} /></td>
          {/each}
        </tr>
      {/each}
    </tbody>
  </table>
</div>

<style>
  .table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    background: var(--surface);
  }

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    color: var(--text);
  }

  th,
  td {
    text-align: left;
    padding: 0.2rem 0.35rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
  }

  td {
    padding: 0.55rem 0.85rem;
  }

  th {
    background: var(--surface-muted);
  }

  .sort {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.35rem 0.5rem;
    background: none;
    border: none;
    border-radius: 5px;
    font: inherit;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.12s ease;
  }

  .sort:not(:disabled):hover {
    color: var(--text);
  }

  .sort.active {
    color: var(--accent);
  }

  .sort:disabled {
    cursor: default;
  }

  .arrow {
    font-size: 0.7em;
    min-width: 0.8em;
  }

  tbody tr:last-child td {
    border-bottom: none;
  }
</style>
```

### data.ts
```ts
export type Person = { firstName: string; lastName: string; age: number };

export const people: Person[] = [
  { firstName: 'tanner', lastName: 'linsley', age: 24 },
  { firstName: 'tandy', lastName: 'miller', age: 40 },
  { firstName: 'joe', lastName: 'dirte', age: 45 },
  { firstName: 'kevin', lastName: 'vandy', age: 33 },
  { firstName: 'nora', lastName: 'reed', age: 29 },
];
```

### routes.ts
```ts
import { Mochi } from 'mochi-framework';
import type { MochiRouteValue } from 'mochi-framework';

export const routes: Record<string, MochiRouteValue> = {
  '/demos/tanstack-table': Mochi.page('./src/demos/tanstack-table/TanStackTable.svelte'),
};
```

### index.ts
```ts
import { Mochi, logger } from 'mochi-framework';
import { routes } from './routes';

await Mochi.serve({
  port: 3333,
  development: process.env.MODE === 'development',
  routes,
});

logger.info('Server running at http://localhost:3333');
```