react-glide-table 1.1.9 → 1.2.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 +111 -47
- package/dist/compound.cjs +215 -15
- package/dist/compound.d.cts +3 -3
- package/dist/compound.d.ts +3 -3
- package/dist/compound.js +215 -15
- package/dist/core.cjs +140 -4
- package/dist/core.d.cts +20 -5
- package/dist/core.d.ts +20 -5
- package/dist/core.js +136 -4
- package/dist/index.cjs +223 -15
- package/dist/index.d.cts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +219 -15
- package/dist/{types-xxzMLUwM.d.cts → types-D031_07N.d.cts} +85 -3
- package/dist/{types-xxzMLUwM.d.ts → types-D031_07N.d.ts} +85 -3
- package/package.json +23 -1
package/dist/index.cjs
CHANGED
|
@@ -31,6 +31,7 @@ __export(src_exports, {
|
|
|
31
31
|
applyCellEdit: () => applyCellEdit,
|
|
32
32
|
applyFillData: () => applyFillData,
|
|
33
33
|
applySelectionUpdater: () => applySelectionUpdater,
|
|
34
|
+
buildColumnFreezeOffsets: () => buildColumnFreezeOffsets,
|
|
34
35
|
buildColumnRowSpanMap: () => buildColumnRowSpanMap,
|
|
35
36
|
buildRowsPastePayload: () => buildRowsPastePayload,
|
|
36
37
|
canExpandRow: () => canExpandRow,
|
|
@@ -43,6 +44,8 @@ __export(src_exports, {
|
|
|
43
44
|
getCellEditDraftValue: () => getCellEditDraftValue,
|
|
44
45
|
getCellSelectionEdgeStyle: () => getCellSelectionEdgeStyle,
|
|
45
46
|
getColumnEditType: () => getColumnEditType,
|
|
47
|
+
getColumnFreezeStyle: () => getColumnFreezeStyle,
|
|
48
|
+
getColumnSizeStyle: () => getColumnSizeStyle,
|
|
46
49
|
getRowIndexInMergedCell: () => getRowIndexInMergedCell,
|
|
47
50
|
hasCellSelectionEdges: () => hasCellSelectionEdges,
|
|
48
51
|
isCellInSelection: () => isCellInSelection,
|
|
@@ -52,6 +55,7 @@ __export(src_exports, {
|
|
|
52
55
|
parseCellEditValue: () => parseCellEditValue,
|
|
53
56
|
parseClipboardTSV: () => parseClipboardTSV,
|
|
54
57
|
parseClipboardTSVWithDepths: () => parseClipboardTSVWithDepths,
|
|
58
|
+
resolveColumnFreezeSide: () => resolveColumnFreezeSide,
|
|
55
59
|
resolveDataTableLabels: () => resolveDataTableLabels,
|
|
56
60
|
resolvePasteColumnIds: () => resolvePasteColumnIds,
|
|
57
61
|
resolveRowSelection: () => resolveRowSelection,
|
|
@@ -74,7 +78,8 @@ var DEFAULT_DATA_TABLE_LABELS = {
|
|
|
74
78
|
loading: "Loading...",
|
|
75
79
|
selection: (selectedCount) => selectedCount > 0 ? `\u2713 ${selectedCount} selected` : null,
|
|
76
80
|
expandRow: "Expand row",
|
|
77
|
-
collapseRow: "Collapse row"
|
|
81
|
+
collapseRow: "Collapse row",
|
|
82
|
+
resizeColumn: "Resize column"
|
|
78
83
|
};
|
|
79
84
|
function resolveDataTableLabels(partial) {
|
|
80
85
|
return {
|
|
@@ -105,6 +110,9 @@ var ROW_HOVERED_BG_CLASS = "row-hovered";
|
|
|
105
110
|
var CELL_SELECTION_FILL_CLASS = "cell-selection-fill";
|
|
106
111
|
var DATA_TABLE_ROW_HEIGHT = 44;
|
|
107
112
|
var DATA_TABLE_VIRTUAL_OVERSCAN = 8;
|
|
113
|
+
var DATA_TABLE_COLUMN_SIZE = 150;
|
|
114
|
+
var DATA_TABLE_COLUMN_MIN_SIZE = 40;
|
|
115
|
+
var DATA_TABLE_COLUMN_MAX_SIZE = 800;
|
|
108
116
|
|
|
109
117
|
// src/components/ui/table/features/cell-edit/useCellEdit.ts
|
|
110
118
|
var import_react = require("react");
|
|
@@ -995,6 +1003,68 @@ function useCellSelection({
|
|
|
995
1003
|
};
|
|
996
1004
|
}
|
|
997
1005
|
|
|
1006
|
+
// src/components/ui/table/features/column-freeze/columnFreeze.ts
|
|
1007
|
+
var HEADER_Z_BASE = 30;
|
|
1008
|
+
var BODY_Z_BASE = 5;
|
|
1009
|
+
function resolveColumnFreezeSide(frozen) {
|
|
1010
|
+
if (frozen === true || frozen === "left") return "left";
|
|
1011
|
+
if (frozen === "right") return "right";
|
|
1012
|
+
return void 0;
|
|
1013
|
+
}
|
|
1014
|
+
function buildColumnFreezeOffsets(columns) {
|
|
1015
|
+
const result = /* @__PURE__ */ new Map();
|
|
1016
|
+
let leftOffset = 0;
|
|
1017
|
+
const leftIds = [];
|
|
1018
|
+
for (const column of columns) {
|
|
1019
|
+
if (column.side !== "left") continue;
|
|
1020
|
+
leftIds.push(column.id);
|
|
1021
|
+
result.set(column.id, {
|
|
1022
|
+
side: "left",
|
|
1023
|
+
offset: leftOffset,
|
|
1024
|
+
isEdge: false,
|
|
1025
|
+
stack: 0
|
|
1026
|
+
});
|
|
1027
|
+
leftOffset += column.size;
|
|
1028
|
+
}
|
|
1029
|
+
leftIds.forEach((id, index) => {
|
|
1030
|
+
const entry = result.get(id);
|
|
1031
|
+
if (!entry) return;
|
|
1032
|
+
entry.isEdge = index === leftIds.length - 1;
|
|
1033
|
+
entry.stack = leftIds.length - index;
|
|
1034
|
+
});
|
|
1035
|
+
let rightOffset = 0;
|
|
1036
|
+
const rightIds = [];
|
|
1037
|
+
for (let index = columns.length - 1; index >= 0; index -= 1) {
|
|
1038
|
+
const column = columns[index];
|
|
1039
|
+
if (!column || column.side !== "right") continue;
|
|
1040
|
+
rightIds.push(column.id);
|
|
1041
|
+
result.set(column.id, {
|
|
1042
|
+
side: "right",
|
|
1043
|
+
offset: rightOffset,
|
|
1044
|
+
isEdge: false,
|
|
1045
|
+
stack: 0
|
|
1046
|
+
});
|
|
1047
|
+
rightOffset += column.size;
|
|
1048
|
+
}
|
|
1049
|
+
rightIds.forEach((id, index) => {
|
|
1050
|
+
const entry = result.get(id);
|
|
1051
|
+
if (!entry) return;
|
|
1052
|
+
entry.isEdge = index === rightIds.length - 1;
|
|
1053
|
+
entry.stack = rightIds.length - index;
|
|
1054
|
+
});
|
|
1055
|
+
return result;
|
|
1056
|
+
}
|
|
1057
|
+
function getColumnFreezeStyle(offset, options) {
|
|
1058
|
+
if (!offset) return void 0;
|
|
1059
|
+
const zBase = options?.isHeader ? HEADER_Z_BASE : BODY_Z_BASE;
|
|
1060
|
+
return {
|
|
1061
|
+
position: "sticky",
|
|
1062
|
+
...offset.side === "left" ? { left: offset.offset } : { right: offset.offset },
|
|
1063
|
+
zIndex: zBase + offset.stack,
|
|
1064
|
+
...options?.isHeader ? { top: 0 } : {}
|
|
1065
|
+
};
|
|
1066
|
+
}
|
|
1067
|
+
|
|
998
1068
|
// src/components/ui/table/features/row-expand/row-expand.ts
|
|
999
1069
|
var import_react3 = require("react");
|
|
1000
1070
|
function getFieldValue(row, key) {
|
|
@@ -1260,6 +1330,7 @@ function collectRowSpanColumns(columns) {
|
|
|
1260
1330
|
}
|
|
1261
1331
|
|
|
1262
1332
|
// src/core/useGlideTable.ts
|
|
1333
|
+
var EMPTY_COLUMN_FREEZE_OFFSETS = /* @__PURE__ */ new Map();
|
|
1263
1334
|
function useGlideTable(options) {
|
|
1264
1335
|
const {
|
|
1265
1336
|
data,
|
|
@@ -1295,7 +1366,12 @@ function useGlideTable(options) {
|
|
|
1295
1366
|
enableInsertPaste,
|
|
1296
1367
|
enableVirtualization = true,
|
|
1297
1368
|
estimateRowHeight = DATA_TABLE_ROW_HEIGHT,
|
|
1298
|
-
virtualOverscan = DATA_TABLE_VIRTUAL_OVERSCAN
|
|
1369
|
+
virtualOverscan = DATA_TABLE_VIRTUAL_OVERSCAN,
|
|
1370
|
+
enableColumnResize = false,
|
|
1371
|
+
columnSizing: controlledColumnSizing,
|
|
1372
|
+
onColumnSizingChange,
|
|
1373
|
+
columnResizeMode = "onChange",
|
|
1374
|
+
enableColumnFreeze = false
|
|
1299
1375
|
} = options;
|
|
1300
1376
|
const labels = (0, import_react4.useMemo)(() => {
|
|
1301
1377
|
const resolved = resolveDataTableLabels(labelsProp);
|
|
@@ -1309,6 +1385,7 @@ function useGlideTable(options) {
|
|
|
1309
1385
|
const enableExpand = Boolean(toggleField);
|
|
1310
1386
|
const resolvedEnableSubtreeCopy = enableSubtreeCopy ?? enableExpand;
|
|
1311
1387
|
const [internalRowSelection, setInternalRowSelection] = (0, import_react4.useState)({});
|
|
1388
|
+
const [internalColumnSizing, setInternalColumnSizing] = (0, import_react4.useState)({});
|
|
1312
1389
|
const [internalExpandedRows, setInternalExpandedRows] = (0, import_react4.useState)(
|
|
1313
1390
|
() => /* @__PURE__ */ new Set()
|
|
1314
1391
|
);
|
|
@@ -1327,6 +1404,7 @@ function useGlideTable(options) {
|
|
|
1327
1404
|
controlledRowSelection,
|
|
1328
1405
|
internalRowSelection
|
|
1329
1406
|
);
|
|
1407
|
+
const columnSizing = controlledColumnSizing ?? internalColumnSizing;
|
|
1330
1408
|
const expandedRows = controlledExpandedRows ?? internalExpandedRows;
|
|
1331
1409
|
const handleExpandedRowsChange = (0, import_react4.useCallback)(
|
|
1332
1410
|
(next) => {
|
|
@@ -1352,9 +1430,27 @@ function useGlideTable(options) {
|
|
|
1352
1430
|
const table = (0, import_react_table.useReactTable)({
|
|
1353
1431
|
data: tableData,
|
|
1354
1432
|
columns,
|
|
1433
|
+
...enableColumnResize ? {
|
|
1434
|
+
defaultColumn: {
|
|
1435
|
+
minSize: DATA_TABLE_COLUMN_MIN_SIZE,
|
|
1436
|
+
maxSize: DATA_TABLE_COLUMN_MAX_SIZE
|
|
1437
|
+
}
|
|
1438
|
+
} : {},
|
|
1439
|
+
enableColumnResizing: enableColumnResize,
|
|
1440
|
+
columnResizeMode,
|
|
1355
1441
|
state: {
|
|
1356
|
-
rowSelection: rowSelectionMode === "none" ? {} : rowSelection
|
|
1442
|
+
rowSelection: rowSelectionMode === "none" ? {} : rowSelection,
|
|
1443
|
+
...enableColumnResize ? { columnSizing } : {}
|
|
1357
1444
|
},
|
|
1445
|
+
onColumnSizingChange: enableColumnResize ? (updater) => {
|
|
1446
|
+
if (onColumnSizingChange) {
|
|
1447
|
+
onColumnSizingChange(updater);
|
|
1448
|
+
return;
|
|
1449
|
+
}
|
|
1450
|
+
setInternalColumnSizing(
|
|
1451
|
+
(previous) => typeof updater === "function" ? updater(previous) : updater
|
|
1452
|
+
);
|
|
1453
|
+
} : void 0,
|
|
1358
1454
|
enableRowSelection: rowSelectionMode === "none" ? false : getRowCanSelect ? (row) => getRowCanSelect(row.original, row.index) : true,
|
|
1359
1455
|
enableMultiRowSelection: rowSelectionMode === "multi",
|
|
1360
1456
|
onRowSelectionChange: (updater) => {
|
|
@@ -1385,6 +1481,17 @@ function useGlideTable(options) {
|
|
|
1385
1481
|
const selectedCount = selectedRows.length;
|
|
1386
1482
|
const rows = table.getRowModel().rows;
|
|
1387
1483
|
const columnCount = table.getAllLeafColumns().length || 1;
|
|
1484
|
+
const visibleLeafColumns = table.getVisibleLeafColumns();
|
|
1485
|
+
const columnFreezeOffsets = (0, import_react4.useMemo)(() => {
|
|
1486
|
+
if (!enableColumnFreeze) return EMPTY_COLUMN_FREEZE_OFFSETS;
|
|
1487
|
+
return buildColumnFreezeOffsets(
|
|
1488
|
+
visibleLeafColumns.map((column) => ({
|
|
1489
|
+
id: column.id,
|
|
1490
|
+
size: column.getSize(),
|
|
1491
|
+
side: resolveColumnFreezeSide(column.columnDef.meta?.frozen)
|
|
1492
|
+
}))
|
|
1493
|
+
);
|
|
1494
|
+
}, [enableColumnFreeze, visibleLeafColumns, columnSizing]);
|
|
1388
1495
|
const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
|
|
1389
1496
|
count: shouldVirtualize ? rows.length : 0,
|
|
1390
1497
|
getScrollElement: () => scrollRef.current,
|
|
@@ -1501,6 +1608,13 @@ function useGlideTable(options) {
|
|
|
1501
1608
|
onToggleExpand: handleToggleExpand,
|
|
1502
1609
|
expandRowLabel: labels.expandRow,
|
|
1503
1610
|
collapseRowLabel: labels.collapseRow
|
|
1611
|
+
},
|
|
1612
|
+
columnResize: {
|
|
1613
|
+
enableColumnResize
|
|
1614
|
+
},
|
|
1615
|
+
columnFreeze: {
|
|
1616
|
+
enableColumnFreeze,
|
|
1617
|
+
offsets: columnFreezeOffsets
|
|
1504
1618
|
}
|
|
1505
1619
|
};
|
|
1506
1620
|
}, [
|
|
@@ -1533,7 +1647,10 @@ function useGlideTable(options) {
|
|
|
1533
1647
|
preventExpand,
|
|
1534
1648
|
handleToggleExpand,
|
|
1535
1649
|
labels.expandRow,
|
|
1536
|
-
labels.collapseRow
|
|
1650
|
+
labels.collapseRow,
|
|
1651
|
+
enableColumnResize,
|
|
1652
|
+
enableColumnFreeze,
|
|
1653
|
+
columnFreezeOffsets
|
|
1537
1654
|
]);
|
|
1538
1655
|
const copySelectionRef = (0, import_react4.useRef)(copySelection);
|
|
1539
1656
|
(0, import_react4.useEffect)(() => {
|
|
@@ -1554,6 +1671,8 @@ function useGlideTable(options) {
|
|
|
1554
1671
|
loadingText: labels.loading,
|
|
1555
1672
|
selectionLabel: labels.selection,
|
|
1556
1673
|
enableCellSelection,
|
|
1674
|
+
enableColumnResize,
|
|
1675
|
+
enableColumnFreeze,
|
|
1557
1676
|
shouldVirtualize,
|
|
1558
1677
|
scrollRef,
|
|
1559
1678
|
rowVirtualizer,
|
|
@@ -1567,6 +1686,19 @@ function useGlideTable(options) {
|
|
|
1567
1686
|
};
|
|
1568
1687
|
}
|
|
1569
1688
|
|
|
1689
|
+
// src/components/ui/table/features/column-resize/columnResize.ts
|
|
1690
|
+
function getColumnSizeStyle(size, options) {
|
|
1691
|
+
const { force = false, lockMax = false } = options ?? {};
|
|
1692
|
+
if (!force && size === DATA_TABLE_COLUMN_SIZE) {
|
|
1693
|
+
return void 0;
|
|
1694
|
+
}
|
|
1695
|
+
return {
|
|
1696
|
+
width: size,
|
|
1697
|
+
minWidth: size,
|
|
1698
|
+
...lockMax ? { maxWidth: size } : {}
|
|
1699
|
+
};
|
|
1700
|
+
}
|
|
1701
|
+
|
|
1570
1702
|
// src/components/ui/table/components/DataTable/DataTable.tsx
|
|
1571
1703
|
var import_react_table3 = require("@tanstack/react-table");
|
|
1572
1704
|
var import_react7 = require("react");
|
|
@@ -1773,7 +1905,18 @@ function DataTableRow({
|
|
|
1773
1905
|
virtualIndex,
|
|
1774
1906
|
measureElement
|
|
1775
1907
|
}) {
|
|
1776
|
-
const {
|
|
1908
|
+
const {
|
|
1909
|
+
classNames,
|
|
1910
|
+
rowSpan,
|
|
1911
|
+
selection,
|
|
1912
|
+
cellSelection,
|
|
1913
|
+
cellEdit,
|
|
1914
|
+
expand,
|
|
1915
|
+
columnResize,
|
|
1916
|
+
columnFreeze
|
|
1917
|
+
} = useDataTableRowContext();
|
|
1918
|
+
const { enableColumnResize } = columnResize;
|
|
1919
|
+
const { enableColumnFreeze, offsets: freezeOffsets } = columnFreeze;
|
|
1777
1920
|
const {
|
|
1778
1921
|
enableRowSpan,
|
|
1779
1922
|
primaryRowSpanColumnId,
|
|
@@ -1954,6 +2097,17 @@ function DataTableRow({
|
|
|
1954
2097
|
);
|
|
1955
2098
|
const resolveCellRowIndex = (clientY, element) => getRowIndexInMergedCell(clientY, element, rowIndex, cellRowSpan);
|
|
1956
2099
|
const hasSelectionEdges = hasCellSelectionEdges(selectionEdgeStyle);
|
|
2100
|
+
const sizeStyle = getColumnSizeStyle(cell.column.getSize(), {
|
|
2101
|
+
force: enableColumnResize,
|
|
2102
|
+
lockMax: enableColumnResize
|
|
2103
|
+
});
|
|
2104
|
+
const freezeOffset = enableColumnFreeze ? freezeOffsets.get(columnId) : void 0;
|
|
2105
|
+
const freezeStyle = getColumnFreezeStyle(freezeOffset);
|
|
2106
|
+
const cellStyle = {
|
|
2107
|
+
...sizeStyle,
|
|
2108
|
+
...freezeStyle,
|
|
2109
|
+
...selectionEdgeStyle
|
|
2110
|
+
};
|
|
1957
2111
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
1958
2112
|
"td",
|
|
1959
2113
|
{
|
|
@@ -1967,6 +2121,8 @@ function DataTableRow({
|
|
|
1967
2121
|
"data-selection-edges": hasSelectionEdges ? "" : void 0,
|
|
1968
2122
|
"data-editable": editable ? "" : void 0,
|
|
1969
2123
|
"data-editing": isEditing ? "" : void 0,
|
|
2124
|
+
"data-frozen": freezeOffset?.side,
|
|
2125
|
+
"data-freeze-edge": freezeOffset?.isEdge ? "" : void 0,
|
|
1970
2126
|
onMouseDown: (event) => {
|
|
1971
2127
|
if (isEditing) {
|
|
1972
2128
|
event.stopPropagation();
|
|
@@ -2001,9 +2157,10 @@ function DataTableRow({
|
|
|
2001
2157
|
event.stopPropagation();
|
|
2002
2158
|
onStartEdit(rowIndex, cellIndex);
|
|
2003
2159
|
},
|
|
2004
|
-
style:
|
|
2160
|
+
style: Object.keys(cellStyle).length > 0 ? cellStyle : void 0,
|
|
2005
2161
|
className: cn(
|
|
2006
2162
|
"data-table-cell",
|
|
2163
|
+
freezeOffset && `data-table-cell--frozen-${freezeOffset.side}`,
|
|
2007
2164
|
CELL_ALIGN_CLASS[align],
|
|
2008
2165
|
cellClassName,
|
|
2009
2166
|
isMerged && "is-merged",
|
|
@@ -2236,10 +2393,13 @@ function DataTable({
|
|
|
2236
2393
|
rows,
|
|
2237
2394
|
columnCount,
|
|
2238
2395
|
selectedCount,
|
|
2396
|
+
labels,
|
|
2239
2397
|
emptyText,
|
|
2240
2398
|
loadingText,
|
|
2241
2399
|
selectionLabel,
|
|
2242
2400
|
enableCellSelection,
|
|
2401
|
+
enableColumnResize,
|
|
2402
|
+
enableColumnFreeze,
|
|
2243
2403
|
shouldVirtualize,
|
|
2244
2404
|
scrollRef,
|
|
2245
2405
|
rowVirtualizer,
|
|
@@ -2254,6 +2414,7 @@ function DataTable({
|
|
|
2254
2414
|
const RowSlot = slots?.Row ?? DataTableRow;
|
|
2255
2415
|
const PendingSlot = slots?.Pending ?? DefaultPending;
|
|
2256
2416
|
const EmptySlot = slots?.Empty ?? DefaultEmpty;
|
|
2417
|
+
const freezeOffsets = rowContextValue.columnFreeze.offsets;
|
|
2257
2418
|
const contextValue = (0, import_react7.useMemo)(
|
|
2258
2419
|
() => ({ ...rowContextValue, classNames }),
|
|
2259
2420
|
[rowContextValue, classNames]
|
|
@@ -2274,6 +2435,8 @@ function DataTable({
|
|
|
2274
2435
|
className: cn(
|
|
2275
2436
|
"DataTableJSX",
|
|
2276
2437
|
!enableCellSelection && "DataTableJSX--no-cell-selection",
|
|
2438
|
+
enableColumnResize && "DataTableJSX--column-resize",
|
|
2439
|
+
enableColumnFreeze && "DataTableJSX--column-freeze",
|
|
2277
2440
|
classNames?.root,
|
|
2278
2441
|
className
|
|
2279
2442
|
),
|
|
@@ -2294,6 +2457,7 @@ function DataTable({
|
|
|
2294
2457
|
"table",
|
|
2295
2458
|
{
|
|
2296
2459
|
className: cn("data-table", classNames?.table),
|
|
2460
|
+
style: enableColumnResize ? { width: table.getTotalSize() } : void 0,
|
|
2297
2461
|
onDragStart: enableCellSelection ? (event) => event.preventDefault() : void 0,
|
|
2298
2462
|
children: [
|
|
2299
2463
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { className: cn("data-table-head", classNames?.head), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
@@ -2303,22 +2467,54 @@ function DataTable({
|
|
|
2303
2467
|
children: headerGroup.headers.map((header) => {
|
|
2304
2468
|
const align = header.column.columnDef.meta?.align ?? "center";
|
|
2305
2469
|
const headerClassName = header.column.columnDef.meta?.headerClassName;
|
|
2306
|
-
|
|
2470
|
+
const canResize = enableColumnResize && header.column.getCanResize();
|
|
2471
|
+
const sizeStyle = getColumnSizeStyle(header.getSize(), {
|
|
2472
|
+
force: enableColumnResize,
|
|
2473
|
+
lockMax: enableColumnResize
|
|
2474
|
+
});
|
|
2475
|
+
const freezeOffset = enableColumnFreeze ? freezeOffsets.get(header.column.id) : void 0;
|
|
2476
|
+
const freezeStyle = getColumnFreezeStyle(freezeOffset, {
|
|
2477
|
+
isHeader: true
|
|
2478
|
+
});
|
|
2479
|
+
const headerStyle = {
|
|
2480
|
+
...sizeStyle,
|
|
2481
|
+
...freezeStyle
|
|
2482
|
+
};
|
|
2483
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
2307
2484
|
"th",
|
|
2308
2485
|
{
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
minWidth: header.getSize() !== 150 ? header.getSize() : void 0
|
|
2314
|
-
},
|
|
2486
|
+
"data-resizing": header.column.getIsResizing() ? "" : void 0,
|
|
2487
|
+
"data-frozen": freezeOffset?.side,
|
|
2488
|
+
"data-freeze-edge": freezeOffset?.isEdge ? "" : void 0,
|
|
2489
|
+
style: Object.keys(headerStyle).length > 0 ? headerStyle : void 0,
|
|
2315
2490
|
className: cn(
|
|
2316
2491
|
"data-table-head-cell",
|
|
2492
|
+
freezeOffset && `data-table-head-cell--frozen-${freezeOffset.side}`,
|
|
2317
2493
|
CELL_ALIGN_CLASS[align],
|
|
2318
2494
|
classNames?.headCell,
|
|
2319
2495
|
headerClassName
|
|
2320
2496
|
),
|
|
2321
|
-
children:
|
|
2497
|
+
children: [
|
|
2498
|
+
header.isPlaceholder ? null : (0, import_react_table3.flexRender)(header.column.columnDef.header, header.getContext()),
|
|
2499
|
+
canResize ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
2500
|
+
"div",
|
|
2501
|
+
{
|
|
2502
|
+
role: "separator",
|
|
2503
|
+
"aria-orientation": "vertical",
|
|
2504
|
+
"aria-label": labels.resizeColumn,
|
|
2505
|
+
"data-table-disable-cell-selection": "",
|
|
2506
|
+
className: cn(
|
|
2507
|
+
"data-table-resize-handle",
|
|
2508
|
+
classNames?.resizeHandle
|
|
2509
|
+
),
|
|
2510
|
+
onMouseDown: header.getResizeHandler(),
|
|
2511
|
+
onTouchStart: header.getResizeHandler(),
|
|
2512
|
+
onDoubleClick: () => {
|
|
2513
|
+
header.column.resetSize();
|
|
2514
|
+
}
|
|
2515
|
+
}
|
|
2516
|
+
) : null
|
|
2517
|
+
]
|
|
2322
2518
|
},
|
|
2323
2519
|
header.id
|
|
2324
2520
|
);
|
|
@@ -2446,6 +2642,10 @@ function buildColumnDef(props, sort, onSort) {
|
|
|
2446
2642
|
children,
|
|
2447
2643
|
sortable = false,
|
|
2448
2644
|
width,
|
|
2645
|
+
minWidth,
|
|
2646
|
+
maxWidth,
|
|
2647
|
+
resizable,
|
|
2648
|
+
frozen,
|
|
2449
2649
|
align,
|
|
2450
2650
|
rowSpan,
|
|
2451
2651
|
rowSpanKey,
|
|
@@ -2459,7 +2659,10 @@ function buildColumnDef(props, sort, onSort) {
|
|
|
2459
2659
|
return {
|
|
2460
2660
|
id: field,
|
|
2461
2661
|
...!virtual ? { accessorKey: field } : {},
|
|
2462
|
-
size: width ??
|
|
2662
|
+
size: width ?? DATA_TABLE_COLUMN_SIZE,
|
|
2663
|
+
...minWidth != null ? { minSize: minWidth } : {},
|
|
2664
|
+
...maxWidth != null ? { maxSize: maxWidth } : {},
|
|
2665
|
+
...resizable === false ? { enableResizing: false } : {},
|
|
2463
2666
|
header: sortable ? () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SortableHeader, { label: children, field, sort, onSort }) : (
|
|
2464
2667
|
// eslint-disable-next-line @typescript-eslint/promise-function-async
|
|
2465
2668
|
() => children
|
|
@@ -2479,6 +2682,7 @@ function buildColumnDef(props, sort, onSort) {
|
|
|
2479
2682
|
editable,
|
|
2480
2683
|
editType,
|
|
2481
2684
|
editInputProps,
|
|
2685
|
+
frozen,
|
|
2482
2686
|
className,
|
|
2483
2687
|
headerClassName
|
|
2484
2688
|
}
|
|
@@ -2755,6 +2959,7 @@ var Table = Object.assign(TableRoot, {
|
|
|
2755
2959
|
applyCellEdit,
|
|
2756
2960
|
applyFillData,
|
|
2757
2961
|
applySelectionUpdater,
|
|
2962
|
+
buildColumnFreezeOffsets,
|
|
2758
2963
|
buildColumnRowSpanMap,
|
|
2759
2964
|
buildRowsPastePayload,
|
|
2760
2965
|
canExpandRow,
|
|
@@ -2767,6 +2972,8 @@ var Table = Object.assign(TableRoot, {
|
|
|
2767
2972
|
getCellEditDraftValue,
|
|
2768
2973
|
getCellSelectionEdgeStyle,
|
|
2769
2974
|
getColumnEditType,
|
|
2975
|
+
getColumnFreezeStyle,
|
|
2976
|
+
getColumnSizeStyle,
|
|
2770
2977
|
getRowIndexInMergedCell,
|
|
2771
2978
|
hasCellSelectionEdges,
|
|
2772
2979
|
isCellInSelection,
|
|
@@ -2776,6 +2983,7 @@ var Table = Object.assign(TableRoot, {
|
|
|
2776
2983
|
parseCellEditValue,
|
|
2777
2984
|
parseClipboardTSV,
|
|
2778
2985
|
parseClipboardTSVWithDepths,
|
|
2986
|
+
resolveColumnFreezeSide,
|
|
2779
2987
|
resolveDataTableLabels,
|
|
2780
2988
|
resolvePasteColumnIds,
|
|
2781
2989
|
resolveRowSelection,
|
package/dist/index.d.cts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export { D as DEFAULT_DATA_TABLE_LABELS,
|
|
2
|
-
export { CELL_SELECTION_EDGES_CLASS, CellSelectionBounds, ColumnRowSpanMap, CopyRowEntry, CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, flattenSubtreeRows, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, writeSelectionToClipboard } from './core.cjs';
|
|
1
|
+
export { C as ColumnFreezeColumnInput, a as ColumnFreezeMeta, b as ColumnFreezeOffset, c as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, d as DataTableClassNames, e as DataTableCopyActions, f as DataTableLabels, g as DataTableProps, h as DataTableSlots, P as PasteMode, R as RowSelectionMode, i as RowsPastePayload, T as TableColumnProps, j as TableProps, k as buildColumnFreezeOffsets, l as getColumnFreezeStyle, r as resolveColumnFreezeSide, m as resolveDataTableLabels } from './types-D031_07N.cjs';
|
|
2
|
+
export { CELL_SELECTION_EDGES_CLASS, CellSelectionBounds, ColumnRowSpanMap, CopyRowEntry, CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, flattenSubtreeRows, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getColumnSizeStyle, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, writeSelectionToClipboard } from './core.cjs';
|
|
3
3
|
export { DataTable, Table, TableCompoundComponent, createTable } from './compound.cjs';
|
|
4
|
-
export { ColumnDef, RowSelectionState } from '@tanstack/react-table';
|
|
4
|
+
export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
|
|
5
5
|
import 'react';
|
|
6
6
|
import '@tanstack/react-virtual';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export { D as DEFAULT_DATA_TABLE_LABELS,
|
|
2
|
-
export { CELL_SELECTION_EDGES_CLASS, CellSelectionBounds, ColumnRowSpanMap, CopyRowEntry, CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, flattenSubtreeRows, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, writeSelectionToClipboard } from './core.js';
|
|
1
|
+
export { C as ColumnFreezeColumnInput, a as ColumnFreezeMeta, b as ColumnFreezeOffset, c as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, d as DataTableClassNames, e as DataTableCopyActions, f as DataTableLabels, g as DataTableProps, h as DataTableSlots, P as PasteMode, R as RowSelectionMode, i as RowsPastePayload, T as TableColumnProps, j as TableProps, k as buildColumnFreezeOffsets, l as getColumnFreezeStyle, r as resolveColumnFreezeSide, m as resolveDataTableLabels } from './types-D031_07N.js';
|
|
2
|
+
export { CELL_SELECTION_EDGES_CLASS, CellSelectionBounds, ColumnRowSpanMap, CopyRowEntry, CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, flattenSubtreeRows, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getColumnSizeStyle, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, writeSelectionToClipboard } from './core.js';
|
|
3
3
|
export { DataTable, Table, TableCompoundComponent, createTable } from './compound.js';
|
|
4
|
-
export { ColumnDef, RowSelectionState } from '@tanstack/react-table';
|
|
4
|
+
export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
|
|
5
5
|
import 'react';
|
|
6
6
|
import '@tanstack/react-virtual';
|