@devslab/dds-table-solid 0.0.0-stage → 0.22.1

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,165 @@
+# @devslab/dds-table-solid
+
+## 선택적으로 사용하는 업무 화면 기능
+
+- `resizing={{ label: "{column} 너비 조절", minWidth: 80, maxWidth: 1200, onChange }}`로 컬럼 드래그와 키보드 너비 조절을 켭니다. `Column.resizable = false`인 컬럼은 제외합니다.
+- 방향키는 12px, Shift와 함께 누르면 50px씩 조절합니다. Home/End는 최소·최대 너비입니다. 더블클릭 또는 Escape는 **전체 컬럼**의 조절값을 지우고 원래 선언한 너비로 복원합니다.
+- `onChange(widths, reason)`은 조절 완료(`resize`) 또는 초기화(`reset`) 때 호출합니다. 분석 이벤트와 너비 저장은 사용하는 앱에서 처리합니다.
+- `sort={{ value, onChange }}`는 서버 정렬을 위한 제어 방식입니다. 오름차순 → 내림차순 → `null` 순서로 요청하며, 서버에서 받은 현재 페이지를 브라우저에서 재정렬하지 않습니다. 서버 조회와 결과 전달은 앱이 맡습니다. 기존 `sort="client"`와 `{ statedOrder }` 방식은 유지합니다.
+- `selection={{ rowId, selectedId, onSelect }}`로 행 선택을 켭니다. 클릭·Enter·Space를 지원하고, 행 안의 버튼·링크·입력 요소와 충돌하지 않습니다. 상세 화면 열기 등 업무 동작은 앱의 콜백에서 연결합니다.
+- `SortValue`, `SortMode`, `ColumnResizing`, `RowSelection` 타입을 제공합니다. 기존 사용처는 새 옵션 없이 그대로 동작합니다.
+
+
+TanStack Table 기반 DDS 데이터 테이블 패키지(정확히 `9.2.4` 버전에 고정 —
+고정 이유는 `docs/decisions.md` D-021 참고). `DataTable` 컴포넌트 하나와
+이를 기술하는 `Column<T>`·`DataTableLabels` 타입만 제공한다. 테이블 자체는
+어떤 단어도, 어떤 경로도, "다음 페이지"가 무엇을 뜻하는지도 정하지 않는다
+— 방문자가 읽는 모든 문자열은 prop이다.
+
+```sh
+pnpm add @devslab/dds-table-solid
+```
+
+이 패키지는 자체 스타일시트를 내지 않는다 — 애플리케이션 셸에서
+`@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-solid";
+
+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 행, 셀 패딩 축소). 어느 쪽이든 행 액션과 셀 안 작은 버튼은 행 높이에 맞춰진다(40px 행에 32px 버튼, 36px 행에 24px; 터치에서는 44px) — `docs/components.ko.md` Table 참고. |
+| `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

@@ -1,3 +1,190 @@
-# Temporary Holding Version
+# @devslab/dds-table-solid
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+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-solid
+```
+
+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-solid";
+
+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` | `SortMode` | optional, no sort buttons or order text when omitted | Client sorting, a server-order description, or controlled server sorting. |
+| `resizing` | `ColumnResizing` | optional, disabled by default | Header resize handles, bounds, accessible label, and commit/reset callback. |
+| `selection` | `RowSelection<T>` | optional, disabled by default | Stable row identity, controlled selection, and selection callback. |
+| `density` | `"comfortable" \| "dense"` | optional, default `"comfortable"` (40px rows) | `"dense"` adds `.dds-table--dense` (36px rows, tighter cell padding). Either way, row actions and small buttons in cells are held to the row height (32px buttons in 40px rows, 24px in 36px rows; 44px on touch) — see `docs/components.md` Table. |
+| `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>`. |
+| `resizable?` | `boolean` | Set to `false` to omit this column's handle when resizing is enabled. |
+| `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`
+
+`SortMode` is exported and accepts three shapes:
+
+```ts
+"client" | { statedOrder: string } | { value: SortValue; onChange: (value: SortValue) => void; 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.
+
+## Optional workspace interactions
+
+All interactions below are opt-in; existing tables retain their behavior.
+
+```tsx
+const [sort, setSort] = createSignal<SortValue>(null);
+const [selectedId, setSelectedId] = createSignal<string | null>(null);
+<DataTable rows={rows} columns={columns} caption="Jobs" labels={labels}
+  sort={{ value: sort(), onChange: setSort }}
+  resizing={{ label: "Resize {column}", minWidth: 80, maxWidth: 1200,
+    onChange: (widths, reason) => recordLayoutChange(widths, reason) }}
+  selection={{ rowId: row => row.id, selectedId: selectedId(),
+    onSelect: row => setSelectedId(row.id) }} />;
+```
+
+Import `SortValue`, `ColumnResizing`, and `RowSelection` from this package for
+typed application adapters. Controlled sorting cycles ascending, descending,
+then `null`. It only requests a change; the application must fetch and supply
+the correctly ordered server result. It never sorts the current page locally.
+The existing `{ statedOrder }` mode remains a description without sort buttons.
+
+`resizing.label` is the application-owned accessible label (`{column}` is
+replaced with the column name). Drag a header separator to change its width.
+Left/Right change width by 12px (Shift: 50px); Home/End use the bounds.
+Double-click or Escape clears **all** width overrides, restoring declared
+column widths and the original layout. Set `column.resizable = false` to omit
+an individual handle. Pointer cancellation restores the pre-drag layout;
+unmounting removes pending pointer listeners. Resize callbacks fire on commit
+or reset, rather than every pointer move. Width overrides last for this mounted
+table only; persistence and application analytics remain application-owned.
+
+Selection is controlled by a stable row ID. Click, Enter, and Space select a
+row; embedded buttons, links and form controls keep their own behavior.
+Selection does not navigate, open dialogs, or change business data by itself.
+
+## 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,90 @@
+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;
+    resizable?: boolean;
+    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,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,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,43 @@
+import { type JSX } from "solid-js";
+import { type Column, type DataTableLabels } from "./columns";
+export type SortValue = {
+    id: string;
+    desc: boolean;
+} | null;
+export type SortMode = "client" | {
+    statedOrder: string;
+} | {
+    value: SortValue;
+    onChange: (value: SortValue) => void;
+    statedOrder?: string;
+};
+export type ColumnResizing = {
+    label: string;
+    minWidth?: number;
+    maxWidth?: number;
+    onChange?: (widths: Readonly<Record<string, number>>, reason: "resize" | "reset") => void;
+};
+export type RowSelection<T> = {
+    rowId: (row: T) => string;
+    selectedId?: string | null;
+    onSelect: (row: T) => void;
+};
+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;
+    resizing?: ColumnResizing;
+    selection?: RowSelection<T>;
+}): 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,EAA2D,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAE7F,OAAO,EAAiC,KAAK,MAAM,EAAE,KAAK,eAAe,EAAwB,MAAM,WAAW,CAAC;AAEnH,MAAM,MAAM,SAAS,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAE,GAAG,IAAI,CAAC;AAC7D,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,SAAS,CAAC;IAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAC7I,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAC;CAC3F,CAAC;AACF,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI;IAAE,KAAK,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAA;CAAE,CAAC;AAWpH,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;IACpB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,SAAS,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;CAC7B,GAAG,GAAG,CAAC,OAAO,CA6Kd"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { DataTable } from "./data-table";
+export type { SortMode, SortValue, ColumnResizing, RowSelection } 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,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACtF,YAAY,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC"}