comins-table 0.1.11 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +37 -1
- package/README.md +42 -338
- package/dist/browser/clipboard.d.ts +4 -0
- package/dist/browser/clipboard.d.ts.map +1 -0
- package/dist/browser/measurements.d.ts +28 -0
- package/dist/browser/measurements.d.ts.map +1 -0
- package/dist/browser/pointer.d.ts +25 -0
- package/dist/browser/pointer.d.ts.map +1 -0
- package/dist/browser/scroll.d.ts +9 -0
- package/dist/browser/scroll.d.ts.map +1 -0
- package/dist/browser/table-transfer.d.ts +38 -0
- package/dist/browser/table-transfer.d.ts.map +1 -0
- package/dist/browser/viewport-requests.d.ts +27 -0
- package/dist/browser/viewport-requests.d.ts.map +1 -0
- package/dist/cell-fill.d.ts +1 -1
- package/dist/cell-fill.d.ts.map +1 -1
- package/dist/clipboard-CNrbmDue.js +959 -0
- package/dist/clipboard-CNrbmDue.js.map +1 -0
- package/dist/clipboard.d.ts +2 -2
- package/dist/clipboard.d.ts.map +1 -1
- package/dist/clipboard.js +3 -2
- package/dist/column-layout.d.ts +24 -0
- package/dist/column-layout.d.ts.map +1 -0
- package/dist/component-renderer.d.ts +1 -1
- package/dist/component-renderer.d.ts.map +1 -1
- package/dist/core/editing/cells.d.ts +9 -0
- package/dist/core/editing/cells.d.ts.map +1 -0
- package/dist/core/editing/clipboard.d.ts +8 -0
- package/dist/core/editing/clipboard.d.ts.map +1 -0
- package/dist/core/editing/export-structure.d.ts +6 -0
- package/dist/core/editing/export-structure.d.ts.map +1 -0
- package/dist/core/editing/export.d.ts +4 -0
- package/dist/core/editing/export.d.ts.map +1 -0
- package/dist/core/editing/import.d.ts +4 -0
- package/dist/core/editing/import.d.ts.map +1 -0
- package/dist/core/layout/columns.d.ts +69 -0
- package/dist/core/layout/columns.d.ts.map +1 -0
- package/dist/core/layout/row-height.d.ts +25 -0
- package/dist/core/layout/row-height.d.ts.map +1 -0
- package/dist/core/layout/viewport.d.ts +21 -0
- package/dist/core/layout/viewport.d.ts.map +1 -0
- package/dist/core/layout/virtual.d.ts +119 -0
- package/dist/core/layout/virtual.d.ts.map +1 -0
- package/dist/core/model.d.ts +128 -0
- package/dist/core/model.d.ts.map +1 -0
- package/dist/core/rows/filtering.d.ts +45 -0
- package/dist/core/rows/filtering.d.ts.map +1 -0
- package/dist/core/rows/grouping.d.ts +97 -0
- package/dist/core/rows/grouping.d.ts.map +1 -0
- package/dist/core/rows/projection.d.ts +73 -0
- package/dist/core/rows/projection.d.ts.map +1 -0
- package/dist/core/rows/summary.d.ts +3 -0
- package/dist/core/rows/summary.d.ts.map +1 -0
- package/dist/core/selection/navigation.d.ts +49 -0
- package/dist/core/selection/navigation.d.ts.map +1 -0
- package/dist/core/selection/state.d.ts +131 -0
- package/dist/core/selection/state.d.ts.map +1 -0
- package/dist/core/state/access.d.ts +11 -0
- package/dist/core/state/access.d.ts.map +1 -0
- package/dist/core/state/changes.d.ts +14 -0
- package/dist/core/state/changes.d.ts.map +1 -0
- package/dist/core/state/reconcile.d.ts +18 -0
- package/dist/core/state/reconcile.d.ts.map +1 -0
- package/dist/core/state/table.d.ts +77 -0
- package/dist/core/state/table.d.ts.map +1 -0
- package/dist/core/transfer/policy.d.ts +116 -0
- package/dist/core/transfer/policy.d.ts.map +1 -0
- package/dist/core/viewport/data.d.ts +70 -0
- package/dist/core/viewport/data.d.ts.map +1 -0
- package/dist/core/viewport/requests.d.ts +19 -0
- package/dist/core/viewport/requests.d.ts.map +1 -0
- package/dist/core-compat-B4I2OHGY.js +391 -0
- package/dist/core-compat-B4I2OHGY.js.map +1 -0
- package/dist/core.d.ts +11 -714
- package/dist/core.d.ts.map +1 -1
- package/dist/core.js +3 -2
- package/dist/export-structure-Dy2zOqbj.js +166 -0
- package/dist/export-structure-Dy2zOqbj.js.map +1 -0
- package/dist/filtering.d.ts +8 -9
- package/dist/filtering.d.ts.map +1 -1
- package/dist/grouping.d.ts +11 -21
- package/dist/grouping.d.ts.map +1 -1
- package/dist/index.d.ts +26 -10
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3162 -2624
- package/dist/index.js.map +1 -1
- package/dist/model.d.ts +170 -0
- package/dist/model.d.ts.map +1 -0
- package/dist/react/core-compat.d.ts +141 -0
- package/dist/react/core-compat.d.ts.map +1 -0
- package/dist/react/edit-policy.d.ts +9 -0
- package/dist/react/edit-policy.d.ts.map +1 -0
- package/dist/react/model.d.ts +14 -0
- package/dist/react/model.d.ts.map +1 -0
- package/dist/react/rows.d.ts +6 -0
- package/dist/react/rows.d.ts.map +1 -0
- package/dist/react/state.d.ts +43 -0
- package/dist/react/state.d.ts.map +1 -0
- package/dist/react/table-transfer.d.ts +55 -0
- package/dist/react/table-transfer.d.ts.map +1 -0
- package/dist/react/viewport.d.ts +10 -0
- package/dist/react/viewport.d.ts.map +1 -0
- package/dist/react-types.d.ts +292 -0
- package/dist/react-types.d.ts.map +1 -0
- package/dist/row-detail.d.ts +2 -0
- package/dist/row-detail.d.ts.map +1 -1
- package/dist/row-height.d.ts +1 -24
- package/dist/row-height.d.ts.map +1 -1
- package/dist/row-value.d.ts +2 -0
- package/dist/row-value.d.ts.map +1 -0
- package/dist/selection-data.d.ts +2 -1
- package/dist/selection-data.d.ts.map +1 -1
- package/dist/selection.d.ts +2 -2
- package/dist/selection.d.ts.map +1 -1
- package/dist/selection.js +2 -2
- package/dist/summary.d.ts +1 -1
- package/dist/summary.d.ts.map +1 -1
- package/dist/table-state.d.ts +24 -0
- package/dist/table-state.d.ts.map +1 -0
- package/dist/table-transfer.d.ts +1 -152
- package/dist/table-transfer.d.ts.map +1 -1
- package/dist/tree-drag.d.ts.map +1 -1
- package/dist/tree.d.ts +1 -1
- package/dist/tree.d.ts.map +1 -1
- package/dist/use-viewport.d.ts.map +1 -1
- package/dist/viewport-data.d.ts +8 -71
- package/dist/viewport-data.d.ts.map +1 -1
- package/dist/viewport-layout.d.ts +1 -20
- package/dist/viewport-layout.d.ts.map +1 -1
- package/dist/viewport-requests.d.ts +1 -8
- package/dist/viewport-requests.d.ts.map +1 -1
- package/dist/virtual-layout.d.ts +1 -118
- package/dist/virtual-layout.d.ts.map +1 -1
- package/package.json +5 -2
- package/styles.css +31 -0
- package/dist/core-C1tlvY8Q.js +0 -963
- package/dist/core-C1tlvY8Q.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,42 @@
|
|
|
1
1
|
# Comins Table
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Unreleased
|
|
4
|
+
|
|
5
|
+
## 0.2.1 - 2026-10-04
|
|
6
|
+
|
|
7
|
+
### Fixed
|
|
8
|
+
|
|
9
|
+
- Tree slot controls now isolate copy and paste events, preserving control clipboard content and preventing unintended edits to table cells.
|
|
10
|
+
- React selection callbacks now report selection cleared by input changes, including Tree collapse and external row replacement. Already empty selections retain their identity to avoid duplicate notifications.
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
|
|
14
|
+
- Tree/Group Export preparation helpers and opt-in `__rowId`, `__parentId`, `__depth`, `__groupId` management columns for CSV/JSON. Original rows remain unchanged; colliding export headers are rejected. Tree exports include collapsed descendants, and grouped exports follow explicit group order.
|
|
15
|
+
- A Tree/Group Export Playground sample with source tables, CSV/JSON previews, and CSV downloads containing the management columns.
|
|
16
|
+
- Framework-neutral `importCominsRowsFromCsv` with application-owned row mapping, quoted fields, optional headers, BOM handling, and configurable input limits. Malformed CSV is rejected before row mapping; values remain strings until the application converts them.
|
|
17
|
+
- React Tree Grid `treeSlots.leading`, `content`, and `trailing` callbacks with typed node context and `defaultContent`. Slots preserve disclosure and indentation; interactive controls keep their events separate from Table selection and callbacks.
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- A concise README with explicit Korean and English guides, the public website, and the representative GIF. Detailed state and Ref API contracts live in the language guides.
|
|
22
|
+
|
|
23
|
+
## 0.2.0 - 2026-10-02
|
|
24
|
+
|
|
25
|
+
### Changed
|
|
26
|
+
|
|
27
|
+
- **Migration:** `comins-table/core` now exports neutral state, Column/Group and payload contracts. Labels are strings, cell data guards live directly on `cell`, and React renderer/theme/DOM contracts are excluded. Move React state helpers and React-only types previously imported from `/core` to `comins-table`.
|
|
28
|
+
- The root, `/clipboard`, and `/selection` preserve their existing React-state APIs, JSX labels, props guards, callbacks and theme behavior. Use `/core` helpers with neutral state. Package exports and React peer dependencies are unchanged; this is not an SSR or Vue support declaration.
|
|
29
|
+
- Local verification now checks a freshly built and packed Core artifact with no React installation and ES2022-only declarations, plus source and runtime dependency graphs.
|
|
30
|
+
- Release verification checks the exact publication artifact with the neutral Core consumer and React 18/19 consumers, including strict types, helper execution, client mounting, and browser JS/CSS builds.
|
|
31
|
+
|
|
32
|
+
### Fixed
|
|
33
|
+
|
|
34
|
+
- Pending Row Detail focus retries are cancelled when their owning Table unmounts, while disclosure-collapse focus restoration is preserved.
|
|
35
|
+
- Fill gestures explicitly release pointer capture on cancellation and cleanup, and stopped pointer animation loops cannot schedule another frame during cleanup.
|
|
36
|
+
- Repeated cleanup of an old cross-table transfer registration no longer removes a replacement registered under the same scope and Table ID.
|
|
37
|
+
- Playground TSV inputs display multiline samples with full-width styling. Pinned-column boundary and cross-table duplicate-ID policy explanations now describe the existing behavior explicitly.
|
|
38
|
+
|
|
39
|
+
## 0.1.11 - 2026-09-22
|
|
4
40
|
|
|
5
41
|
### Added
|
|
6
42
|
|
package/README.md
CHANGED
|
@@ -1,71 +1,30 @@
|
|
|
1
1
|
# Comins Table
|
|
2
2
|
|
|
3
|
-
<img src="example/public/comins-symbol.svg" width="64" height="64" alt="Comins"
|
|
3
|
+
<a href="https://comins-website.vercel.app/ko/"><img src="https://raw.githubusercontent.com/kim1124/comins-table/main/example/public/comins-symbol.svg" width="64" height="64" alt="Comins brand website" /></a>
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
A React data table backed by a framework-neutral TypeScript core. Build data-heavy screens with application-owned data, virtualized rows, Tree Grid, grouping, and customizable cells.
|
|
6
6
|
|
|
7
7
|
[](https://www.npmjs.com/package/comins-table)
|
|
8
8
|
[](https://www.npmjs.com/package/comins-table)
|
|
9
9
|
[](https://github.com/kim1124/comins-table/actions/workflows/verify.yml)
|
|
10
10
|
[](LICENSE)
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
[한국어 가이드](https://github.com/kim1124/comins-table/blob/main/docs/ko/README.md)
|
|
13
|
+
· [English Guide](https://github.com/kim1124/comins-table/blob/main/docs/user/README.md)
|
|
14
|
+
· [Comins Brand](https://comins-website.vercel.app/ko/)
|
|
15
|
+
· [Changelog](https://github.com/kim1124/comins-table/blob/main/CHANGELOG.md)
|
|
13
16
|
|
|
14
|
-
|
|
17
|
+

|
|
15
18
|
|
|
16
|
-
|
|
17
|
-
| --- | --- |
|
|
18
|
-
| Controlled data | Application-owned `data`, CRUD helpers, `onChangeData`, pagination, sorting, and layout callbacks |
|
|
19
|
-
| Rendering and scale | Fixed and automatic Row heights, variable-height virtualization, a tested 100,000-row route, bounded Viewport range loading, infinite scroll, append-mode lazy loading, loading, and empty states |
|
|
20
|
-
| Interaction | Accessible single and opt-in multi-column Header sorting, controlled Column Filtering, resize, responsive Column Pinning, 6-pixel horizontal column reorder, Cross-Table Row/Group Drag, Row and Cell selection, ranges, clipboard, and context menu callbacks |
|
|
21
|
-
| Data structure | Controlled client-side flat Row Grouping, flat Row Expand Details, Summary Row aggregation, and Tree Grid expand/fold and subtree drag |
|
|
22
|
-
| Custom UI | Cell/Header renderers, built-in button/input/checkbox/radio/select/toggle/progress/menu/Virtual List components, and CSS-variable themes |
|
|
19
|
+
The preview was recorded with 0.1.11. Feature-specific recordings and examples are available in the guides.
|
|
23
20
|
|
|
24
|
-
|
|
21
|
+
## Highlights
|
|
25
22
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
**
|
|
31
|
-
|
|
32
|
-
This source version adds opt-in external TSV paste and a visual Fill Handle, with atomic controlled edits and protected Cell guards. Header sorting uses disclosure-family Chevrons, and drag feedback follows the packaged design contract. Tree Row drag, automatic heights, and Viewport Datasource remain available. See the [0.1.11 changelog](https://github.com/kim1124/comins-table/blob/main/CHANGELOG.md) for the complete change list.
|
|
33
|
-
|
|
34
|
-
For migration, keep these data-ownership boundaries explicit:
|
|
35
|
-
|
|
36
|
-
- Local Row reordering needs `rowProps.draggable: true`; connect `onChangeData` when the application must retain the new order. Use stable Row IDs and keep the input array reference stable when relying on internal order.
|
|
37
|
-
- Tree movement still requires `treeRowDrag` and controlled `onChangeData`. Cross-Table transfers use the Coordinator; enabling a local Row handle does not enable transfers.
|
|
38
|
-
- OS paste and Fill require `cellSelection` and `onChangeData`; both remain opt-in. A two-field TSV updates two destination Cells. A trailing tab deliberately supplies an additional empty field.
|
|
39
|
-
- Viewport loading has no Row Drag handles. Reordering a partially loaded dataset belongs to the server, followed by a dataset reset.
|
|
40
|
-
|
|
41
|
-
### Feature catalog
|
|
42
|
-
|
|
43
|
-
This catalog is a consumer-oriented summary, not the complete status registry. Use the [Canonical Feature Manifest](https://github.com/kim1124/comins-table/blob/main/docs/feature-manifest.json) and the language indexes for every shipped, unsupported, and evidence-linked feature.
|
|
44
|
-
|
|
45
|
-
| Area | Shipped capabilities | Live examples | Guides |
|
|
46
|
-
| --- | --- | --- | --- |
|
|
47
|
-
| Getting started | Controlled data, CRUD, Core state, loading, and empty states | [`Getting Started`](http://127.0.0.1:4002/docs/getting-started), [`CRUD`](http://127.0.0.1:4002/examples/crud) | [Quick Start](https://github.com/kim1124/comins-table/blob/main/docs/user/01-quick-start.md), [Data And CRUD](https://github.com/kim1124/comins-table/blob/main/docs/user/02-data-and-crud.md) |
|
|
48
|
-
| Header and layout | Sort, multi-sort, resize, move, Header Groups, Filtering, and Pinning | [`Header`](http://127.0.0.1:4002/examples/header), [`Filtering`](http://127.0.0.1:4002/examples/column-filtering), [`Pinning`](http://127.0.0.1:4002/examples/column-pinning) | [Header](https://github.com/kim1124/comins-table/blob/main/docs/user/06-header.md), [Filtering](https://github.com/kim1124/comins-table/blob/main/docs/user/21-column-filtering.md), [Pinning](https://github.com/kim1124/comins-table/blob/main/docs/user/22-column-pinning.md) |
|
|
49
|
-
| Rows, cells, and selection | Row and Cell callbacks, selection, Clipboard, Context Menu, and Row Expand | [`Selection`](http://127.0.0.1:4002/examples/selection-clipboard), [`Row Expand`](http://127.0.0.1:4002/examples/row-expand) | [Row](https://github.com/kim1124/comins-table/blob/main/docs/user/07-row.md), [Cell](https://github.com/kim1124/comins-table/blob/main/docs/user/08-cell.md), [Selection](https://github.com/kim1124/comins-table/blob/main/docs/user/10-selection.md) |
|
|
50
|
-
| Structured rows | Summary Row, Tree Grid, Row Grouping, and Cross-Table Row/Group Drag | [`Summary`](http://127.0.0.1:4002/examples/summary-row), [`Tree`](http://127.0.0.1:4002/examples/tree-grid), [`Grouping`](http://127.0.0.1:4002/examples/row-grouping), [`Transfer`](http://127.0.0.1:4002/examples/cross-table-drag) | [Summary](https://github.com/kim1124/comins-table/blob/main/docs/user/18-summary-row.md), [Tree](https://github.com/kim1124/comins-table/blob/main/docs/user/17-tree-grid.md), [Grouping](https://github.com/kim1124/comins-table/blob/main/docs/user/20-row-grouping.md), [Transfer](https://github.com/kim1124/comins-table/blob/main/docs/user/23-cross-table-drag.md) |
|
|
51
|
-
| Loading and performance | Pagination, fixed/variable-height virtualization, automatic heights, Viewport Datasource, Infinite Scroll, and Lazy Load | [`Virtualization`](http://127.0.0.1:4002/performance/virtualization), [`Automatic height`](http://127.0.0.1:4002/performance/auto-row-height), [`Viewport`](http://127.0.0.1:4002/performance/viewport-datasource) | [Virtualization](https://github.com/kim1124/comins-table/blob/main/docs/user/11-virtualization.md), [Automatic height](https://github.com/kim1124/comins-table/blob/main/docs/user/24-auto-row-height.md), [Viewport](https://github.com/kim1124/comins-table/blob/main/docs/user/25-viewport-datasource.md), [Lazy Load](https://github.com/kim1124/comins-table/blob/main/docs/user/16-lazy-load.md) |
|
|
52
|
-
| Rendering and styling | Built-in components, custom renderers, themes, CSS variables, and export helpers | [`Components`](http://127.0.0.1:4002/examples/component), [`Theme`](http://127.0.0.1:4002/examples/theme), [`Export`](http://127.0.0.1:4002/examples/export) | [Cell](https://github.com/kim1124/comins-table/blob/main/docs/user/08-cell.md), [Styling](https://github.com/kim1124/comins-table/blob/main/docs/user/04-styling.md), [Export](https://github.com/kim1124/comins-table/blob/main/docs/user/14-export.md) |
|
|
53
|
-
| API and utilities | Ref controls, framework-independent Core helpers, Clipboard, and selection helpers | [`Ref API`](http://127.0.0.1:4002/api/ref), [`Props`](http://127.0.0.1:4002/api/props) | [Core State](https://github.com/kim1124/comins-table/blob/main/docs/user/03-core-state.md), [Clipboard](https://github.com/kim1124/comins-table/blob/main/docs/user/09-clipboard.md) |
|
|
54
|
-
|
|
55
|
-
## Support
|
|
56
|
-
|
|
57
|
-
| Surface | Support |
|
|
58
|
-
| --- | --- |
|
|
59
|
-
| React | `>=18.0.0 <20.0.0` |
|
|
60
|
-
| React DOM | `>=18.0.0 <20.0.0` |
|
|
61
|
-
| TypeScript | Declarations bundled with every JavaScript entry point; CSS available through the stylesheet export |
|
|
62
|
-
| Chrome and Edge | Current stable Chromium-based releases |
|
|
63
|
-
| Automated browser gate | Playwright-bundled Chromium |
|
|
64
|
-
| Firefox and Safari | Outside the supported contract until Firefox and WebKit projects are added |
|
|
65
|
-
| SSR | Client boundary required; server rendering is not currently supported |
|
|
66
|
-
| Runtime network behavior | No package-owned requests, remote assets, telemetry, or error reporting |
|
|
67
|
-
|
|
68
|
-
The Chrome and Edge row is the compatibility contract. The automated browser gate is evidence from Playwright-bundled Chromium only; it is not a claim that Firefox, Safari, or every installed Edge build was tested.
|
|
23
|
+
- **Application-owned data:** controlled updates with stable row IDs and reusable Core helpers.
|
|
24
|
+
- **Large datasets:** virtualization, automatic row heights, and bounded Viewport loading.
|
|
25
|
+
- **Table interactions:** sorting, filtering, column resizing and pinning, selection, clipboard, and Fill Handle.
|
|
26
|
+
- **Structured rows:** Tree Grid, row grouping, summaries, row details, and supported row/group drag operations.
|
|
27
|
+
- **Custom presentation:** cell/header renderers, built-in components, themes, and CSS variables.
|
|
69
28
|
|
|
70
29
|
## Installation
|
|
71
30
|
|
|
@@ -73,26 +32,7 @@ The Chrome and Edge row is the compatibility contract. The automated browser gat
|
|
|
73
32
|
npm install comins-table react react-dom
|
|
74
33
|
```
|
|
75
34
|
|
|
76
|
-
|
|
77
|
-
```tsx
|
|
78
|
-
import { CominsTable, type CominsTableColumn } from "comins-table";
|
|
79
|
-
import "comins-table/styles.css";
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
React and React DOM are peer dependencies. Import `comins-table/styles.css` when the default table shell, themes, and built-in component skin are required.
|
|
83
|
-
|
|
84
|
-
### Run the Playground locally
|
|
85
|
-
|
|
86
|
-
The Playground is a repository development server, not a command installed into a consumer application.
|
|
87
|
-
|
|
88
|
-
```bash
|
|
89
|
-
git clone https://github.com/kim1124/comins-table.git
|
|
90
|
-
cd comins-table
|
|
91
|
-
npm ci
|
|
92
|
-
npm run dev
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
Open [`http://127.0.0.1:4002/docs/getting-started`](http://127.0.0.1:4002/docs/getting-started).
|
|
35
|
+
React and React DOM `>=18.0.0 <20.0.0` are peer dependencies. TypeScript declarations are included for JavaScript entry points. Import `comins-table/styles.css` for the default table appearance.
|
|
96
36
|
|
|
97
37
|
## Quick Start
|
|
98
38
|
|
|
@@ -102,299 +42,63 @@ import { useState } from "react";
|
|
|
102
42
|
import { CominsTable, type CominsTableColumn } from "comins-table";
|
|
103
43
|
import "comins-table/styles.css";
|
|
104
44
|
|
|
105
|
-
type UserRow = {
|
|
106
|
-
active: boolean;
|
|
107
|
-
age: number;
|
|
108
|
-
id: string;
|
|
109
|
-
name: string;
|
|
110
|
-
role: string;
|
|
111
|
-
};
|
|
45
|
+
type UserRow = { id: string; name: string; age: number };
|
|
112
46
|
|
|
113
|
-
const columns:
|
|
47
|
+
const columns: CominsTableColumn<UserRow>[] = [
|
|
114
48
|
{ field: "name", label: "Name", sort: true },
|
|
115
49
|
{ field: "age", label: "Age", sort: true },
|
|
116
|
-
{ field: "role", label: "Role" },
|
|
117
|
-
{
|
|
118
|
-
field: "active",
|
|
119
|
-
label: "Active",
|
|
120
|
-
cell: {
|
|
121
|
-
format: ({ value }) => (value ? "Active" : "Inactive"),
|
|
122
|
-
},
|
|
123
|
-
},
|
|
124
50
|
];
|
|
125
51
|
|
|
126
52
|
export function UsersTable() {
|
|
127
53
|
const [data, setData] = useState<UserRow[]>([
|
|
128
|
-
{
|
|
54
|
+
{ id: "u-1", name: "Example user", age: 31 },
|
|
129
55
|
]);
|
|
130
56
|
|
|
131
57
|
return (
|
|
132
|
-
<CominsTable
|
|
58
|
+
<CominsTable
|
|
133
59
|
columns={columns}
|
|
134
60
|
data={data}
|
|
135
61
|
getRowId={(row) => row.id}
|
|
136
62
|
onChangeData={setData}
|
|
137
|
-
pagination={{ pageIndex: 0, pageSize: 30 }}
|
|
138
|
-
theme={{ density: "compact" }}
|
|
139
63
|
/>
|
|
140
64
|
);
|
|
141
65
|
}
|
|
142
66
|
```
|
|
143
67
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
Comins Table is a CSR-focused controlled component for application-owned data. The application owns the Row array or Viewport snapshot passed through `data`.
|
|
147
|
-
|
|
148
|
-
For table-owned data mutations, `onChangeData` emits the next flat Row array or Tree Grid node array; pass that array back through `data` to retain the mutation. Viewport mode uses a controlled block snapshot instead of a full array; `useCominsViewport` connects that snapshot and its callbacks. Other controlled models use their matching callback and value prop rather than `onChangeData`.
|
|
149
|
-
|
|
150
|
-
Selection, column layout, and sort are internal view state. `onChangeSelection`, `onChangeColumnLayout`, `onChangeSort`, and `onChangeSortModel` observe those changes so an application can coordinate or persist them externally; the table updates the corresponding view state even when a callback is omitted.
|
|
151
|
-
|
|
152
|
-
Where restoration is supported, use the supported Ref API: `setSelectedRow` and `setSelectedRows` restore Row selection by visible index, `setColumnLayout` restores layout, and `setSortState` and `clearSort` restore or clear sorting. `setSortModel` restores the complete ordered model; `getColumnLayout`, `getSortState`, and `getSortModel` read the current layout and sort state.
|
|
153
|
-
|
|
154
|
-
### Multi-column Sort
|
|
155
|
-
|
|
156
|
-
Set `multiSort` to opt into ordered multi-column sorting. Normal Header click or `Enter`/`Space` keeps single sorting; hold `Shift` while using the same input to add, update, or remove one rule without replacing the others. Active Headers display their 1-based priority.
|
|
157
|
-
|
|
158
|
-
<!-- comins-doc-example: fragment -->
|
|
159
|
-
```tsx
|
|
160
|
-
<CominsTable
|
|
161
|
-
columns={columns}
|
|
162
|
-
data={data}
|
|
163
|
-
multiSort
|
|
164
|
-
onChangeSortModel={(model) => saveSortModel(model)}
|
|
165
|
-
/>
|
|
166
|
-
```
|
|
167
|
-
|
|
168
|
-
`getSortModel()` and `setSortModel(model)` read and restore the full model. The existing `getSortState()`, `setSortState(rule)`, and `onChangeSort` APIs remain the single-rule compatibility surface. Two-level child Columns and Tree Grid sibling sets use the same ordered comparison rules.
|
|
169
|
-
|
|
170
|
-
## Package Entry Points
|
|
171
|
-
|
|
172
|
-
| Import | Purpose |
|
|
173
|
-
| --- | --- |
|
|
174
|
-
| `comins-table` | React component, public types, and root helper exports |
|
|
175
|
-
| `comins-table/core` | State, row, column, pagination, sorting, layout, selection, clipboard, export, and virtualization helpers |
|
|
176
|
-
| `comins-table/clipboard` | Clipboard helper subset |
|
|
177
|
-
| `comins-table/selection` | Selection helper subset |
|
|
178
|
-
| `comins-table/styles.css` | Optional table shell, theme, and built-in component skin |
|
|
179
|
-
|
|
180
|
-
## Header And Layout
|
|
181
|
-
|
|
182
|
-
Sortable headers support pointer and keyboard activation and expose `aria-sort`. Columns support width constraints and resize interactions.
|
|
183
|
-
|
|
184
|
-
A left-button mouse interaction activates column movement after a 6-pixel horizontal drag, provided horizontal movement remains greater than vertical movement. The source becomes a source placeholder while a ghost and target marker show the proposed move. Pointer Up commits only over a valid target; vertical intent, pointer cancellation, `Escape`, and window blur cancel the pending move. Non-mouse pointers retain one-second long-press compatibility. Parent header groups move their children as one block.
|
|
185
|
-
|
|
186
|
-
Use `getColumnLayout()` and `setColumnLayout()` through the Ref API, or `serializeCominsColumnLayout()` and `applyCominsColumnLayout()` from `comins-table/core`, to persist and restore order, widths, and visibility.
|
|
187
|
-
|
|
188
|
-
### Column Pinning
|
|
189
|
-
|
|
190
|
-
Set `pinned: "left"` or `pinned: "right"` on a Column or Header Group to keep its atomic block visible during horizontal scrolling and lock its configured position. Direct resize of an effective pinned block stops before it would consume the 48px center budget and demote itself; independent container resize can still temporarily demote inner pinned blocks without changing the persisted layout intent. Header, Body, Skeleton, and Summary use the same offsets. Group Rows and Row Details remain full-width spanning cells; Row Group inner content stays visible at the Body viewport start while horizontally scrolling. See the [Column Pinning guide](https://github.com/kim1124/comins-table/blob/main/docs/user/22-column-pinning.md) and [`/examples/column-pinning`](http://127.0.0.1:4002/examples/column-pinning).
|
|
191
|
-
|
|
192
|
-
When columns overflow horizontally, Comins Table renders one native horizontal scrollbar at the bottom of the complete Table. A configured Summary Row stays above that scrollbar, while Body trackpad or Shift-wheel input and direct scrollbar input keep Header, Body, and Summary `scrollLeft` synchronized.
|
|
193
|
-
|
|
194
|
-
## Rows, Cells, And Selection
|
|
195
|
-
|
|
196
|
-
Rows expose click, double-click, keyboard, and context-menu callbacks. Cells expose the corresponding Cell callbacks plus `format`, `renderer`, and props hooks.
|
|
197
|
-
|
|
198
|
-
A normal Row interaction selects one Row, `Ctrl`/`Cmd` toggles a Row, and `Shift` extends the visible Row range from the selection anchor. Cell selection supports a single Cell, visible `Ctrl`/`Cmd` discontiguous selection, and `Shift` or pointer-drag rectangular ranges. `CominsSelectionState.cell` is the active Cell, `cells` records the discontiguous set, and `range` records the rectangle. Built-in component interactions remain isolated from `onClickCell` and `onClickRow` callback payloads so component actions do not also trigger the owning Cell or Row action.
|
|
199
|
-
|
|
200
|
-
Set `rowSelectionOnClick={false}` to preserve selected Rows while clicking or right-clicking Cells. Application checkboxes or `setSelectedRows` can control the Row selection independently. `getSelectedRows()`, `getSelectedCells()`, and `getSelection()` read Row data, raw Cell values, and the selection snapshot separately. The default `rowSelectionOnClick={true}` keeps the existing Row-click behavior.
|
|
201
|
-
|
|
202
|
-
Row Drag exposes `onBeforeRowDrag`, `onRowDrag`, and `onAfterDragRow`. The before callback can cancel prior to listener registration, target updates emit only on identity or validity changes, and the after callback reports one `moved`, `cancelled`, or `rejected` result per started gesture. Data changes remain controlled through `onChangeData` or the Cross-Table Coordinator.
|
|
203
|
-
|
|
204
|
-
### Row Expand
|
|
205
|
-
|
|
206
|
-
See the [Row Expand guide](https://github.com/kim1124/comins-table/blob/main/docs/user/19-row-expand.md) and run the [`/examples/row-expand`](http://127.0.0.1:4002/examples/row-expand) Playground route.
|
|
207
|
-
|
|
208
|
-
<!-- comins-doc-example: fragment -->
|
|
209
|
-
```tsx
|
|
210
|
-
const [expandedRowIds, setExpandedRowIds] = useState<readonly string[]>([]);
|
|
211
|
-
|
|
212
|
-
<CominsTable
|
|
213
|
-
columns={columns}
|
|
214
|
-
data={data}
|
|
215
|
-
expandedRowIds={expandedRowIds}
|
|
216
|
-
getRowDetailHeight={() => "auto"}
|
|
217
|
-
getRowId={(row) => row.id}
|
|
218
|
-
onChangeExpandedRowIds={setExpandedRowIds}
|
|
219
|
-
renderRowDetail={({ row }) => <Detail row={row.data} />}
|
|
220
|
-
/>;
|
|
221
|
-
```
|
|
222
|
-
|
|
223
|
-
Row Expand is controlled by stable owner business Row IDs. An interactive disclosure requires the application to feed the next value from `onChangeExpandedRowIds` back into `expandedRowIds`; when that callback is omitted, the disclosure is disabled and read-only. A finite positive CSS pixel height is fixed and retains its inline height. Missing values, invalid numeric values, and `"auto"` use measured automatic height with no inline height. Before an automatic Detail has a matching-width measurement, a valid finite positive `estimatedRowDetailHeight` is used; otherwise the resolved `rowHeight` is the estimate. Details render as semantic owner-following Rows, stay outside selection and clipboard addressing, and preserve dormant IDs across sorting and pagination.
|
|
224
|
-
|
|
225
|
-
Owner data Rows can use `getRowHeight` independently of Detail height. Tree Grid Row Details and nested Details managed by Comins Table remain unsupported.
|
|
226
|
-
|
|
227
|
-
## Row Grouping
|
|
228
|
-
|
|
229
|
-
See the [Row Grouping guide](https://github.com/kim1124/comins-table/blob/main/docs/user/20-row-grouping.md) and run the [`/examples/row-grouping`](http://127.0.0.1:4002/examples/row-grouping) Playground route.
|
|
230
|
-
|
|
231
|
-
`rowGrouping.groups` is an application-owned single-depth Group model whose array order remains the actual display order, including empty Groups. Stable Group IDs control expansion, Group Drag reorders the `groups` model, and existing Row Drag can reorder within a Group or use `setRowGroupId` to move across Groups. Applications own Group CRUD and write `onChangeGroups`, `onChangeData`, and expansion callbacks back to their controlled state. Pure `moveCominsRowGroup` and `moveCominsRowToGroup` helpers provide the corresponding JavaScript model transitions.
|
|
232
|
-
|
|
233
|
-
Each synthetic Group Row is one full-width colspan Cell with a distinct neutral-gray background. Use `getGroupRowProps` for a typed per-Group `className` or `style`, and override `--comins-table-group-row-background` and `--comins-table-group-row-color` for theme-level styling. The Table owns disclosure and Drag controls while `renderGroupContent` can replace its inner label, count, aggregate, badge, or business-action content. Header sorting never reorders Groups; the existing Row sort policy runs independently inside every Group. Built-in `count`, `sum`, `avg`, `min`, and `max` aggregations remain available.
|
|
68
|
+
Your application owns `data`; connect `onChangeData` to retain table-side edits. See the [한국어 시작 가이드](https://github.com/kim1124/comins-table/blob/main/docs/ko/01-quick-start.md) or [English Quick Start](https://github.com/kim1124/comins-table/blob/main/docs/user/01-quick-start.md) for setup details.
|
|
234
69
|
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
## Cross-Table Row And Group Drag
|
|
238
|
-
|
|
239
|
-
See the [Cross-Table Drag guide](https://github.com/kim1124/comins-table/blob/main/docs/user/23-cross-table-drag.md) and run the [`/examples/cross-table-drag`](http://127.0.0.1:4002/examples/cross-table-drag) Playground route.
|
|
240
|
-
|
|
241
|
-
Create a `createCominsTableTransferCoordinator()` and pass the same Coordinator, `scope`, and unique `tableId` through `tableTransfer` to participating Tables. Existing Row Drag moves one Row between compatible flat or grouped Tables. Group Drag moves the Group plus every member Row; moving the last Row preserves the empty source Group, while moving a Group removes it from the source model.
|
|
242
|
-
|
|
243
|
-
Duplicate IDs reject by default. A rejected duplicate displays a post-drop, pointer-adjacent `Duplicate ID` Tooltip and a restrained target Table outline without intercepting pointer events. The target can replace the Tooltip body through `rejectionFeedback.renderTooltip`, change its duration, disable default feedback, and customize its CSS variables. `Coordinator.onTransferRejected` receives the structured duplicate conflict for application Toasts or logging.
|
|
244
|
-
|
|
245
|
-
The target can reject through `canTransfer` or explicitly return `"overwrite"` from `resolveConflict`; Group overwrite replaces the complete target Group bundle and never merges it. The Coordinator emits one immutable source/target result, and the application applies both controlled models atomically. Cross-Table Transfer is unavailable with Tree Grid, Column Filtering, Infinite Scroll, and Lazy Load.
|
|
246
|
-
|
|
247
|
-
## Automatic Heights and Viewport Loading
|
|
248
|
-
|
|
249
|
-
Use `getRowHeight={() => "auto"}` for content-driven business Row heights, or return a positive number for an individual Row. Omitting the callback keeps the numeric `rowHeight` default of 36. `estimatedRowHeight` supplies an initial estimate, not a height limit. Custom Renderers do not need per-Cell height calculations; use normal-flow content and enable wrapping where required. Automatic heights work with Flat, Grouped business, and Tree Rows, including `treeRowDrag` where that mode supports dragging.
|
|
250
|
-
|
|
251
|
-
`useCominsViewport({ rowCount, queryKey, getRows })` loads blocks around the scroll region and connects them to the Table through `tableProps`. It enables virtualization and can be combined with `getRowHeight={() => "auto"}`. The application supplies a known total count, globally stable Row IDs, and arbitrary `[startIndex, endIndex)` range requests. Change `queryKey` when server sorting, filtering, or index order changes.
|
|
252
|
-
|
|
253
|
-
Viewport bounds cached data and measured heights; distant scrolling does not fetch every earlier page or require a full dataset array. Unloaded heights are estimated, so scrollbar size can change as content is measured. Selection getters and copy operate on loaded data without fetching missing Rows. The application owns network requests and edit persistence. Tree, Row Grouping, Row Detail, Row Drag, append loading, pagination, built-in sorting/filtering, and automatic Summary aggregation are unavailable in Viewport mode.
|
|
254
|
-
|
|
255
|
-
### Tree subtree movement
|
|
256
|
-
|
|
257
|
-
Move Gamma and its child Epsilon to another parent, then fold and expand the hierarchy.
|
|
258
|
-
|
|
259
|
-

|
|
260
|
-
|
|
261
|
-
### Content-driven heights
|
|
262
|
-
|
|
263
|
-
Expand a Cell Renderer and narrow the Table. Row heights adjust automatically across 100,000 virtualized Rows.
|
|
264
|
-
|
|
265
|
-

|
|
266
|
-
|
|
267
|
-
### Load the visible region
|
|
268
|
-
|
|
269
|
-
Drag the scrollbar to a distant region of 1,000,000 Rows, inspect the bounded cache, and change the query. This recording uses a simulated asynchronous source with a 250 ms delay.
|
|
270
|
-
|
|
271
|
-

|
|
272
|
-
|
|
273
|
-
See [automatic height](https://github.com/kim1124/comins-table/blob/main/docs/user/24-auto-row-height.md), [Viewport Datasource](https://github.com/kim1124/comins-table/blob/main/docs/user/25-viewport-datasource.md), and [Tree drag](https://github.com/kim1124/comins-table/blob/main/docs/user/17-tree-grid.md) for examples, defaults, and combination limits.
|
|
274
|
-
|
|
275
|
-
## Column Filtering
|
|
276
|
-
|
|
277
|
-
See the [Column Filtering guide](https://github.com/kim1124/comins-table/blob/main/docs/user/21-column-filtering.md) and run the [`/examples/column-filtering`](http://127.0.0.1:4002/examples/column-filtering) Playground route.
|
|
278
|
-
|
|
279
|
-
Each Column opts into `text`, `number`, UTC calendar-day `date`, or `boolean` filtering through `columns[].filter`. The application owns the complete `columnFiltering.model` and the currently open Header Filter popover. Rules across Columns use AND; invalid rules are ignored, text comparison is case-insensitive by default, and `between` uses an inclusive normalized range.
|
|
280
|
-
|
|
281
|
-
Filtering runs before Row Grouping membership, sorting, flat pagination, virtualization, and Summary aggregation. Explicit Group positions and empty Groups remain visible while counts and aggregates use filtered leaf Rows. Header sorting does not change the Filter model. Selected Row and expanded Detail IDs remain dormant when hidden, while invalid hidden Cell/range addresses are cleared.
|
|
282
|
-
|
|
283
|
-
Column Filtering cannot be combined with Tree Grid, Infinite/Lazy Loading, `loadingMore`, or Row Drag. Group Drag remains available in the supported Row Grouping combination because it changes only the explicit Group model.
|
|
284
|
-
|
|
285
|
-
## Virtualization And Loading
|
|
286
|
-
|
|
287
|
-
Set `virtualized`, `rowHeight`, and `"buffer-size"` for fixed-height windowed rendering; add `getRowHeight` for numeric per-Row or measured automatic heights. The performance Playground includes a tested 100,000-row route while keeping only the current window and buffer mounted. With ordinary virtualization, the application still supplies the full array. Viewport Datasource additionally bounds loaded data; Infinite Scroll and Lazy Load append to an application-owned array.
|
|
288
|
-
|
|
289
|
-
`infiniteScroll` requests application-owned append loading near the body viewport boundary. `lazyLoad` supports asynchronous append-mode batches with an `AbortSignal`. When `loading` is true, an empty table renders skeleton Rows and a populated table keeps its Rows visible under a loading overlay. `emptyComponent` controls the no-data content.
|
|
290
|
-
|
|
291
|
-
## Summary Row
|
|
292
|
-
|
|
293
|
-
See the [Summary Row guide](https://github.com/kim1124/comins-table/blob/main/docs/user/18-summary-row.md) and run the [`/examples/summary-row`](http://127.0.0.1:4002/examples/summary-row) Playground route.
|
|
294
|
-
|
|
295
|
-
Configure `summary.columns` with built-in `count`, `sum`, `avg`, `min`, and `max` aggregation or a custom aggregator. The object form supports visible-column `colSpan`, post-aggregation `format`, and per-cell `className` and `style`; `summary.className` and `summary.style` apply to the footer Row.
|
|
296
|
-
|
|
297
|
-
## Tree Grid
|
|
298
|
-
|
|
299
|
-
See the [Tree Grid guide](https://github.com/kim1124/comins-table/blob/main/docs/user/17-tree-grid.md) and run the [`/examples/tree-grid`](http://127.0.0.1:4002/examples/tree-grid) Playground route.
|
|
300
|
-
|
|
301
|
-
Set `tree` and provide controlled `{ item, expand, children }` nodes. `defaultExpandAll` supplies the initial fallback expansion state and defaults to `true`; explicit node state wins. `expand(nodeIds?)` and `fold(nodeIds?)` update multiple node ids, while an omitted argument targets every branch and an empty array is a no-op. Descendant-only expansion is blocked while an ancestor remains folded unless both ids are included in the same call.
|
|
302
|
-
|
|
303
|
-
Tree Grid reuses `cell.components` and `cell.renderer`, so component cells and custom React renderers work against each node's `item`. The Tree Grid Playground includes an exactly 10,000-node virtual example.
|
|
304
|
-
|
|
305
|
-
Set `treeRowDrag={{}}` and connect `onChangeData` to reorder siblings at every depth. `treeRowDrag={{ allowReparent: true }}` also moves entire subtrees between parents or back to the root. Parent changes default to disabled. `canDrop` and Row guards restrict destinations and sources; cycles are rejected and sorting disables manual movement. `moveCominsTreeNode` exposes the immutable move helper. Handles support pointer dragging and Space, arrow keys, Enter, and Escape. The Playground drag example starts with parent changes and automatic heights enabled; these are example settings.
|
|
306
|
-
|
|
307
|
-
## Components And Renderers
|
|
308
|
-
|
|
309
|
-
Cell components include `button`, `input`, `checkbox`, `radio`, `select`, `toggle`, `progress`, and `virtual-list`; Header components also support `menu`. Use `cell.renderer` or `header.renderer` when the built-in component types are not sufficient.
|
|
310
|
-
|
|
311
|
-
Virtual List Item activation follows the normal Row selection modifiers. More selects its owning Row exclusively before expanding the virtualized list. Search is available only while exactly one Row is selected. Keyboard activation keeps the More button focused after expansion. Item and More actions remain isolated from the Row and Cell click callbacks.
|
|
312
|
-
|
|
313
|
-
## Clipboard And Export
|
|
314
|
-
|
|
315
|
-
Set `clipboard` to enable OS keyboard copy. It defaults to `false`, preserving the existing internal copy buffer. With OS copy enabled, the default priority is multiple selected Cells → selected Rows → one selected Cell. Five selected Rows and three selected Cells copy the three Cells while retaining all five selected Rows. Discontiguous Cells produce a TSV rectangle with unselected positions empty; internal paste skips those positions.
|
|
316
|
-
|
|
317
|
-
Call `copySelection("auto" | "cells" | "rows")` from a button or context menu to choose the target explicitly. This Ref method writes to the OS clipboard regardless of the `clipboard` prop, returns `Promise<string | null>`, and rejects if writing is unavailable or denied. Native text editing keeps its own copy behavior. Ctrl/Cmd+V uses the Table's internal buffer by default; enable `clipboardPaste` to import external TSV instead. See the [Clipboard guide](https://github.com/kim1124/comins-table/blob/main/docs/user/09-clipboard.md) for guards, TSV escaping, and loaded-data limits.
|
|
318
|
-
|
|
319
|
-

|
|
320
|
-
|
|
321
|
-
`copyCominsRow`, `copyCominsCell`, and `copyCominsCellRange` read Row or Cell selections. `pasteCominsRow`, `pasteCominsCell`, and `pasteCominsCellRange` apply clipboard data while respecting `props.copyable`, `props.pasteable`, and disabled guards. `fillCominsCellRange` accepts a single Cell or rectangular source pattern. Enable `clipboardPaste` for OS TSV paste and `fillHandle` for visual pattern repetition; both default to false and require `cellSelection` and `onChangeData`. Set `cell.parseClipboard` for typed external values, optional `cell.validateFill` for atomic Fill validation, and `onClipboardError` for rejected input. `parseCominsClipboardText` and `pasteCominsText` are available from the root, `/core`, and `/clipboard`. See the [Clipboard guide](https://github.com/kim1124/comins-table/blob/main/docs/user/09-clipboard.md) for limits, guards, native-editor behavior, and `fillSelection("down" | "right")` click alternatives.
|
|
322
|
-
|
|
323
|
-
Use `exportCominsRowsToCsv` and `exportCominsRowsToJson` with the exact rows and export columns the application wants to serialize. Export remains independent of visible pagination, filtering, and selection unless the application passes those rows.
|
|
324
|
-
|
|
325
|
-
## Styling And Themes
|
|
326
|
-
|
|
327
|
-
The package stylesheet exposes module-local `--comins-table-*` CSS variables and does not apply a global reset. The six shipped theme classes are `comins-table-theme--basic`, `comins-table-theme--dark`, `comins-table-theme--skyblue`, `comins-table-theme--mint`, `comins-table-theme--gray`, and `comins-table-theme--orange`.
|
|
70
|
+
## Documentation
|
|
328
71
|
|
|
329
|
-
|
|
72
|
+
| Language | Guides | 0.2.0 migration |
|
|
73
|
+
| --- | --- | --- |
|
|
74
|
+
| 한국어 | [기능별 가이드](https://github.com/kim1124/comins-table/blob/main/docs/ko/README.md) | [Core 마이그레이션](https://github.com/kim1124/comins-table/blob/main/docs/ko/26-migration-0.2.0.md) |
|
|
75
|
+
| English | [Feature guides](https://github.com/kim1124/comins-table/blob/main/docs/user/README.md) | [Core migration](https://github.com/kim1124/comins-table/blob/main/docs/user/26-migration-0.2.0.md) |
|
|
330
76
|
|
|
331
|
-
The [
|
|
77
|
+
The [documentation index](https://github.com/kim1124/comins-table/blob/main/docs/README.md) links API usage, feature limits, and runnable examples. Browse the public website in [한국어](https://comins-website.vercel.app/ko/) or [English](https://comins-website.vercel.app/en/).
|
|
332
78
|
|
|
333
|
-
##
|
|
79
|
+
## Run the Playground locally
|
|
334
80
|
|
|
335
|
-
|
|
336
|
-
```tsx
|
|
337
|
-
const tableRef = useRef<CominsTableRef<UserRow>>(null);
|
|
81
|
+
Clone the repository to run the examples; the Playground is not installed into consumer applications.
|
|
338
82
|
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
tableRef.current?.setSortModel([
|
|
345
|
-
{ columnId: "team", direction: "asc" },
|
|
346
|
-
{ columnId: "age", direction: "desc" },
|
|
347
|
-
]);
|
|
348
|
-
tableRef.current?.clearSort();
|
|
349
|
-
tableRef.current?.setSelectedRow(0);
|
|
350
|
-
tableRef.current?.setSelectedRows([0, 1]);
|
|
351
|
-
tableRef.current?.getSelectedRows();
|
|
352
|
-
tableRef.current?.getSelectedCells();
|
|
353
|
-
tableRef.current?.getSelection();
|
|
354
|
-
// In a user-initiated handler; handle unavailable or denied clipboard access:
|
|
355
|
-
await tableRef.current?.copySelection("rows");
|
|
356
|
-
tableRef.current?.setMoveTargetRow(3, 1);
|
|
357
|
-
tableRef.current?.expand(["department-1", "team-1-1"]);
|
|
358
|
-
tableRef.current?.fold(["team-1-1"]);
|
|
359
|
-
tableRef.current?.expand(); // all Tree Grid branches
|
|
360
|
-
tableRef.current?.fold(); // all Tree Grid branches
|
|
83
|
+
```bash
|
|
84
|
+
git clone https://github.com/kim1124/comins-table.git
|
|
85
|
+
cd comins-table
|
|
86
|
+
npm ci
|
|
87
|
+
npm run dev
|
|
361
88
|
```
|
|
362
89
|
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
`getSelectedRows()` returns loaded selected business data in data order. `getSelectedCells()` returns `{ rowId, columnId, value }` for available selected Cells; ranges use projected display order. `getSelection()` copies the selection IDs and addresses, including Row IDs retained after Viewport cache eviction. Row objects and Cell values remain application-owned references.
|
|
366
|
-
|
|
367
|
-
## Playground
|
|
368
|
-
|
|
369
|
-
After the repository setup under Installation, the local Playground starts at [`/docs/getting-started`](http://127.0.0.1:4002/docs/getting-started). Key routes include [`/examples/selection-clipboard`](http://127.0.0.1:4002/examples/selection-clipboard), [`/examples/row-expand`](http://127.0.0.1:4002/examples/row-expand), [`/examples/row-grouping`](http://127.0.0.1:4002/examples/row-grouping), [`/examples/column-filtering`](http://127.0.0.1:4002/examples/column-filtering), [`/examples/column-pinning`](http://127.0.0.1:4002/examples/column-pinning), [`/examples/cross-table-drag`](http://127.0.0.1:4002/examples/cross-table-drag), [`/examples/summary-row`](http://127.0.0.1:4002/examples/summary-row), [`/examples/tree-grid`](http://127.0.0.1:4002/examples/tree-grid), [`/examples/component`](http://127.0.0.1:4002/examples/component), and [`/performance/virtualization`](http://127.0.0.1:4002/performance/virtualization).
|
|
90
|
+
Open [the Playground](http://127.0.0.1:4002/docs/getting-started). The [Playground guide](https://github.com/kim1124/comins-table/blob/main/docs/user/12-playground.md) lists examples and language controls.
|
|
370
91
|
|
|
371
|
-
##
|
|
372
|
-
|
|
373
|
-
Start with the [English Quick Start](https://github.com/kim1124/comins-table/blob/main/docs/user/01-quick-start.md), [documentation index](https://github.com/kim1124/comins-table/blob/main/docs/README.md), [English feature guides](https://github.com/kim1124/comins-table/blob/main/docs/user/README.md), or [Korean feature guides](https://github.com/kim1124/comins-table/blob/main/docs/ko/README.md). Use the [Design Contract](https://github.com/kim1124/comins-table/blob/main/DESIGN.md), [Componentization Guide](https://github.com/kim1124/comins-table/blob/main/docs/design/componentization.md), and [Canonical Feature Manifest](https://github.com/kim1124/comins-table/blob/main/docs/feature-manifest.json) for visual stability, extension ownership, complete feature status, and evidence mapping. Each category links the detailed usage contract, runnable Playground route, related features, and the matching guide in the other language.
|
|
374
|
-
|
|
375
|
-
Use the [source repository](https://github.com/kim1124/comins-table) for development context, review the [changelog](https://github.com/kim1124/comins-table/blob/main/CHANGELOG.md) for version history, and follow the [security policy](https://github.com/kim1124/comins-table/blob/main/SECURITY.md) for vulnerability reporting.
|
|
376
|
-
|
|
377
|
-
## Current Boundaries
|
|
92
|
+
## Version and support
|
|
378
93
|
|
|
379
|
-
|
|
94
|
+
**0.2.1** adds framework-neutral CSV import, Tree/Group export metadata, and React Tree node slots. The framework-neutral `comins-table/core` contract introduced in 0.2.0 remains compatible; React helpers and rendering types stay at `comins-table`, while `/clipboard` and `/selection` retain their React-state contracts. See the migration guides above and the [changelog](https://github.com/kim1124/comins-table/blob/main/CHANGELOG.md) for version history.
|
|
380
95
|
|
|
381
|
-
The
|
|
382
|
-
|
|
383
|
-
## Development
|
|
384
|
-
|
|
385
|
-
```bash
|
|
386
|
-
npm run lint
|
|
387
|
-
npm run test:run
|
|
388
|
-
npm run build
|
|
389
|
-
npm run test:e2e
|
|
390
|
-
npm run test:perf -- --workers=1
|
|
391
|
-
npm run test:consumer
|
|
392
|
-
npm run verify
|
|
393
|
-
npm run docs:readme-gif
|
|
394
|
-
```
|
|
96
|
+
The Table UI is client-only React; SSR and a Vue adapter are not currently supported. Chrome and Edge are the supported browser targets, with automated browser checks using Playwright Chromium. Firefox and Safari are outside the current support contract. Feature combinations and limits are documented in the corresponding guides.
|
|
395
97
|
|
|
396
|
-
|
|
98
|
+
The Table runtime makes no package-owned network requests and loads no remote assets, telemetry, or error reporting.
|
|
397
99
|
|
|
398
|
-
##
|
|
100
|
+
## License and support
|
|
399
101
|
|
|
400
|
-
|
|
102
|
+
[MIT](https://github.com/kim1124/comins-table/blob/main/LICENSE)
|
|
103
|
+
· [Issues](https://github.com/kim1124/comins-table/issues)
|
|
104
|
+
· [Report a security issue](https://github.com/kim1124/comins-table/blob/main/SECURITY.md)
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare function writeCominsClipboardText(text: string): Promise<void>;
|
|
2
|
+
export declare function readCominsClipboardEvent(data: Pick<DataTransfer, "types" | "getData">): string | null;
|
|
3
|
+
export declare function writeCominsClipboardEvent(data: Pick<DataTransfer, "setData">, text: string): void;
|
|
4
|
+
//# sourceMappingURL=clipboard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"clipboard.d.ts","sourceRoot":"","sources":["../../src/browser/clipboard.ts"],"names":[],"mappings":"AAAA,wBAAsB,wBAAwB,CAAC,IAAI,EAAE,MAAM,iBAG1D;AAED,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC,iBAErF;AAED,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,MAAM,QAE1F"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export type CominsElementMeasurement = {
|
|
2
|
+
element: Element;
|
|
3
|
+
height: number;
|
|
4
|
+
rectHeight: number;
|
|
5
|
+
width: number;
|
|
6
|
+
};
|
|
7
|
+
export declare function measureCominsElement(element: Element, entry?: ResizeObserverEntry): CominsElementMeasurement;
|
|
8
|
+
/** Owns DOM targets only; adapters map measurements to rows and flush a batch once. */
|
|
9
|
+
export declare function createMeasurementObserver(options: {
|
|
10
|
+
onMeasure: (measurement: CominsElementMeasurement) => void;
|
|
11
|
+
onBatchComplete?: () => void;
|
|
12
|
+
}): {
|
|
13
|
+
observe(element: Element): void;
|
|
14
|
+
unobserve(element: Element): void;
|
|
15
|
+
dispose(): void;
|
|
16
|
+
};
|
|
17
|
+
export declare function hasCominsResizeObserver(): boolean;
|
|
18
|
+
export declare function observeCominsViewport(element: HTMLElement, onMeasure: (value: {
|
|
19
|
+
height: number;
|
|
20
|
+
width: number;
|
|
21
|
+
scrollWidth: number;
|
|
22
|
+
outerWidth: number;
|
|
23
|
+
viewportWidth: number;
|
|
24
|
+
}) => void): () => void;
|
|
25
|
+
export declare function observeCominsFontChanges(onChange: () => void): () => void;
|
|
26
|
+
export declare function getCominsElementRect(element: Element): DOMRect;
|
|
27
|
+
export declare function getCominsElementRect(element: Element | null | undefined): DOMRect | undefined;
|
|
28
|
+
//# sourceMappingURL=measurements.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"measurements.d.ts","sourceRoot":"","sources":["../../src/browser/measurements.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,mBAAmB,GAAG,wBAAwB,CAI5G;AAED,uFAAuF;AACvF,wBAAgB,yBAAyB,CAAC,OAAO,EAAE;IACjD,SAAS,EAAE,CAAC,WAAW,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAC3D,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;IAUG,OAAO,UAAU,OAAO;IAoBxB,SAAS,UAAU,OAAO;IAK1B,OAAO;EAOV;AAED,wBAAgB,uBAAuB,YAAoD;AAE3F,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC,KAAK,EAAE;IAC7E,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAC;CAC/F,KAAK,IAAI,cAOT;AAED,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,MAAM,IAAI,cAI5D;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC;AAChE,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
export declare function captureCominsPointer(element: Pick<Element, "setPointerCapture" | "releasePointerCapture">, pointerId: number): () => void;
|
|
2
|
+
export declare function registerCominsPointerListeners(input: {
|
|
3
|
+
move: (event: PointerEvent) => void;
|
|
4
|
+
up: (event: PointerEvent) => void;
|
|
5
|
+
cancel: (event: PointerEvent) => void;
|
|
6
|
+
blur: () => void;
|
|
7
|
+
key: (event: KeyboardEvent) => void;
|
|
8
|
+
keyCapture?: boolean;
|
|
9
|
+
}): () => void;
|
|
10
|
+
export declare function startCominsPointerFrames(onFrame: FrameRequestCallback, host?: Pick<Window, "requestAnimationFrame" | "cancelAnimationFrame">): () => void;
|
|
11
|
+
export declare function focusCominsPointerTarget(element: HTMLElement | null): void;
|
|
12
|
+
export declare function applyCominsDragScroll(viewport: HTMLElement, input: {
|
|
13
|
+
top: number;
|
|
14
|
+
bottom: number;
|
|
15
|
+
clientY: number;
|
|
16
|
+
deltaMs: number;
|
|
17
|
+
onlyIfChanged?: boolean;
|
|
18
|
+
enabled?: boolean;
|
|
19
|
+
}): void;
|
|
20
|
+
export declare function isCominsNativeEditor(target: EventTarget | null): boolean;
|
|
21
|
+
export declare const createCrossTableAutoScroll: (resolveTarget: (clientX: number, clientY: number) => void) => {
|
|
22
|
+
stop: () => void;
|
|
23
|
+
update: (nextViewport: HTMLElement | null, nextClientX: number, nextClientY: number, valid: boolean) => void;
|
|
24
|
+
};
|
|
25
|
+
//# sourceMappingURL=pointer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pointer.d.ts","sourceRoot":"","sources":["../../src/browser/pointer.ts"],"names":[],"mappings":"AAEA,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,mBAAmB,GAAG,uBAAuB,CAAC,EAAE,SAAS,EAAE,MAAM,cAQ5H;AACD,wBAAgB,8BAA8B,CAAC,KAAK,EAAE;IACpD,IAAI,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAAC,EAAE,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAAC,MAAM,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9G,IAAI,EAAE,MAAM,IAAI,CAAC;IAAC,GAAG,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;CAC7E,cAQA;AACD,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,oBAAoB,EAAE,IAAI,GAAE,IAAI,CAAC,MAAM,EAAE,uBAAuB,GAAG,sBAAsB,CAAU,cASpJ;AACD,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,QAEnE;AACD,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,QAGhL;AACD,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,WAE9D;AAED,eAAO,MAAM,0BAA0B,kBACpB,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI;;2BAsDzC,WAAW,GAAG,IAAI,eACnB,MAAM,eACN,MAAM,SACZ,OAAO;CAqCjB,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare function setCominsScrollTop(element: HTMLElement, top: number): void;
|
|
2
|
+
export declare function setCominsScrollLeft(element: HTMLElement, left: number): void;
|
|
3
|
+
export declare function scrollCominsRowIntoView(viewport: HTMLElement, index: number): void;
|
|
4
|
+
export declare function focusCominsElement(element: HTMLElement | null | undefined, options?: FocusOptions): void;
|
|
5
|
+
export declare function createCominsDetailFocusRestorer(): {
|
|
6
|
+
restore(element: HTMLElement | null, getToggle: () => HTMLButtonElement | null): void;
|
|
7
|
+
dispose(): void;
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=scroll.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../src/browser/scroll.ts"],"names":[],"mappings":"AAAA,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,QAEnE;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,QAErE;AAED,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,QAE3E;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,EAAE,OAAO,CAAC,EAAE,YAAY,QAEjG;AAED,wBAAgB,+BAA+B;IAG3C,OAAO,UAAU,WAAW,GAAG,IAAI,aAAa,MAAM,iBAAiB,GAAG,IAAI;IAW9E,OAAO;EAKV"}
|