react-glide-table 1.1.9 → 1.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 +114 -47
- package/dist/compound.cjs +236 -15
- package/dist/compound.d.cts +3 -3
- package/dist/compound.d.ts +3 -3
- package/dist/compound.js +236 -15
- package/dist/core.cjs +163 -4
- package/dist/core.d.cts +20 -5
- package/dist/core.d.ts +20 -5
- package/dist/core.js +158 -4
- package/dist/index.cjs +246 -15
- package/dist/index.d.cts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +241 -15
- package/dist/{types-xxzMLUwM.d.cts → types-B4uHdkrY.d.cts} +95 -3
- package/dist/{types-xxzMLUwM.d.ts → types-B4uHdkrY.d.ts} +95 -3
- package/package.json +23 -1
|
@@ -1,5 +1,52 @@
|
|
|
1
|
-
import { ColumnDef, RowSelectionState, Updater, Row } from '@tanstack/react-table';
|
|
2
|
-
import { ReactNode, InputHTMLAttributes, ComponentType } from 'react';
|
|
1
|
+
import { ColumnDef, RowSelectionState, Updater, ColumnSizingState, OnChangeFn, ColumnResizeMode, Row } from '@tanstack/react-table';
|
|
2
|
+
import { CSSProperties, ReactNode, InputHTMLAttributes, ComponentType } from 'react';
|
|
3
|
+
|
|
4
|
+
/** Sticky edge for a frozen column. Does not reorder columns. */
|
|
5
|
+
type ColumnFreezeSide = "left" | "right";
|
|
6
|
+
/**
|
|
7
|
+
* Per-column freeze flag.
|
|
8
|
+
* `true` is sugar for `"left"`.
|
|
9
|
+
*/
|
|
10
|
+
type ColumnFreezeMeta = boolean | ColumnFreezeSide;
|
|
11
|
+
type ColumnFreezeColumnInput = {
|
|
12
|
+
id: string;
|
|
13
|
+
size: number;
|
|
14
|
+
side?: ColumnFreezeSide;
|
|
15
|
+
};
|
|
16
|
+
/** Which outer sides of a freeze island get a divider shadow. */
|
|
17
|
+
type ColumnFreezeEdgeSide = "left" | "right" | "both";
|
|
18
|
+
type ColumnFreezeOffset = {
|
|
19
|
+
side: ColumnFreezeSide;
|
|
20
|
+
/** Cumulative sticky inset (`left` or `right` in px). */
|
|
21
|
+
offset: number;
|
|
22
|
+
/** True when this cell is on an island boundary (any side). */
|
|
23
|
+
isEdge: boolean;
|
|
24
|
+
/** Shadow toward the previous column (scrollable / other island). */
|
|
25
|
+
edgeLeft: boolean;
|
|
26
|
+
/** Shadow toward the next column (scrollable / other island). */
|
|
27
|
+
edgeRight: boolean;
|
|
28
|
+
/** Relative stack order within the freeze side (higher = closer to the viewport edge). */
|
|
29
|
+
stack: number;
|
|
30
|
+
};
|
|
31
|
+
/** Normalize column `frozen` meta into a sticky side. */
|
|
32
|
+
declare function resolveColumnFreezeSide(frozen?: ColumnFreezeMeta): ColumnFreezeSide | undefined;
|
|
33
|
+
/** Serialize freeze-edge flags for `data-freeze-edge`. */
|
|
34
|
+
declare function getColumnFreezeEdgeAttr(offset: Pick<ColumnFreezeOffset, "edgeLeft" | "edgeRight"> | undefined): ColumnFreezeEdgeSide | undefined;
|
|
35
|
+
/**
|
|
36
|
+
* Build sticky insets for frozen columns without changing DOM/column order.
|
|
37
|
+
*
|
|
38
|
+
* - `left`: `left = Σ(widths of left-frozen columns before this one)`
|
|
39
|
+
* - `right`: `right = Σ(widths of right-frozen columns after this one)`
|
|
40
|
+
*
|
|
41
|
+
* Contiguous same-side freezes form one island — only the outer boundaries
|
|
42
|
+
* get edge shadows. Gaps between same-side freezes create separate islands,
|
|
43
|
+
* so both sides of the gap receive a shadow.
|
|
44
|
+
*/
|
|
45
|
+
declare function buildColumnFreezeOffsets(columns: ColumnFreezeColumnInput[]): Map<string, ColumnFreezeOffset>;
|
|
46
|
+
/** Sticky position styles for a frozen header or body cell. */
|
|
47
|
+
declare function getColumnFreezeStyle(offset: ColumnFreezeOffset | undefined, options?: {
|
|
48
|
+
isHeader?: boolean;
|
|
49
|
+
}): CSSProperties | undefined;
|
|
3
50
|
|
|
4
51
|
type DataTableLabels = {
|
|
5
52
|
empty: string;
|
|
@@ -7,6 +54,8 @@ type DataTableLabels = {
|
|
|
7
54
|
selection: (selectedCount: number) => ReactNode;
|
|
8
55
|
expandRow: string;
|
|
9
56
|
collapseRow: string;
|
|
57
|
+
/** Accessible label for the column resize handle */
|
|
58
|
+
resizeColumn: string;
|
|
10
59
|
};
|
|
11
60
|
/** Default copy. Override via the `labels` option. */
|
|
12
61
|
declare const DEFAULT_DATA_TABLE_LABELS: DataTableLabels;
|
|
@@ -31,6 +80,12 @@ declare module "@tanstack/react-table" {
|
|
|
31
80
|
editType?: CellEditType;
|
|
32
81
|
/** Inline editor input attribute overrides */
|
|
33
82
|
editInputProps?: DataTableEditInputProps;
|
|
83
|
+
/**
|
|
84
|
+
* Freeze (sticky) this column without reordering.
|
|
85
|
+
* `true` / `"left"` stick to the scrollport left; `"right"` to the right.
|
|
86
|
+
* Middle columns are allowed; multiple frozen columns stack via cumulative offsets.
|
|
87
|
+
*/
|
|
88
|
+
frozen?: ColumnFreezeMeta;
|
|
34
89
|
}
|
|
35
90
|
interface Row<TData> {
|
|
36
91
|
/**
|
|
@@ -180,6 +235,25 @@ type DataTableProps<T extends Record<string, unknown>> = {
|
|
|
180
235
|
estimateRowHeight?: number;
|
|
181
236
|
/** Virtualization overscan row count. Default 8 */
|
|
182
237
|
virtualOverscan?: number;
|
|
238
|
+
/**
|
|
239
|
+
* Enable drag-to-resize on column headers. Defaults to false.
|
|
240
|
+
* Opt out per column with `Column.resizable={false}` / `enableResizing: false`.
|
|
241
|
+
*/
|
|
242
|
+
enableColumnResize?: boolean;
|
|
243
|
+
/** Controlled column sizing map (`{ [columnId]: widthPx }`) */
|
|
244
|
+
columnSizing?: ColumnSizingState;
|
|
245
|
+
onColumnSizingChange?: OnChangeFn<ColumnSizingState>;
|
|
246
|
+
/**
|
|
247
|
+
* When to commit resize updates. Defaults to `"onChange"` (live while dragging).
|
|
248
|
+
* Use `"onEnd"` to update only after the pointer is released.
|
|
249
|
+
*/
|
|
250
|
+
columnResizeMode?: ColumnResizeMode;
|
|
251
|
+
/**
|
|
252
|
+
* Enable sticky freeze columns. Defaults to false.
|
|
253
|
+
* Mark columns with `Column.frozen` / `meta.frozen` (`true` | `"left"` | `"right"`).
|
|
254
|
+
* Does not reorder columns; offsets stack so frozen cells do not overlap.
|
|
255
|
+
*/
|
|
256
|
+
enableColumnFreeze?: boolean;
|
|
183
257
|
/**
|
|
184
258
|
* Optional UI part replacements for the unstyled DataTable renderer.
|
|
185
259
|
* Use with `createTable` / `Table.Column`, or pass columns directly to `DataTable`.
|
|
@@ -205,6 +279,8 @@ type DataTableClassNames = {
|
|
|
205
279
|
head?: string;
|
|
206
280
|
headRow?: string;
|
|
207
281
|
headCell?: string;
|
|
282
|
+
/** Column resize drag handle inside a header cell */
|
|
283
|
+
resizeHandle?: string;
|
|
208
284
|
body?: string;
|
|
209
285
|
emptyCell?: string;
|
|
210
286
|
virtualSpacer?: string;
|
|
@@ -266,7 +342,23 @@ type TableColumnProps<T extends Record<string, unknown>, K extends string = keyo
|
|
|
266
342
|
virtual?: boolean;
|
|
267
343
|
children?: ReactNode;
|
|
268
344
|
sortable?: boolean;
|
|
345
|
+
/** Initial / default column width in px (TanStack `size`) */
|
|
269
346
|
width?: number;
|
|
347
|
+
/** Minimum resize width in px. Defaults to the table min when omitted */
|
|
348
|
+
minWidth?: number;
|
|
349
|
+
/** Maximum resize width in px. Defaults to the table max when omitted */
|
|
350
|
+
maxWidth?: number;
|
|
351
|
+
/**
|
|
352
|
+
* When false, this column cannot be resized even if `enableColumnResize` is on.
|
|
353
|
+
* Defaults to true.
|
|
354
|
+
*/
|
|
355
|
+
resizable?: boolean;
|
|
356
|
+
/**
|
|
357
|
+
* Freeze (sticky) without changing column order.
|
|
358
|
+
* `true` / `"left"` → left edge; `"right"` → right edge.
|
|
359
|
+
* Requires `enableColumnFreeze`. Middle columns are allowed.
|
|
360
|
+
*/
|
|
361
|
+
frozen?: ColumnFreezeMeta;
|
|
270
362
|
align?: "left" | "center" | "right";
|
|
271
363
|
rowSpan?: boolean;
|
|
272
364
|
rowSpanKey?: string;
|
|
@@ -282,4 +374,4 @@ type TableProps<T extends Record<string, unknown>> = Omit<DataTableProps<T>, "co
|
|
|
282
374
|
children: ReactNode;
|
|
283
375
|
};
|
|
284
376
|
|
|
285
|
-
export { type
|
|
377
|
+
export { type ColumnFreezeColumnInput as C, DEFAULT_DATA_TABLE_LABELS as D, type PasteMode as P, type RowSelectionMode as R, type TableColumnProps as T, type ColumnFreezeEdgeSide as a, type ColumnFreezeMeta as b, type ColumnFreezeOffset as c, type ColumnFreezeSide as d, type DataTableClassNames as e, type DataTableCopyActions as f, type DataTableLabels as g, type DataTableProps as h, type DataTableSlots as i, type RowsPastePayload as j, type TableProps as k, buildColumnFreezeOffsets as l, getColumnFreezeEdgeAttr as m, getColumnFreezeStyle as n, resolveDataTableLabels as o, type CellEditType as p, resolveColumnFreezeSide as r };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-glide-table",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/zpxlffjrm/react-glide-table.git"
|
|
@@ -11,6 +11,28 @@
|
|
|
11
11
|
"homepage": "https://github.com/zpxlffjrm/react-glide-table#readme",
|
|
12
12
|
"type": "module",
|
|
13
13
|
"license": "MIT",
|
|
14
|
+
"keywords": [
|
|
15
|
+
"react",
|
|
16
|
+
"table",
|
|
17
|
+
"datagrid",
|
|
18
|
+
"data-grid",
|
|
19
|
+
"headless",
|
|
20
|
+
"unstyled",
|
|
21
|
+
"tanstack",
|
|
22
|
+
"tanstack-table",
|
|
23
|
+
"virtualization",
|
|
24
|
+
"virtualized",
|
|
25
|
+
"typescript",
|
|
26
|
+
"compound-components",
|
|
27
|
+
"column-resize",
|
|
28
|
+
"column-freeze",
|
|
29
|
+
"sticky-columns",
|
|
30
|
+
"row-span",
|
|
31
|
+
"cell-selection",
|
|
32
|
+
"editable",
|
|
33
|
+
"tree-table",
|
|
34
|
+
"clipboard"
|
|
35
|
+
],
|
|
14
36
|
"sideEffects": false,
|
|
15
37
|
"engines": {
|
|
16
38
|
"node": "^20.19.0 || >=22.12.0"
|