react-glide-table 2.2.0 → 2.3.0
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/README.md +58 -37
- package/dist/compound.cjs +589 -145
- package/dist/compound.d.cts +2 -2
- package/dist/compound.d.ts +2 -2
- package/dist/compound.js +493 -49
- package/dist/core.cjs +509 -141
- package/dist/core.d.cts +54 -10
- package/dist/core.d.ts +54 -10
- package/dist/core.js +396 -29
- package/dist/index.cjs +618 -172
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +494 -49
- package/dist/{types-Iot4g4sq.d.cts → types-DdeVn-9s.d.cts} +33 -2
- package/dist/{types-Iot4g4sq.d.ts → types-DdeVn-9s.d.ts} +33 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -151,10 +151,11 @@ const buttonRenderer = {
|
|
|
151
151
|
Action
|
|
152
152
|
</ProductTable.Column>
|
|
153
153
|
</ProductTable.Header>
|
|
154
|
-
</ProductTable
|
|
154
|
+
</ProductTable>;
|
|
155
155
|
```
|
|
156
156
|
|
|
157
157
|
Same `kind` in `cellRenderers` overrides the builtin. Extra kinds are added by key.
|
|
158
|
+
|
|
158
159
|
## Escape hatch (`useGlideTable`)
|
|
159
160
|
|
|
160
161
|
```tsx
|
|
@@ -259,6 +260,20 @@ import type { RowsPastePayload } from "react-glide-table/compound";
|
|
|
259
260
|
Related props: `onRowsPaste`, `enableInsertPaste`, `enableSubtreeCopy`, `onCopyActionsReady`.
|
|
260
261
|
Helpers (`/core`): `buildRowsPastePayload`, `parseClipboardTSV`, `parseClipboardTSVWithDepths`, `serializeSelectionToTSV`, …
|
|
261
262
|
|
|
263
|
+
## Column width
|
|
264
|
+
|
|
265
|
+
`Column.width` sets a fixed size. Columns without `width` keep leftover space.
|
|
266
|
+
|
|
267
|
+
`minWidth` / `maxWidth` (without `width`) resolve to a size inside that range, preferring `maxWidth` when space allows so content can stay on one line. Unconstrained columns (no `width`, no min/max) still receive leftover space after that. When the viewport is tight, bounded columns shrink toward `minWidth` first. They do not clamp drag-resize.
|
|
268
|
+
|
|
269
|
+
```tsx
|
|
270
|
+
<ProductTable.Column field="note" minWidth={80} maxWidth={240}>
|
|
271
|
+
Note
|
|
272
|
+
</ProductTable.Column>
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
With `ColumnDef` (non-compound), put the same values on `meta.width` / `meta.minWidth` / `meta.maxWidth`.
|
|
276
|
+
|
|
262
277
|
## Column resize
|
|
263
278
|
|
|
264
279
|
Opt in with `enableColumnResize`. Drag the handle on the right edge of a header cell; double-click resets to the column’s default `width` / `size`.
|
|
@@ -272,7 +287,12 @@ Opt in with `enableColumnResize`. Drag the handle on the right edge of a header
|
|
|
272
287
|
// onColumnSizingChange={setSizing}
|
|
273
288
|
>
|
|
274
289
|
<ProductTable.Header>
|
|
275
|
-
<ProductTable.Column
|
|
290
|
+
<ProductTable.Column
|
|
291
|
+
field="name"
|
|
292
|
+
width={200}
|
|
293
|
+
minResizeWidth={80}
|
|
294
|
+
maxResizeWidth={480}
|
|
295
|
+
>
|
|
276
296
|
Name
|
|
277
297
|
</ProductTable.Column>
|
|
278
298
|
<ProductTable.Column field="sku" resizable={false}>
|
|
@@ -282,14 +302,15 @@ Opt in with `enableColumnResize`. Drag the handle on the right edge of a header
|
|
|
282
302
|
</ProductTable>
|
|
283
303
|
```
|
|
284
304
|
|
|
285
|
-
| Prop
|
|
286
|
-
|
|
|
287
|
-
| `enableColumnResize`
|
|
288
|
-
| `columnSizing` / `onColumnSizingChange`
|
|
289
|
-
| `columnResizeMode`
|
|
290
|
-
| `Column.width`
|
|
291
|
-
| `Column.
|
|
292
|
-
| `
|
|
305
|
+
| Prop | Role |
|
|
306
|
+
| ------------------------------------------ | -------------------------------------------- |
|
|
307
|
+
| `enableColumnResize` | Turn on header drag resize (default `false`) |
|
|
308
|
+
| `columnSizing` / `onColumnSizingChange` | Controlled width map `{ [columnId]: px }` |
|
|
309
|
+
| `columnResizeMode` | `"onChange"` (live) or `"onEnd"` |
|
|
310
|
+
| `Column.width` | Default column size |
|
|
311
|
+
| `Column.minResizeWidth` / `maxResizeWidth` | Drag-resize clamp sizes |
|
|
312
|
+
| `Column.resizable={false}` | Disable resize for one column |
|
|
313
|
+
| `classNames.resizeHandle` | Style hook for the drag handle |
|
|
293
314
|
|
|
294
315
|
## Column reorder
|
|
295
316
|
|
|
@@ -316,13 +337,13 @@ Leaf columns can move across `ColumnGroup`s. Consecutive leaves that still share
|
|
|
316
337
|
</ProductTable>
|
|
317
338
|
```
|
|
318
339
|
|
|
319
|
-
| Prop
|
|
320
|
-
|
|
|
321
|
-
| `enableColumnReorder`
|
|
322
|
-
| `columnOrder` / `onColumnOrderChange`
|
|
323
|
-
| `Column.reorderable={false}`
|
|
324
|
-
| `data-reorderable` / `data-drop-edge`
|
|
325
|
-
| `classNames.dropEdge`
|
|
340
|
+
| Prop | Role |
|
|
341
|
+
| ------------------------------------- | ------------------------------------------------- |
|
|
342
|
+
| `enableColumnReorder` | Turn on header drag reorder (default `false`) |
|
|
343
|
+
| `columnOrder` / `onColumnOrderChange` | Controlled leaf id list (`string[]`) |
|
|
344
|
+
| `Column.reorderable={false}` | Disable drag for one column (still a drop target) |
|
|
345
|
+
| `data-reorderable` / `data-drop-edge` | Drag / drop state hooks on header cells |
|
|
346
|
+
| `classNames.dropEdge` | Extra class while a drop edge is shown |
|
|
326
347
|
|
|
327
348
|
Helpers (`/core`): `applyLeafColumnOrder`, `moveColumnIds`, `collectLeafColumnIds`, `useColumnReorder`, …
|
|
328
349
|
|
|
@@ -349,12 +370,12 @@ Keep vertical stickiness on the header via `classNames.head` (e.g. `sticky top-0
|
|
|
349
370
|
</ProductTable>
|
|
350
371
|
```
|
|
351
372
|
|
|
352
|
-
| Prop
|
|
353
|
-
|
|
|
354
|
-
| `enableColumnFreeze`
|
|
355
|
-
| `Column.frozen` / `meta.frozen`
|
|
356
|
-
| `data-frozen`
|
|
357
|
-
| `data-freeze-edge`
|
|
373
|
+
| Prop | Role |
|
|
374
|
+
| ------------------------------- | ---------------------------------------------------- |
|
|
375
|
+
| `enableColumnFreeze` | Turn on sticky freeze (default `false`) |
|
|
376
|
+
| `Column.frozen` / `meta.frozen` | `true` / `"left"` or `"right"` |
|
|
377
|
+
| `data-frozen` | `"left"` / `"right"` on frozen cells |
|
|
378
|
+
| `data-freeze-edge` | `"left"` / `"right"` / `"both"` on island boundaries |
|
|
358
379
|
|
|
359
380
|
Helpers (`/core`): `buildColumnFreezeOffsets`, `getColumnFreezeEdgeAttr`, `getColumnFreezeStyle`, `resolveColumnFreezeSide`.
|
|
360
381
|
|
|
@@ -372,21 +393,21 @@ On tree tables (`toggleField`), search also scans **collapsed** descendants. Nav
|
|
|
372
393
|
</ProductTable>
|
|
373
394
|
```
|
|
374
395
|
|
|
375
|
-
| Shortcut / control
|
|
376
|
-
|
|
|
377
|
-
| Ctrl/Cmd+F
|
|
378
|
-
| Enter / ↓
|
|
379
|
-
| Shift+Enter / ↑
|
|
380
|
-
| Escape / Ctrl+F (in box) / ✕ | Close
|
|
381
|
-
|
|
382
|
-
| Prop
|
|
383
|
-
|
|
|
384
|
-
| `enableInlineSearch`
|
|
385
|
-
| `showSearch` / `onSearchClose`
|
|
386
|
-
| `searchValue` / `onSearchValueChange`
|
|
396
|
+
| Shortcut / control | Behavior |
|
|
397
|
+
| ---------------------------- | ------------------------------ |
|
|
398
|
+
| Ctrl/Cmd+F | Open (or focus) the search box |
|
|
399
|
+
| Enter / ↓ | Next match |
|
|
400
|
+
| Shift+Enter / ↑ | Previous match |
|
|
401
|
+
| Escape / Ctrl+F (in box) / ✕ | Close |
|
|
402
|
+
|
|
403
|
+
| Prop | Role |
|
|
404
|
+
| ------------------------------------------ | --------------------------------------------------- |
|
|
405
|
+
| `enableInlineSearch` | Turn on search (default `false`) |
|
|
406
|
+
| `showSearch` / `onSearchClose` | Controlled overlay visibility |
|
|
407
|
+
| `searchValue` / `onSearchValueChange` | Controlled query |
|
|
387
408
|
| `searchResults` / `onSearchResultsChanged` | Override / observe matches (`[colIndex, rowIndex]`) |
|
|
388
|
-
| `data-search-match` / `data-search-active` | Match highlight hooks on cells
|
|
389
|
-
| `classNames.search*`
|
|
409
|
+
| `data-search-match` / `data-search-active` | Match highlight hooks on cells |
|
|
410
|
+
| `classNames.search*` | Style the overlay |
|
|
390
411
|
|
|
391
412
|
Helpers (`/core`): `useInlineSearch`, `collectSearchMatchesInRange`, `formatSearchResultLabel`, …
|
|
392
413
|
|