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
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,9 @@ __export(src_exports, {
|
|
|
43
44
|
getCellEditDraftValue: () => getCellEditDraftValue,
|
|
44
45
|
getCellSelectionEdgeStyle: () => getCellSelectionEdgeStyle,
|
|
45
46
|
getColumnEditType: () => getColumnEditType,
|
|
47
|
+
getColumnFreezeEdgeAttr: () => getColumnFreezeEdgeAttr,
|
|
48
|
+
getColumnFreezeStyle: () => getColumnFreezeStyle,
|
|
49
|
+
getColumnSizeStyle: () => getColumnSizeStyle,
|
|
46
50
|
getRowIndexInMergedCell: () => getRowIndexInMergedCell,
|
|
47
51
|
hasCellSelectionEdges: () => hasCellSelectionEdges,
|
|
48
52
|
isCellInSelection: () => isCellInSelection,
|
|
@@ -52,6 +56,7 @@ __export(src_exports, {
|
|
|
52
56
|
parseCellEditValue: () => parseCellEditValue,
|
|
53
57
|
parseClipboardTSV: () => parseClipboardTSV,
|
|
54
58
|
parseClipboardTSVWithDepths: () => parseClipboardTSVWithDepths,
|
|
59
|
+
resolveColumnFreezeSide: () => resolveColumnFreezeSide,
|
|
55
60
|
resolveDataTableLabels: () => resolveDataTableLabels,
|
|
56
61
|
resolvePasteColumnIds: () => resolvePasteColumnIds,
|
|
57
62
|
resolveRowSelection: () => resolveRowSelection,
|
|
@@ -74,7 +79,8 @@ var DEFAULT_DATA_TABLE_LABELS = {
|
|
|
74
79
|
loading: "Loading...",
|
|
75
80
|
selection: (selectedCount) => selectedCount > 0 ? `\u2713 ${selectedCount} selected` : null,
|
|
76
81
|
expandRow: "Expand row",
|
|
77
|
-
collapseRow: "Collapse row"
|
|
82
|
+
collapseRow: "Collapse row",
|
|
83
|
+
resizeColumn: "Resize column"
|
|
78
84
|
};
|
|
79
85
|
function resolveDataTableLabels(partial) {
|
|
80
86
|
return {
|
|
@@ -105,6 +111,9 @@ var ROW_HOVERED_BG_CLASS = "row-hovered";
|
|
|
105
111
|
var CELL_SELECTION_FILL_CLASS = "cell-selection-fill";
|
|
106
112
|
var DATA_TABLE_ROW_HEIGHT = 44;
|
|
107
113
|
var DATA_TABLE_VIRTUAL_OVERSCAN = 8;
|
|
114
|
+
var DATA_TABLE_COLUMN_SIZE = 150;
|
|
115
|
+
var DATA_TABLE_COLUMN_MIN_SIZE = 40;
|
|
116
|
+
var DATA_TABLE_COLUMN_MAX_SIZE = 800;
|
|
108
117
|
|
|
109
118
|
// src/components/ui/table/features/cell-edit/useCellEdit.ts
|
|
110
119
|
var import_react = require("react");
|
|
@@ -995,6 +1004,89 @@ function useCellSelection({
|
|
|
995
1004
|
};
|
|
996
1005
|
}
|
|
997
1006
|
|
|
1007
|
+
// src/components/ui/table/features/column-freeze/columnFreeze.ts
|
|
1008
|
+
var HEADER_Z_BASE = 30;
|
|
1009
|
+
var BODY_Z_BASE = 5;
|
|
1010
|
+
function resolveColumnFreezeSide(frozen) {
|
|
1011
|
+
if (frozen === true || frozen === "left") return "left";
|
|
1012
|
+
if (frozen === "right") return "right";
|
|
1013
|
+
return void 0;
|
|
1014
|
+
}
|
|
1015
|
+
function getColumnFreezeEdgeAttr(offset) {
|
|
1016
|
+
if (!offset) return void 0;
|
|
1017
|
+
if (offset.edgeLeft && offset.edgeRight) return "both";
|
|
1018
|
+
if (offset.edgeLeft) return "left";
|
|
1019
|
+
if (offset.edgeRight) return "right";
|
|
1020
|
+
return void 0;
|
|
1021
|
+
}
|
|
1022
|
+
function buildColumnFreezeOffsets(columns) {
|
|
1023
|
+
const result = /* @__PURE__ */ new Map();
|
|
1024
|
+
let leftOffset = 0;
|
|
1025
|
+
const leftIds = [];
|
|
1026
|
+
for (const column of columns) {
|
|
1027
|
+
if (column.side !== "left") continue;
|
|
1028
|
+
leftIds.push(column.id);
|
|
1029
|
+
result.set(column.id, {
|
|
1030
|
+
side: "left",
|
|
1031
|
+
offset: leftOffset,
|
|
1032
|
+
isEdge: false,
|
|
1033
|
+
edgeLeft: false,
|
|
1034
|
+
edgeRight: false,
|
|
1035
|
+
stack: 0
|
|
1036
|
+
});
|
|
1037
|
+
leftOffset += column.size;
|
|
1038
|
+
}
|
|
1039
|
+
leftIds.forEach((id, index) => {
|
|
1040
|
+
const entry = result.get(id);
|
|
1041
|
+
if (!entry) return;
|
|
1042
|
+
entry.stack = leftIds.length - index;
|
|
1043
|
+
});
|
|
1044
|
+
let rightOffset = 0;
|
|
1045
|
+
const rightIds = [];
|
|
1046
|
+
for (let index = columns.length - 1; index >= 0; index -= 1) {
|
|
1047
|
+
const column = columns[index];
|
|
1048
|
+
if (!column || column.side !== "right") continue;
|
|
1049
|
+
rightIds.push(column.id);
|
|
1050
|
+
result.set(column.id, {
|
|
1051
|
+
side: "right",
|
|
1052
|
+
offset: rightOffset,
|
|
1053
|
+
isEdge: false,
|
|
1054
|
+
edgeLeft: false,
|
|
1055
|
+
edgeRight: false,
|
|
1056
|
+
stack: 0
|
|
1057
|
+
});
|
|
1058
|
+
rightOffset += column.size;
|
|
1059
|
+
}
|
|
1060
|
+
rightIds.forEach((id, index) => {
|
|
1061
|
+
const entry = result.get(id);
|
|
1062
|
+
if (!entry) return;
|
|
1063
|
+
entry.stack = rightIds.length - index;
|
|
1064
|
+
});
|
|
1065
|
+
columns.forEach((column, index) => {
|
|
1066
|
+
if (!column.side) return;
|
|
1067
|
+
const entry = result.get(column.id);
|
|
1068
|
+
if (!entry) return;
|
|
1069
|
+
const prevSide = index > 0 ? columns[index - 1]?.side : void 0;
|
|
1070
|
+
const nextSide = index < columns.length - 1 ? columns[index + 1]?.side : void 0;
|
|
1071
|
+
entry.edgeLeft = prevSide !== column.side;
|
|
1072
|
+
entry.edgeRight = nextSide !== column.side;
|
|
1073
|
+
if (index === 0) entry.edgeLeft = false;
|
|
1074
|
+
if (index === columns.length - 1) entry.edgeRight = false;
|
|
1075
|
+
entry.isEdge = entry.edgeLeft || entry.edgeRight;
|
|
1076
|
+
});
|
|
1077
|
+
return result;
|
|
1078
|
+
}
|
|
1079
|
+
function getColumnFreezeStyle(offset, options) {
|
|
1080
|
+
if (!offset) return void 0;
|
|
1081
|
+
const zBase = options?.isHeader ? HEADER_Z_BASE : BODY_Z_BASE;
|
|
1082
|
+
return {
|
|
1083
|
+
position: "sticky",
|
|
1084
|
+
...offset.side === "left" ? { left: offset.offset } : { right: offset.offset },
|
|
1085
|
+
zIndex: zBase + offset.stack,
|
|
1086
|
+
...options?.isHeader ? { top: 0 } : {}
|
|
1087
|
+
};
|
|
1088
|
+
}
|
|
1089
|
+
|
|
998
1090
|
// src/components/ui/table/features/row-expand/row-expand.ts
|
|
999
1091
|
var import_react3 = require("react");
|
|
1000
1092
|
function getFieldValue(row, key) {
|
|
@@ -1260,6 +1352,7 @@ function collectRowSpanColumns(columns) {
|
|
|
1260
1352
|
}
|
|
1261
1353
|
|
|
1262
1354
|
// src/core/useGlideTable.ts
|
|
1355
|
+
var EMPTY_COLUMN_FREEZE_OFFSETS = /* @__PURE__ */ new Map();
|
|
1263
1356
|
function useGlideTable(options) {
|
|
1264
1357
|
const {
|
|
1265
1358
|
data,
|
|
@@ -1295,7 +1388,12 @@ function useGlideTable(options) {
|
|
|
1295
1388
|
enableInsertPaste,
|
|
1296
1389
|
enableVirtualization = true,
|
|
1297
1390
|
estimateRowHeight = DATA_TABLE_ROW_HEIGHT,
|
|
1298
|
-
virtualOverscan = DATA_TABLE_VIRTUAL_OVERSCAN
|
|
1391
|
+
virtualOverscan = DATA_TABLE_VIRTUAL_OVERSCAN,
|
|
1392
|
+
enableColumnResize = false,
|
|
1393
|
+
columnSizing: controlledColumnSizing,
|
|
1394
|
+
onColumnSizingChange,
|
|
1395
|
+
columnResizeMode = "onChange",
|
|
1396
|
+
enableColumnFreeze = false
|
|
1299
1397
|
} = options;
|
|
1300
1398
|
const labels = (0, import_react4.useMemo)(() => {
|
|
1301
1399
|
const resolved = resolveDataTableLabels(labelsProp);
|
|
@@ -1309,6 +1407,7 @@ function useGlideTable(options) {
|
|
|
1309
1407
|
const enableExpand = Boolean(toggleField);
|
|
1310
1408
|
const resolvedEnableSubtreeCopy = enableSubtreeCopy ?? enableExpand;
|
|
1311
1409
|
const [internalRowSelection, setInternalRowSelection] = (0, import_react4.useState)({});
|
|
1410
|
+
const [internalColumnSizing, setInternalColumnSizing] = (0, import_react4.useState)({});
|
|
1312
1411
|
const [internalExpandedRows, setInternalExpandedRows] = (0, import_react4.useState)(
|
|
1313
1412
|
() => /* @__PURE__ */ new Set()
|
|
1314
1413
|
);
|
|
@@ -1327,6 +1426,7 @@ function useGlideTable(options) {
|
|
|
1327
1426
|
controlledRowSelection,
|
|
1328
1427
|
internalRowSelection
|
|
1329
1428
|
);
|
|
1429
|
+
const columnSizing = controlledColumnSizing ?? internalColumnSizing;
|
|
1330
1430
|
const expandedRows = controlledExpandedRows ?? internalExpandedRows;
|
|
1331
1431
|
const handleExpandedRowsChange = (0, import_react4.useCallback)(
|
|
1332
1432
|
(next) => {
|
|
@@ -1352,9 +1452,27 @@ function useGlideTable(options) {
|
|
|
1352
1452
|
const table = (0, import_react_table.useReactTable)({
|
|
1353
1453
|
data: tableData,
|
|
1354
1454
|
columns,
|
|
1455
|
+
...enableColumnResize ? {
|
|
1456
|
+
defaultColumn: {
|
|
1457
|
+
minSize: DATA_TABLE_COLUMN_MIN_SIZE,
|
|
1458
|
+
maxSize: DATA_TABLE_COLUMN_MAX_SIZE
|
|
1459
|
+
}
|
|
1460
|
+
} : {},
|
|
1461
|
+
enableColumnResizing: enableColumnResize,
|
|
1462
|
+
columnResizeMode,
|
|
1355
1463
|
state: {
|
|
1356
|
-
rowSelection: rowSelectionMode === "none" ? {} : rowSelection
|
|
1464
|
+
rowSelection: rowSelectionMode === "none" ? {} : rowSelection,
|
|
1465
|
+
...enableColumnResize ? { columnSizing } : {}
|
|
1357
1466
|
},
|
|
1467
|
+
onColumnSizingChange: enableColumnResize ? (updater) => {
|
|
1468
|
+
if (onColumnSizingChange) {
|
|
1469
|
+
onColumnSizingChange(updater);
|
|
1470
|
+
return;
|
|
1471
|
+
}
|
|
1472
|
+
setInternalColumnSizing(
|
|
1473
|
+
(previous) => typeof updater === "function" ? updater(previous) : updater
|
|
1474
|
+
);
|
|
1475
|
+
} : void 0,
|
|
1358
1476
|
enableRowSelection: rowSelectionMode === "none" ? false : getRowCanSelect ? (row) => getRowCanSelect(row.original, row.index) : true,
|
|
1359
1477
|
enableMultiRowSelection: rowSelectionMode === "multi",
|
|
1360
1478
|
onRowSelectionChange: (updater) => {
|
|
@@ -1385,6 +1503,17 @@ function useGlideTable(options) {
|
|
|
1385
1503
|
const selectedCount = selectedRows.length;
|
|
1386
1504
|
const rows = table.getRowModel().rows;
|
|
1387
1505
|
const columnCount = table.getAllLeafColumns().length || 1;
|
|
1506
|
+
const visibleLeafColumns = table.getVisibleLeafColumns();
|
|
1507
|
+
const columnFreezeOffsets = (0, import_react4.useMemo)(() => {
|
|
1508
|
+
if (!enableColumnFreeze) return EMPTY_COLUMN_FREEZE_OFFSETS;
|
|
1509
|
+
return buildColumnFreezeOffsets(
|
|
1510
|
+
visibleLeafColumns.map((column) => ({
|
|
1511
|
+
id: column.id,
|
|
1512
|
+
size: column.getSize(),
|
|
1513
|
+
side: resolveColumnFreezeSide(column.columnDef.meta?.frozen)
|
|
1514
|
+
}))
|
|
1515
|
+
);
|
|
1516
|
+
}, [enableColumnFreeze, visibleLeafColumns, columnSizing]);
|
|
1388
1517
|
const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
|
|
1389
1518
|
count: shouldVirtualize ? rows.length : 0,
|
|
1390
1519
|
getScrollElement: () => scrollRef.current,
|
|
@@ -1501,6 +1630,13 @@ function useGlideTable(options) {
|
|
|
1501
1630
|
onToggleExpand: handleToggleExpand,
|
|
1502
1631
|
expandRowLabel: labels.expandRow,
|
|
1503
1632
|
collapseRowLabel: labels.collapseRow
|
|
1633
|
+
},
|
|
1634
|
+
columnResize: {
|
|
1635
|
+
enableColumnResize
|
|
1636
|
+
},
|
|
1637
|
+
columnFreeze: {
|
|
1638
|
+
enableColumnFreeze,
|
|
1639
|
+
offsets: columnFreezeOffsets
|
|
1504
1640
|
}
|
|
1505
1641
|
};
|
|
1506
1642
|
}, [
|
|
@@ -1533,7 +1669,10 @@ function useGlideTable(options) {
|
|
|
1533
1669
|
preventExpand,
|
|
1534
1670
|
handleToggleExpand,
|
|
1535
1671
|
labels.expandRow,
|
|
1536
|
-
labels.collapseRow
|
|
1672
|
+
labels.collapseRow,
|
|
1673
|
+
enableColumnResize,
|
|
1674
|
+
enableColumnFreeze,
|
|
1675
|
+
columnFreezeOffsets
|
|
1537
1676
|
]);
|
|
1538
1677
|
const copySelectionRef = (0, import_react4.useRef)(copySelection);
|
|
1539
1678
|
(0, import_react4.useEffect)(() => {
|
|
@@ -1554,6 +1693,8 @@ function useGlideTable(options) {
|
|
|
1554
1693
|
loadingText: labels.loading,
|
|
1555
1694
|
selectionLabel: labels.selection,
|
|
1556
1695
|
enableCellSelection,
|
|
1696
|
+
enableColumnResize,
|
|
1697
|
+
enableColumnFreeze,
|
|
1557
1698
|
shouldVirtualize,
|
|
1558
1699
|
scrollRef,
|
|
1559
1700
|
rowVirtualizer,
|
|
@@ -1567,6 +1708,19 @@ function useGlideTable(options) {
|
|
|
1567
1708
|
};
|
|
1568
1709
|
}
|
|
1569
1710
|
|
|
1711
|
+
// src/components/ui/table/features/column-resize/columnResize.ts
|
|
1712
|
+
function getColumnSizeStyle(size, options) {
|
|
1713
|
+
const { force = false, lockMax = false } = options ?? {};
|
|
1714
|
+
if (!force && size === DATA_TABLE_COLUMN_SIZE) {
|
|
1715
|
+
return void 0;
|
|
1716
|
+
}
|
|
1717
|
+
return {
|
|
1718
|
+
width: size,
|
|
1719
|
+
minWidth: size,
|
|
1720
|
+
...lockMax ? { maxWidth: size } : {}
|
|
1721
|
+
};
|
|
1722
|
+
}
|
|
1723
|
+
|
|
1570
1724
|
// src/components/ui/table/components/DataTable/DataTable.tsx
|
|
1571
1725
|
var import_react_table3 = require("@tanstack/react-table");
|
|
1572
1726
|
var import_react7 = require("react");
|
|
@@ -1773,7 +1927,18 @@ function DataTableRow({
|
|
|
1773
1927
|
virtualIndex,
|
|
1774
1928
|
measureElement
|
|
1775
1929
|
}) {
|
|
1776
|
-
const {
|
|
1930
|
+
const {
|
|
1931
|
+
classNames,
|
|
1932
|
+
rowSpan,
|
|
1933
|
+
selection,
|
|
1934
|
+
cellSelection,
|
|
1935
|
+
cellEdit,
|
|
1936
|
+
expand,
|
|
1937
|
+
columnResize,
|
|
1938
|
+
columnFreeze
|
|
1939
|
+
} = useDataTableRowContext();
|
|
1940
|
+
const { enableColumnResize } = columnResize;
|
|
1941
|
+
const { enableColumnFreeze, offsets: freezeOffsets } = columnFreeze;
|
|
1777
1942
|
const {
|
|
1778
1943
|
enableRowSpan,
|
|
1779
1944
|
primaryRowSpanColumnId,
|
|
@@ -1954,6 +2119,17 @@ function DataTableRow({
|
|
|
1954
2119
|
);
|
|
1955
2120
|
const resolveCellRowIndex = (clientY, element) => getRowIndexInMergedCell(clientY, element, rowIndex, cellRowSpan);
|
|
1956
2121
|
const hasSelectionEdges = hasCellSelectionEdges(selectionEdgeStyle);
|
|
2122
|
+
const sizeStyle = getColumnSizeStyle(cell.column.getSize(), {
|
|
2123
|
+
force: enableColumnResize,
|
|
2124
|
+
lockMax: enableColumnResize
|
|
2125
|
+
});
|
|
2126
|
+
const freezeOffset = enableColumnFreeze ? freezeOffsets.get(columnId) : void 0;
|
|
2127
|
+
const freezeStyle = getColumnFreezeStyle(freezeOffset);
|
|
2128
|
+
const cellStyle = {
|
|
2129
|
+
...sizeStyle,
|
|
2130
|
+
...freezeStyle,
|
|
2131
|
+
...selectionEdgeStyle
|
|
2132
|
+
};
|
|
1957
2133
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
1958
2134
|
"td",
|
|
1959
2135
|
{
|
|
@@ -1967,6 +2143,8 @@ function DataTableRow({
|
|
|
1967
2143
|
"data-selection-edges": hasSelectionEdges ? "" : void 0,
|
|
1968
2144
|
"data-editable": editable ? "" : void 0,
|
|
1969
2145
|
"data-editing": isEditing ? "" : void 0,
|
|
2146
|
+
"data-frozen": freezeOffset?.side,
|
|
2147
|
+
"data-freeze-edge": getColumnFreezeEdgeAttr(freezeOffset),
|
|
1970
2148
|
onMouseDown: (event) => {
|
|
1971
2149
|
if (isEditing) {
|
|
1972
2150
|
event.stopPropagation();
|
|
@@ -2001,9 +2179,10 @@ function DataTableRow({
|
|
|
2001
2179
|
event.stopPropagation();
|
|
2002
2180
|
onStartEdit(rowIndex, cellIndex);
|
|
2003
2181
|
},
|
|
2004
|
-
style:
|
|
2182
|
+
style: Object.keys(cellStyle).length > 0 ? cellStyle : void 0,
|
|
2005
2183
|
className: cn(
|
|
2006
2184
|
"data-table-cell",
|
|
2185
|
+
freezeOffset && `data-table-cell--frozen-${freezeOffset.side}`,
|
|
2007
2186
|
CELL_ALIGN_CLASS[align],
|
|
2008
2187
|
cellClassName,
|
|
2009
2188
|
isMerged && "is-merged",
|
|
@@ -2236,10 +2415,13 @@ function DataTable({
|
|
|
2236
2415
|
rows,
|
|
2237
2416
|
columnCount,
|
|
2238
2417
|
selectedCount,
|
|
2418
|
+
labels,
|
|
2239
2419
|
emptyText,
|
|
2240
2420
|
loadingText,
|
|
2241
2421
|
selectionLabel,
|
|
2242
2422
|
enableCellSelection,
|
|
2423
|
+
enableColumnResize,
|
|
2424
|
+
enableColumnFreeze,
|
|
2243
2425
|
shouldVirtualize,
|
|
2244
2426
|
scrollRef,
|
|
2245
2427
|
rowVirtualizer,
|
|
@@ -2254,6 +2436,7 @@ function DataTable({
|
|
|
2254
2436
|
const RowSlot = slots?.Row ?? DataTableRow;
|
|
2255
2437
|
const PendingSlot = slots?.Pending ?? DefaultPending;
|
|
2256
2438
|
const EmptySlot = slots?.Empty ?? DefaultEmpty;
|
|
2439
|
+
const freezeOffsets = rowContextValue.columnFreeze.offsets;
|
|
2257
2440
|
const contextValue = (0, import_react7.useMemo)(
|
|
2258
2441
|
() => ({ ...rowContextValue, classNames }),
|
|
2259
2442
|
[rowContextValue, classNames]
|
|
@@ -2274,6 +2457,8 @@ function DataTable({
|
|
|
2274
2457
|
className: cn(
|
|
2275
2458
|
"DataTableJSX",
|
|
2276
2459
|
!enableCellSelection && "DataTableJSX--no-cell-selection",
|
|
2460
|
+
enableColumnResize && "DataTableJSX--column-resize",
|
|
2461
|
+
enableColumnFreeze && "DataTableJSX--column-freeze",
|
|
2277
2462
|
classNames?.root,
|
|
2278
2463
|
className
|
|
2279
2464
|
),
|
|
@@ -2294,6 +2479,7 @@ function DataTable({
|
|
|
2294
2479
|
"table",
|
|
2295
2480
|
{
|
|
2296
2481
|
className: cn("data-table", classNames?.table),
|
|
2482
|
+
style: enableColumnResize ? { width: table.getTotalSize() } : void 0,
|
|
2297
2483
|
onDragStart: enableCellSelection ? (event) => event.preventDefault() : void 0,
|
|
2298
2484
|
children: [
|
|
2299
2485
|
/* @__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 +2489,54 @@ function DataTable({
|
|
|
2303
2489
|
children: headerGroup.headers.map((header) => {
|
|
2304
2490
|
const align = header.column.columnDef.meta?.align ?? "center";
|
|
2305
2491
|
const headerClassName = header.column.columnDef.meta?.headerClassName;
|
|
2306
|
-
|
|
2492
|
+
const canResize = enableColumnResize && header.column.getCanResize();
|
|
2493
|
+
const sizeStyle = getColumnSizeStyle(header.getSize(), {
|
|
2494
|
+
force: enableColumnResize,
|
|
2495
|
+
lockMax: enableColumnResize
|
|
2496
|
+
});
|
|
2497
|
+
const freezeOffset = enableColumnFreeze ? freezeOffsets.get(header.column.id) : void 0;
|
|
2498
|
+
const freezeStyle = getColumnFreezeStyle(freezeOffset, {
|
|
2499
|
+
isHeader: true
|
|
2500
|
+
});
|
|
2501
|
+
const headerStyle = {
|
|
2502
|
+
...sizeStyle,
|
|
2503
|
+
...freezeStyle
|
|
2504
|
+
};
|
|
2505
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
2307
2506
|
"th",
|
|
2308
2507
|
{
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
minWidth: header.getSize() !== 150 ? header.getSize() : void 0
|
|
2314
|
-
},
|
|
2508
|
+
"data-resizing": header.column.getIsResizing() ? "" : void 0,
|
|
2509
|
+
"data-frozen": freezeOffset?.side,
|
|
2510
|
+
"data-freeze-edge": getColumnFreezeEdgeAttr(freezeOffset),
|
|
2511
|
+
style: Object.keys(headerStyle).length > 0 ? headerStyle : void 0,
|
|
2315
2512
|
className: cn(
|
|
2316
2513
|
"data-table-head-cell",
|
|
2514
|
+
freezeOffset && `data-table-head-cell--frozen-${freezeOffset.side}`,
|
|
2317
2515
|
CELL_ALIGN_CLASS[align],
|
|
2318
2516
|
classNames?.headCell,
|
|
2319
2517
|
headerClassName
|
|
2320
2518
|
),
|
|
2321
|
-
children:
|
|
2519
|
+
children: [
|
|
2520
|
+
header.isPlaceholder ? null : (0, import_react_table3.flexRender)(header.column.columnDef.header, header.getContext()),
|
|
2521
|
+
canResize ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
2522
|
+
"div",
|
|
2523
|
+
{
|
|
2524
|
+
role: "separator",
|
|
2525
|
+
"aria-orientation": "vertical",
|
|
2526
|
+
"aria-label": labels.resizeColumn,
|
|
2527
|
+
"data-table-disable-cell-selection": "",
|
|
2528
|
+
className: cn(
|
|
2529
|
+
"data-table-resize-handle",
|
|
2530
|
+
classNames?.resizeHandle
|
|
2531
|
+
),
|
|
2532
|
+
onMouseDown: header.getResizeHandler(),
|
|
2533
|
+
onTouchStart: header.getResizeHandler(),
|
|
2534
|
+
onDoubleClick: () => {
|
|
2535
|
+
header.column.resetSize();
|
|
2536
|
+
}
|
|
2537
|
+
}
|
|
2538
|
+
) : null
|
|
2539
|
+
]
|
|
2322
2540
|
},
|
|
2323
2541
|
header.id
|
|
2324
2542
|
);
|
|
@@ -2446,6 +2664,10 @@ function buildColumnDef(props, sort, onSort) {
|
|
|
2446
2664
|
children,
|
|
2447
2665
|
sortable = false,
|
|
2448
2666
|
width,
|
|
2667
|
+
minWidth,
|
|
2668
|
+
maxWidth,
|
|
2669
|
+
resizable,
|
|
2670
|
+
frozen,
|
|
2449
2671
|
align,
|
|
2450
2672
|
rowSpan,
|
|
2451
2673
|
rowSpanKey,
|
|
@@ -2459,7 +2681,10 @@ function buildColumnDef(props, sort, onSort) {
|
|
|
2459
2681
|
return {
|
|
2460
2682
|
id: field,
|
|
2461
2683
|
...!virtual ? { accessorKey: field } : {},
|
|
2462
|
-
size: width ??
|
|
2684
|
+
size: width ?? DATA_TABLE_COLUMN_SIZE,
|
|
2685
|
+
...minWidth != null ? { minSize: minWidth } : {},
|
|
2686
|
+
...maxWidth != null ? { maxSize: maxWidth } : {},
|
|
2687
|
+
...resizable === false ? { enableResizing: false } : {},
|
|
2463
2688
|
header: sortable ? () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SortableHeader, { label: children, field, sort, onSort }) : (
|
|
2464
2689
|
// eslint-disable-next-line @typescript-eslint/promise-function-async
|
|
2465
2690
|
() => children
|
|
@@ -2479,6 +2704,7 @@ function buildColumnDef(props, sort, onSort) {
|
|
|
2479
2704
|
editable,
|
|
2480
2705
|
editType,
|
|
2481
2706
|
editInputProps,
|
|
2707
|
+
frozen,
|
|
2482
2708
|
className,
|
|
2483
2709
|
headerClassName
|
|
2484
2710
|
}
|
|
@@ -2755,6 +2981,7 @@ var Table = Object.assign(TableRoot, {
|
|
|
2755
2981
|
applyCellEdit,
|
|
2756
2982
|
applyFillData,
|
|
2757
2983
|
applySelectionUpdater,
|
|
2984
|
+
buildColumnFreezeOffsets,
|
|
2758
2985
|
buildColumnRowSpanMap,
|
|
2759
2986
|
buildRowsPastePayload,
|
|
2760
2987
|
canExpandRow,
|
|
@@ -2767,6 +2994,9 @@ var Table = Object.assign(TableRoot, {
|
|
|
2767
2994
|
getCellEditDraftValue,
|
|
2768
2995
|
getCellSelectionEdgeStyle,
|
|
2769
2996
|
getColumnEditType,
|
|
2997
|
+
getColumnFreezeEdgeAttr,
|
|
2998
|
+
getColumnFreezeStyle,
|
|
2999
|
+
getColumnSizeStyle,
|
|
2770
3000
|
getRowIndexInMergedCell,
|
|
2771
3001
|
hasCellSelectionEdges,
|
|
2772
3002
|
isCellInSelection,
|
|
@@ -2776,6 +3006,7 @@ var Table = Object.assign(TableRoot, {
|
|
|
2776
3006
|
parseCellEditValue,
|
|
2777
3007
|
parseClipboardTSV,
|
|
2778
3008
|
parseClipboardTSVWithDepths,
|
|
3009
|
+
resolveColumnFreezeSide,
|
|
2779
3010
|
resolveDataTableLabels,
|
|
2780
3011
|
resolvePasteColumnIds,
|
|
2781
3012
|
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 ColumnFreezeEdgeSide, b as ColumnFreezeMeta, c as ColumnFreezeOffset, d as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, e as DataTableClassNames, f as DataTableCopyActions, g as DataTableLabels, h as DataTableProps, i as DataTableSlots, P as PasteMode, R as RowSelectionMode, j as RowsPastePayload, T as TableColumnProps, k as TableProps, l as buildColumnFreezeOffsets, m as getColumnFreezeEdgeAttr, n as getColumnFreezeStyle, r as resolveColumnFreezeSide, o as resolveDataTableLabels } from './types-B4uHdkrY.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 ColumnFreezeEdgeSide, b as ColumnFreezeMeta, c as ColumnFreezeOffset, d as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, e as DataTableClassNames, f as DataTableCopyActions, g as DataTableLabels, h as DataTableProps, i as DataTableSlots, P as PasteMode, R as RowSelectionMode, j as RowsPastePayload, T as TableColumnProps, k as TableProps, l as buildColumnFreezeOffsets, m as getColumnFreezeEdgeAttr, n as getColumnFreezeStyle, r as resolveColumnFreezeSide, o as resolveDataTableLabels } from './types-B4uHdkrY.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';
|