@devslab/dds-table 0.11.0

package/LICENSE

@@ -0,0 +1,74 @@
+DevsLab Source-Available License 1.0
+
+Copyright (c) 2026 DevsLab. All rights reserved.
+
+This license governs the DDS software, design tokens, components, icons,
+documentation, and other materials distributed with this license (the
+"Software").
+
+1. Permitted use
+
+Subject to this license, DevsLab grants you a limited, worldwide,
+non-exclusive, non-transferable, revocable, royalty-free right to:
+
+- download and install unmodified copies of the Software;
+- use and execute the Software for internal or commercial applications;
+- compile, minify, tree-shake, and bundle unmodified Software solely as a
+  technical part of building an application; and
+- distribute the resulting object code only as an inseparable part of that
+  application and not as a standalone library, design system, component kit,
+  template, or asset collection.
+
+Normal application configuration through documented public APIs, design-token
+overrides, CSS custom properties, and component properties is permitted and is
+not considered modification of the Software.
+
+2. Restrictions
+
+Except where applicable law does not allow the restriction, you may not:
+
+- modify, adapt, translate, reverse engineer, or create derivative works of the
+  Software itself;
+- publish, republish, sublicense, sell, rent, host, or redistribute the
+  Software or any modified version as a standalone package or downloadable
+  collection;
+- use the Software or a substantial portion of it to create or operate a
+  competing general-purpose design system, UI kit, component library, icon
+  library, token library, template marketplace, or hosted equivalent;
+- remove or alter copyright, license, attribution, or provenance notices; or
+- use DevsLab names, logos, product marks, or trade dress except to make a
+  truthful statement that an application uses the Software.
+
+No patent, trademark, design, or branding rights are granted except the
+copyright permissions stated in Section 1.
+
+3. Ownership and feedback
+
+The Software is licensed, not sold. DevsLab and its licensors retain all
+right, title, and interest in the Software. You grant DevsLab a perpetual,
+worldwide, irrevocable, royalty-free right to use feedback you voluntarily
+provide about the Software.
+
+4. Termination
+
+This license terminates automatically if you breach it. Upon termination, you
+must stop using and distributing the Software and delete all copies under your
+control. Sections 2, 3, 5, and 6 survive termination.
+
+5. Disclaimer and limitation of liability
+
+THE SOFTWARE IS PROVIDED "AS IS" WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE, TITLE, AND NON-INFRINGEMENT. TO THE MAXIMUM EXTENT PERMITTED BY LAW,
+DEVSLAB WILL NOT BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL,
+CONSEQUENTIAL, EXEMPLARY, OR PUNITIVE DAMAGES, OR FOR LOSS OF DATA, PROFITS,
+REVENUE, OR BUSINESS, ARISING FROM OR RELATED TO THE SOFTWARE.
+
+6. Governing law
+
+This license is governed by the laws of the Republic of Korea, excluding
+conflict-of-law rules. The Seoul Central District Court has exclusive
+jurisdiction over disputes arising from this license.
+
+This is a source-available license, not an open-source license approved by the
+Open Source Initiative.

package/README.ko.md

@@ -0,0 +1,155 @@
+# @devslab/dds-table
+
+TanStack Table 기반 DDS 데이터 테이블 패키지(정확히 `9.2.4` 버전에 고정 —
+고정 이유는 `docs/decisions.md` D-021 참고). `DataTable` 컴포넌트 하나와
+이를 기술하는 `Column<T>`·`DataTableLabels` 타입만 제공한다. 테이블 자체는
+어떤 단어도, 어떤 경로도, "다음 페이지"가 무엇을 뜻하는지도 정하지 않는다
+— 방문자가 읽는 모든 문자열은 prop이다.
+
+```sh
+pnpm add @devslab/dds-table
+```
+
+이 패키지는 자체 스타일시트를 내지 않는다 — 애플리케이션 셸에서
+`@devslab/dds-css`의 테이블 스타일을, 그것이 의존하는 토큰 CSS와 함께 한 번
+불러온다:
+
+```ts
+import "@devslab/dds-tokens/tokens.css";
+import "@devslab/dds-css/components/table.css";
+```
+
+불러오지 않으면 `<DataTable>`은 스타일 없이 렌더링된다 — `fold`는 아무
+효과가 없고(컬럼 접기는 전적으로 `table.css`의 미디어 쿼리다), 시각적으로
+숨겨져야 할 caption과 액션 컬럼 헤더가 눈에 보이게 렌더링된다.
+
+```tsx
+import { DataTable, type Column, type DataTableLabels } from "@devslab/dds-table";
+
+type Job = { id: string; name: string; count: number };
+
+const columns: Column<Job>[] = [
+  { id: "name", label: "Name", cell: (row) => row.name, sortBy: (row) => row.name, rowHeader: true },
+  { id: "count", label: "Count", cell: (row) => String(row.count), sortBy: (row) => row.count, numeric: true, fold: true },
+];
+
+const labels: DataTableLabels = {
+  sortBy: "Sort by {column}",
+  actions: "Actions",
+  nextPage: "Next page",
+};
+
+<DataTable rows={jobs} columns={columns} caption="Jobs" labels={labels} sort="client" />;
+```
+
+## `DataTable` props
+
+| Prop | 타입 | 필수/기본값 | 의미 |
+| --- | --- | --- | --- |
+| `rows` | `readonly T[]` | 필수 | 데이터(어떤 순서로 렌더링할지는 아래 정렬 절에서 누가 책임지는지 설명). |
+| `columns` | `readonly Column<T>[]` | 필수 | 컬럼 선언 — 아래 `Column<T>` 참고. |
+| `caption` | `string` | 필수 | 테이블의 접근성 이름, 시각적으로 숨겨져 렌더링(`<caption class="dds-visually-hidden">`). |
+| `labels` | `DataTableLabels` | 필수 | 컴포넌트가 렌더링할 수 있는 모든 문구 — 아래 "라벨은 필수다" 참고. |
+| `sort` | `"client" \| { statedOrder: string }` | 선택, 생략 시 정렬 버튼도 순서 문구도 없음 | 아래 정렬 절 참고. |
+| `density` | `"comfortable" \| "dense"` | 선택, 기본값 `"comfortable"`(40px 행) | `"dense"`는 `.dds-table--dense`를 붙인다(36px 행, 셀 패딩 축소). |
+| `scroll` | `"auto" \| "tall"` | 선택, 기본값 `"auto"` | `"tall"`은 `.dds-table-wrap--tall`을 붙인다 — `max-block-size: 70vh`로 스크롤되는 본문 + 고정(sticky) 헤더, 페이지를 밀어내면 안 되는 긴 인페이지 목록용. |
+| `minWidth` | `string`(CSS 길이) | 선택 | `<table>`의 `min-inline-size`를 정한다 — 좁은 화면에서 컬럼이 짓눌리는 대신 `.dds-table-wrap` 안에서 가로 스크롤된다. |
+| `actions` | `(row: T) => JSX.Element` | 선택 | 행마다 트레일링 셀을 렌더링(예: 행 단위 버튼); `labels.actions`로부터 시각적으로 숨겨진 헤더 셀을 추가한다. |
+| `detail` | `(row: T) => JSX.Element` | 선택 | 주어진 행 아래에 펼침 행을 렌더링한다. `null`을 반환하면(예: 펼쳐지지 않은 행) 그 행에는 빈 행이 아니라 아예 detail `<tr>`이 생기지 않는다. |
+| `page` | `{ nextHref?: string }` | 선택 | 아래 페이징 절 참고. |
+| `empty` | `JSX.Element` | 선택 | `rows`가 비어 있을 때 `<table>` 대신 렌더링된다. 순서 문구와(있다면) 페이징 링크는 그대로 렌더링된다 — 커서 페이징 목록의 빈 페이지도 순서가 있고 여전히 다음으로 갈 방법이 필요하기 때문이다. |
+
+## `Column<T>`
+
+| 필드 | 타입 | 의미 |
+| --- | --- | --- |
+| `id` | `string` | 컬럼 고유 식별자 — 정렬 키와 `data-fold`/`data-column` 속성에 쓰인다. |
+| `label` | `string` | 헤더 텍스트(정렬 버튼의 화면 표시 라벨이기도 하다). |
+| `cell` | `(row: T) => JSX.Element` | 셀 본문을 렌더링한다. 시각적 마크업은 소비자 몫이고, TanStack이 보는 컬럼 정의에는 정렬 접근자 외 아무것도 담기지 않는다. |
+| `sortBy?` | `(row: T) => string \| number \| null` | 있으면 → (오직 `sort="client"` 모드에서만) 정렬 가능해지고 정렬 버튼이 붙는다. 없으면 → 평범한 헤더, 버튼이 절대 안 붙는다. "값 없음"은 `null`을 반환하면 되고, 그 행들은 맨 뒤로 정렬된다(`sortUndefined: "last"`) — 맨 앞이 아니다. |
+| `width?` | `string` | CSS 너비. 아무 컬럼이든 이 값을 주는 순간 테이블 전체가 `table-layout: fixed`로 바뀌고 `<colgroup>`이 생성된다. |
+| `fold?` | `boolean` | 좁은 화면에서 뺄 수 있는 컬럼으로 표시한다(아래 "컬럼 접기" 참고). |
+| `numeric?` | `boolean` | 오른쪽 정렬 + 고정폭 숫자체를 적용한다. |
+| `rowHeader?` | `boolean` | 이 컬럼의 셀을 `<td>` 대신 `<th scope="row">`로 렌더링한다 — 테이블당 정확히 한 컬럼만 이 값을 켜야 한다. |
+
+## 정렬: `sort`
+
+`sort`는 두 모양 중 하나를 받는다 — 이 타입은 내보내지지 않는다(값을 그대로
+써넣으면 된다, import할 것이 없다):
+
+```ts
+"client" | { statedOrder: string }
+```
+
+- **`sort="client"`** — 테이블이 전체 목록을 메모리에 들고 있는 경우. `sortBy`가
+  있는 컬럼에 정렬 버튼이 렌더링되고, 누르면 TanStack Table이 이미 손에 쥔 행을
+  재정렬한다. 이게 안전한 이유는 정확히 "전체 행"과 "화면에 보이는 행"이 같은
+  집합이기 때문이다.
+- **`sort={{ statedOrder: "…" }}`** — 서버가 정렬해 커서로 페이징한 한 페이지를
+  보여주는 테이블일 때. 이 모드에서는 `sortBy`가 있어도 어떤 컬럼도 정렬 버튼을
+  렌더링하지 않는다 — 클라이언트 정렬은 현재 페이지에 있는 행만 재배열할 수
+  있는데, 테이블의 진짜 순서는 브라우저가 아직 본 적 없는 여러 페이지에 걸쳐
+  백엔드 쿼리가 만든 순서이기 때문이다. 그런 버튼은 데이터를 정렬한 것처럼
+  보이지만 실제로는 잘못 보고하는 것이다. 대신 테이블은 자기 위에 실제 순서를
+  텍스트로 찍는다(`.dds-table__order`) — `statedOrder`가 그 문장이다(예:
+  "최신순"). 백엔드의 정렬 어휘를 DDS는 모르므로 이 문장은 소비자가 넘긴다.
+
+서버 정렬 테이블이 "이 컬럼만" 클라이언트 정렬을 허용하도록 하는 세 번째
+모드는 없다 — 컬럼이 몇 개든 실패 양상(페이지 하나의 순서를 전체 목록의
+순서인 양 조용히 보고하는 것)은 동일하기 때문이다.
+
+## 페이징: `page`
+
+```ts
+page?: { nextHref?: string }
+```
+
+`nextHref`는 다음 페이지 컨트롤을 `<a class="dds-btn dds-btn--secondary" href="…">`
+(라벨이 붙은 `<nav>` 안)로 렌더링한다 — `<button onClick>`이 아니다. 커서
+페이징 목록은 결국 쿼리 문자열만 다른 URL이고, 진짜 링크여야 JavaScript가
+꺼져 있을 때·하이드레이션 전 느린 연결 상태에서·브라우저의 "새 탭에서 열기"에서
+그대로 동작한다. `nextHref`(또는 `page` prop 전체)를 생략하면 페이징 `<nav>`는
+비활성 컨트롤을 그리지 않고 아예 사라진다.
+
+## 컬럼 접기: `fold`
+
+`fold: true`로 표시한 컬럼은 고정된 분기점(`dds-css`의 `table.css`에 있는
+`@media (max-width: 56.25rem)`) 아래에서 `[data-fold]`에 걸린 순수 CSS
+규칙으로 사라진다 — JavaScript로 만든 컬럼 표시 상태도, resize observer도,
+뷰포트별 재렌더도 없다. 컬럼은 DOM에 항상 존재하고 그릴지 말지는 브라우저가
+정한다. 그 덕에 접기는 SSR에서도 그대로 작동하고(스크립트가 돌기 전에도
+서버가 렌더한 좁은 화면은 이미 올바르게 그 컬럼을 숨긴 상태다), 정렬·페이징
+상태와 맞춰야 할 상태 자체가 없으므로 동기화 비용이 없다.
+
+## 라벨은 필수다, 기본값이 없다
+
+`DataTableLabels`에는 선택 필드가 하나도 없고 `DataTable`은 대체 문자열을
+전혀 갖고 있지 않다:
+
+```ts
+type DataTableLabels = {
+  sortBy: string;   // "{column}"이 컬럼 라벨로 치환된다
+  actions: string;  // 트레일링 액션 컬럼의 헤더(시각적으로 숨김)
+  nextPage: string; // 다음 페이지 링크의 접근성 이름이자 표시 텍스트
+};
+```
+
+DDS는 소비자의 사용자가 어떤 언어를 읽는지 정하지 않으므로, 화면 낭독기가
+읽을 영어(또는 다른 어떤 언어의) 문구도 대신 실어 보내지 않는다. 라벨을
+빠뜨린 소비자는 조용히 영어가 나가거나 빈칸이 나가는 대신 TypeScript
+에러를 받는다.
+
+## 이 패키지가 내보내지 않는 것
+
+`DataTable`이 유일한 컴포넌트다. TanStack Table 자체 문서가 테이블을
+조립하는 재료로 쓰는 행/셀 프리미티브(`Th`, `Td`, `useDataTable` 훅)는
+의도적으로 미노출이다 — 오늘 소비자는 정확히 하나이고, 유지해야 할 API
+표면을 두 벌 두는 비용은 필요해지기 전에 미리 치를 이유가 없다. `DataTable`의
+props로 표현할 수 없는 테이블 모양이 필요한 두 번째 소비자가 나타나면 그때
+프리미티브를 내보낸다.
+
+클라이언트 페이징·필터링(TanStack Table의 `getPaginationRowModel` 등)도
+마찬가지로 배선하지 않았다: 이 컴포넌트를 부르는 곳은 언제나 메모리에 다
+올라가는 작은 목록(`sort="client"`)이거나 이미 페이지가 나뉜 서버 응답
+(`page.nextHref`)이라, 그 기능은 발화할 일이 없이 모든 소비자의 번들에
+얹히기만 할 것이다.

