comins-table 0.1.1 → 0.1.3
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 +15 -0
- package/README.md +114 -107
- package/dist/column-pointer.d.ts +9 -0
- package/dist/column-pointer.d.ts.map +1 -0
- package/dist/component-renderer.d.ts +8 -2
- package/dist/component-renderer.d.ts.map +1 -1
- package/dist/core.d.ts +46 -46
- package/dist/core.d.ts.map +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +811 -700
- package/dist/index.js.map +1 -1
- package/dist/summary.d.ts +17 -1
- package/dist/summary.d.ts.map +1 -1
- package/dist/tree.d.ts +5 -2
- package/dist/tree.d.ts.map +1 -1
- package/package.json +13 -8
- package/styles.css +16 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# Comins Table
|
|
2
2
|
|
|
3
|
+
## Unreleased
|
|
4
|
+
|
|
5
|
+
## 0.1.3 - 2026-07-22
|
|
6
|
+
|
|
7
|
+
- Added 6-pixel mouse Header reorder activation with source placeholder, ghost, target marker, vertical-intent cancellation, and preserved non-mouse long-press compatibility.
|
|
8
|
+
- Connected Virtual List Item and More activation to owning Row selection, preserved More keyboard focus, and suppressed invalid column-layout callback emissions.
|
|
9
|
+
- Added a consumer-first README and real-product animated preview covering sorting, column reorder, Virtual List selection, Summary Row, and Tree Grid interaction.
|
|
10
|
+
- Expanded focused browser and documentation regression coverage for the shipped interaction and README contracts.
|
|
11
|
+
|
|
12
|
+
## 0.1.2 - 2026-07-22
|
|
13
|
+
|
|
14
|
+
- Extended Summary Row with descriptor-based `colSpan`, aggregate output `format`, and row or cell `className` and `style`.
|
|
15
|
+
- Added Tree Grid `defaultExpandAll` and array-based `CominsTableRef.expand(nodeIds?)` / `fold(nodeIds?)` controls.
|
|
16
|
+
- Added dedicated Summary Row and expanded Tree Grid Playground examples, including component and renderer cells plus exactly 10000 virtualized nodes.
|
|
17
|
+
|
|
3
18
|
## 0.1.1
|
|
4
19
|
|
|
5
20
|
- Prepared a privacy-safe metadata release candidate pending npm account email verification.
|
package/README.md
CHANGED
|
@@ -1,14 +1,38 @@
|
|
|
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, with virtualized rendering, precise selection, movable headers, Summary Row aggregation, Tree Grid data, built-in component cells, and framework-independent core helpers.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://www.npmjs.com/package/comins-table)
|
|
6
|
+
[](https://www.npmjs.com/package/comins-table)
|
|
7
|
+
[](https://github.com/kim1124/comins-table/actions/workflows/verify.yml)
|
|
8
|
+
[](LICENSE)
|
|
6
9
|
|
|
7
|
-
|
|
10
|
+

|
|
8
11
|
|
|
9
|
-
Comins Table
|
|
12
|
+
## Why Comins Table
|
|
10
13
|
|
|
11
|
-
|
|
14
|
+
| Area | Shipped capabilities |
|
|
15
|
+
| --- | --- |
|
|
16
|
+
| Controlled data | Application-owned `data`, CRUD helpers, `onChangeData`, pagination, sorting, and layout callbacks |
|
|
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 Header sorting, resize, 6-pixel horizontal column reorder with source placeholder, Row and Cell selection, ranges, clipboard, and context menu callbacks |
|
|
19
|
+
| Data structure | Summary Row count/sum/avg/min/max/custom aggregation, `colSpan`, `format`, style/class hooks, and controlled Tree Grid expand/fold |
|
|
20
|
+
| Custom UI | Cell/Header renderers, built-in button/input/checkbox/radio/select/toggle/progress/menu/Virtual List components, and CSS-variable themes |
|
|
21
|
+
|
|
22
|
+
Comins Table is standalone and does not wrap another table or grid implementation.
|
|
23
|
+
|
|
24
|
+
## Support
|
|
25
|
+
|
|
26
|
+
| Surface | Support |
|
|
27
|
+
| --- | --- |
|
|
28
|
+
| React | `>=18.0.0 <20.0.0` |
|
|
29
|
+
| React DOM | `>=18.0.0 <20.0.0` |
|
|
30
|
+
| TypeScript | Declarations bundled with every JavaScript entry point; CSS available through the stylesheet export |
|
|
31
|
+
| Chrome and Edge | Current stable Chromium-based releases |
|
|
32
|
+
| Automated browser gate | Playwright-bundled Chromium |
|
|
33
|
+
| Firefox and Safari | Outside the supported contract until Firefox and WebKit projects are added |
|
|
34
|
+
| SSR | Client boundary required; server rendering is not currently supported |
|
|
35
|
+
| Runtime network behavior | No package-owned requests, remote assets, telemetry, or error reporting |
|
|
12
36
|
|
|
13
37
|
## Installation
|
|
14
38
|
|
|
@@ -21,27 +45,7 @@ import { CominsTable, type CominsTableColumn } from "comins-table";
|
|
|
21
45
|
import "comins-table/styles.css";
|
|
22
46
|
```
|
|
23
47
|
|
|
24
|
-
React and React DOM are peer dependencies
|
|
25
|
-
|
|
26
|
-
| Package | Version |
|
|
27
|
-
| --- | --- |
|
|
28
|
-
| `react` | `>=18.0.0 <20.0.0` |
|
|
29
|
-
| `react-dom` | `>=18.0.0 <20.0.0` |
|
|
30
|
-
|
|
31
|
-
## Runtime Boundary
|
|
32
|
-
|
|
33
|
-
Comins Table is browser UI. Its package source does not make network requests, load remote assets, collect telemetry, or send error reports. Server rendering is not yet a supported integration contract; use an application client boundary where SSR is present.
|
|
34
|
-
|
|
35
|
-
## Supported Platforms
|
|
36
|
-
|
|
37
|
-
| Surface | Support |
|
|
38
|
-
| --- | --- |
|
|
39
|
-
| React | `>=18.0.0 <20.0.0` |
|
|
40
|
-
| React DOM | `>=18.0.0 <20.0.0` |
|
|
41
|
-
| Chrome and Edge | Current stable Chromium-based releases |
|
|
42
|
-
| Automated browser gate | Playwright-bundled Chromium |
|
|
43
|
-
| Firefox and Safari | Not in the supported contract until Firefox and WebKit projects are added |
|
|
44
|
-
| SSR | Client boundary required; server rendering is not currently supported |
|
|
48
|
+
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.
|
|
45
49
|
|
|
46
50
|
## Quick Start
|
|
47
51
|
|
|
@@ -73,7 +77,7 @@ const columns: Array<CominsTableColumn<UserRow>> = [
|
|
|
73
77
|
|
|
74
78
|
export function UsersTable() {
|
|
75
79
|
const [data, setData] = useState<UserRow[]>([
|
|
76
|
-
{ active: true, age: 31, id: "u-1", name: "
|
|
80
|
+
{ active: true, age: 31, id: "u-1", name: "Example user", role: "Admin" },
|
|
77
81
|
]);
|
|
78
82
|
|
|
79
83
|
return (
|
|
@@ -89,11 +93,17 @@ export function UsersTable() {
|
|
|
89
93
|
}
|
|
90
94
|
```
|
|
91
95
|
|
|
92
|
-
##
|
|
96
|
+
## Controlled Model
|
|
97
|
+
|
|
98
|
+
Comins Table is a CSR-focused controlled component for application-owned data. The application owns the `data` array.
|
|
99
|
+
|
|
100
|
+
Only `onChangeData` requires application write-back. It emits the next flat Row array or Tree Grid node array after table-owned mutations; pass that array back through `data` to retain the change.
|
|
93
101
|
|
|
94
|
-
|
|
102
|
+
Selection, column layout, and sort are internal view state. `onChangeSelection`, `onChangeColumnLayout`, and `onChangeSort` 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.
|
|
95
103
|
|
|
96
|
-
|
|
104
|
+
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. `getColumnLayout` and `getSortState` read the current layout and sort state.
|
|
105
|
+
|
|
106
|
+
## Package Entry Points
|
|
97
107
|
|
|
98
108
|
| Import | Purpose |
|
|
99
109
|
| --- | --- |
|
|
@@ -103,66 +113,57 @@ The root export includes `CominsTable`, public types, and core helpers. Narrower
|
|
|
103
113
|
| `comins-table/selection` | Selection helper subset |
|
|
104
114
|
| `comins-table/styles.css` | Optional table shell, theme, and built-in component skin |
|
|
105
115
|
|
|
106
|
-
|
|
107
|
-
import {
|
|
108
|
-
addCominsRows,
|
|
109
|
-
applyCominsColumnLayout,
|
|
110
|
-
copyCominsCellRange,
|
|
111
|
-
createCominsTableState,
|
|
112
|
-
deleteCominsRows,
|
|
113
|
-
exportCominsRowsToCsv,
|
|
114
|
-
exportCominsRowsToJson,
|
|
115
|
-
fillCominsCellRange,
|
|
116
|
-
pasteCominsCellRange,
|
|
117
|
-
queryCominsRows,
|
|
118
|
-
selectCell,
|
|
119
|
-
selectCellRange,
|
|
120
|
-
selectRow,
|
|
121
|
-
serializeCominsColumnLayout,
|
|
122
|
-
setCominsPagination,
|
|
123
|
-
setCominsSortState,
|
|
124
|
-
updateCominsRows,
|
|
125
|
-
} from "comins-table/core";
|
|
126
|
-
```
|
|
116
|
+
## Header And Layout
|
|
127
117
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
118
|
+
Sortable headers support pointer and keyboard activation and expose `aria-sort`. Columns support width constraints and resize interactions.
|
|
119
|
+
|
|
120
|
+
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.
|
|
121
|
+
|
|
122
|
+
Use `getColumnLayout()` and `setColumnLayout()` through the Ref API, or `serializeCominsColumnLayout()` and `applyCominsColumnLayout()` from `comins-table/core`, to persist and restore order, widths, and visibility.
|
|
123
|
+
|
|
124
|
+
## Rows, Cells, And Selection
|
|
125
|
+
|
|
126
|
+
Rows expose click, double-click, keyboard, and context-menu callbacks. Cells expose the corresponding Cell callbacks plus `format`, `renderer`, and props hooks.
|
|
127
|
+
|
|
128
|
+
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` multi-selection, and `Shift` or pointer-drag ranges. 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.
|
|
129
|
+
|
|
130
|
+
## Virtualization And Loading
|
|
131
|
+
|
|
132
|
+
Set `virtualized`, `rowHeight`, and `"buffer-size"` for fixed-height windowed rendering. The performance Playground includes a tested 100,000-row route while keeping only the current window and buffer mounted.
|
|
133
|
+
|
|
134
|
+
`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.
|
|
135
|
+
|
|
136
|
+
## Summary Row
|
|
137
|
+
|
|
138
|
+
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.
|
|
139
|
+
|
|
140
|
+
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.
|
|
141
|
+
|
|
142
|
+
## Tree Grid
|
|
143
|
+
|
|
144
|
+
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.
|
|
145
|
+
|
|
146
|
+
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.
|
|
147
|
+
|
|
148
|
+
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.
|
|
149
|
+
|
|
150
|
+
## Components And Renderers
|
|
151
|
+
|
|
152
|
+
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.
|
|
153
|
+
|
|
154
|
+
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.
|
|
155
|
+
|
|
156
|
+
## Clipboard And Export
|
|
157
|
+
|
|
158
|
+
`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` remains a framework-independent core helper; no visual fill handle is presented as shipped UI.
|
|
159
|
+
|
|
160
|
+
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.
|
|
161
|
+
|
|
162
|
+
## Styling And Themes
|
|
163
|
+
|
|
164
|
+
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`.
|
|
165
|
+
|
|
166
|
+
Use `theme.className`, `theme.style`, 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.
|
|
166
167
|
|
|
167
168
|
## Ref API
|
|
168
169
|
|
|
@@ -177,15 +178,13 @@ tableRef.current?.clearSort();
|
|
|
177
178
|
tableRef.current?.setSelectedRow(0);
|
|
178
179
|
tableRef.current?.setSelectedRows([0, 1]);
|
|
179
180
|
tableRef.current?.setMoveTargetRow(3, 1);
|
|
181
|
+
tableRef.current?.expand(["department-1", "team-1-1"]);
|
|
182
|
+
tableRef.current?.fold(["team-1-1"]);
|
|
183
|
+
tableRef.current?.expand(); // all Tree Grid branches
|
|
184
|
+
tableRef.current?.fold(); // all Tree Grid branches
|
|
180
185
|
```
|
|
181
186
|
|
|
182
|
-
`setSelectedRow`, `setSelectedRows`, and `setMoveTargetRow` use the visible
|
|
183
|
-
|
|
184
|
-
## Documentation
|
|
185
|
-
|
|
186
|
-
English user documentation starts at `docs/user/01-quick-start.md`.
|
|
187
|
-
|
|
188
|
-
The previous Korean documentation is preserved under `docs/ko/` as secondary documentation while the public package moves to English-first docs.
|
|
187
|
+
`setSelectedRow`, `setSelectedRows`, and `setMoveTargetRow` use the visible Row index after current sorting and pagination. `getColumnLayout`, `setColumnLayout`, `getSortState`, `setSortState`, and `clearSort` read and update the current Header view state. `expand(nodeIds?)` and `fold(nodeIds?)` accept readonly Tree Grid node-id arrays; flat tables ignore them.
|
|
189
188
|
|
|
190
189
|
## Playground
|
|
191
190
|
|
|
@@ -193,7 +192,19 @@ The previous Korean documentation is preserved under `docs/ko/` as secondary doc
|
|
|
193
192
|
npm run dev
|
|
194
193
|
```
|
|
195
194
|
|
|
196
|
-
The
|
|
195
|
+
The local Playground starts at [`/docs/getting-started`](http://127.0.0.1:4002/docs/getting-started). Key routes include [`/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).
|
|
196
|
+
|
|
197
|
+
## Documentation
|
|
198
|
+
|
|
199
|
+
Start with the [English Quick Start](https://github.com/kim1124/comins-table/blob/main/docs/user/01-quick-start.md), then browse [all English feature guides](https://github.com/kim1124/comins-table/tree/main/docs/user). The detailed [Tree Grid](https://github.com/kim1124/comins-table/blob/main/docs/user/17-tree-grid.md) and [Summary Row](https://github.com/kim1124/comins-table/blob/main/docs/user/18-summary-row.md) contracts include runnable examples and edge cases. [Korean guides](https://github.com/kim1124/comins-table/tree/main/docs/ko) are retained as secondary documentation.
|
|
200
|
+
|
|
201
|
+
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.
|
|
202
|
+
|
|
203
|
+
## Current Boundaries
|
|
204
|
+
|
|
205
|
+
Comins Table currently ships a CSR controlled data model. Server-side Row models, Row grouping, pivoting, charts, AI assistance, remote Tree loading, hierarchy pagination, Tree Row drag, Tree Row copy/paste, Firefox, Safari, and SSR are not shipped or supported. Flat Row Expand details and master/detail layouts also remain outside the current package contract.
|
|
206
|
+
|
|
207
|
+
The visual fill handle is not shipped or supported. `fillCominsCellRange` remains available as a core helper without a drag-handle UI.
|
|
197
208
|
|
|
198
209
|
## Development
|
|
199
210
|
|
|
@@ -203,17 +214,13 @@ npm run test:run
|
|
|
203
214
|
npm run build
|
|
204
215
|
npm run test:e2e
|
|
205
216
|
npm run test:perf -- --workers=1
|
|
206
|
-
npm
|
|
217
|
+
npm run test:consumer
|
|
218
|
+
npm run verify
|
|
219
|
+
npm run docs:readme-gif
|
|
207
220
|
```
|
|
208
221
|
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
`comins-table` does not yet exist on the npm registry. npm cannot register trusted or staged publishing for a brand-new package, so the first public version must be published interactively by the maintainer with npm 2FA and without an automation token.
|
|
212
|
-
|
|
213
|
-
After that bootstrap publication, register `kim1124/comins-table`, `publish.yml`, and the `npm` environment as the trusted publisher. Allow only `npm stage publish`, disallow token publishing, and require maintainer 2FA approval for every staged version. The repository workflow is intentionally manual and refuses non-`main` refs, mismatched versions, and missing bootstrap packages.
|
|
214
|
-
|
|
215
|
-
## Current Scope
|
|
222
|
+
`npm run docs:readme-gif` is a maintainer command that captures the real hidden Playground fixture and regenerates the checked-in README animation.
|
|
216
223
|
|
|
217
|
-
|
|
224
|
+
## Trusted Publishing
|
|
218
225
|
|
|
219
|
-
|
|
226
|
+
The package bootstrap is complete. Trusted publishing for later versions uses the manual `publish.yml` OIDC trusted publisher and `npm stage publish` through the protected `npm` environment. The workflow builds one exact package artifact, verifies and scans that artifact before staging, and requires maintainer approval before public publication. Token-based publication is not part of this release path.
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare const COMINS_COLUMN_MOUSE_DRAG_THRESHOLD = 6;
|
|
2
|
+
export type CominsColumnMouseIntent = "activate" | "cancel" | "pending";
|
|
3
|
+
export declare function getCominsColumnMouseIntent({ clientX, clientY, startX, startY, }: {
|
|
4
|
+
clientX: number;
|
|
5
|
+
clientY: number;
|
|
6
|
+
startX: number;
|
|
7
|
+
startY: number;
|
|
8
|
+
}): CominsColumnMouseIntent;
|
|
9
|
+
//# sourceMappingURL=column-pointer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"column-pointer.d.ts","sourceRoot":"","sources":["../src/column-pointer.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kCAAkC,IAAI,CAAC;AAEpD,MAAM,MAAM,uBAAuB,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAExE,wBAAgB,0BAA0B,CAAC,EACzC,OAAO,EACP,OAAO,EACP,MAAM,EACN,MAAM,GACP,EAAE;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,uBAAuB,CAa1B"}
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import type React from "react";
|
|
2
2
|
import type { CominsCellComponentConfig, CominsCellComponentPayload, CominsHeaderComponentConfig, CominsHeaderComponentPayload } from "./core";
|
|
3
|
-
export
|
|
4
|
-
|
|
3
|
+
export type CominsBuiltInComponentInteraction = {
|
|
4
|
+
requestRowSelection?: (request: {
|
|
5
|
+
event: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>;
|
|
6
|
+
mode: "exclusive" | "row-click";
|
|
7
|
+
}) => boolean;
|
|
8
|
+
};
|
|
9
|
+
export declare function renderCominsBuiltInComponent<TData, TValue>(component: CominsCellComponentConfig<TData, TValue>, payload: CominsCellComponentPayload<TData, TValue>, interaction?: CominsBuiltInComponentInteraction): React.ReactNode;
|
|
10
|
+
export declare function renderCominsBuiltInComponent<TData, TValue>(component: CominsHeaderComponentConfig<TData, TValue>, payload: CominsHeaderComponentPayload<TData, TValue>, interaction?: CominsBuiltInComponentInteraction): React.ReactNode;
|
|
5
11
|
//# sourceMappingURL=component-renderer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component-renderer.d.ts","sourceRoot":"","sources":["../src/component-renderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EACV,yBAAyB,EACzB,0BAA0B,EAG1B,2BAA2B,EAC3B,4BAA4B,EAE7B,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"component-renderer.d.ts","sourceRoot":"","sources":["../src/component-renderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EACV,yBAAyB,EACzB,0BAA0B,EAG1B,2BAA2B,EAC3B,4BAA4B,EAE7B,MAAM,QAAQ,CAAC;AA4vBhB,MAAM,MAAM,iCAAiC,GAAG;IAC9C,mBAAmB,CAAC,EAAE,CAAC,OAAO,EAAE;QAC9B,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;QACpF,IAAI,EAAE,WAAW,GAAG,WAAW,CAAC;KACjC,KAAK,OAAO,CAAC;CACf,CAAC;AAEF,wBAAgB,4BAA4B,CAAC,KAAK,EAAE,MAAM,EACxD,SAAS,EAAE,yBAAyB,CAAC,KAAK,EAAE,MAAM,CAAC,EACnD,OAAO,EAAE,0BAA0B,CAAC,KAAK,EAAE,MAAM,CAAC,EAClD,WAAW,CAAC,EAAE,iCAAiC,GAC9C,KAAK,CAAC,SAAS,CAAC;AACnB,wBAAgB,4BAA4B,CAAC,KAAK,EAAE,MAAM,EACxD,SAAS,EAAE,2BAA2B,CAAC,KAAK,EAAE,MAAM,CAAC,EACrD,OAAO,EAAE,4BAA4B,CAAC,KAAK,EAAE,MAAM,CAAC,EACpD,WAAW,CAAC,EAAE,iCAAiC,GAC9C,KAAK,CAAC,SAAS,CAAC"}
|
package/dist/core.d.ts
CHANGED
|
@@ -401,11 +401,6 @@ export declare function addCominsRows<TData>(state: CominsTableState<TData>, row
|
|
|
401
401
|
export declare function updateCominsRows<TData>(state: CominsTableState<TData>, updates: ReadonlyArray<CominsRowUpdate<TData>>): CominsTableState<TData>;
|
|
402
402
|
export declare function deleteCominsRows<TData>(state: CominsTableState<TData>, rowIds: readonly CominsRowId[]): CominsTableState<TData>;
|
|
403
403
|
export declare function setCominsTableTheme<TData>(state: CominsTableState<TData>, theme: CominsTableTheme): {
|
|
404
|
-
theme: {
|
|
405
|
-
className?: string;
|
|
406
|
-
density?: CominsTableDensity;
|
|
407
|
-
style?: React.CSSProperties;
|
|
408
|
-
};
|
|
409
404
|
columnOrder: string[];
|
|
410
405
|
columnGroups: CominsTableRuntimeColumnGroup[];
|
|
411
406
|
columnGroupState: Record<string, CominsColumnGroupRuntimeState>;
|
|
@@ -418,9 +413,13 @@ export declare function setCominsTableTheme<TData>(state: CominsTableState<TData
|
|
|
418
413
|
selection: CominsSelectionState;
|
|
419
414
|
showHeader: boolean;
|
|
420
415
|
sort: CominsSortState | null;
|
|
416
|
+
theme: {
|
|
417
|
+
className?: string;
|
|
418
|
+
density?: CominsTableDensity;
|
|
419
|
+
style?: React.CSSProperties;
|
|
420
|
+
};
|
|
421
421
|
};
|
|
422
422
|
export declare function setCominsHeaderVisible<TData>(state: CominsTableState<TData>, showHeader: boolean): {
|
|
423
|
-
showHeader: boolean;
|
|
424
423
|
columnOrder: string[];
|
|
425
424
|
columnGroups: CominsTableRuntimeColumnGroup[];
|
|
426
425
|
columnGroupState: Record<string, CominsColumnGroupRuntimeState>;
|
|
@@ -433,12 +432,9 @@ export declare function setCominsHeaderVisible<TData>(state: CominsTableState<TD
|
|
|
433
432
|
selection: CominsSelectionState;
|
|
434
433
|
sort: CominsSortState | null;
|
|
435
434
|
theme: CominsTableTheme;
|
|
435
|
+
showHeader: boolean;
|
|
436
436
|
};
|
|
437
437
|
export declare function setCominsPagination<TData>(state: CominsTableState<TData>, pagination: Partial<CominsPaginationState>): {
|
|
438
|
-
pagination: {
|
|
439
|
-
pageIndex: number;
|
|
440
|
-
pageSize: number;
|
|
441
|
-
};
|
|
442
438
|
columnOrder: string[];
|
|
443
439
|
columnGroups: CominsTableRuntimeColumnGroup[];
|
|
444
440
|
columnGroupState: Record<string, CominsColumnGroupRuntimeState>;
|
|
@@ -451,9 +447,12 @@ export declare function setCominsPagination<TData>(state: CominsTableState<TData
|
|
|
451
447
|
showHeader: boolean;
|
|
452
448
|
sort: CominsSortState | null;
|
|
453
449
|
theme: CominsTableTheme;
|
|
450
|
+
pagination: {
|
|
451
|
+
pageIndex: number;
|
|
452
|
+
pageSize: number;
|
|
453
|
+
};
|
|
454
454
|
};
|
|
455
455
|
export declare function setCominsSortState<TData>(state: CominsTableState<TData>, sort: CominsSortState | null): {
|
|
456
|
-
sort: CominsSortState | null;
|
|
457
456
|
columnOrder: string[];
|
|
458
457
|
columnGroups: CominsTableRuntimeColumnGroup[];
|
|
459
458
|
columnGroupState: Record<string, CominsColumnGroupRuntimeState>;
|
|
@@ -466,9 +465,9 @@ export declare function setCominsSortState<TData>(state: CominsTableState<TData>
|
|
|
466
465
|
selection: CominsSelectionState;
|
|
467
466
|
showHeader: boolean;
|
|
468
467
|
theme: CominsTableTheme;
|
|
468
|
+
sort: CominsSortState | null;
|
|
469
469
|
};
|
|
470
470
|
export declare function clearCominsSortState<TData>(state: CominsTableState<TData>): {
|
|
471
|
-
sort: CominsSortState | null;
|
|
472
471
|
columnOrder: string[];
|
|
473
472
|
columnGroups: CominsTableRuntimeColumnGroup[];
|
|
474
473
|
columnGroupState: Record<string, CominsColumnGroupRuntimeState>;
|
|
@@ -481,14 +480,9 @@ export declare function clearCominsSortState<TData>(state: CominsTableState<TDat
|
|
|
481
480
|
selection: CominsSelectionState;
|
|
482
481
|
showHeader: boolean;
|
|
483
482
|
theme: CominsTableTheme;
|
|
483
|
+
sort: CominsSortState | null;
|
|
484
484
|
};
|
|
485
485
|
export declare function setCominsColumnWidth<TData>(state: CominsTableState<TData>, columnId: string, width: number): {
|
|
486
|
-
columnState: {
|
|
487
|
-
[x: string]: CominsColumnRuntimeState | {
|
|
488
|
-
width: number;
|
|
489
|
-
hidden?: boolean;
|
|
490
|
-
};
|
|
491
|
-
};
|
|
492
486
|
columnOrder: string[];
|
|
493
487
|
columnGroups: CominsTableRuntimeColumnGroup[];
|
|
494
488
|
columnGroupState: Record<string, CominsColumnGroupRuntimeState>;
|
|
@@ -501,14 +495,14 @@ export declare function setCominsColumnWidth<TData>(state: CominsTableState<TDat
|
|
|
501
495
|
showHeader: boolean;
|
|
502
496
|
sort: CominsSortState | null;
|
|
503
497
|
theme: CominsTableTheme;
|
|
504
|
-
};
|
|
505
|
-
export declare function setCominsColumnHidden<TData>(state: CominsTableState<TData>, columnId: string, hidden: boolean): {
|
|
506
498
|
columnState: {
|
|
507
499
|
[x: string]: CominsColumnRuntimeState | {
|
|
508
|
-
hidden
|
|
509
|
-
width
|
|
500
|
+
hidden?: boolean;
|
|
501
|
+
width: number;
|
|
510
502
|
};
|
|
511
503
|
};
|
|
504
|
+
};
|
|
505
|
+
export declare function setCominsColumnHidden<TData>(state: CominsTableState<TData>, columnId: string, hidden: boolean): {
|
|
512
506
|
columnOrder: string[];
|
|
513
507
|
columnGroups: CominsTableRuntimeColumnGroup[];
|
|
514
508
|
columnGroupState: Record<string, CominsColumnGroupRuntimeState>;
|
|
@@ -521,6 +515,12 @@ export declare function setCominsColumnHidden<TData>(state: CominsTableState<TDa
|
|
|
521
515
|
showHeader: boolean;
|
|
522
516
|
sort: CominsSortState | null;
|
|
523
517
|
theme: CominsTableTheme;
|
|
518
|
+
columnState: {
|
|
519
|
+
[x: string]: CominsColumnRuntimeState | {
|
|
520
|
+
width?: number;
|
|
521
|
+
hidden: boolean;
|
|
522
|
+
};
|
|
523
|
+
};
|
|
524
524
|
};
|
|
525
525
|
export declare function setCominsColumnGroupHidden<TData>(state: CominsTableState<TData>, groupId: string, hidden: boolean): CominsTableState<TData>;
|
|
526
526
|
export declare function setCominsColumnGroupWidth<TData>(state: CominsTableState<TData>, groupId: string, width: number): CominsTableState<TData>;
|
|
@@ -528,9 +528,6 @@ export declare function moveCominsColumn<TData>(state: CominsTableState<TData>,
|
|
|
528
528
|
export declare function moveCominsColumnGroup<TData>(state: CominsTableState<TData>, groupId: string, targetIndex: number): CominsTableState<TData>;
|
|
529
529
|
export declare function serializeCominsColumnLayout<TData>(state: CominsTableState<TData>): CominsColumnLayout;
|
|
530
530
|
export declare function applyCominsColumnLayout<TData>(state: CominsTableState<TData>, layout: CominsColumnLayout): {
|
|
531
|
-
columnOrder: string[];
|
|
532
|
-
columnGroupState: Record<string, CominsColumnGroupRuntimeState>;
|
|
533
|
-
columnState: Record<string, CominsColumnRuntimeState>;
|
|
534
531
|
columnGroups: CominsTableRuntimeColumnGroup[];
|
|
535
532
|
columns: CominsTableRuntimeColumn<TData, unknown>[];
|
|
536
533
|
getRowId: (row: TData, index: number) => CominsRowId;
|
|
@@ -541,13 +538,11 @@ export declare function applyCominsColumnLayout<TData>(state: CominsTableState<T
|
|
|
541
538
|
showHeader: boolean;
|
|
542
539
|
sort: CominsSortState | null;
|
|
543
540
|
theme: CominsTableTheme;
|
|
541
|
+
columnOrder: string[];
|
|
542
|
+
columnGroupState: Record<string, CominsColumnGroupRuntimeState>;
|
|
543
|
+
columnState: Record<string, CominsColumnRuntimeState>;
|
|
544
544
|
};
|
|
545
545
|
export declare function selectRow<TData>(state: CominsTableState<TData>, rowId: CominsRowId, options?: CominsRowSelectionOptions): {
|
|
546
|
-
selection: {
|
|
547
|
-
rowIds: CominsRowId[];
|
|
548
|
-
cell: CominsCellAddress | null;
|
|
549
|
-
range: CominsCellRange | null;
|
|
550
|
-
};
|
|
551
546
|
columnOrder: string[];
|
|
552
547
|
columnGroups: CominsTableRuntimeColumnGroup[];
|
|
553
548
|
columnGroupState: Record<string, CominsColumnGroupRuntimeState>;
|
|
@@ -560,13 +555,13 @@ export declare function selectRow<TData>(state: CominsTableState<TData>, rowId:
|
|
|
560
555
|
showHeader: boolean;
|
|
561
556
|
sort: CominsSortState | null;
|
|
562
557
|
theme: CominsTableTheme;
|
|
563
|
-
};
|
|
564
|
-
export declare function selectRows<TData>(state: CominsTableState<TData>, rowIds: readonly CominsRowId[]): {
|
|
565
558
|
selection: {
|
|
566
|
-
rowIds: CominsRowId[];
|
|
567
559
|
cell: CominsCellAddress | null;
|
|
568
560
|
range: CominsCellRange | null;
|
|
561
|
+
rowIds: CominsRowId[];
|
|
569
562
|
};
|
|
563
|
+
};
|
|
564
|
+
export declare function selectRows<TData>(state: CominsTableState<TData>, rowIds: readonly CominsRowId[]): {
|
|
570
565
|
columnOrder: string[];
|
|
571
566
|
columnGroups: CominsTableRuntimeColumnGroup[];
|
|
572
567
|
columnGroupState: Record<string, CominsColumnGroupRuntimeState>;
|
|
@@ -579,13 +574,13 @@ export declare function selectRows<TData>(state: CominsTableState<TData>, rowIds
|
|
|
579
574
|
showHeader: boolean;
|
|
580
575
|
sort: CominsSortState | null;
|
|
581
576
|
theme: CominsTableTheme;
|
|
582
|
-
};
|
|
583
|
-
export declare function selectCell<TData>(state: CominsTableState<TData>, cell: CominsCellAddress): {
|
|
584
577
|
selection: {
|
|
585
|
-
cell: CominsCellAddress;
|
|
586
|
-
range: null;
|
|
578
|
+
cell: CominsCellAddress | null;
|
|
579
|
+
range: CominsCellRange | null;
|
|
587
580
|
rowIds: CominsRowId[];
|
|
588
581
|
};
|
|
582
|
+
};
|
|
583
|
+
export declare function selectCell<TData>(state: CominsTableState<TData>, cell: CominsCellAddress): {
|
|
589
584
|
columnOrder: string[];
|
|
590
585
|
columnGroups: CominsTableRuntimeColumnGroup[];
|
|
591
586
|
columnGroupState: Record<string, CominsColumnGroupRuntimeState>;
|
|
@@ -598,13 +593,13 @@ export declare function selectCell<TData>(state: CominsTableState<TData>, cell:
|
|
|
598
593
|
showHeader: boolean;
|
|
599
594
|
sort: CominsSortState | null;
|
|
600
595
|
theme: CominsTableTheme;
|
|
601
|
-
};
|
|
602
|
-
export declare function selectCellRange<TData>(state: CominsTableState<TData>, range: CominsCellRange): {
|
|
603
596
|
selection: {
|
|
604
|
-
cell: CominsCellAddress;
|
|
605
|
-
range: CominsCellRange;
|
|
606
597
|
rowIds: CominsRowId[];
|
|
598
|
+
cell: CominsCellAddress;
|
|
599
|
+
range: null;
|
|
607
600
|
};
|
|
601
|
+
};
|
|
602
|
+
export declare function selectCellRange<TData>(state: CominsTableState<TData>, range: CominsCellRange): {
|
|
608
603
|
columnOrder: string[];
|
|
609
604
|
columnGroups: CominsTableRuntimeColumnGroup[];
|
|
610
605
|
columnGroupState: Record<string, CominsColumnGroupRuntimeState>;
|
|
@@ -617,13 +612,13 @@ export declare function selectCellRange<TData>(state: CominsTableState<TData>, r
|
|
|
617
612
|
showHeader: boolean;
|
|
618
613
|
sort: CominsSortState | null;
|
|
619
614
|
theme: CominsTableTheme;
|
|
620
|
-
};
|
|
621
|
-
export declare function clearCominsCellRange<TData>(state: CominsTableState<TData>): {
|
|
622
615
|
selection: {
|
|
623
|
-
range: null;
|
|
624
|
-
cell: CominsCellAddress | null;
|
|
625
616
|
rowIds: CominsRowId[];
|
|
617
|
+
cell: CominsCellAddress;
|
|
618
|
+
range: CominsCellRange;
|
|
626
619
|
};
|
|
620
|
+
};
|
|
621
|
+
export declare function clearCominsCellRange<TData>(state: CominsTableState<TData>): {
|
|
627
622
|
columnOrder: string[];
|
|
628
623
|
columnGroups: CominsTableRuntimeColumnGroup[];
|
|
629
624
|
columnGroupState: Record<string, CominsColumnGroupRuntimeState>;
|
|
@@ -636,9 +631,13 @@ export declare function clearCominsCellRange<TData>(state: CominsTableState<TDat
|
|
|
636
631
|
showHeader: boolean;
|
|
637
632
|
sort: CominsSortState | null;
|
|
638
633
|
theme: CominsTableTheme;
|
|
634
|
+
selection: {
|
|
635
|
+
cell: CominsCellAddress | null;
|
|
636
|
+
rowIds: CominsRowId[];
|
|
637
|
+
range: null;
|
|
638
|
+
};
|
|
639
639
|
};
|
|
640
640
|
export declare function clearCominsSelection<TData>(state: CominsTableState<TData>): {
|
|
641
|
-
selection: CominsSelectionState;
|
|
642
641
|
columnOrder: string[];
|
|
643
642
|
columnGroups: CominsTableRuntimeColumnGroup[];
|
|
644
643
|
columnGroupState: Record<string, CominsColumnGroupRuntimeState>;
|
|
@@ -651,6 +650,7 @@ export declare function clearCominsSelection<TData>(state: CominsTableState<TDat
|
|
|
651
650
|
showHeader: boolean;
|
|
652
651
|
sort: CominsSortState | null;
|
|
653
652
|
theme: CominsTableTheme;
|
|
653
|
+
selection: CominsSelectionState;
|
|
654
654
|
};
|
|
655
655
|
export declare function isCominsRowSelected<TData>(state: CominsTableState<TData>, rowId: CominsRowId): boolean;
|
|
656
656
|
export declare function isCominsCellSelected<TData>(state: CominsTableState<TData>, cell: CominsCellAddress): boolean;
|