comins-table 0.1.7 → 0.1.9
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 +19 -0
- package/DESIGN.md +132 -0
- package/README.md +61 -11
- package/dist/clipboard.js +2 -2
- package/dist/column-pinning.d.ts +25 -0
- package/dist/column-pinning.d.ts.map +1 -0
- package/dist/core-D01wEe-7.js +897 -0
- package/dist/core-D01wEe-7.js.map +1 -0
- package/dist/core.d.ts +20 -2
- package/dist/core.d.ts.map +1 -1
- package/dist/core.js +2 -786
- package/dist/drag-autoscroll.d.ts +17 -0
- package/dist/drag-autoscroll.d.ts.map +1 -0
- package/dist/index.d.ts +57 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2314 -1483
- package/dist/index.js.map +1 -1
- package/dist/selection.d.ts +1 -1
- package/dist/selection.d.ts.map +1 -1
- package/dist/selection.js +2 -2
- package/dist/table-transfer.d.ts +153 -0
- package/dist/table-transfer.d.ts.map +1 -0
- package/dist/tooltip.d.ts +14 -0
- package/dist/tooltip.d.ts.map +1 -0
- package/package.json +6 -3
- package/styles.css +209 -6
- package/dist/core.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
## Unreleased
|
|
4
4
|
|
|
5
|
+
## 0.1.9 - 2026-08-31
|
|
6
|
+
|
|
7
|
+
- Added the packaged `DESIGN.md`, componentization guidance, a canonical Feature Manifest, full public-export and CSS-token classification, structured feature restrictions, and annotated/typechecked documentation examples.
|
|
8
|
+
- Added Ctrl/Cmd discontiguous Cell selection while preserving the active Cell and rectangular range contracts, plus Row Drag lifecycle callbacks for before-start cancellation, semantic target changes, and final moved/cancelled/rejected results.
|
|
9
|
+
- Preserved the last known Column order when dynamic Header Group Columns are hidden and restored, kept Row Group content visible during horizontally pinned scrolling, and connected Header Group and Rows Playground drag examples to controlled data and lifecycle feedback.
|
|
10
|
+
- Standardized Playground toggle contrast, added deterministic collapse-all-Details coverage, and retained the existing Summary Row visible-column `colSpan` contract and example.
|
|
11
|
+
- Added localized event and method reference tables above related Playground examples.
|
|
12
|
+
- Clarified the browser compatibility contract versus Chromium-only automated evidence and expanded documentation/package gates so unclassified exports, tokens, examples, restrictions, or missing packaged design guidance fail closed.
|
|
13
|
+
|
|
14
|
+
## 0.1.8 - 2026-08-28
|
|
15
|
+
|
|
16
|
+
- Added responsive left/right Column Pinning for leaf Columns and atomic Header Groups, including persisted pin intent, position locking, resize-aware sticky offsets, wider-side inner-block demotion with a 48px center budget, opaque Header/Body/Skeleton/Summary surfaces, and Summary `colSpan` zone splitting while keeping full-width structural Rows non-sticky.
|
|
17
|
+
- Added application-created Cross-Table Drag Coordinators for flat and grouped Rows and complete Group bundles, target-owned permission and reject/overwrite conflict callbacks, persistent empty Groups, immutable atomic source/target results, destination focus recovery, duplicate registration fail-closed behavior, and target-only vertical edge auto-scroll.
|
|
18
|
+
- Added matching Korean/English Playground routes and public guides for Column Pinning and Cross-Table Row/Group Drag, including model ownership, supported combinations, destructive overwrite semantics, layout persistence, and responsive behavior.
|
|
19
|
+
- Added non-blocking pointer-adjacent `Duplicate ID` rejection feedback with a reusable internal Tooltip Surface, restrained target outline, viewport collision handling, accessible live status, renderer/duration/disable controls, CSS theme tokens, and structured `onTransferRejected` notifications.
|
|
20
|
+
- Corrected the Column Pinning Playground to guarantee observable horizontal overflow, and capped direct resize of effective pinned Columns and Header Groups at the 48px center budget so the active pinned surface no longer demotes beneath scrolling content.
|
|
21
|
+
- Moved the single native horizontal scrollbar to the bottom of the complete Table, after Summary when configured, while preserving Body wheel input, vertical virtualization, synchronized Header/Body/Summary scrolling, and a visible final Row boundary when native scrollbar chrome auto-hides.
|
|
22
|
+
- Corrected the bottom scrollbar range to use the Body's actual horizontal viewport width across native scrollbar layouts, so direct rail input reaches the final horizontal content without desynchronizing Header, Body, or Summary.
|
|
23
|
+
|
|
5
24
|
## 0.1.7 - 2026-08-27
|
|
6
25
|
|
|
7
26
|
- Added controlled client-side Column Filtering with text, number, UTC calendar-day date, and boolean operators; application-owned Filter/open-popover state; semantic Header controls; filtered sorting, pagination, virtualization, Summary, and Row Grouping projection; explicit Group preservation; Row Drag and remote/Tree exclusions; and matching Korean/English Playground documentation.
|
package/DESIGN.md
ADDED
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
# Comins Table Design Contract
|
|
2
|
+
|
|
3
|
+
Comins Table uses a restrained, data-first visual language. The application owns business meaning and data; the Table owns structural clarity, interaction feedback, focus visibility, and consistent state treatment. This document describes the public styling contract shipped with the package stylesheet.
|
|
4
|
+
|
|
5
|
+
## Principles
|
|
6
|
+
|
|
7
|
+
- Preserve density without hiding structure: borders, pinned boundaries, Group Rows, Details, and Summary remain distinguishable.
|
|
8
|
+
- Use color to communicate state, not decoration. Selection and valid actions use the accent family; invalid and rejected drops use the danger family.
|
|
9
|
+
- Keep focus visible independently from hover and selection.
|
|
10
|
+
- Keep application overrides local. Importing `comins-table/styles.css` does not install a global reset.
|
|
11
|
+
- Prefer container-driven behavior. Horizontal overflow, responsive pin demotion, and compact density respond to the Table container rather than the browser viewport.
|
|
12
|
+
|
|
13
|
+
The default stylesheet targets light surfaces. The built-in dark theme supplies its own values. Applications that replace surface tokens are responsible for maintaining readable foreground, border, focus, disabled, and drag-feedback contrast.
|
|
14
|
+
|
|
15
|
+
## Foundations
|
|
16
|
+
|
|
17
|
+
Typography inherits the application font. Default text is compact, with Header and control labels using stronger weight rather than larger type. Spacing is based on Cell padding and Row/Header height tokens. Borders are one CSS pixel except for focus, selection, and drop indicators. The outer frame uses a small radius; internal Rows remain square so adjacent borders align.
|
|
18
|
+
|
|
19
|
+
Motion is limited to short color, opacity, position, and resize feedback. Motion must not delay a model update or hide the final state. Overlays, menus, and Tooltip surfaces render above pinned content; application portals remain application-owned unless a documented Table component explicitly owns the portal.
|
|
20
|
+
|
|
21
|
+
## Surfaces and states
|
|
22
|
+
|
|
23
|
+
| Surface | Contract |
|
|
24
|
+
| --- | --- |
|
|
25
|
+
| Frame | Owns the outer border, radius, background, and the final horizontal scrollbar. |
|
|
26
|
+
| Header | Uses an accent surface by default and retains visible focus, resize, sort, move, and pinned boundaries. |
|
|
27
|
+
| Body Cell | Keeps grid borders and application Row backgrounds visible beneath selection indicators. |
|
|
28
|
+
| Group Row | Uses one semantic full-width Cell. Its content remains visible at the Body viewport start during horizontal scrolling. |
|
|
29
|
+
| Detail Row | Follows its owner Row and remains outside Cell selection and Clipboard addressing. |
|
|
30
|
+
| Summary | Uses the same Column geometry and pin zones as Header and Body and remains above the final scrollbar. |
|
|
31
|
+
| Tooltip | Is non-blocking drag feedback with `pointer-events: none`; it does not replace application Toasts or error handling. |
|
|
32
|
+
|
|
33
|
+
Rest, hover, active, `focus-visible`, selected, disabled, loading, invalid, drag-source, valid-drop, and rejected-drop states must remain visually distinct. A custom renderer may change inner content but must not remove the owning semantic Cell, focus behavior, disabled state, or interaction feedback unless the corresponding public contract explicitly delegates those responsibilities.
|
|
34
|
+
|
|
35
|
+
## Density and responsive behavior
|
|
36
|
+
|
|
37
|
+
`theme.density` selects the built-in Row and Header measurements. Applications may override the documented height and padding tokens, but fixed-height virtualization still requires the resolved `rowHeight` contract to match the logical Row height. Pinned zones preserve a center-content budget and may demote inner pinned blocks when the container becomes too narrow; this is a rendering decision and does not change persisted pin intent.
|
|
38
|
+
|
|
39
|
+
## CSS token stability
|
|
40
|
+
|
|
41
|
+
The canonical machine-readable inventory is `docs/feature-manifest.json`. Stability means:
|
|
42
|
+
|
|
43
|
+
- `public-stable`: supported theme input. Removal or incompatible meaning requires a breaking release.
|
|
44
|
+
- `public-experimental`: available for advanced styling, but name or behavior may change in a minor release with CHANGELOG notice.
|
|
45
|
+
- `internal`: implementation plumbing. Do not override it in application styles.
|
|
46
|
+
|
|
47
|
+
### Public stable
|
|
48
|
+
|
|
49
|
+
```text
|
|
50
|
+
--comins-table-accent
|
|
51
|
+
--comins-table-accent-foreground
|
|
52
|
+
--comins-table-accent-soft
|
|
53
|
+
--comins-table-background
|
|
54
|
+
--comins-table-border
|
|
55
|
+
--comins-table-cell-border
|
|
56
|
+
--comins-table-cell-height
|
|
57
|
+
--comins-table-focus
|
|
58
|
+
--comins-table-foreground
|
|
59
|
+
--comins-table-group-row-background
|
|
60
|
+
--comins-table-group-row-color
|
|
61
|
+
--comins-table-header-background
|
|
62
|
+
--comins-table-header-border
|
|
63
|
+
--comins-table-header-color
|
|
64
|
+
--comins-table-header-split-border
|
|
65
|
+
--comins-table-range-background
|
|
66
|
+
--comins-table-row-border
|
|
67
|
+
--comins-table-row-disabled-background
|
|
68
|
+
--comins-table-row-disabled-color
|
|
69
|
+
--comins-table-row-even-background
|
|
70
|
+
--comins-table-row-height
|
|
71
|
+
--comins-table-row-odd-background
|
|
72
|
+
--comins-table-row-selected-background
|
|
73
|
+
--comins-table-scrollbar-corner
|
|
74
|
+
--comins-table-scrollbar-thumb
|
|
75
|
+
--comins-table-scrollbar-track
|
|
76
|
+
--comins-table-tooltip-danger-background
|
|
77
|
+
--comins-table-tooltip-danger-border
|
|
78
|
+
--comins-table-tooltip-danger-color
|
|
79
|
+
--comins-table-tooltip-danger-muted
|
|
80
|
+
--comins-table-tooltip-shadow
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### Public experimental
|
|
84
|
+
|
|
85
|
+
```text
|
|
86
|
+
--comins-table-accent-strong
|
|
87
|
+
--comins-table-cell-background
|
|
88
|
+
--comins-table-cell-color
|
|
89
|
+
--comins-table-cell-padding-x
|
|
90
|
+
--comins-table-cell-padding-y
|
|
91
|
+
--comins-table-component-accent
|
|
92
|
+
--comins-table-component-accent-foreground
|
|
93
|
+
--comins-table-component-accent-soft
|
|
94
|
+
--comins-table-component-accent-strong
|
|
95
|
+
--comins-table-component-border
|
|
96
|
+
--comins-table-component-button-foreground
|
|
97
|
+
--comins-table-component-focus
|
|
98
|
+
--comins-table-component-foreground
|
|
99
|
+
--comins-table-component-muted
|
|
100
|
+
--comins-table-component-surface
|
|
101
|
+
--comins-table-component-surface-muted
|
|
102
|
+
--comins-table-component-virtual-list-height
|
|
103
|
+
--comins-table-detail-background
|
|
104
|
+
--comins-table-detail-border
|
|
105
|
+
--comins-table-detail-padding
|
|
106
|
+
--comins-table-drop-invalid
|
|
107
|
+
--comins-table-drop-invalid-background
|
|
108
|
+
--comins-table-drop-marker
|
|
109
|
+
--comins-table-drop-valid
|
|
110
|
+
--comins-table-drop-valid-background
|
|
111
|
+
--comins-table-header-height
|
|
112
|
+
--comins-table-muted
|
|
113
|
+
--comins-table-resize-handle
|
|
114
|
+
--comins-table-selected-range-background
|
|
115
|
+
--comins-table-skeleton-background
|
|
116
|
+
--comins-table-skeleton-highlight
|
|
117
|
+
--comins-table-surface
|
|
118
|
+
--comins-table-surface-muted
|
|
119
|
+
--comins-table-virtual-list-item-height
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
### Internal
|
|
123
|
+
|
|
124
|
+
```text
|
|
125
|
+
--comins-table-row-custom-background
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
Stable tokens inherit through the Table root and use the current theme value as their fallback. Experimental component and structural tokens fall back to the related stable accent, surface, foreground, border, or resolved Row geometry. Internal tokens have no compatibility guarantee.
|
|
129
|
+
|
|
130
|
+
## Extension choice
|
|
131
|
+
|
|
132
|
+
Use a formatter for value presentation, a renderer for typed React content, a built-in component when the Table must own interaction isolation and accessibility, a CSS token for reusable visual policy, and `className`/`style` for one application instance or business state. See the [componentization guide](https://github.com/kim1124/comins-table/blob/main/docs/design/componentization.md) for the full decision contract.
|
package/README.md
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
# Comins Table
|
|
2
2
|
|
|
3
|
-
Comins Table is a controlled React data table for data-heavy application screens
|
|
3
|
+
Comins Table is a controlled React data table for data-heavy application screens. Applications keep ownership of their data and business models while the Table provides virtualized rendering, structured Rows, configurable Headers, precise selection, and customizable cells.
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/comins-table)
|
|
6
6
|
[](https://www.npmjs.com/package/comins-table)
|
|
7
7
|
[](https://github.com/kim1124/comins-table/actions/workflows/verify.yml)
|
|
8
8
|
[](LICENSE)
|
|
9
9
|
|
|
10
|
-

|
|
11
11
|
|
|
12
12
|
## Why Comins Table
|
|
13
13
|
|
|
@@ -15,12 +15,26 @@ Comins Table is a controlled React data table for data-heavy application screens
|
|
|
15
15
|
| --- | --- |
|
|
16
16
|
| Controlled data | Application-owned `data`, CRUD helpers, `onChangeData`, pagination, sorting, and layout callbacks |
|
|
17
17
|
| Rendering and scale | Fixed-height virtualization with a tested 100,000-row route, infinite scroll, append-mode lazy loading, loading, and empty states |
|
|
18
|
-
| Interaction | Accessible single and opt-in multi-column Header sorting, controlled Column Filtering, resize, 6-pixel horizontal column reorder
|
|
18
|
+
| 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 |
|
|
19
19
|
| Data structure | Controlled client-side flat Row Grouping, flat Row Expand Details, Summary Row aggregation, and controlled Tree Grid expand/fold |
|
|
20
20
|
| Custom UI | Cell/Header renderers, built-in button/input/checkbox/radio/select/toggle/progress/menu/Virtual List components, and CSS-variable themes |
|
|
21
21
|
|
|
22
22
|
Comins Table is standalone and does not wrap another table or grid implementation.
|
|
23
23
|
|
|
24
|
+
### Feature catalog
|
|
25
|
+
|
|
26
|
+
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.
|
|
27
|
+
|
|
28
|
+
| Area | Shipped capabilities | Live examples | Guides |
|
|
29
|
+
| --- | --- | --- | --- |
|
|
30
|
+
| 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) |
|
|
31
|
+
| 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) |
|
|
32
|
+
| 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) |
|
|
33
|
+
| 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) |
|
|
34
|
+
| Loading and performance | Pagination, fixed-height virtualization, Infinite Scroll, and Lazy Load | [`Pagination`](http://127.0.0.1:4002/performance/pagination), [`Virtualization`](http://127.0.0.1:4002/performance/virtualization) | [Pagination](https://github.com/kim1124/comins-table/blob/main/docs/user/05-pagination.md), [Virtualization](https://github.com/kim1124/comins-table/blob/main/docs/user/11-virtualization.md), [Lazy Load](https://github.com/kim1124/comins-table/blob/main/docs/user/16-lazy-load.md) |
|
|
35
|
+
| 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) |
|
|
36
|
+
| 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) |
|
|
37
|
+
|
|
24
38
|
## Support
|
|
25
39
|
|
|
26
40
|
| Surface | Support |
|
|
@@ -34,12 +48,15 @@ Comins Table is standalone and does not wrap another table or grid implementatio
|
|
|
34
48
|
| SSR | Client boundary required; server rendering is not currently supported |
|
|
35
49
|
| Runtime network behavior | No package-owned requests, remote assets, telemetry, or error reporting |
|
|
36
50
|
|
|
51
|
+
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.
|
|
52
|
+
|
|
37
53
|
## Installation
|
|
38
54
|
|
|
39
55
|
```bash
|
|
40
56
|
npm install comins-table react react-dom
|
|
41
57
|
```
|
|
42
58
|
|
|
59
|
+
<!-- comins-doc-example: fragment -->
|
|
43
60
|
```tsx
|
|
44
61
|
import { CominsTable, type CominsTableColumn } from "comins-table";
|
|
45
62
|
import "comins-table/styles.css";
|
|
@@ -47,8 +64,22 @@ import "comins-table/styles.css";
|
|
|
47
64
|
|
|
48
65
|
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.
|
|
49
66
|
|
|
67
|
+
### Run the Playground locally
|
|
68
|
+
|
|
69
|
+
The Playground is a repository development server, not a command installed into a consumer application.
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
git clone https://github.com/kim1124/comins-table.git
|
|
73
|
+
cd comins-table
|
|
74
|
+
npm ci
|
|
75
|
+
npm run dev
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
Open [`http://127.0.0.1:4002/docs/getting-started`](http://127.0.0.1:4002/docs/getting-started).
|
|
79
|
+
|
|
50
80
|
## Quick Start
|
|
51
81
|
|
|
82
|
+
<!-- comins-doc-example: fragment -->
|
|
52
83
|
```tsx
|
|
53
84
|
import { useState } from "react";
|
|
54
85
|
import { CominsTable, type CominsTableColumn } from "comins-table";
|
|
@@ -107,6 +138,7 @@ Where restoration is supported, use the supported Ref API: `setSelectedRow` and
|
|
|
107
138
|
|
|
108
139
|
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.
|
|
109
140
|
|
|
141
|
+
<!-- comins-doc-example: fragment -->
|
|
110
142
|
```tsx
|
|
111
143
|
<CominsTable
|
|
112
144
|
columns={columns}
|
|
@@ -136,16 +168,25 @@ A left-button mouse interaction activates column movement after a 6-pixel horizo
|
|
|
136
168
|
|
|
137
169
|
Use `getColumnLayout()` and `setColumnLayout()` through the Ref API, or `serializeCominsColumnLayout()` and `applyCominsColumnLayout()` from `comins-table/core`, to persist and restore order, widths, and visibility.
|
|
138
170
|
|
|
171
|
+
### Column Pinning
|
|
172
|
+
|
|
173
|
+
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).
|
|
174
|
+
|
|
175
|
+
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.
|
|
176
|
+
|
|
139
177
|
## Rows, Cells, And Selection
|
|
140
178
|
|
|
141
179
|
Rows expose click, double-click, keyboard, and context-menu callbacks. Cells expose the corresponding Cell callbacks plus `format`, `renderer`, and props hooks.
|
|
142
180
|
|
|
143
|
-
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, `Ctrl`/`Cmd`
|
|
181
|
+
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` remains the active Clipboard address while `cells` records the discontiguous set; 0.1.9 does not copy that set as a Clipboard matrix. 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.
|
|
182
|
+
|
|
183
|
+
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.
|
|
144
184
|
|
|
145
185
|
### Row Expand
|
|
146
186
|
|
|
147
187
|
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.
|
|
148
188
|
|
|
189
|
+
<!-- comins-doc-example: fragment -->
|
|
149
190
|
```tsx
|
|
150
191
|
const [expandedRowIds, setExpandedRowIds] = useState<readonly string[]>([]);
|
|
151
192
|
|
|
@@ -174,6 +215,16 @@ Each synthetic Group Row is one full-width colspan Cell with a distinct neutral-
|
|
|
174
215
|
|
|
175
216
|
Synthetic Group Rows never masquerade as `TData`: ordinary Row/Cell callbacks, selection, Clipboard, Cell renderers, formatters, and Row Detail remain leaf-only. Row Grouping supports fixed-height virtualization and grouped leaf Row Detail, but cannot be combined with pagination, infinite/lazy loading, or Tree Grid. Multi-depth grouping remains deferred.
|
|
176
217
|
|
|
218
|
+
## Cross-Table Row And Group Drag
|
|
219
|
+
|
|
220
|
+
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.
|
|
221
|
+
|
|
222
|
+
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.
|
|
223
|
+
|
|
224
|
+
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.
|
|
225
|
+
|
|
226
|
+
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.
|
|
227
|
+
|
|
177
228
|
## Column Filtering
|
|
178
229
|
|
|
179
230
|
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.
|
|
@@ -222,8 +273,11 @@ The package stylesheet exposes module-local `--comins-table-*` CSS variables and
|
|
|
222
273
|
|
|
223
274
|
Use `theme.className`, `theme.style`, Row and Group Row class/style hooks, Cell props, and renderer output for application-specific presentation. Keep virtualized `rowHeight` aligned with `--comins-table-row-height` when overriding height tokens.
|
|
224
275
|
|
|
276
|
+
The [Design Contract](https://github.com/kim1124/comins-table/blob/main/DESIGN.md) classifies every Table token as public stable, public experimental, or internal. The [Componentization Guide](https://github.com/kim1124/comins-table/blob/main/docs/design/componentization.md) defines when to use a formatter, renderer, built-in component, future typed slot, token, or instance override.
|
|
277
|
+
|
|
225
278
|
## Ref API
|
|
226
279
|
|
|
280
|
+
<!-- comins-doc-example: fragment -->
|
|
227
281
|
```tsx
|
|
228
282
|
const tableRef = useRef<CominsTableRef<UserRow>>(null);
|
|
229
283
|
|
|
@@ -250,15 +304,11 @@ tableRef.current?.fold(); // all Tree Grid branches
|
|
|
250
304
|
|
|
251
305
|
## Playground
|
|
252
306
|
|
|
253
|
-
|
|
254
|
-
npm run dev
|
|
255
|
-
```
|
|
256
|
-
|
|
257
|
-
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/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).
|
|
307
|
+
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).
|
|
258
308
|
|
|
259
309
|
## Documentation
|
|
260
310
|
|
|
261
|
-
Start with the [English Quick Start](https://github.com/kim1124/comins-table/blob/main/docs/user/01-quick-start.md),
|
|
311
|
+
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.
|
|
262
312
|
|
|
263
313
|
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.
|
|
264
314
|
|
|
@@ -281,7 +331,7 @@ npm run verify
|
|
|
281
331
|
npm run docs:readme-gif
|
|
282
332
|
```
|
|
283
333
|
|
|
284
|
-
`npm run docs:readme-gif` is a maintainer command that captures the real hidden Playground
|
|
334
|
+
`npm run docs:readme-gif` is a maintainer command that captures the real hidden Playground fixtures and regenerates the overview animation plus four detailed feature animations.
|
|
285
335
|
|
|
286
336
|
## Trusted Publishing
|
|
287
337
|
|
package/dist/clipboard.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export {
|
|
1
|
+
import { M as e, N as t, P as n, c as r, o as i, p as a, s as o } from "./core-D01wEe-7.js";
|
|
2
|
+
export { i as copyCominsCell, o as copyCominsCellRange, r as copyCominsRow, a as fillCominsCellRange, e as pasteCominsCell, t as pasteCominsCellRange, n as pasteCominsRow };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
export type CominsColumnPinned = "left" | "right";
|
|
2
|
+
export type CominsColumnPinningBlock = {
|
|
3
|
+
columnIds: readonly string[];
|
|
4
|
+
columnWidths: readonly number[];
|
|
5
|
+
id: string;
|
|
6
|
+
pinned?: CominsColumnPinned;
|
|
7
|
+
};
|
|
8
|
+
export type CominsResolvedPinnedColumn = {
|
|
9
|
+
boundary?: boolean;
|
|
10
|
+
offset?: number;
|
|
11
|
+
pinned?: CominsColumnPinned;
|
|
12
|
+
};
|
|
13
|
+
export type CominsResolvedColumnPinning = {
|
|
14
|
+
columns: ReadonlyMap<string, CominsResolvedPinnedColumn>;
|
|
15
|
+
orderedColumnIds: readonly string[];
|
|
16
|
+
};
|
|
17
|
+
export type CominsColumnPinningSpanFragment = CominsResolvedPinnedColumn & {
|
|
18
|
+
colSpan: number;
|
|
19
|
+
startIndex: number;
|
|
20
|
+
};
|
|
21
|
+
export declare function normalizeCominsColumnPinned(value: unknown): CominsColumnPinned | undefined;
|
|
22
|
+
export declare function resolveCominsColumnPinning(blocks: readonly CominsColumnPinningBlock[], containerWidth: number): CominsResolvedColumnPinning;
|
|
23
|
+
export declare function getCominsPinnedBlockResizeMaxWidth(blocks: readonly CominsColumnPinningBlock[], resolved: CominsResolvedColumnPinning, blockId: string, containerWidth: number, minimumCenterWidth?: number): number | undefined;
|
|
24
|
+
export declare function getCominsColumnPinningSpanFragments(resolved: CominsResolvedColumnPinning, startIndex: number, colSpan: number): CominsColumnPinningSpanFragment[];
|
|
25
|
+
//# sourceMappingURL=column-pinning.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"column-pinning.d.ts","sourceRoot":"","sources":["../src/column-pinning.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,CAAC;AAElD,MAAM,MAAM,wBAAwB,GAAG;IACrC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B,YAAY,EAAE,SAAS,MAAM,EAAE,CAAC;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IACxC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,0BAA0B,CAAC,CAAC;IACzD,gBAAgB,EAAE,SAAS,MAAM,EAAE,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,0BAA0B,GAAG;IACzE,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,OAAO,GAAG,kBAAkB,GAAG,SAAS,CAE1F;AAED,wBAAgB,0BAA0B,CACxC,MAAM,EAAE,SAAS,wBAAwB,EAAE,EAC3C,cAAc,EAAE,MAAM,GACrB,2BAA2B,CAoF7B;AAED,wBAAgB,kCAAkC,CAChD,MAAM,EAAE,SAAS,wBAAwB,EAAE,EAC3C,QAAQ,EAAE,2BAA2B,EACrC,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,MAAM,EACtB,kBAAkB,SAAK,GACtB,MAAM,GAAG,SAAS,CA+BpB;AAED,wBAAgB,mCAAmC,CACjD,QAAQ,EAAE,2BAA2B,EACrC,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,MAAM,GACd,+BAA+B,EAAE,CA+BnC"}
|