doc: update header cell example

docs/src/routes/docs/[...2]api/[...3]create-columns.md

@@ -75,35 +75,52 @@ Defines the id of the data column. **Duplicate ids are not allowed** on a single
 
 _Defaults to the value of `accessor` if a string accessor is passed_. Required if a function accessor is passed.
 
-#### `columnDef.header: RenderConfig | ((state) => RenderConfig)`
+#### `columnDef.header: RenderConfig | ((cell, state) => RenderConfig)`
 
 Defines the component to use for the header cell of the data column.
 
-`header` is either a [`RenderConfig`](./--render.md#renderconfig), or a function that takes [`TableState`](./table-state.md) and returns a [`RenderConfig`](./--render.md#renderconfig).
+`header` is either a [`RenderConfig`](./--render.md#renderconfig), or a function that receives [`HeaderCell`](./header-cell.md) and [`TableState`](./table-state.md), and returns a [`RenderConfig`](./--render.md#renderconfig).
 
 :::example
 
 <!-- prettier-ignore -->
-```ts copy {4-6,10,14-16}
-const columns = table.createColumns([
-  table.column({
-    header: (_, { rows }) =>
-      derived(rows, (r) =>
-        `First Name (${r.length} people)`),
-    accessor: 'firstName',
-  }),
-  table.column({
-    header: 'Last Name',
-    accessor: 'lastName',
-  }),
-  table.column({
-    header: createRender(Italic, {
-      text: 'Age',
+```svelte copy {16-22,26,30-32}
+<!-- SortHeaderCell.svelte -->
+<script lang="ts">
+  export let label: string;
+  export let order: string | undefined;
+  $: indicator = order === 'asc' ? '🔼' : order === 'desc' ? '🔽' : '';
+  export let toggle: (ev: Event) => void;
+</script>
+
+<div on:click={toggle}>{label} {indicator}</div>
+
+<!-- App.svelte -->
+<script lang="ts">
+  const columns = table.createColumns([
+    table.column({
+      header: (cell, { rows }) => createRender(
+        SortHeaderCell,
+        derived([cell.props(), rows], ([{sort}, _rows]) => ({
+          label: `First Name (${_rows.length} people)`,
+          ...sort,
+        }),
+      )),
+      accessor: 'firstName',
     }),
-    accessor: (item) => item.info.age,
-    id: 'age',
-  }),
-]);
+    table.column({
+      header: 'Last Name',
+      accessor: 'lastName',
+    }),
+    table.column({
+      header: createRender(Italic, {
+        text: 'Age',
+      }),
+      accessor: (item) => item.info.age,
+      id: 'age',
+    }),
+  ]);
+  </script>
 ```
 
 <script>

docs/src/routes/docs/[...2]api/_create-columns/HeaderExample.svelte

@@ -2,15 +2,28 @@
   import { readable, derived } from 'svelte/store';
   import { createTable, Render, createRender, Subscribe } from 'svelte-headless-table';
   import Italic from '../_Italic.svelte';
+  import { addSortBy } from 'svelte-headless-table/plugins';
+import SortHeaderCell from './SortHeaderCell.svelte';
+
   const data = readable([
     { firstName: 'Ada', lastName: 'Lovelace', info: { age: 21 } },
     { firstName: 'Barbara', lastName: 'Liskov', info: { age: 52 } },
     { firstName: 'Richard', lastName: 'Hamming', info: { age: 38 } },
   ]);
-  const table = createTable(data);
+
+  const table = createTable(data, {
+    sort: addSortBy(),
+  });
+
   const columns = table.createColumns([
     table.column({
-      header: (_, { rows }) => derived(rows, (r) => `First Name (${r.length} people)`),
+      header: (cell, { rows }) => createRender(
+        SortHeaderCell,
+        derived([cell.props(), rows], ([{sort}, _rows]) => ({
+          label: `First Name (${_rows.length} people)`,
+          ...sort,
+        }),
+      )),
       accessor: 'firstName',
     }),
     table.column({

docs/src/routes/docs/[...2]api/_create-columns/SortHeaderCell.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let label: string;
+  export let order: string | undefined;
+  $: indicator = order === 'asc' ? '🔼' : order === 'desc' ? '🔽' : '';
+  export let toggle: (ev: Event) => void;
+</script>
+
+<div on:click={toggle}>{label} {indicator}</div>