DataTable Column Sizing Persistence

1"use client"
2 
3/**
4 * niko-table — created by Semir N. (Semkoo, https://github.com/Semkoo) with AI assistance.
5 *
6 * Before reporting anything: please check the changelog first.
7 *  - In-repo: ./CHANGELOG.md
8 *  - Docs site: https://niko-table.com/changelog
9 *
10 * Found a bug or have a fix? Open an issue or PR on GitHub so other
11 * users (and future LLMs reading this code) benefit:
12 * https://github.com/Semkoo/niko-table-registry
13 */
14 
15/**
16 * Opt-in `localStorage` persistence for column widths.
17 *
18 * Column resizing is controlled state (`columnSizing`) on `<DataTableRoot>`, so
19 * to make resized widths survive reloads you own that state. This hook does it
20 * for you: wire the returned `columnSizing` + `onColumnSizingChange` into the
21 * table and you're done.
22 *
23 * @example
24 * const { columnSizing, onColumnSizingChange } =
25 *   useColumnSizingPersistence(`orders-table:${orgId}`)
26 *
27 * <DataTableRoot
28 *   data={rows}
29 *   columns={columns}
30 *   state={{ columnSizing }}
31 *   onColumnSizingChange={onColumnSizingChange}
32 * >
33 *   <DataTable>
34 *     <DataTableHeader />
35 *     <DataTableBody />
36 *   </DataTable>
37 *   <DataTableColumnResize />
38 * </DataTableRoot>
39 *
40 * Notes:
41 * - Writes immediately. Resizing runs in `onEnd` mode, so this fires once per
42 *   drag (not per frame), and an immediate write can't be lost on a hard
43 *   refresh the way a debounced one can.
44 * - Syncs across tabs. Widths are a per-user preference, so resizing (or
45 *   resetting) the same table in one tab updates the others via the native
46 *   `storage` event. Only same-key changes are read, and an unchanged read
47 *   keeps state identity, so idle tabs don't re-render.
48 * - SSR note: `localStorage` is only read on the client, so nothing crashes on
49 *   the server — but in an SSR framework the client's first (hydration) render
50 *   already has the stored widths while the server HTML was rendered with
51 *   `{}`, so React may log a hydration-mismatch warning for the width styles
52 *   and reconcile. Cosmetic, but if the warning matters to you, load the
53 *   widths in an effect instead (accepting a default-width first paint).
54 * - Corrupt / hand-edited storage is ignored (non-object, or non-finite
55 *   widths) so a bad value never reaches `column.getSize()`.
56 * - Scope the `storageKey` per table (and per tenant/user if widths shouldn't
57 *   be shared), e.g. `"orders-table:${orgId}"`.
58 */
59import type { ColumnSizingState, OnChangeFn } from "@tanstack/react-table"
60import * as React from "react"
61// … truncated