package/README.md

@@ -0,0 +1,153 @@
+# @devslab/dds-table
+
+Declarative data table for DDS, built on TanStack Table (pinned to the exact
+version `9.2.4` — see `docs/decisions.md` D-021 for why an exact pin). One
+component, `DataTable`, plus the `Column<T>` and `DataTableLabels` types used
+to describe it. The table itself decides nothing about words, routes, or
+what "next page" means — every string a visitor can read is a prop.
+
+```sh
+pnpm add @devslab/dds-table
+```
+
+This package ships no stylesheet of its own — import `@devslab/dds-css`'s
+table styles once in the application shell, alongside the tokens CSS it
+depends on:
+
+```ts
+import "@devslab/dds-tokens/tokens.css";
+import "@devslab/dds-css/components/table.css";
+```
+
+Without it, `<DataTable>` renders an unstyled table: `fold` does nothing
+(folding is entirely the CSS media query in `table.css`), and the
+visually-hidden caption and actions-column header render visible.
+
+```tsx
+import { DataTable, type Column, type DataTableLabels } from "@devslab/dds-table";
+
+type Job = { id: string; name: string; count: number };
+
+const columns: Column<Job>[] = [
+  { id: "name", label: "Name", cell: (row) => row.name, sortBy: (row) => row.name, rowHeader: true },
+  { id: "count", label: "Count", cell: (row) => String(row.count), sortBy: (row) => row.count, numeric: true, fold: true },
+];
+
+const labels: DataTableLabels = {
+  sortBy: "Sort by {column}",
+  actions: "Actions",
+  nextPage: "Next page",
+};
+
+<DataTable rows={jobs} columns={columns} caption="Jobs" labels={labels} sort="client" />;
+```
+
+## `DataTable` props
+
+| Prop | Type | Required / default | Meaning |
+| --- | --- | --- | --- |
+| `rows` | `readonly T[]` | required | The data, in the order to render (see Sorting for who is responsible for that order). |
+| `columns` | `readonly Column<T>[]` | required | Column declarations — see `Column<T>` below. |
+| `caption` | `string` | required | The table's accessible name, rendered visually hidden (`<caption class="dds-visually-hidden">`). |
+| `labels` | `DataTableLabels` | required | Every word the component can render — see "Labels are required" below. |
+| `sort` | `"client" \| { statedOrder: string }` | optional, no sort buttons or order text when omitted | See Sorting below. |
+| `density` | `"comfortable" \| "dense"` | optional, default `"comfortable"` (40px rows) | `"dense"` adds `.dds-table--dense` (36px rows, tighter cell padding). |
+| `scroll` | `"auto" \| "tall"` | optional, default `"auto"` | `"tall"` adds `.dds-table-wrap--tall`: a `max-block-size: 70vh` scrolling body with a sticky header, for a long in-page list that shouldn't push the rest of the page down. |
+| `minWidth` | `string` (a CSS length) | optional | Sets the `<table>`'s `min-inline-size`, so narrow viewports scroll the table horizontally (inside `.dds-table-wrap`) instead of crushing its columns. |
+| `actions` | `(row: T) => JSX.Element` | optional | Renders a trailing cell per row (e.g. row-level buttons); adds a visually-hidden header cell from `labels.actions`. |
+| `detail` | `(row: T) => JSX.Element` | optional | Renders an expandable row under a given row. Returning `null` (e.g. for a row that is not expanded) renders no detail `<tr>` for that row at all — not an empty one. |
+| `page` | `{ nextHref?: string }` | optional | See Paging below. |
+| `empty` | `JSX.Element` | optional | Rendered instead of the `<table>` when `rows` is empty. The stated-order text and the pagination link (if any) still render — an empty page of a cursor-paginated list still has an order and still needs a way forward. |
+
+## `Column<T>`
+
+| Field | Type | Meaning |
+| --- | --- | --- |
+| `id` | `string` | Stable column identity — used for the sort key and the `data-fold`/`data-column` attributes. |
+| `label` | `string` | Header text (and the sort button's visible label). |
+| `cell` | `(row: T) => JSX.Element` | Renders the cell body. Visual markup stays yours; the column def TanStack sees carries nothing but the sort accessor. |
+| `sortBy?` | `(row: T) => string \| number \| null` | Present → the column is sortable (in `sort="client"` mode only) and gets a sort button. Absent → a plain header, never a button. Return `null` for "no value"; those rows sort last (`sortUndefined: "last"`), never first. |
+| `width?` | `string` | A CSS width. Setting it on any column switches the whole table to `table-layout: fixed` and emits a `<colgroup>`. |
+| `fold?` | `boolean` | Marks the column droppable on narrow viewports (see Folding below). |
+| `numeric?` | `boolean` | Right-aligns the column and applies tabular figures. |
+| `rowHeader?` | `boolean` | Renders this column's cell as `<th scope="row">` instead of `<td>` — exactly one column per table should set it. |
+
+## Sorting: `sort`
+
+`sort` accepts one of two shapes — this type is not exported (write the
+values inline; there is nothing to import):
+
+```ts
+"client" | { statedOrder: string }
+```
+
+- **`sort="client"`** — the table holds its whole list in memory. Columns
+  with `sortBy` render a sort button; clicking one asks TanStack Table to
+  reorder the rows already in hand. This is safe precisely because "all the
+  rows" and "the rows shown" are the same set.
+- **`sort={{ statedOrder: "…" }}`** — for a table that shows a server-ordered,
+  cursor-paged slice. No column renders a sort button in this mode, even if
+  its `sortBy` is set: a client-side sort could only reorder the rows on the
+  current page, while the table's real order is whatever the backend query
+  produced across pages the browser has never seen. A button that did that
+  would look like it sorted the data and would actually misreport it. Instead
+  the table prints the actual order as text above itself (`.dds-table__order`)
+  — `statedOrder` is that sentence, e.g. `"Newest first"`, supplied by the
+  consumer because DDS does not know the backend's ordering vocabulary.
+
+There is no third mode that lets a server-ordered table opt into client
+sorting for "just this column" — the failure mode (silently reporting a
+per-page order as the whole list's order) is the same regardless of how many
+columns are involved.
+
+## Paging: `page`
+
+```ts
+page?: { nextHref?: string }
+```
+
+`nextHref` renders the next-page control as `<a class="dds-btn dds-btn--secondary" href="…">`, wrapped in a labeled `<nav>` — never a `<button onClick>`. A cursor-paginated list is just a URL with a different query string, and a real link keeps that working with JavaScript disabled, on a slow connection before hydration, and in a browser's native "open in new tab". Omitting `nextHref` (or the whole `page` prop) hides the pagination `<nav>` entirely rather than rendering a disabled control.
+
+## Folding: `fold`
+
+Columns marked `fold: true` disappear below a fixed breakpoint
+(`@media (max-width: 56.25rem)` in `dds-css`'s `table.css`) via a plain CSS
+rule on `[data-fold]` — there is no JavaScript column-visibility state, no
+resize observer, and no per-viewport re-render. The column is always present
+in the DOM; the browser decides whether to paint it. This means folding
+survives SSR (a server-rendered narrow viewport already hides the column,
+correctly, before any script runs) and costs nothing to keep in sync with
+sorting or paging state, because there is no state to keep in sync.
+
+## Labels are required, not defaulted
+
+`DataTableLabels` has no optional fields and `DataTable` ships no fallback
+strings:
+
+```ts
+type DataTableLabels = {
+  sortBy: string;   // "{column}" is replaced with the column's label
+  actions: string;  // header of the trailing actions column (visually hidden)
+  nextPage: string; // accessible name and text of the next-page link
+};
+```
+
+DDS does not choose the language a consumer's users read in, so it does not
+ship English (or any other) copy for a screen reader to announce. A consumer
+that forgets a label gets a TypeScript error, not a silently English or
+silently blank control.
+
+## What this package does not export
+
+`DataTable` is the only component. The row/cell primitives TanStack Table's
+own docs build tables from (a `Th`, a `Td`, a `useDataTable` hook) are
+deliberately unexported — there is exactly one consumer today, and a second
+API surface to keep stable is a cost paid before anything needs it. When a
+second consumer needs a table shape `DataTable`'s props cannot express,
+export the primitives then.
+
+Client-side pagination and filtering (TanStack Table's `getPaginationRowModel`
+et al.) are similarly not wired in: this component's callers are always
+either a small in-memory list (`sort="client"`) or an already-paged server
+response (`page.nextHref`), so neither feature would ever fire — it would only
+sit in every consumer's bundle.

package/dist/columns.d.ts

@@ -0,0 +1,89 @@
+import type { JSX } from "solid-js";
+import { createSortedRowModel, sortFn_alphanumeric, sortFn_text, type ColumnDef } from "@tanstack/solid-table";
+export type Column<T> = {
+    id: string;
+    label: string;
+    cell: (row: T) => JSX.Element;
+    sortBy?: (row: T) => string | number | null;
+    width?: string;
+    fold?: boolean;
+    numeric?: boolean;
+    rowHeader?: boolean;
+};
+export type DataTableLabels = {
+    /** Accessible name for a sort button; `{column}` is replaced with the column label. */
+    sortBy: string;
+    /** Header of the trailing actions column, rendered visually hidden. */
+    actions: string;
+    /** Label of the next-page link. */
+    nextPage: string;
+};
+/**
+ * The feature set every `DataTable` instance is built from: the core row
+ * model plus client-side sorting. Built once (per `tableFeatures`'
+ * recommendation to use it statically outside a component) so `toColumnDefs`
+ * and `createTable` agree on the same `TFeatures` type.
+ */
+declare const baseFeatures: {
+    coreTablesFeature: import("@tanstack/solid-table").TableFeature;
+    coreRowsFeature: import("@tanstack/solid-table").TableFeature;
+    coreColumnsFeature: import("@tanstack/solid-table").TableFeature;
+    coreHeadersFeature: import("@tanstack/solid-table").TableFeature;
+    coreCellsFeature: import("@tanstack/solid-table").TableFeature;
+    coreRowModelsFeature: import("@tanstack/solid-table").TableFeature;
+    rowSortingFeature: import("@tanstack/solid-table").TableFeature;
+};
+/** The `TFeatures` type used everywhere a table/column type needs one. Kept
+ *  separate from the `sortedRowModel` factory below: `createSortedRowModel`'s
+ *  return type embeds `Table<TFeatures, TData>`, so folding it into the very
+ *  type it closes over makes `TFeatures` self-referential — TypeScript's
+ *  structural comparison of that recursive shape (observed while wiring this
+ *  up) reports unrelated `ColumnDef`/`Column`/`HeaderContext` instantiations
+ *  a few frames down a completely unrelated diff, because it can't resolve
+ *  the cycle. Naming the narrower, non-recursive type here and using it as
+ *  the explicit `TFeatures` argument everywhere avoids that. */
+export type TableFeatureSet = typeof baseFeatures;
+/**
+ * Registering `rowSortingFeature` alone is not enough for sorting to reach
+ * the screen — `sortedRowModel` is the factory `table.getRowModel()` actually
+ * calls to produce sorted rows; without it, `state.sorting` changes but the
+ * rendered row order never does. Added here, after `TableFeatureSet` is
+ * already named, so its function type closes over the narrow type instead of
+ * over itself.
+ *
+ * `sortFns` registers the names `sortFn: "auto"` (the default every column
+ * gets — see `toColumnDefs`) can actually resolve to for a `Column<T>` whose
+ * `sortBy` returns `string | number | null`: plain strings resolve to
+ * `"text"`, strings containing digit runs (`"Row 10"`, `"SKU100"`) resolve to
+ * `"alphanumeric"`, and numbers/`null` never set a name at all and fall
+ * straight to the always-available `sortFn_basic` — so `"datetime"` is never
+ * reachable and is deliberately not registered. Leaving either reachable name
+ * unregistered means `"auto"` silently falls back to `sortFn_basic`, which
+ * compares raw values instead of lowercasing first: a case-sensitive sort
+ * that also warns on every column in development
+ * (`rowSortingFeature.utils.js`'s `column_getAutoSortFn`). Importing the two
+ * named functions (rather than the `sortFns` barrel export, whose own
+ * docstring says registering it "opts out of tree-shaking") keeps every
+ * other built-in sorting function — including the case-sensitive and
+ * datetime variants this component never produces — out of the bundle.
+ */
+export declare const tableFeatureSet: TableFeatureSet & {
+    sortedRowModel: ReturnType<typeof createSortedRowModel<TableFeatureSet, Record<string, unknown>>>;
+    sortFns: {
+        text: typeof sortFn_text;
+        alphanumeric: typeof sortFn_alphanumeric;
+    };
+};
+/** Turns our declarations into TanStack column defs. Sorting is enabled per
+ *  column by the presence of `sortBy`; everything visual stays in our own
+ *  markup, so the def carries only what the model needs.
+ *
+ *  `Column<T>` deliberately leaves `T` unconstrained (any row shape a
+ *  consumer wants to render), but TanStack's `RowData` requires
+ *  `Record<string, any> | Array<any>`. Every real row is one of those at
+ *  runtime, so the helper is instantiated at `Record<string, unknown>` and
+ *  the accessor casts its parameter back to `T` — a boundary cast, not a
+ *  behavior change. */
+export declare function toColumnDefs<T>(columns: readonly Column<T>[]): ColumnDef<TableFeatureSet, Record<string, unknown>, unknown>[];
+export {};
+//# sourceMappingURL=columns.d.ts.map

package/dist/columns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"columns.d.ts","sourceRoot":"","sources":["../src/columns.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,EAQL,oBAAoB,EAEpB,mBAAmB,EACnB,WAAW,EAEX,KAAK,SAAS,EACf,MAAM,uBAAuB,CAAC;AAE/B,MAAM,MAAM,MAAM,CAAC,CAAC,IAAI;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC;IAC9B,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,uFAAuF;IACvF,MAAM,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,OAAO,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,YAAY;;;;;;;;CAQhB,CAAC;AAEH;;;;;;;;gEAQgE;AAChE,MAAM,MAAM,eAAe,GAAG,OAAO,YAAY,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,eAAe,EAAE,eAAe,GAAG;IAC9C,cAAc,EAAE,UAAU,CAAC,OAAO,oBAAoB,CAAC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAClG,OAAO,EAAE;QAAE,IAAI,EAAE,OAAO,WAAW,CAAC;QAAC,YAAY,EAAE,OAAO,mBAAmB,CAAA;KAAE,CAAC;CAKjF,CAAC;AAEF;;;;;;;;;uBASuB;AACvB,wBAAgB,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,SAAS,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,EAAE,CAsB7H"}

package/dist/data-table.d.ts

@@ -0,0 +1,22 @@
+import { type JSX } from "solid-js";
+import { type Column, type DataTableLabels } from "./columns";
+export type SortMode = "client" | {
+    statedOrder: string;
+};
+export declare function DataTable<T>(props: {
+    rows: readonly T[];
+    columns: readonly Column<T>[];
+    caption: string;
+    labels: DataTableLabels;
+    sort?: SortMode;
+    density?: "comfortable" | "dense";
+    scroll?: "auto" | "tall";
+    minWidth?: string;
+    actions?: (row: T) => JSX.Element;
+    detail?: (row: T) => JSX.Element;
+    page?: {
+        nextHref?: string | undefined;
+    };
+    empty?: JSX.Element;
+}): JSX.Element;
+//# sourceMappingURL=data-table.d.ts.map

package/dist/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../src/data-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAE3D,OAAO,EAAiC,KAAK,MAAM,EAAE,KAAK,eAAe,EAAwB,MAAM,WAAW,CAAC;AAEnH,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC;AAW1D,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE;IAClC,IAAI,EAAE,SAAS,CAAC,EAAE,CAAC;IACnB,OAAO,EAAE,SAAS,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC;IACjC,IAAI,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;IACzC,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACrB,GAAG,GAAG,CAAC,OAAO,CA4Gd"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { DataTable } from "./data-table";
+export type { Column, DataTableLabels } from "./columns";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,YAAY,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC"}

package/dist/index.js

@@ -0,0 +1,226 @@
+import { className as e, createComponent as t, delegateEvents as n, effect as r, getNextElement as i, getNextMarker as a, insert as o, memo as s, runHydrationEvents as c, setAttribute as l, setProperty as u, style as d, template as f } from "solid-js/web";
+import { For as p, Show as m, createMemo as h } from "solid-js";
+import { coreCellsFeature as g, coreColumnsFeature as _, coreHeadersFeature as v, coreRowModelsFeature as y, coreRowsFeature as b, coreTablesFeature as x, createColumnHelper as S, createSortedRowModel as C, createTable as w, rowSortingFeature as T, sortFn_alphanumeric as E, sortFn_text as D, tableFeatures as O } from "@tanstack/solid-table";
+var k = {
+	...O({
+		coreTablesFeature: x,
+		coreRowsFeature: b,
+		coreColumnsFeature: _,
+		coreHeadersFeature: v,
+		coreCellsFeature: g,
+		coreRowModelsFeature: y,
+		rowSortingFeature: T
+	}),
+	sortedRowModel: C(),
+	sortFns: {
+		text: D,
+		alphanumeric: E
+	}
+};
+function A(e) {
+	let t = S();
+	return e.map((e) => t.accessor((t) => e.sortBy ? e.sortBy(t) ?? void 0 : void 0, {
+		id: e.id,
+		enableSorting: !!e.sortBy,
+		sortUndefined: "last"
+	}));
+}
+//#endregion
+//#region src/data-table.tsx
+var j = /*#__PURE__*/ f("<col>"), M = /*#__PURE__*/ f("<colgroup><!$><!/><!$><!/>"), N = /*#__PURE__*/ f("<th scope=col><span class=dds-visually-hidden>"), P = /*#__PURE__*/ f("<div><table><caption class=dds-visually-hidden></caption><!$><!/><thead><tr><!$><!/><!$><!/></tr></thead><tbody>"), F = /*#__PURE__*/ f("<nav class=dds-table__pagination>"), I = /*#__PURE__*/ f("<p class=dds-table__order>"), L = /*#__PURE__*/ f("<button type=button class=dds-table__sort data-action=sort><!$><!/><span class=dds-table__sort-mark aria-hidden=true>"), R = /*#__PURE__*/ f("<th scope=col>"), z = /*#__PURE__*/ f("<tr><!$><!/><!$><!/>"), B = /*#__PURE__*/ f("<th scope=row>"), V = /*#__PURE__*/ f("<td>"), H = /*#__PURE__*/ f("<td><div class=dds-table__actions>"), U = /*#__PURE__*/ f("<tr><td>"), W = /*#__PURE__*/ f("<a class=\"dds-btn dds-btn--secondary\">");
+function G(e, t) {
+	return e.replace("{column}", () => t);
+}
+function K(n) {
+	let f = () => n.sort === "client", g = () => typeof n.sort == "object" ? n.sort.statedOrder : void 0, _ = () => n.columns.some((e) => e.width !== void 0), v = h(() => A(n.columns)), y = w({
+		features: k,
+		get data() {
+			return n.rows;
+		},
+		get columns() {
+			return v();
+		},
+		enableSorting: !0
+	}), b = h(() => f() ? y.getRowModel().rows.map((e) => e.original) : [...n.rows]), x = (e) => {
+		let t = y.store.state.sorting?.[0];
+		return !t || t.id !== e ? "none" : t.desc ? "descending" : "ascending";
+	};
+	return [
+		t(m, {
+			get when() {
+				return g();
+			},
+			children: (e) => (() => {
+				var t = i(I);
+				return o(t, e), t;
+			})()
+		}),
+		t(m, {
+			get when() {
+				return n.rows.length > 0;
+			},
+			get fallback() {
+				return n.empty;
+			},
+			get children() {
+				var u = i(P), h = u.firstChild, g = h.firstChild, v = g.nextSibling, [S, C] = a(v.nextSibling), w = S.nextSibling, T = w.firstChild, E = T.firstChild, [D, O] = a(E.nextSibling), k = D.nextSibling, [A, F] = a(k.nextSibling), I = w.nextSibling;
+				return o(g, () => n.caption), o(h, t(m, {
+					get when() {
+						return _();
+					},
+					get children() {
+						var e = i(M), s = e.firstChild, [c, u] = a(s.nextSibling), f = c.nextSibling, [h, g] = a(f.nextSibling);
+						return o(e, t(p, {
+							get each() {
+								return n.columns;
+							},
+							children: (e) => (() => {
+								var t = i(j);
+								return r((n) => {
+									var r = e.fold ? "" : void 0, i = e.width ? { width: e.width } : void 0;
+									return r !== n.e && l(t, "data-fold", n.e = r), n.t = d(t, i, n.t), n;
+								}, {
+									e: void 0,
+									t: void 0
+								}), t;
+							})()
+						}), c, u), o(e, t(m, {
+							get when() {
+								return n.actions;
+							},
+							get children() {
+								return i(j);
+							}
+						}), h, g), e;
+					}
+				}), S, C), o(T, t(p, {
+					get each() {
+						return n.columns;
+					},
+					children: (e) => (() => {
+						var u = i(R);
+						return o(u, t(m, {
+							get when() {
+								return s(() => !!f())() && e.sortBy;
+							},
+							get fallback() {
+								return e.label;
+							},
+							get children() {
+								var t = i(L), s = t.firstChild, [u, d] = a(s.nextSibling), f = u.nextSibling;
+								return t.$$click = () => y.getColumn(e.id)?.toggleSorting(), o(t, () => e.label, u, d), r((r) => {
+									var i = G(n.labels.sortBy, e.label), a = x(e.id);
+									return i !== r.e && l(t, "aria-label", r.e = i), a !== r.t && l(f, "data-sort-state", r.t = a), r;
+								}, {
+									e: void 0,
+									t: void 0
+								}), c(), t;
+							}
+						})), r((t) => {
+							var n = e.id, r = e.fold ? "" : void 0, i = e.numeric ? "" : void 0, a = f() && e.sortBy ? x(e.id) : void 0;
+							return n !== t.e && l(u, "data-column", t.e = n), r !== t.t && l(u, "data-fold", t.t = r), i !== t.a && l(u, "data-numeric", t.a = i), a !== t.o && l(u, "aria-sort", t.o = a), t;
+						}, {
+							e: void 0,
+							t: void 0,
+							a: void 0,
+							o: void 0
+						}), u;
+					})()
+				}), D, O), o(T, t(m, {
+					get when() {
+						return n.actions;
+					},
+					get children() {
+						var e = i(N), t = e.firstChild;
+						return o(t, () => n.labels.actions), e;
+					}
+				}), A, F), o(I, t(p, {
+					get each() {
+						return b();
+					},
+					children: (e) => [(() => {
+						var s = i(z), c = s.firstChild, [u, d] = a(c.nextSibling), f = u.nextSibling, [h, g] = a(f.nextSibling);
+						return o(s, t(p, {
+							get each() {
+								return n.columns;
+							},
+							children: (n) => t(m, {
+								get when() {
+									return n.rowHeader;
+								},
+								get fallback() {
+									return (() => {
+										var t = i(V);
+										return o(t, () => n.cell(e)), r((e) => {
+											var r = n.fold ? "" : void 0, i = n.numeric ? "" : void 0;
+											return r !== e.e && l(t, "data-fold", e.e = r), i !== e.t && l(t, "data-numeric", e.t = i), e;
+										}, {
+											e: void 0,
+											t: void 0
+										}), t;
+									})();
+								},
+								get children() {
+									var t = i(B);
+									return o(t, () => n.cell(e)), r((e) => {
+										var r = n.fold ? "" : void 0, i = n.numeric ? "" : void 0;
+										return r !== e.e && l(t, "data-fold", e.e = r), i !== e.t && l(t, "data-numeric", e.t = i), e;
+									}, {
+										e: void 0,
+										t: void 0
+									}), t;
+								}
+							})
+						}), u, d), o(s, t(m, {
+							get when() {
+								return n.actions;
+							},
+							children: (t) => (() => {
+								var n = i(H), r = n.firstChild;
+								return o(r, () => t()(e)), n;
+							})()
+						}), h, g), s;
+					})(), t(m, {
+						get when() {
+							return n.detail?.(e);
+						},
+						children: (e) => (() => {
+							var t = i(U), a = t.firstChild;
+							return o(a, e), r(() => l(a, "colspan", n.columns.length + +!!n.actions)), t;
+						})()
+					})]
+				})), r((t) => {
+					var r = n.scroll === "tall" ? "dds-table-wrap dds-table-wrap--tall" : "dds-table-wrap", i = `dds-table${n.density === "dense" ? " dds-table--dense" : ""}${_() ? " dds-table--fixed" : ""}`, a = n.minWidth ? { "min-inline-size": n.minWidth } : void 0;
+					return r !== t.e && e(u, t.e = r), i !== t.t && e(h, t.t = i), t.a = d(h, a, t.a), t;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0
+				}), u;
+			}
+		}),
+		(() => {
+			var e = i(F);
+			return o(e, t(m, {
+				get when() {
+					return n.page?.nextHref;
+				},
+				children: (e) => (() => {
+					var t = i(W);
+					return o(t, () => n.labels.nextPage), r(() => l(t, "href", e())), t;
+				})()
+			})), r((t) => {
+				var r = !n.page?.nextHref, i = n.labels.nextPage;
+				return r !== t.e && u(e, "hidden", t.e = r), i !== t.t && l(e, "aria-label", t.t = i), t;
+			}, {
+				e: void 0,
+				t: void 0
+			}), e;
+		})()
+	];
+}
+n(["click"]);
+//#endregion
+export { K as DataTable };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["createMemo","For","Show","JSX","createTable","tableFeatureSet","toColumnDefs","Column","DataTableLabels","TableFeatureSet","SortMode","statedOrder","fillLabel","template","value","replace","DataTable","props","rows","T","columns","caption","labels","sort","density","scroll","minWidth","actions","row","Element","detail","page","nextHref","empty","clientSorted","undefined","fixed","some","column","width","columnDefs","table","Record","features","data","enableSorting","ordered","getRowModel","map","original","sortState","id","current","store","state","sorting","desc","_$createComponent","when","children","order","_el$20","_$getNextElement","_tmpl$6","_$insert","length","fallback","_el$","_tmpl$4","_el$2","firstChild","_el$3","_el$17","nextSibling","_el$18","_co$5","_$getNextMarker","_el$0","_el$1","_el$12","_el$13","_co$3","_el$14","_el$15","_co$4","_el$16","_el$4","_tmpl$2","_el$6","_el$7","_co$","_el$8","_el$9","_co$2","each","_el$21","_tmpl$","_$effect","_p$","_v$6","fold","_v$7","e","_$setAttribute","t","_$style","_el$22","_tmpl$8","_$memo","sortBy","label","_el$23","_tmpl$7","_el$25","_el$26","_co$6","_el$24","$$click","getColumn","toggleSorting","_v$8","_v$9","_$runHydrationEvents","_v$0","_v$1","_v$10","numeric","_v$11","a","o","_el$10","_tmpl$3","_el$11","_el$27","_tmpl$9","_el$28","_el$29","_co$7","_el$30","_el$31","_co$8","rowHeader","_el$33","_tmpl$1","cell","_v$14","_v$15","_el$32","_tmpl$0","_v$12","_v$13","_el$34","_tmpl$10","_el$35","node","_el$36","_tmpl$11","_el$37","_v$","_v$2","_v$3","_$className","_el$19","_tmpl$5","href","_el$38","_tmpl$12","nextPage","_v$4","_v$5","_$setProperty","_$delegateEvents"],"sources":["../src/columns.ts","../src/data-table.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport {\n  coreCellsFeature,\n  coreColumnsFeature,\n  coreHeadersFeature,\n  coreRowModelsFeature,\n  coreRowsFeature,\n  coreTablesFeature,\n  createColumnHelper,\n  createSortedRowModel,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  type ColumnDef,\n} from \"@tanstack/solid-table\";\n\nexport type Column<T> = {\n  id: string;\n  label: string;\n  cell: (row: T) => JSX.Element;\n  sortBy?: (row: T) => string | number | null;\n  width?: string;\n  fold?: boolean;\n  numeric?: boolean;\n  rowHeader?: boolean;\n};\n\nexport type DataTableLabels = {\n  /** Accessible name for a sort button; `{column}` is replaced with the column label. */\n  sortBy: string;\n  /** Header of the trailing actions column, rendered visually hidden. */\n  actions: string;\n  /** Label of the next-page link. */\n  nextPage: string;\n};\n\n/**\n * The feature set every `DataTable` instance is built from: the core row\n * model plus client-side sorting. Built once (per `tableFeatures`'\n * recommendation to use it statically outside a component) so `toColumnDefs`\n * and `createTable` agree on the same `TFeatures` type.\n */\nconst baseFeatures = tableFeatures({\n  coreTablesFeature,\n  coreRowsFeature,\n  coreColumnsFeature,\n  coreHeadersFeature,\n  coreCellsFeature,\n  coreRowModelsFeature,\n  rowSortingFeature,\n});\n\n/** The `TFeatures` type used everywhere a table/column type needs one. Kept\n *  separate from the `sortedRowModel` factory below: `createSortedRowModel`'s\n *  return type embeds `Table<TFeatures, TData>`, so folding it into the very\n *  type it closes over makes `TFeatures` self-referential — TypeScript's\n *  structural comparison of that recursive shape (observed while wiring this\n *  up) reports unrelated `ColumnDef`/`Column`/`HeaderContext` instantiations\n *  a few frames down a completely unrelated diff, because it can't resolve\n *  the cycle. Naming the narrower, non-recursive type here and using it as\n *  the explicit `TFeatures` argument everywhere avoids that. */\nexport type TableFeatureSet = typeof baseFeatures;\n\n/**\n * Registering `rowSortingFeature` alone is not enough for sorting to reach\n * the screen — `sortedRowModel` is the factory `table.getRowModel()` actually\n * calls to produce sorted rows; without it, `state.sorting` changes but the\n * rendered row order never does. Added here, after `TableFeatureSet` is\n * already named, so its function type closes over the narrow type instead of\n * over itself.\n *\n * `sortFns` registers the names `sortFn: \"auto\"` (the default every column\n * gets — see `toColumnDefs`) can actually resolve to for a `Column<T>` whose\n * `sortBy` returns `string | number | null`: plain strings resolve to\n * `\"text\"`, strings containing digit runs (`\"Row 10\"`, `\"SKU100\"`) resolve to\n * `\"alphanumeric\"`, and numbers/`null` never set a name at all and fall\n * straight to the always-available `sortFn_basic` — so `\"datetime\"` is never\n * reachable and is deliberately not registered. Leaving either reachable name\n * unregistered means `\"auto\"` silently falls back to `sortFn_basic`, which\n * compares raw values instead of lowercasing first: a case-sensitive sort\n * that also warns on every column in development\n * (`rowSortingFeature.utils.js`'s `column_getAutoSortFn`). Importing the two\n * named functions (rather than the `sortFns` barrel export, whose own\n * docstring says registering it \"opts out of tree-shaking\") keeps every\n * other built-in sorting function — including the case-sensitive and\n * datetime variants this component never produces — out of the bundle.\n */\nexport const tableFeatureSet: TableFeatureSet & {\n  sortedRowModel: ReturnType<typeof createSortedRowModel<TableFeatureSet, Record<string, unknown>>>;\n  sortFns: { text: typeof sortFn_text; alphanumeric: typeof sortFn_alphanumeric };\n} = {\n  ...baseFeatures,\n  sortedRowModel: createSortedRowModel<TableFeatureSet, Record<string, unknown>>(),\n  sortFns: { text: sortFn_text, alphanumeric: sortFn_alphanumeric },\n};\n\n/** Turns our declarations into TanStack column defs. Sorting is enabled per\n *  column by the presence of `sortBy`; everything visual stays in our own\n *  markup, so the def carries only what the model needs.\n *\n *  `Column<T>` deliberately leaves `T` unconstrained (any row shape a\n *  consumer wants to render), but TanStack's `RowData` requires\n *  `Record<string, any> | Array<any>`. Every real row is one of those at\n *  runtime, so the helper is instantiated at `Record<string, unknown>` and\n *  the accessor casts its parameter back to `T` — a boundary cast, not a\n *  behavior change. */\nexport function toColumnDefs<T>(columns: readonly Column<T>[]): ColumnDef<TableFeatureSet, Record<string, unknown>, unknown>[] {\n  const helper = createColumnHelper<TableFeatureSet, Record<string, unknown>>();\n  return columns.map((column) =>\n    // `TValue` is invariant on `ColumnDef` (it shows up contravariantly via\n    // `footer`'s `HeaderContext`, covariantly via `accessorFn`'s return), so\n    // a heterogeneous array of columns can only be typed uniformly at\n    // `unknown` — the array element type `ColumnDef<..., unknown>` is not a\n    // supertype of `ColumnDef<..., string | number | null>`. The return type\n    // annotation below is what makes TanStack infer `TValue = unknown`\n    // instead of narrowing to the ternary's actual `string | number | null`.\n    //\n    // `?? undefined` is the adapter boundary translating our declared\n    // contract (`sortBy` returns `null` for \"no value\") into TanStack's:\n    // `createSortedRowModel`'s comparator only consults `sortUndefined`\n    // after testing `=== void 0`, so a bare `null` would never trigger it —\n    // `sortUndefined: \"last\"` would be a promise the code doesn't keep.\n    helper.accessor((row): unknown => (column.sortBy ? column.sortBy(row as T) ?? undefined : undefined), {\n      id: column.id,\n      enableSorting: Boolean(column.sortBy),\n      sortUndefined: \"last\",\n    }),\n  );\n}\n","import { createMemo, For, Show, type JSX } from \"solid-js\";\nimport { createTable } from \"@tanstack/solid-table\";\nimport { tableFeatureSet, toColumnDefs, type Column, type DataTableLabels, type TableFeatureSet } from \"./columns\";\n\nexport type SortMode = \"client\" | { statedOrder: string };\n\n/** Fills the `{column}` placeholder in a consumer-supplied label template.\n *  A function replacer, not `template.replace(\"{column}\", value)` — a\n *  string replacement value is subject to special `$&`/`$$`/`` $` ``/`$'`\n *  patterns, and this console has currency columns whose labels can contain\n *  a literal `$`. */\nfunction fillLabel(template: string, value: string): string {\n  return template.replace(\"{column}\", () => value);\n}\n\nexport function DataTable<T>(props: {\n  rows: readonly T[];\n  columns: readonly Column<T>[];\n  caption: string;\n  labels: DataTableLabels;\n  sort?: SortMode;\n  density?: \"comfortable\" | \"dense\";\n  scroll?: \"auto\" | \"tall\";\n  minWidth?: string;\n  actions?: (row: T) => JSX.Element;\n  detail?: (row: T) => JSX.Element;\n  page?: { nextHref?: string | undefined };\n  empty?: JSX.Element;\n}): JSX.Element {\n  const clientSorted = () => props.sort === \"client\";\n  const statedOrder = () => (typeof props.sort === \"object\" ? props.sort.statedOrder : undefined);\n  const fixed = () => props.columns.some((column) => column.width !== undefined);\n\n  /* `toColumnDefs` builds fresh column objects on every read; a table model\n     that sees a new column identity on every access can lose sorting state\n     or re-render in a loop, so the defs are memoized on `props.columns`. */\n  const columnDefs = createMemo(() => toColumnDefs(props.columns));\n\n  /* TanStack's `RowData` requires `Record<string, any> | Array<any>`, which\n     an unconstrained `T` can't satisfy structurally. Every row is one of\n     those at runtime, so the table is instantiated at `Record<string,\n     unknown>` and cast back to `T` where rows come back out (in `ordered`). */\n  const table = createTable<TableFeatureSet, Record<string, unknown>>({\n    features: tableFeatureSet,\n    get data() { return props.rows as readonly Record<string, unknown>[]; },\n    get columns() { return columnDefs(); },\n    enableSorting: true,\n  });\n\n  /* The model sorts; our own markup renders. A server-ordered table never\n     reaches this path — `sort` is then an object and no header is a button. */\n  const ordered = createMemo(() => (clientSorted() ? table.getRowModel().rows.map((row) => row.original as T) : [...props.rows]));\n\n  const sortState = (id: string) => {\n    const current = table.store.state.sorting?.[0];\n    if (!current || current.id !== id) return \"none\";\n    return current.desc ? \"descending\" : \"ascending\";\n  };\n\n  return (\n    <>\n      {/* The stated order and the pagination link are not part of the \"is\n          there a table to show\" question — a cursor-paged list can land on\n          an empty page and still needs to say what order it was in and\n          offer a way forward. Only the table itself (and its wrap) falls\n          back to `empty` when there are no rows. */}\n      <Show when={statedOrder()}>{(order) => <p class=\"dds-table__order\">{order()}</p>}</Show>\n      <Show when={props.rows.length > 0} fallback={props.empty}>\n        <div class={props.scroll === \"tall\" ? \"dds-table-wrap dds-table-wrap--tall\" : \"dds-table-wrap\"}>\n          <table\n            class={`dds-table${props.density === \"dense\" ? \" dds-table--dense\" : \"\"}${fixed() ? \" dds-table--fixed\" : \"\"}`}\n            style={props.minWidth ? { \"min-inline-size\": props.minWidth } : undefined}\n          >\n            <caption class=\"dds-visually-hidden\">{props.caption}</caption>\n            <Show when={fixed()}>\n              <colgroup>\n                <For each={props.columns}>{(column) => <col data-fold={column.fold ? \"\" : undefined} style={column.width ? { width: column.width } : undefined} />}</For>\n                <Show when={props.actions}><col /></Show>\n              </colgroup>\n            </Show>\n            <thead>\n              <tr>\n                <For each={props.columns}>{(column) => (\n                  <th scope=\"col\" data-column={column.id} data-fold={column.fold ? \"\" : undefined} data-numeric={column.numeric ? \"\" : undefined} aria-sort={clientSorted() && column.sortBy ? sortState(column.id) : undefined}>\n                    <Show when={clientSorted() && column.sortBy} fallback={column.label}>\n                      <button\n                        type=\"button\"\n                        class=\"dds-table__sort\"\n                        data-action=\"sort\"\n                        aria-label={fillLabel(props.labels.sortBy, column.label)}\n                        onClick={() => table.getColumn(column.id)?.toggleSorting()}\n                      >\n                        {column.label}\n                        <span class=\"dds-table__sort-mark\" aria-hidden=\"true\" data-sort-state={sortState(column.id)} />\n                      </button>\n                    </Show>\n                  </th>\n                )}</For>\n                <Show when={props.actions}>\n                  <th scope=\"col\"><span class=\"dds-visually-hidden\">{props.labels.actions}</span></th>\n                </Show>\n              </tr>\n            </thead>\n            <tbody>\n              <For each={ordered()}>{(row) => (\n                <>\n                  <tr>\n                    <For each={props.columns}>{(column) => (\n                      <Show\n                        when={column.rowHeader}\n                        fallback={<td data-fold={column.fold ? \"\" : undefined} data-numeric={column.numeric ? \"\" : undefined}>{column.cell(row)}</td>}\n                      >\n                        <th scope=\"row\" data-fold={column.fold ? \"\" : undefined} data-numeric={column.numeric ? \"\" : undefined}>{column.cell(row)}</th>\n                      </Show>\n                    )}</For>\n                    <Show when={props.actions}>{(actions) => <td><div class=\"dds-table__actions\">{actions()(row)}</div></td>}</Show>\n                  </tr>\n                  {/* Test the detail CONTENT, not the prop: a caller renders\n                      an expandable panel as\n                      `detail={(row) => expanded() === row.id ? <Panel/> : null}`,\n                      so a non-expanded row must produce no detail <tr> at\n                      all rather than a blank bordered one. */}\n                  <Show when={props.detail?.(row)}>{(node) => (\n                    <tr><td colSpan={props.columns.length + (props.actions ? 1 : 0)}>{node()}</td></tr>\n                  )}</Show>\n                </>\n              )}</For>\n            </tbody>\n          </table>\n        </div>\n      </Show>\n      <nav class=\"dds-table__pagination\" hidden={!props.page?.nextHref} aria-label={props.labels.nextPage}>\n        <Show when={props.page?.nextHref}>{(href) => <a class=\"dds-btn dds-btn--secondary\" href={href()}>{props.labels.nextPage}</a>}</Show>\n      </nav>\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/server.js

@@ -0,0 +1,279 @@
+import { createComponent, escape, memo, ssr, ssrAttribute, ssrHydrationKey, ssrStyle } from "solid-js/web";
+import { For, Show, createMemo } from "solid-js";
+import { coreCellsFeature, coreColumnsFeature, coreHeadersFeature, coreRowModelsFeature, coreRowsFeature, coreTablesFeature, createColumnHelper, createSortedRowModel, createTable, rowSortingFeature, sortFn_alphanumeric, sortFn_text, tableFeatures } from "@tanstack/solid-table";
+/**
+* Registering `rowSortingFeature` alone is not enough for sorting to reach
+* the screen — `sortedRowModel` is the factory `table.getRowModel()` actually
+* calls to produce sorted rows; without it, `state.sorting` changes but the
+* rendered row order never does. Added here, after `TableFeatureSet` is
+* already named, so its function type closes over the narrow type instead of
+* over itself.
+*
+* `sortFns` registers the names `sortFn: "auto"` (the default every column
+* gets — see `toColumnDefs`) can actually resolve to for a `Column<T>` whose
+* `sortBy` returns `string | number | null`: plain strings resolve to
+* `"text"`, strings containing digit runs (`"Row 10"`, `"SKU100"`) resolve to
+* `"alphanumeric"`, and numbers/`null` never set a name at all and fall
+* straight to the always-available `sortFn_basic` — so `"datetime"` is never
+* reachable and is deliberately not registered. Leaving either reachable name
+* unregistered means `"auto"` silently falls back to `sortFn_basic`, which
+* compares raw values instead of lowercasing first: a case-sensitive sort
+* that also warns on every column in development
+* (`rowSortingFeature.utils.js`'s `column_getAutoSortFn`). Importing the two
+* named functions (rather than the `sortFns` barrel export, whose own
+* docstring says registering it "opts out of tree-shaking") keeps every
+* other built-in sorting function — including the case-sensitive and
+* datetime variants this component never produces — out of the bundle.
+*/
+var tableFeatureSet = {
+	...tableFeatures({
+		coreTablesFeature,
+		coreRowsFeature,
+		coreColumnsFeature,
+		coreHeadersFeature,
+		coreCellsFeature,
+		coreRowModelsFeature,
+		rowSortingFeature
+	}),
+	sortedRowModel: createSortedRowModel(),
+	sortFns: {
+		text: sortFn_text,
+		alphanumeric: sortFn_alphanumeric
+	}
+};
+/** Turns our declarations into TanStack column defs. Sorting is enabled per
+*  column by the presence of `sortBy`; everything visual stays in our own
+*  markup, so the def carries only what the model needs.
+*
+*  `Column<T>` deliberately leaves `T` unconstrained (any row shape a
+*  consumer wants to render), but TanStack's `RowData` requires
+*  `Record<string, any> | Array<any>`. Every real row is one of those at
+*  runtime, so the helper is instantiated at `Record<string, unknown>` and
+*  the accessor casts its parameter back to `T` — a boundary cast, not a
+*  behavior change. */
+function toColumnDefs(columns) {
+	const helper = createColumnHelper();
+	return columns.map((column) => helper.accessor((row) => column.sortBy ? column.sortBy(row) ?? void 0 : void 0, {
+		id: column.id,
+		enableSorting: Boolean(column.sortBy),
+		sortUndefined: "last"
+	}));
+}
+//#endregion
+//#region src/data-table.tsx
+var _tmpl$ = ["<col", ">"];
+var _tmpl$2 = [
+	"<colgroup",
+	"><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--></colgroup>"
+];
+var _tmpl$3 = [
+	"<th",
+	" scope=\"col\"><span class=\"dds-visually-hidden\">",
+	"</span></th>"
+];
+var _tmpl$4 = [
+	"<div",
+	"><table class=\"",
+	"\" style=\"",
+	"\"><caption class=\"dds-visually-hidden\">",
+	"</caption><!--$-->",
+	"<!--/--><thead><tr><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--></tr></thead><tbody>",
+	"</tbody></table></div>"
+];
+var _tmpl$5 = [
+	"<nav",
+	" class=\"dds-table__pagination\"",
+	">",
+	"</nav>"
+];
+var _tmpl$6 = [
+	"<p",
+	" class=\"dds-table__order\">",
+	"</p>"
+];
+var _tmpl$7 = [
+	"<col",
+	" style=\"",
+	"\">"
+];
+var _tmpl$8 = [
+	"<button",
+	" type=\"button\" class=\"dds-table__sort\" data-action=\"sort\"",
+	"><!--$-->",
+	"<!--/--><span class=\"dds-table__sort-mark\" aria-hidden=\"true\"",
+	"></span></button>"
+];
+var _tmpl$9 = [
+	"<th",
+	" scope=\"col\"",
+	">",
+	"</th>"
+];
+var _tmpl$0 = [
+	"<tr",
+	"><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--></tr>"
+];
+var _tmpl$1 = [
+	"<th",
+	" scope=\"row\"",
+	">",
+	"</th>"
+];
+var _tmpl$10 = [
+	"<td",
+	">",
+	"</td>"
+];
+var _tmpl$11 = [
+	"<td",
+	"><div class=\"dds-table__actions\">",
+	"</div></td>"
+];
+var _tmpl$12 = [
+	"<tr",
+	"><td",
+	">",
+	"</td></tr>"
+];
+var _tmpl$13 = [
+	"<a",
+	" class=\"dds-btn dds-btn--secondary\"",
+	">",
+	"</a>"
+];
+/** Fills the `{column}` placeholder in a consumer-supplied label template.
+*  A function replacer, not `template.replace("{column}", value)` — a
+*  string replacement value is subject to special `$&`/`$$`/`` $` ``/`$'`
+*  patterns, and this console has currency columns whose labels can contain
+*  a literal `$`. */
+function fillLabel(template, value) {
+	return template.replace("{column}", () => value);
+}
+function DataTable(props) {
+	const clientSorted = () => props.sort === "client";
+	const statedOrder = () => typeof props.sort === "object" ? props.sort.statedOrder : void 0;
+	const fixed = () => props.columns.some((column) => column.width !== void 0);
+	const columnDefs = createMemo(() => toColumnDefs(props.columns));
+	const table = createTable({
+		features: tableFeatureSet,
+		get data() {
+			return props.rows;
+		},
+		get columns() {
+			return columnDefs();
+		},
+		enableSorting: true
+	});
+	const ordered = createMemo(() => clientSorted() ? table.getRowModel().rows.map((row) => row.original) : [...props.rows]);
+	const sortState = (id) => {
+		const current = table.store.state.sorting?.[0];
+		if (!current || current.id !== id) return "none";
+		return current.desc ? "descending" : "ascending";
+	};
+	return [
+		createComponent(Show, {
+			get when() {
+				return statedOrder();
+			},
+			children: (order) => ssr(_tmpl$6, ssrHydrationKey(), escape(order()))
+		}),
+		createComponent(Show, {
+			get when() {
+				return props.rows.length > 0;
+			},
+			get fallback() {
+				return props.empty;
+			},
+			get children() {
+				return ssr(_tmpl$4, ssrHydrationKey() + ssrAttribute("class", props.scroll === "tall" ? "dds-table-wrap dds-table-wrap--tall" : "dds-table-wrap", false), `dds-table${props.density === "dense" ? " dds-table--dense" : ""}${fixed() ? " dds-table--fixed" : ""}`, ssrStyle(props.minWidth ? { "min-inline-size": props.minWidth } : void 0), escape(props.caption), escape(createComponent(Show, {
+					get when() {
+						return fixed();
+					},
+					get children() {
+						return ssr(_tmpl$2, ssrHydrationKey(), escape(createComponent(For, {
+							get each() {
+								return props.columns;
+							},
+							children: (column) => ssr(_tmpl$7, ssrHydrationKey() + ssrAttribute("data-fold", column.fold ? "" : escape(void 0, true), false), ssrStyle(column.width ? { width: column.width } : void 0))
+						})), escape(createComponent(Show, {
+							get when() {
+								return props.actions;
+							},
+							get children() {
+								return ssr(_tmpl$, ssrHydrationKey());
+							}
+						})));
+					}
+				})), escape(createComponent(For, {
+					get each() {
+						return props.columns;
+					},
+					children: (column) => ssr(_tmpl$9, ssrHydrationKey(), ssrAttribute("data-column", escape(column.id, true), false) + ssrAttribute("data-fold", column.fold ? "" : escape(void 0, true), false) + ssrAttribute("data-numeric", column.numeric ? "" : escape(void 0, true), false) + ssrAttribute("aria-sort", clientSorted() && column.sortBy ? escape(sortState(column.id), true) : escape(void 0, true), false), escape(createComponent(Show, {
+						get when() {
+							return memo(() => !!clientSorted())() && column.sortBy;
+						},
+						get fallback() {
+							return column.label;
+						},
+						get children() {
+							return ssr(_tmpl$8, ssrHydrationKey(), ssrAttribute("aria-label", escape(fillLabel(props.labels.sortBy, column.label), true), false), escape(column.label), ssrAttribute("data-sort-state", escape(sortState(column.id), true), false));
+						}
+					})))
+				})), escape(createComponent(Show, {
+					get when() {
+						return props.actions;
+					},
+					get children() {
+						return ssr(_tmpl$3, ssrHydrationKey(), escape(props.labels.actions));
+					}
+				})), escape(createComponent(For, {
+					get each() {
+						return ordered();
+					},
+					children: (row) => [ssr(_tmpl$0, ssrHydrationKey(), escape(createComponent(For, {
+						get each() {
+							return props.columns;
+						},
+						children: (column) => createComponent(Show, {
+							get when() {
+								return column.rowHeader;
+							},
+							get fallback() {
+								return ssr(_tmpl$10, ssrHydrationKey() + ssrAttribute("data-fold", column.fold ? "" : escape(void 0, true), false) + ssrAttribute("data-numeric", column.numeric ? "" : escape(void 0, true), false), escape(column.cell(row)));
+							},
+							get children() {
+								return ssr(_tmpl$1, ssrHydrationKey(), ssrAttribute("data-fold", column.fold ? "" : escape(void 0, true), false) + ssrAttribute("data-numeric", column.numeric ? "" : escape(void 0, true), false), escape(column.cell(row)));
+							}
+						})
+					})), escape(createComponent(Show, {
+						get when() {
+							return props.actions;
+						},
+						children: (actions) => ssr(_tmpl$11, ssrHydrationKey(), escape(actions()(row)))
+					}))), createComponent(Show, {
+						get when() {
+							return props.detail?.(row);
+						},
+						children: (node) => ssr(_tmpl$12, ssrHydrationKey(), ssrAttribute("colspan", escape(props.columns.length, true) + (props.actions ? 1 : 0), false), escape(node()))
+					})]
+				})));
+			}
+		}),
+		ssr(_tmpl$5, ssrHydrationKey(), ssrAttribute("hidden", !props.page?.nextHref, true) + ssrAttribute("aria-label", escape(props.labels.nextPage, true), false), escape(createComponent(Show, {
+			get when() {
+				return props.page?.nextHref;
+			},
+			children: (href) => ssr(_tmpl$13, ssrHydrationKey(), ssrAttribute("href", escape(href(), true), false), escape(props.labels.nextPage))
+		})))
+	];
+}
+//#endregion
+export { DataTable };
+
+//# sourceMappingURL=server.js.map

package/dist/server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.js","names":["createMemo","For","Show","JSX","createTable","tableFeatureSet","toColumnDefs","Column","DataTableLabels","TableFeatureSet","SortMode","statedOrder","fillLabel","template","value","replace","DataTable","props","rows","T","columns","caption","labels","sort","density","scroll","minWidth","actions","row","Element","detail","page","nextHref","empty","clientSorted","undefined","fixed","some","column","width","columnDefs","table","Record","features","data","enableSorting","ordered","getRowModel","map","original","sortState","id","current","store","state","sorting","desc","_$createComponent","when","children","order","_$ssr","_tmpl$6","_$ssrHydrationKey","_$escape","length","fallback","_tmpl$4","_$ssrAttribute","_$ssrStyle","_tmpl$2","each","_tmpl$7","fold","_tmpl$","_tmpl$9","numeric","sortBy","_$memo","label","_tmpl$8","_tmpl$3","_tmpl$0","rowHeader","_tmpl$10","cell","_tmpl$1","_tmpl$11","node","_tmpl$12","_tmpl$5","nextPage","href","_tmpl$13"],"sources":["../src/columns.ts","../src/data-table.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport {\n  coreCellsFeature,\n  coreColumnsFeature,\n  coreHeadersFeature,\n  coreRowModelsFeature,\n  coreRowsFeature,\n  coreTablesFeature,\n  createColumnHelper,\n  createSortedRowModel,\n  rowSortingFeature,\n  sortFn_alphanumeric,\n  sortFn_text,\n  tableFeatures,\n  type ColumnDef,\n} from \"@tanstack/solid-table\";\n\nexport type Column<T> = {\n  id: string;\n  label: string;\n  cell: (row: T) => JSX.Element;\n  sortBy?: (row: T) => string | number | null;\n  width?: string;\n  fold?: boolean;\n  numeric?: boolean;\n  rowHeader?: boolean;\n};\n\nexport type DataTableLabels = {\n  /** Accessible name for a sort button; `{column}` is replaced with the column label. */\n  sortBy: string;\n  /** Header of the trailing actions column, rendered visually hidden. */\n  actions: string;\n  /** Label of the next-page link. */\n  nextPage: string;\n};\n\n/**\n * The feature set every `DataTable` instance is built from: the core row\n * model plus client-side sorting. Built once (per `tableFeatures`'\n * recommendation to use it statically outside a component) so `toColumnDefs`\n * and `createTable` agree on the same `TFeatures` type.\n */\nconst baseFeatures = tableFeatures({\n  coreTablesFeature,\n  coreRowsFeature,\n  coreColumnsFeature,\n  coreHeadersFeature,\n  coreCellsFeature,\n  coreRowModelsFeature,\n  rowSortingFeature,\n});\n\n/** The `TFeatures` type used everywhere a table/column type needs one. Kept\n *  separate from the `sortedRowModel` factory below: `createSortedRowModel`'s\n *  return type embeds `Table<TFeatures, TData>`, so folding it into the very\n *  type it closes over makes `TFeatures` self-referential — TypeScript's\n *  structural comparison of that recursive shape (observed while wiring this\n *  up) reports unrelated `ColumnDef`/`Column`/`HeaderContext` instantiations\n *  a few frames down a completely unrelated diff, because it can't resolve\n *  the cycle. Naming the narrower, non-recursive type here and using it as\n *  the explicit `TFeatures` argument everywhere avoids that. */\nexport type TableFeatureSet = typeof baseFeatures;\n\n/**\n * Registering `rowSortingFeature` alone is not enough for sorting to reach\n * the screen — `sortedRowModel` is the factory `table.getRowModel()` actually\n * calls to produce sorted rows; without it, `state.sorting` changes but the\n * rendered row order never does. Added here, after `TableFeatureSet` is\n * already named, so its function type closes over the narrow type instead of\n * over itself.\n *\n * `sortFns` registers the names `sortFn: \"auto\"` (the default every column\n * gets — see `toColumnDefs`) can actually resolve to for a `Column<T>` whose\n * `sortBy` returns `string | number | null`: plain strings resolve to\n * `\"text\"`, strings containing digit runs (`\"Row 10\"`, `\"SKU100\"`) resolve to\n * `\"alphanumeric\"`, and numbers/`null` never set a name at all and fall\n * straight to the always-available `sortFn_basic` — so `\"datetime\"` is never\n * reachable and is deliberately not registered. Leaving either reachable name\n * unregistered means `\"auto\"` silently falls back to `sortFn_basic`, which\n * compares raw values instead of lowercasing first: a case-sensitive sort\n * that also warns on every column in development\n * (`rowSortingFeature.utils.js`'s `column_getAutoSortFn`). Importing the two\n * named functions (rather than the `sortFns` barrel export, whose own\n * docstring says registering it \"opts out of tree-shaking\") keeps every\n * other built-in sorting function — including the case-sensitive and\n * datetime variants this component never produces — out of the bundle.\n */\nexport const tableFeatureSet: TableFeatureSet & {\n  sortedRowModel: ReturnType<typeof createSortedRowModel<TableFeatureSet, Record<string, unknown>>>;\n  sortFns: { text: typeof sortFn_text; alphanumeric: typeof sortFn_alphanumeric };\n} = {\n  ...baseFeatures,\n  sortedRowModel: createSortedRowModel<TableFeatureSet, Record<string, unknown>>(),\n  sortFns: { text: sortFn_text, alphanumeric: sortFn_alphanumeric },\n};\n\n/** Turns our declarations into TanStack column defs. Sorting is enabled per\n *  column by the presence of `sortBy`; everything visual stays in our own\n *  markup, so the def carries only what the model needs.\n *\n *  `Column<T>` deliberately leaves `T` unconstrained (any row shape a\n *  consumer wants to render), but TanStack's `RowData` requires\n *  `Record<string, any> | Array<any>`. Every real row is one of those at\n *  runtime, so the helper is instantiated at `Record<string, unknown>` and\n *  the accessor casts its parameter back to `T` — a boundary cast, not a\n *  behavior change. */\nexport function toColumnDefs<T>(columns: readonly Column<T>[]): ColumnDef<TableFeatureSet, Record<string, unknown>, unknown>[] {\n  const helper = createColumnHelper<TableFeatureSet, Record<string, unknown>>();\n  return columns.map((column) =>\n    // `TValue` is invariant on `ColumnDef` (it shows up contravariantly via\n    // `footer`'s `HeaderContext`, covariantly via `accessorFn`'s return), so\n    // a heterogeneous array of columns can only be typed uniformly at\n    // `unknown` — the array element type `ColumnDef<..., unknown>` is not a\n    // supertype of `ColumnDef<..., string | number | null>`. The return type\n    // annotation below is what makes TanStack infer `TValue = unknown`\n    // instead of narrowing to the ternary's actual `string | number | null`.\n    //\n    // `?? undefined` is the adapter boundary translating our declared\n    // contract (`sortBy` returns `null` for \"no value\") into TanStack's:\n    // `createSortedRowModel`'s comparator only consults `sortUndefined`\n    // after testing `=== void 0`, so a bare `null` would never trigger it —\n    // `sortUndefined: \"last\"` would be a promise the code doesn't keep.\n    helper.accessor((row): unknown => (column.sortBy ? column.sortBy(row as T) ?? undefined : undefined), {\n      id: column.id,\n      enableSorting: Boolean(column.sortBy),\n      sortUndefined: \"last\",\n    }),\n  );\n}\n","import { createMemo, For, Show, type JSX } from \"solid-js\";\nimport { createTable } from \"@tanstack/solid-table\";\nimport { tableFeatureSet, toColumnDefs, type Column, type DataTableLabels, type TableFeatureSet } from \"./columns\";\n\nexport type SortMode = \"client\" | { statedOrder: string };\n\n/** Fills the `{column}` placeholder in a consumer-supplied label template.\n *  A function replacer, not `template.replace(\"{column}\", value)` — a\n *  string replacement value is subject to special `$&`/`$$`/`` $` ``/`$'`\n *  patterns, and this console has currency columns whose labels can contain\n *  a literal `$`. */\nfunction fillLabel(template: string, value: string): string {\n  return template.replace(\"{column}\", () => value);\n}\n\nexport function DataTable<T>(props: {\n  rows: readonly T[];\n  columns: readonly Column<T>[];\n  caption: string;\n  labels: DataTableLabels;\n  sort?: SortMode;\n  density?: \"comfortable\" | \"dense\";\n  scroll?: \"auto\" | \"tall\";\n  minWidth?: string;\n  actions?: (row: T) => JSX.Element;\n  detail?: (row: T) => JSX.Element;\n  page?: { nextHref?: string | undefined };\n  empty?: JSX.Element;\n}): JSX.Element {\n  const clientSorted = () => props.sort === \"client\";\n  const statedOrder = () => (typeof props.sort === \"object\" ? props.sort.statedOrder : undefined);\n  const fixed = () => props.columns.some((column) => column.width !== undefined);\n\n  /* `toColumnDefs` builds fresh column objects on every read; a table model\n     that sees a new column identity on every access can lose sorting state\n     or re-render in a loop, so the defs are memoized on `props.columns`. */\n  const columnDefs = createMemo(() => toColumnDefs(props.columns));\n\n  /* TanStack's `RowData` requires `Record<string, any> | Array<any>`, which\n     an unconstrained `T` can't satisfy structurally. Every row is one of\n     those at runtime, so the table is instantiated at `Record<string,\n     unknown>` and cast back to `T` where rows come back out (in `ordered`). */\n  const table = createTable<TableFeatureSet, Record<string, unknown>>({\n    features: tableFeatureSet,\n    get data() { return props.rows as readonly Record<string, unknown>[]; },\n    get columns() { return columnDefs(); },\n    enableSorting: true,\n  });\n\n  /* The model sorts; our own markup renders. A server-ordered table never\n     reaches this path — `sort` is then an object and no header is a button. */\n  const ordered = createMemo(() => (clientSorted() ? table.getRowModel().rows.map((row) => row.original as T) : [...props.rows]));\n\n  const sortState = (id: string) => {\n    const current = table.store.state.sorting?.[0];\n    if (!current || current.id !== id) return \"none\";\n    return current.desc ? \"descending\" : \"ascending\";\n  };\n\n  return (\n    <>\n      {/* The stated order and the pagination link are not part of the \"is\n          there a table to show\" question — a cursor-paged list can land on\n          an empty page and still needs to say what order it was in and\n          offer a way forward. Only the table itself (and its wrap) falls\n          back to `empty` when there are no rows. */}\n      <Show when={statedOrder()}>{(order) => <p class=\"dds-table__order\">{order()}</p>}</Show>\n      <Show when={props.rows.length > 0} fallback={props.empty}>\n        <div class={props.scroll === \"tall\" ? \"dds-table-wrap dds-table-wrap--tall\" : \"dds-table-wrap\"}>\n          <table\n            class={`dds-table${props.density === \"dense\" ? \" dds-table--dense\" : \"\"}${fixed() ? \" dds-table--fixed\" : \"\"}`}\n            style={props.minWidth ? { \"min-inline-size\": props.minWidth } : undefined}\n          >\n            <caption class=\"dds-visually-hidden\">{props.caption}</caption>\n            <Show when={fixed()}>\n              <colgroup>\n                <For each={props.columns}>{(column) => <col data-fold={column.fold ? \"\" : undefined} style={column.width ? { width: column.width } : undefined} />}</For>\n                <Show when={props.actions}><col /></Show>\n              </colgroup>\n            </Show>\n            <thead>\n              <tr>\n                <For each={props.columns}>{(column) => (\n                  <th scope=\"col\" data-column={column.id} data-fold={column.fold ? \"\" : undefined} data-numeric={column.numeric ? \"\" : undefined} aria-sort={clientSorted() && column.sortBy ? sortState(column.id) : undefined}>\n                    <Show when={clientSorted() && column.sortBy} fallback={column.label}>\n                      <button\n                        type=\"button\"\n                        class=\"dds-table__sort\"\n                        data-action=\"sort\"\n                        aria-label={fillLabel(props.labels.sortBy, column.label)}\n                        onClick={() => table.getColumn(column.id)?.toggleSorting()}\n                      >\n                        {column.label}\n                        <span class=\"dds-table__sort-mark\" aria-hidden=\"true\" data-sort-state={sortState(column.id)} />\n                      </button>\n                    </Show>\n                  </th>\n                )}</For>\n                <Show when={props.actions}>\n                  <th scope=\"col\"><span class=\"dds-visually-hidden\">{props.labels.actions}</span></th>\n                </Show>\n              </tr>\n            </thead>\n            <tbody>\n              <For each={ordered()}>{(row) => (\n                <>\n                  <tr>\n                    <For each={props.columns}>{(column) => (\n                      <Show\n                        when={column.rowHeader}\n                        fallback={<td data-fold={column.fold ? \"\" : undefined} data-numeric={column.numeric ? \"\" : undefined}>{column.cell(row)}</td>}\n                      >\n                        <th scope=\"row\" data-fold={column.fold ? \"\" : undefined} data-numeric={column.numeric ? \"\" : undefined}>{column.cell(row)}</th>\n                      </Show>\n                    )}</For>\n                    <Show when={props.actions}>{(actions) => <td><div class=\"dds-table__actions\">{actions()(row)}</div></td>}</Show>\n                  </tr>\n                  {/* Test the detail CONTENT, not the prop: a caller renders\n                      an expandable panel as\n                      `detail={(row) => expanded() === row.id ? <Panel/> : null}`,\n                      so a non-expanded row must produce no detail <tr> at\n                      all rather than a blank bordered one. */}\n                  <Show when={props.detail?.(row)}>{(node) => (\n                    <tr><td colSpan={props.columns.length + (props.actions ? 1 : 0)}>{node()}</td></tr>\n                  )}</Show>\n                </>\n              )}</For>\n            </tbody>\n          </table>\n        </div>\n      </Show>\n      <nav class=\"dds-table__pagination\" hidden={!props.page?.nextHref} aria-label={props.labels.nextPage}>\n        <Show when={props.page?.nextHref}>{(href) => <a class=\"dds-btn dds-btn--secondary\" href={href()}>{props.labels.nextPage}</a>}</Show>\n      </nav>\n    </>\n  );\n}\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@devslab/dds-table",
+  "version": "0.11.0",
+  "description": "Declarative data table for the DevsLab Design System",
+  "type": "module",
+  "license": "SEE LICENSE IN LICENSE",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/devslab-kr/dds.git",
+    "directory": "packages/dds-table"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public",
+    "provenance": true
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "README.ko.md"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "worker": "./dist/server.js",
+      "workerd": "./dist/server.js",
+      "node": "./dist/server.js",
+      "browser": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "@devslab/dds-css": "0.11.0",
+    "@devslab/dds-tokens": "0.11.0",
+    "@tanstack/solid-table": "9.2.4"
+  },
+  "peerDependencies": {
+    "solid-js": "1.9.15"
+  },
+  "devDependencies": {
+    "@types/node": "26.3.0",
+    "axe-core": "4.13.0",
+    "jsdom": "30.0.1",
+    "solid-js": "1.9.15",
+    "@testing-library/jest-dom": "6.9.1",
+    "typescript": "7.0.2",
+    "vite": "8.2.1",
+    "vite-plugin-solid": "2.11.14",
+    "vitest": "4.1.1"
+  },
+  "homepage": "https://devslab.kr/brand/",
+  "bugs": {
+    "url": "https://github.com/devslab-kr/dds/issues"
+  },
+  "keywords": [
+    "solidjs",
+    "table",
+    "design-system",
+    "devslab"
+  ],
+  "scripts": {
+    "build": "vite build && vite build --config vite.server.config.ts && tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "check": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run --config vitest.config.ts && vitest run --config vitest.ssr.config.ts",
+    "test:a11y": "vitest run --config vitest.config.ts src/__tests__/a11y.test.tsx"
+  }
+}