react-glide-table 1.1.1 → 1.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/README.md +41 -19
- package/dist/compound.cjs +2235 -0
- package/dist/compound.d.cts +63 -0
- package/dist/compound.d.ts +63 -0
- package/dist/compound.js +2217 -0
- package/dist/core.cjs +1198 -0
- package/dist/core.d.cts +256 -0
- package/dist/core.d.ts +256 -0
- package/dist/core.js +1154 -0
- package/dist/index.cjs +243 -93
- package/dist/index.d.cts +5 -481
- package/dist/index.d.ts +5 -481
- package/dist/index.js +230 -80
- package/dist/types-BfthylVR.d.cts +220 -0
- package/dist/types-BfthylVR.d.ts +220 -0
- package/package.json +12 -1
package/dist/compound.js
ADDED
|
@@ -0,0 +1,2217 @@
|
|
|
1
|
+
// src/components/ui/table/components/DataTable/DataTable.tsx
|
|
2
|
+
import { flexRender as flexRender2 } from "@tanstack/react-table";
|
|
3
|
+
import { useMemo as useMemo3 } from "react";
|
|
4
|
+
|
|
5
|
+
// src/components/ui/table/components/DataTable/DataTableRow.tsx
|
|
6
|
+
import { flexRender } from "@tanstack/react-table";
|
|
7
|
+
import { useEffect as useEffect2, useRef as useRef2 } from "react";
|
|
8
|
+
|
|
9
|
+
// src/components/ui/table/constants.ts
|
|
10
|
+
var CELL_ALIGN_CLASS = {
|
|
11
|
+
left: "cell-align-left",
|
|
12
|
+
center: "cell-align-center",
|
|
13
|
+
right: "cell-align-right"
|
|
14
|
+
};
|
|
15
|
+
var ROW_HOVER_CLASS = "row-hoverable";
|
|
16
|
+
var ROW_HOVERED_BG_CLASS = "row-hovered";
|
|
17
|
+
var CELL_SELECTION_FILL_CLASS = "cell-selection-fill";
|
|
18
|
+
var DATA_TABLE_ROW_HEIGHT = 44;
|
|
19
|
+
var DATA_TABLE_VIRTUAL_OVERSCAN = 8;
|
|
20
|
+
|
|
21
|
+
// src/components/ui/table/DataTableContext.tsx
|
|
22
|
+
import { createContext, use } from "react";
|
|
23
|
+
import { jsx } from "react/jsx-runtime";
|
|
24
|
+
var DataTableContext = createContext(null);
|
|
25
|
+
function useDataTableRowContext() {
|
|
26
|
+
const context = use(DataTableContext);
|
|
27
|
+
if (!context) {
|
|
28
|
+
throw new Error("useDataTableRowContext must be used within a DataTableContextProvider");
|
|
29
|
+
}
|
|
30
|
+
return context;
|
|
31
|
+
}
|
|
32
|
+
function DataTableContextProvider({
|
|
33
|
+
value,
|
|
34
|
+
children
|
|
35
|
+
}) {
|
|
36
|
+
return /* @__PURE__ */ jsx(DataTableContext, { value, children });
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// src/components/ui/table/features/cell-edit/cellEdit.ts
|
|
40
|
+
function getColumnAccessorKey(columnDef) {
|
|
41
|
+
if (columnDef.accessorKey !== void 0 && columnDef.accessorKey !== null) {
|
|
42
|
+
return String(columnDef.accessorKey);
|
|
43
|
+
}
|
|
44
|
+
return columnDef.id;
|
|
45
|
+
}
|
|
46
|
+
function isColumnEditable(columnDef) {
|
|
47
|
+
return Boolean(columnDef.meta?.editable);
|
|
48
|
+
}
|
|
49
|
+
function getColumnEditType(columnDef) {
|
|
50
|
+
return columnDef.meta?.editType ?? "text";
|
|
51
|
+
}
|
|
52
|
+
function parseCellEditValue(raw, editType) {
|
|
53
|
+
if (editType === "text") {
|
|
54
|
+
return { ok: true, value: raw };
|
|
55
|
+
}
|
|
56
|
+
const trimmed = raw.trim();
|
|
57
|
+
if (trimmed === "") {
|
|
58
|
+
return { ok: true, value: null };
|
|
59
|
+
}
|
|
60
|
+
const parsed = Number(trimmed);
|
|
61
|
+
if (Number.isNaN(parsed)) {
|
|
62
|
+
return { ok: false };
|
|
63
|
+
}
|
|
64
|
+
return { ok: true, value: parsed };
|
|
65
|
+
}
|
|
66
|
+
function getCellEditDraftValue(value) {
|
|
67
|
+
if (value === null || value === void 0) return "";
|
|
68
|
+
return String(value);
|
|
69
|
+
}
|
|
70
|
+
function applyCellEdit(data, rows, rowIndex, colIndex, raw) {
|
|
71
|
+
const cell = rows[rowIndex]?.getVisibleCells()[colIndex];
|
|
72
|
+
if (!cell) return null;
|
|
73
|
+
const columnDef = cell.column.columnDef;
|
|
74
|
+
if (!isColumnEditable(columnDef)) return null;
|
|
75
|
+
const accessorKey = getColumnAccessorKey(columnDef);
|
|
76
|
+
if (!accessorKey) return null;
|
|
77
|
+
const parsed = parseCellEditValue(raw, getColumnEditType(columnDef));
|
|
78
|
+
if (!parsed.ok) return null;
|
|
79
|
+
const newData = data.map((row) => ({ ...row }));
|
|
80
|
+
if (!newData[rowIndex]) return null;
|
|
81
|
+
newData[rowIndex][accessorKey] = parsed.value;
|
|
82
|
+
return newData;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// src/components/ui/table/features/cell-selection/cellSelection.ts
|
|
86
|
+
var INITIAL_DRAG_STATE = {
|
|
87
|
+
isSelecting: false,
|
|
88
|
+
isFillDragging: false,
|
|
89
|
+
start: null,
|
|
90
|
+
end: null,
|
|
91
|
+
fillAnchor: null,
|
|
92
|
+
fillEnd: null
|
|
93
|
+
};
|
|
94
|
+
function getCellSelectionBounds(start, end) {
|
|
95
|
+
if (!start || !end) return null;
|
|
96
|
+
return {
|
|
97
|
+
startRow: Math.min(start.row, end.row),
|
|
98
|
+
endRow: Math.max(start.row, end.row),
|
|
99
|
+
startCol: Math.min(start.col, end.col),
|
|
100
|
+
endCol: Math.max(start.col, end.col)
|
|
101
|
+
};
|
|
102
|
+
}
|
|
103
|
+
function getRowIndexInMergedCell(clientY, cellElement, rowIndex, rowSpan) {
|
|
104
|
+
if (rowSpan <= 1) return rowIndex;
|
|
105
|
+
const rect = cellElement.getBoundingClientRect();
|
|
106
|
+
const relativeY = clientY - rect.top;
|
|
107
|
+
const rowHeight = rect.height / rowSpan;
|
|
108
|
+
const offset = Math.min(
|
|
109
|
+
Math.max(Math.floor(relativeY / rowHeight), 0),
|
|
110
|
+
rowSpan - 1
|
|
111
|
+
);
|
|
112
|
+
return rowIndex + offset;
|
|
113
|
+
}
|
|
114
|
+
function isCellInSelection(rowIndex, colIndex, bounds, rowSpan = 1) {
|
|
115
|
+
if (!bounds) return false;
|
|
116
|
+
const cellEndRow = rowIndex + rowSpan - 1;
|
|
117
|
+
return cellEndRow >= bounds.startRow && rowIndex <= bounds.endRow && colIndex >= bounds.startCol && colIndex <= bounds.endCol;
|
|
118
|
+
}
|
|
119
|
+
function getActiveSelectionBounds(dragState, selectionBounds) {
|
|
120
|
+
if (dragState.isFillDragging && dragState.fillAnchor && dragState.fillEnd) {
|
|
121
|
+
return getCellSelectionBounds(dragState.fillAnchor, dragState.fillEnd);
|
|
122
|
+
}
|
|
123
|
+
return selectionBounds;
|
|
124
|
+
}
|
|
125
|
+
var SELECTION_EDGE_WIDTH_PX = 2;
|
|
126
|
+
var SELECTION_EDGE_COLOR = "var(--color-brand-primary)";
|
|
127
|
+
var CELL_SELECTION_EDGES_CLASS = "cell-selection-edges";
|
|
128
|
+
function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallySelectedAt) {
|
|
129
|
+
const cellEndRow = rowIndex + rowSpan - 1;
|
|
130
|
+
const span = cellEndRow - rowIndex + 1;
|
|
131
|
+
if (span <= 1) return [];
|
|
132
|
+
const edges = [];
|
|
133
|
+
const isNeighborSelected = (row, neighborCol) => {
|
|
134
|
+
if (isVisuallySelectedAt) {
|
|
135
|
+
return isVisuallySelectedAt(row, neighborCol);
|
|
136
|
+
}
|
|
137
|
+
return row >= bounds.startRow && row <= bounds.endRow && neighborCol >= bounds.startCol && neighborCol <= bounds.endCol;
|
|
138
|
+
};
|
|
139
|
+
const pushUnselectedRuns = (side, neighborCol, fromRow, toRowExclusive) => {
|
|
140
|
+
let runStart = null;
|
|
141
|
+
for (let row = fromRow; row < toRowExclusive; row++) {
|
|
142
|
+
if (!isNeighborSelected(row, neighborCol)) {
|
|
143
|
+
if (runStart === null) runStart = row;
|
|
144
|
+
continue;
|
|
145
|
+
}
|
|
146
|
+
if (runStart !== null) {
|
|
147
|
+
edges.push({
|
|
148
|
+
side,
|
|
149
|
+
offsetRatio: (runStart - rowIndex) / span,
|
|
150
|
+
heightRatio: (row - runStart) / span
|
|
151
|
+
});
|
|
152
|
+
runStart = null;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
if (runStart !== null) {
|
|
156
|
+
edges.push({
|
|
157
|
+
side,
|
|
158
|
+
offsetRatio: (runStart - rowIndex) / span,
|
|
159
|
+
heightRatio: (toRowExclusive - runStart) / span
|
|
160
|
+
});
|
|
161
|
+
}
|
|
162
|
+
};
|
|
163
|
+
const collectSide = (side, neighborCol) => {
|
|
164
|
+
if (bounds.startRow > rowIndex) {
|
|
165
|
+
pushUnselectedRuns(
|
|
166
|
+
side,
|
|
167
|
+
neighborCol,
|
|
168
|
+
rowIndex,
|
|
169
|
+
Math.min(bounds.startRow, cellEndRow + 1)
|
|
170
|
+
);
|
|
171
|
+
}
|
|
172
|
+
if (bounds.endRow < cellEndRow) {
|
|
173
|
+
pushUnselectedRuns(
|
|
174
|
+
side,
|
|
175
|
+
neighborCol,
|
|
176
|
+
Math.max(bounds.endRow + 1, rowIndex),
|
|
177
|
+
cellEndRow + 1
|
|
178
|
+
);
|
|
179
|
+
}
|
|
180
|
+
};
|
|
181
|
+
if (colIndex < bounds.endCol) {
|
|
182
|
+
collectSide("right", colIndex + 1);
|
|
183
|
+
}
|
|
184
|
+
if (colIndex > bounds.startCol) {
|
|
185
|
+
collectSide("left", colIndex - 1);
|
|
186
|
+
}
|
|
187
|
+
return edges;
|
|
188
|
+
}
|
|
189
|
+
function buildPartialVerticalGradient(edge) {
|
|
190
|
+
const startPct = edge.offsetRatio * 100;
|
|
191
|
+
const endPct = (edge.offsetRatio + edge.heightRatio) * 100;
|
|
192
|
+
const overlapPx = SELECTION_EDGE_WIDTH_PX + 1;
|
|
193
|
+
const isTopProtrusion = edge.offsetRatio === 0 && edge.heightRatio < 1;
|
|
194
|
+
const isBottomProtrusion = edge.offsetRatio > 0;
|
|
195
|
+
const startStop = isBottomProtrusion ? `calc(${startPct}% - ${overlapPx}px)` : `${startPct}%`;
|
|
196
|
+
const endStop = isTopProtrusion ? `calc(${endPct}% + ${overlapPx}px)` : `${endPct}%`;
|
|
197
|
+
const xPos = edge.side === "left" ? "0" : "100%";
|
|
198
|
+
const layers = [
|
|
199
|
+
{
|
|
200
|
+
image: `linear-gradient(to bottom, transparent 0%, transparent ${startStop}, ${SELECTION_EDGE_COLOR} ${startStop}, ${SELECTION_EDGE_COLOR} ${endStop}, transparent ${endStop}, transparent 100%)`,
|
|
201
|
+
size: `${SELECTION_EDGE_WIDTH_PX}px 100%`,
|
|
202
|
+
position: `${xPos} 0`
|
|
203
|
+
}
|
|
204
|
+
];
|
|
205
|
+
if (isTopProtrusion || isBottomProtrusion) {
|
|
206
|
+
const capTop = isTopProtrusion ? `calc(${endPct}% - ${SELECTION_EDGE_WIDTH_PX}px)` : `calc(${startPct}% - ${SELECTION_EDGE_WIDTH_PX}px)`;
|
|
207
|
+
layers.push({
|
|
208
|
+
image: `linear-gradient(${SELECTION_EDGE_COLOR}, ${SELECTION_EDGE_COLOR})`,
|
|
209
|
+
size: `${SELECTION_EDGE_WIDTH_PX}px ${SELECTION_EDGE_WIDTH_PX}px`,
|
|
210
|
+
position: `${xPos} ${capTop}`
|
|
211
|
+
});
|
|
212
|
+
}
|
|
213
|
+
return layers;
|
|
214
|
+
}
|
|
215
|
+
function getCellSelectionEdgeStyle(rowIndex, colIndex, bounds, rowSpan = 1, isVisuallySelectedAt) {
|
|
216
|
+
if (!isCellInSelection(rowIndex, colIndex, bounds, rowSpan) || !bounds)
|
|
217
|
+
return void 0;
|
|
218
|
+
const cellEndRow = rowIndex + rowSpan - 1;
|
|
219
|
+
const isTopEdge = bounds.startRow >= rowIndex && bounds.startRow <= cellEndRow;
|
|
220
|
+
const isBottomEdge = bounds.endRow >= rowIndex && bounds.endRow <= cellEndRow;
|
|
221
|
+
const isLeftEdge = colIndex === bounds.startCol;
|
|
222
|
+
const isRightEdge = colIndex === bounds.endCol;
|
|
223
|
+
const selectionContinuesBelow = cellEndRow < bounds.endRow;
|
|
224
|
+
const shadows = [];
|
|
225
|
+
if (isTopEdge) {
|
|
226
|
+
shadows.push(
|
|
227
|
+
`inset 0 ${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
|
|
228
|
+
);
|
|
229
|
+
}
|
|
230
|
+
if (isBottomEdge) {
|
|
231
|
+
shadows.push(
|
|
232
|
+
`inset 0 -${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
|
|
233
|
+
);
|
|
234
|
+
}
|
|
235
|
+
if (isLeftEdge) {
|
|
236
|
+
shadows.push(
|
|
237
|
+
`inset ${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
|
|
238
|
+
);
|
|
239
|
+
}
|
|
240
|
+
if (isRightEdge) {
|
|
241
|
+
shadows.push(
|
|
242
|
+
`inset -${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
|
|
243
|
+
);
|
|
244
|
+
}
|
|
245
|
+
const stepEdges = getMergedCellStepEdges(
|
|
246
|
+
rowIndex,
|
|
247
|
+
colIndex,
|
|
248
|
+
bounds,
|
|
249
|
+
rowSpan,
|
|
250
|
+
isVisuallySelectedAt
|
|
251
|
+
);
|
|
252
|
+
const gradients = [];
|
|
253
|
+
const sizes = [];
|
|
254
|
+
const positions = [];
|
|
255
|
+
for (const edge of stepEdges) {
|
|
256
|
+
for (const partial of buildPartialVerticalGradient(edge)) {
|
|
257
|
+
gradients.push(partial.image);
|
|
258
|
+
sizes.push(partial.size);
|
|
259
|
+
positions.push(partial.position);
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
if (shadows.length === 0 && gradients.length === 0 && !selectionContinuesBelow) {
|
|
263
|
+
return void 0;
|
|
264
|
+
}
|
|
265
|
+
const style = {};
|
|
266
|
+
if (shadows.length > 0) {
|
|
267
|
+
style["--selection-edge-shadows"] = shadows.join(", ");
|
|
268
|
+
}
|
|
269
|
+
if (gradients.length > 0) {
|
|
270
|
+
style["--selection-edge-gradients"] = gradients.join(", ");
|
|
271
|
+
style["--selection-edge-sizes"] = sizes.join(", ");
|
|
272
|
+
style["--selection-edge-positions"] = positions.join(", ");
|
|
273
|
+
}
|
|
274
|
+
if (selectionContinuesBelow) {
|
|
275
|
+
style.borderBottomColor = "var(--color-brand-surface)";
|
|
276
|
+
}
|
|
277
|
+
return style;
|
|
278
|
+
}
|
|
279
|
+
function hasCellSelectionEdges(style) {
|
|
280
|
+
return Boolean(
|
|
281
|
+
style?.["--selection-edge-shadows"] || style?.["--selection-edge-gradients"]
|
|
282
|
+
);
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
// src/components/ui/table/features/row-expand/row-expand.ts
|
|
286
|
+
import { useEffect, useMemo, useRef } from "react";
|
|
287
|
+
|
|
288
|
+
// src/core/treeDefaults.ts
|
|
289
|
+
var DEFAULT_TREE_ID_FIELD = "id";
|
|
290
|
+
var DEFAULT_TREE_PARENT_ID_FIELD = "parentId";
|
|
291
|
+
var DEFAULT_TREE_CHILDREN_FIELD = "children";
|
|
292
|
+
var DEFAULT_TREE_QTY_FIELD = "qty";
|
|
293
|
+
|
|
294
|
+
// src/components/ui/table/features/row-expand/row-expand.ts
|
|
295
|
+
function getFieldValue(row, key) {
|
|
296
|
+
return row[key];
|
|
297
|
+
}
|
|
298
|
+
function canExpandRow(row) {
|
|
299
|
+
const children = row.children;
|
|
300
|
+
const level = row.level;
|
|
301
|
+
return Array.isArray(children) && children.length > 0 && (level === 0 || level === void 0);
|
|
302
|
+
}
|
|
303
|
+
function toggleExpandedRowId(rowId, previous) {
|
|
304
|
+
const next = new Set(previous);
|
|
305
|
+
if (next.has(rowId)) {
|
|
306
|
+
next.delete(rowId);
|
|
307
|
+
} else {
|
|
308
|
+
next.add(rowId);
|
|
309
|
+
}
|
|
310
|
+
return next;
|
|
311
|
+
}
|
|
312
|
+
var useConvertTreeData = ({
|
|
313
|
+
data,
|
|
314
|
+
enabled = true,
|
|
315
|
+
toggleField = DEFAULT_TREE_ID_FIELD,
|
|
316
|
+
childField = DEFAULT_TREE_PARENT_ID_FIELD,
|
|
317
|
+
flattenField = DEFAULT_TREE_CHILDREN_FIELD,
|
|
318
|
+
qtyField = DEFAULT_TREE_QTY_FIELD,
|
|
319
|
+
preventExpand = false,
|
|
320
|
+
startIndex = 1,
|
|
321
|
+
expandedRows,
|
|
322
|
+
onExpandedRowsChange
|
|
323
|
+
}) => {
|
|
324
|
+
const onExpandedRowsChangeRef = useRef(onExpandedRowsChange);
|
|
325
|
+
const hasInitializedRef = useRef(false);
|
|
326
|
+
useEffect(() => {
|
|
327
|
+
onExpandedRowsChangeRef.current = onExpandedRowsChange;
|
|
328
|
+
}, [onExpandedRowsChange]);
|
|
329
|
+
useEffect(() => {
|
|
330
|
+
if (!data || data.length === 0) {
|
|
331
|
+
hasInitializedRef.current = false;
|
|
332
|
+
return;
|
|
333
|
+
}
|
|
334
|
+
if (!enabled || hasInitializedRef.current) return;
|
|
335
|
+
const ids = data.map((item) => getFieldValue(item, toggleField)).filter((value) => typeof value === "string" && value.length > 0);
|
|
336
|
+
onExpandedRowsChangeRef.current?.(new Set(ids));
|
|
337
|
+
hasInitializedRef.current = true;
|
|
338
|
+
}, [enabled, data, toggleField]);
|
|
339
|
+
const processedData = useMemo(() => {
|
|
340
|
+
if (!enabled || !data || data.length === 0) return [];
|
|
341
|
+
const flattenedData = [];
|
|
342
|
+
const flattenItems = (items) => {
|
|
343
|
+
items.forEach((item) => {
|
|
344
|
+
const newItem = { ...item };
|
|
345
|
+
const nested = newItem[flattenField];
|
|
346
|
+
if (Array.isArray(nested)) {
|
|
347
|
+
const children = nested.map(
|
|
348
|
+
(child) => typeof child === "object" && child !== null ? { ...child } : child
|
|
349
|
+
);
|
|
350
|
+
delete newItem[flattenField];
|
|
351
|
+
flattenedData.push(newItem);
|
|
352
|
+
children.forEach((child) => {
|
|
353
|
+
if (typeof child === "object" && child !== null) {
|
|
354
|
+
;
|
|
355
|
+
child[childField] = newItem[toggleField];
|
|
356
|
+
}
|
|
357
|
+
});
|
|
358
|
+
flattenItems(children);
|
|
359
|
+
} else {
|
|
360
|
+
flattenedData.push(newItem);
|
|
361
|
+
}
|
|
362
|
+
});
|
|
363
|
+
};
|
|
364
|
+
flattenItems(data);
|
|
365
|
+
const dataWithLevels = flattenedData.map((item) => ({
|
|
366
|
+
...item,
|
|
367
|
+
level: 0,
|
|
368
|
+
children: [],
|
|
369
|
+
processed: false
|
|
370
|
+
}));
|
|
371
|
+
const itemMap = /* @__PURE__ */ new Map();
|
|
372
|
+
dataWithLevels.forEach((item) => {
|
|
373
|
+
const key = getFieldValue(item, toggleField);
|
|
374
|
+
if (typeof key !== "string" || !key) return;
|
|
375
|
+
if (!itemMap.has(key)) {
|
|
376
|
+
itemMap.set(key, []);
|
|
377
|
+
}
|
|
378
|
+
itemMap.get(key)?.push(item);
|
|
379
|
+
});
|
|
380
|
+
const rootItems = [];
|
|
381
|
+
dataWithLevels.forEach((item) => {
|
|
382
|
+
if (!getFieldValue(item, childField)) {
|
|
383
|
+
rootItems.push(item);
|
|
384
|
+
item.processed = true;
|
|
385
|
+
}
|
|
386
|
+
});
|
|
387
|
+
dataWithLevels.forEach((item) => {
|
|
388
|
+
const parentKey = getFieldValue(item, childField);
|
|
389
|
+
if (!parentKey || item.processed) return;
|
|
390
|
+
const parentItems = dataWithLevels.filter(
|
|
391
|
+
(parent) => getFieldValue(parent, toggleField) === parentKey && !getFieldValue(parent, childField)
|
|
392
|
+
);
|
|
393
|
+
if (parentItems.length > 0) {
|
|
394
|
+
const parent = parentItems[0];
|
|
395
|
+
item.level = parent.level + 1;
|
|
396
|
+
parent.children.push(item);
|
|
397
|
+
item.processed = true;
|
|
398
|
+
} else {
|
|
399
|
+
const otherParents = itemMap.get(String(parentKey)) || [];
|
|
400
|
+
if (otherParents.length > 0) {
|
|
401
|
+
const parent = otherParents[0];
|
|
402
|
+
item.level = parent.level + 1;
|
|
403
|
+
parent.children.push(item);
|
|
404
|
+
item.processed = true;
|
|
405
|
+
} else {
|
|
406
|
+
rootItems.push(item);
|
|
407
|
+
item.processed = true;
|
|
408
|
+
}
|
|
409
|
+
}
|
|
410
|
+
});
|
|
411
|
+
return rootItems;
|
|
412
|
+
}, [enabled, data, toggleField, childField, flattenField]);
|
|
413
|
+
const flattenTree = useMemo(() => {
|
|
414
|
+
if (!enabled) return [];
|
|
415
|
+
const flatten = (nodes, result = [], level = 0) => {
|
|
416
|
+
nodes.forEach((node, index) => {
|
|
417
|
+
const currentIndex = level === 0 ? `${index + startIndex}` : `${level}-${index + 1}`;
|
|
418
|
+
const toggleValue = getFieldValue(node, toggleField);
|
|
419
|
+
const uniqueId = `${index}-${String(toggleValue ?? "")}`;
|
|
420
|
+
result.push({
|
|
421
|
+
...node,
|
|
422
|
+
treeNo: currentIndex,
|
|
423
|
+
uniqueId,
|
|
424
|
+
processed: true
|
|
425
|
+
});
|
|
426
|
+
const shouldExpandChildren = node.children.length > 0 && (preventExpand || typeof toggleValue === "string" && expandedRows?.has(toggleValue));
|
|
427
|
+
if (shouldExpandChildren) {
|
|
428
|
+
flatten(node.children, result, index + startIndex);
|
|
429
|
+
}
|
|
430
|
+
});
|
|
431
|
+
return result;
|
|
432
|
+
};
|
|
433
|
+
const flattenedData = flatten(processedData, [], 0);
|
|
434
|
+
flattenedData.forEach((item) => {
|
|
435
|
+
if (getFieldValue(item, childField)) {
|
|
436
|
+
const parentItem = flattenedData.find(
|
|
437
|
+
(parent) => getFieldValue(parent, toggleField) === getFieldValue(item, childField)
|
|
438
|
+
);
|
|
439
|
+
const parentAmount = parentItem ? Number(getFieldValue(parentItem, qtyField) ?? 1) : 1;
|
|
440
|
+
item.parentCount = parentAmount || 1;
|
|
441
|
+
} else {
|
|
442
|
+
item.parentCount = 1;
|
|
443
|
+
}
|
|
444
|
+
});
|
|
445
|
+
return flattenedData;
|
|
446
|
+
}, [
|
|
447
|
+
enabled,
|
|
448
|
+
processedData,
|
|
449
|
+
startIndex,
|
|
450
|
+
toggleField,
|
|
451
|
+
childField,
|
|
452
|
+
qtyField,
|
|
453
|
+
preventExpand,
|
|
454
|
+
expandedRows
|
|
455
|
+
]);
|
|
456
|
+
const sortedData = useMemo(() => {
|
|
457
|
+
if (!enabled) {
|
|
458
|
+
return data ?? [];
|
|
459
|
+
}
|
|
460
|
+
return [...flattenTree].sort((a, b) => {
|
|
461
|
+
const aParts = String(a.treeNo ?? "").split("-").map(Number);
|
|
462
|
+
const bParts = String(b.treeNo ?? "").split("-").map(Number);
|
|
463
|
+
for (let i = 0; i < Math.max(aParts.length, bParts.length); i++) {
|
|
464
|
+
const aVal = aParts[i] || 0;
|
|
465
|
+
const bVal = bParts[i] || 0;
|
|
466
|
+
if (aVal !== bVal) {
|
|
467
|
+
return aVal - bVal;
|
|
468
|
+
}
|
|
469
|
+
}
|
|
470
|
+
return 0;
|
|
471
|
+
});
|
|
472
|
+
}, [enabled, data, flattenTree]);
|
|
473
|
+
return sortedData;
|
|
474
|
+
};
|
|
475
|
+
|
|
476
|
+
// src/components/ui/table/features/row-span/rowSpan.ts
|
|
477
|
+
function getRowFieldValue(row, key) {
|
|
478
|
+
return row[key];
|
|
479
|
+
}
|
|
480
|
+
function computeRowSpans(data, rowSpanKey) {
|
|
481
|
+
if (data.length === 0) return [];
|
|
482
|
+
const result = [];
|
|
483
|
+
for (let index = 0; index < data.length; index++) {
|
|
484
|
+
const currentValue = getRowFieldValue(data[index], rowSpanKey);
|
|
485
|
+
const previousValue = index > 0 ? getRowFieldValue(data[index - 1], rowSpanKey) : void 0;
|
|
486
|
+
if (index > 0 && currentValue === previousValue) {
|
|
487
|
+
result.push({ rowSpan: 0, isFirstInGroup: false });
|
|
488
|
+
continue;
|
|
489
|
+
}
|
|
490
|
+
let span = 1;
|
|
491
|
+
for (let nextIndex = index + 1; nextIndex < data.length; nextIndex++) {
|
|
492
|
+
if (getRowFieldValue(data[nextIndex], rowSpanKey) === currentValue) {
|
|
493
|
+
span++;
|
|
494
|
+
} else {
|
|
495
|
+
break;
|
|
496
|
+
}
|
|
497
|
+
}
|
|
498
|
+
result.push({ rowSpan: span, isFirstInGroup: true });
|
|
499
|
+
}
|
|
500
|
+
return result;
|
|
501
|
+
}
|
|
502
|
+
function resolveRowSpanAt(rowSpans, rowIndex) {
|
|
503
|
+
if (!rowSpans?.[rowIndex]) {
|
|
504
|
+
return { startRow: rowIndex, rowSpan: 1 };
|
|
505
|
+
}
|
|
506
|
+
const current = rowSpans[rowIndex];
|
|
507
|
+
if (current.rowSpan > 0) {
|
|
508
|
+
return { startRow: rowIndex, rowSpan: current.rowSpan };
|
|
509
|
+
}
|
|
510
|
+
for (let row = rowIndex - 1; row >= 0; row--) {
|
|
511
|
+
const info = rowSpans[row];
|
|
512
|
+
if (info && info.rowSpan > 0) {
|
|
513
|
+
return { startRow: row, rowSpan: info.rowSpan };
|
|
514
|
+
}
|
|
515
|
+
}
|
|
516
|
+
return { startRow: rowIndex, rowSpan: 1 };
|
|
517
|
+
}
|
|
518
|
+
function buildColumnRowSpanMap(data, columnKeys) {
|
|
519
|
+
const map = /* @__PURE__ */ new Map();
|
|
520
|
+
for (const { columnId, rowSpanKey } of columnKeys) {
|
|
521
|
+
map.set(columnId, computeRowSpans(data, rowSpanKey));
|
|
522
|
+
}
|
|
523
|
+
return map;
|
|
524
|
+
}
|
|
525
|
+
function collectRowSpanColumns(columns) {
|
|
526
|
+
const result = [];
|
|
527
|
+
const visit = (defs) => {
|
|
528
|
+
for (const columnDef of defs) {
|
|
529
|
+
if ("columns" in columnDef && columnDef.columns?.length) {
|
|
530
|
+
visit(columnDef.columns);
|
|
531
|
+
continue;
|
|
532
|
+
}
|
|
533
|
+
const columnId = columnDef.id ?? ("accessorKey" in columnDef && columnDef.accessorKey ? String(columnDef.accessorKey) : void 0);
|
|
534
|
+
if (!columnId || !columnDef.meta?.rowSpan) continue;
|
|
535
|
+
result.push({
|
|
536
|
+
columnId,
|
|
537
|
+
rowSpanKey: columnDef.meta.rowSpanKey ?? columnId
|
|
538
|
+
});
|
|
539
|
+
}
|
|
540
|
+
};
|
|
541
|
+
visit(columns);
|
|
542
|
+
return result;
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
// src/components/ui/table/components/icons.tsx
|
|
546
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
547
|
+
function ChevronDown({ className, "aria-hidden": ariaHidden = true }) {
|
|
548
|
+
return /* @__PURE__ */ jsx2(
|
|
549
|
+
"svg",
|
|
550
|
+
{
|
|
551
|
+
className,
|
|
552
|
+
"aria-hidden": ariaHidden,
|
|
553
|
+
width: "16",
|
|
554
|
+
height: "16",
|
|
555
|
+
viewBox: "0 0 24 24",
|
|
556
|
+
fill: "none",
|
|
557
|
+
stroke: "currentColor",
|
|
558
|
+
strokeWidth: "2",
|
|
559
|
+
strokeLinecap: "round",
|
|
560
|
+
strokeLinejoin: "round",
|
|
561
|
+
children: /* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" })
|
|
562
|
+
}
|
|
563
|
+
);
|
|
564
|
+
}
|
|
565
|
+
function ChevronUp({ className, "aria-hidden": ariaHidden = true }) {
|
|
566
|
+
return /* @__PURE__ */ jsx2(
|
|
567
|
+
"svg",
|
|
568
|
+
{
|
|
569
|
+
className,
|
|
570
|
+
"aria-hidden": ariaHidden,
|
|
571
|
+
width: "16",
|
|
572
|
+
height: "16",
|
|
573
|
+
viewBox: "0 0 24 24",
|
|
574
|
+
fill: "none",
|
|
575
|
+
stroke: "currentColor",
|
|
576
|
+
strokeWidth: "2",
|
|
577
|
+
strokeLinecap: "round",
|
|
578
|
+
strokeLinejoin: "round",
|
|
579
|
+
children: /* @__PURE__ */ jsx2("path", { d: "m18 15-6-6-6 6" })
|
|
580
|
+
}
|
|
581
|
+
);
|
|
582
|
+
}
|
|
583
|
+
function ChevronLeft({ className, "aria-hidden": ariaHidden = true }) {
|
|
584
|
+
return /* @__PURE__ */ jsx2(
|
|
585
|
+
"svg",
|
|
586
|
+
{
|
|
587
|
+
className,
|
|
588
|
+
"aria-hidden": ariaHidden,
|
|
589
|
+
width: "16",
|
|
590
|
+
height: "16",
|
|
591
|
+
viewBox: "0 0 24 24",
|
|
592
|
+
fill: "none",
|
|
593
|
+
stroke: "currentColor",
|
|
594
|
+
strokeWidth: "2",
|
|
595
|
+
strokeLinecap: "round",
|
|
596
|
+
strokeLinejoin: "round",
|
|
597
|
+
children: /* @__PURE__ */ jsx2("path", { d: "m15 18-6-6 6-6" })
|
|
598
|
+
}
|
|
599
|
+
);
|
|
600
|
+
}
|
|
601
|
+
function ChevronRight({ className, "aria-hidden": ariaHidden = true }) {
|
|
602
|
+
return /* @__PURE__ */ jsx2(
|
|
603
|
+
"svg",
|
|
604
|
+
{
|
|
605
|
+
className,
|
|
606
|
+
"aria-hidden": ariaHidden,
|
|
607
|
+
width: "16",
|
|
608
|
+
height: "16",
|
|
609
|
+
viewBox: "0 0 24 24",
|
|
610
|
+
fill: "none",
|
|
611
|
+
stroke: "currentColor",
|
|
612
|
+
strokeWidth: "2",
|
|
613
|
+
strokeLinecap: "round",
|
|
614
|
+
strokeLinejoin: "round",
|
|
615
|
+
children: /* @__PURE__ */ jsx2("path", { d: "m9 18 6-6-6-6" })
|
|
616
|
+
}
|
|
617
|
+
);
|
|
618
|
+
}
|
|
619
|
+
function ArrowUp({ className, "aria-hidden": ariaHidden = true }) {
|
|
620
|
+
return /* @__PURE__ */ jsxs(
|
|
621
|
+
"svg",
|
|
622
|
+
{
|
|
623
|
+
className,
|
|
624
|
+
"aria-hidden": ariaHidden,
|
|
625
|
+
width: "14",
|
|
626
|
+
height: "14",
|
|
627
|
+
viewBox: "0 0 24 24",
|
|
628
|
+
fill: "none",
|
|
629
|
+
stroke: "currentColor",
|
|
630
|
+
strokeWidth: "2",
|
|
631
|
+
strokeLinecap: "round",
|
|
632
|
+
strokeLinejoin: "round",
|
|
633
|
+
children: [
|
|
634
|
+
/* @__PURE__ */ jsx2("path", { d: "m18 15-6-6-6 6" }),
|
|
635
|
+
/* @__PURE__ */ jsx2("path", { d: "M12 21V9" })
|
|
636
|
+
]
|
|
637
|
+
}
|
|
638
|
+
);
|
|
639
|
+
}
|
|
640
|
+
function ArrowDown({ className, "aria-hidden": ariaHidden = true }) {
|
|
641
|
+
return /* @__PURE__ */ jsxs(
|
|
642
|
+
"svg",
|
|
643
|
+
{
|
|
644
|
+
className,
|
|
645
|
+
"aria-hidden": ariaHidden,
|
|
646
|
+
width: "14",
|
|
647
|
+
height: "14",
|
|
648
|
+
viewBox: "0 0 24 24",
|
|
649
|
+
fill: "none",
|
|
650
|
+
stroke: "currentColor",
|
|
651
|
+
strokeWidth: "2",
|
|
652
|
+
strokeLinecap: "round",
|
|
653
|
+
strokeLinejoin: "round",
|
|
654
|
+
children: [
|
|
655
|
+
/* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" }),
|
|
656
|
+
/* @__PURE__ */ jsx2("path", { d: "M12 3v12" })
|
|
657
|
+
]
|
|
658
|
+
}
|
|
659
|
+
);
|
|
660
|
+
}
|
|
661
|
+
function ArrowUpDown({ className, "aria-hidden": ariaHidden = true }) {
|
|
662
|
+
return /* @__PURE__ */ jsxs(
|
|
663
|
+
"svg",
|
|
664
|
+
{
|
|
665
|
+
className,
|
|
666
|
+
"aria-hidden": ariaHidden,
|
|
667
|
+
width: "14",
|
|
668
|
+
height: "14",
|
|
669
|
+
viewBox: "0 0 24 24",
|
|
670
|
+
fill: "none",
|
|
671
|
+
stroke: "currentColor",
|
|
672
|
+
strokeWidth: "2",
|
|
673
|
+
strokeLinecap: "round",
|
|
674
|
+
strokeLinejoin: "round",
|
|
675
|
+
children: [
|
|
676
|
+
/* @__PURE__ */ jsx2("path", { d: "m21 16-4 4-4-4" }),
|
|
677
|
+
/* @__PURE__ */ jsx2("path", { d: "M17 20V4" }),
|
|
678
|
+
/* @__PURE__ */ jsx2("path", { d: "m3 8 4-4 4 4" }),
|
|
679
|
+
/* @__PURE__ */ jsx2("path", { d: "M7 4v16" })
|
|
680
|
+
]
|
|
681
|
+
}
|
|
682
|
+
);
|
|
683
|
+
}
|
|
684
|
+
|
|
685
|
+
// src/lib/cn.ts
|
|
686
|
+
function cn(...inputs) {
|
|
687
|
+
return inputs.filter(Boolean).join(" ");
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
// src/components/ui/table/components/DataTable/DataTableRow.tsx
|
|
691
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
692
|
+
function resolveExpandCellIndex(cells, toggleField) {
|
|
693
|
+
if (!toggleField) return 0;
|
|
694
|
+
const matchedIndex = cells.findIndex(
|
|
695
|
+
(cell) => cell.column.id === toggleField
|
|
696
|
+
);
|
|
697
|
+
if (matchedIndex >= 0) return matchedIndex;
|
|
698
|
+
const noColumnIndex = cells.findIndex(
|
|
699
|
+
(cell) => cell.column.id === "no" || cell.column.id === "treeNo"
|
|
700
|
+
);
|
|
701
|
+
if (noColumnIndex >= 0 && noColumnIndex + 1 < cells.length) {
|
|
702
|
+
return noColumnIndex + 1;
|
|
703
|
+
}
|
|
704
|
+
return 0;
|
|
705
|
+
}
|
|
706
|
+
function DataTableRow({
|
|
707
|
+
row,
|
|
708
|
+
onToggleSelect,
|
|
709
|
+
virtualIndex,
|
|
710
|
+
measureElement
|
|
711
|
+
}) {
|
|
712
|
+
const { classNames, rowSpan, selection, cellSelection, cellEdit, expand } = useDataTableRowContext();
|
|
713
|
+
const {
|
|
714
|
+
enableRowSpan,
|
|
715
|
+
primaryRowSpanKey,
|
|
716
|
+
columnRowSpanMap,
|
|
717
|
+
hoveredRowIndex,
|
|
718
|
+
hoveredGroupKey,
|
|
719
|
+
selectedGroupKeys,
|
|
720
|
+
onRowHover
|
|
721
|
+
} = rowSpan;
|
|
722
|
+
const { rowSelectionMode, selectOnRowClick, onRowClick, getRowClassName } = selection;
|
|
723
|
+
const {
|
|
724
|
+
enableCellSelection,
|
|
725
|
+
activeSelectionBounds,
|
|
726
|
+
dragState,
|
|
727
|
+
onCellMouseDown,
|
|
728
|
+
onCellMouseEnter,
|
|
729
|
+
onFillHandleMouseDown
|
|
730
|
+
} = cellSelection;
|
|
731
|
+
const {
|
|
732
|
+
editingCell,
|
|
733
|
+
draftValue,
|
|
734
|
+
onDraftValueChange,
|
|
735
|
+
onStartEdit,
|
|
736
|
+
onCommitEdit,
|
|
737
|
+
onCancelEdit
|
|
738
|
+
} = cellEdit;
|
|
739
|
+
const {
|
|
740
|
+
enableExpand,
|
|
741
|
+
toggleField,
|
|
742
|
+
expandedRows,
|
|
743
|
+
preventExpand,
|
|
744
|
+
onToggleExpand,
|
|
745
|
+
expandRowLabel,
|
|
746
|
+
collapseRowLabel
|
|
747
|
+
} = expand;
|
|
748
|
+
const rowIndex = row.index;
|
|
749
|
+
const rowData = row.original;
|
|
750
|
+
const isRowHovered = hoveredRowIndex === rowIndex;
|
|
751
|
+
const isRowSelected = row.getIsSelected();
|
|
752
|
+
const rowGroupKey = primaryRowSpanKey !== void 0 && rowData[primaryRowSpanKey] !== null && rowData[primaryRowSpanKey] !== void 0 ? String(rowData[primaryRowSpanKey]) : null;
|
|
753
|
+
const isGroupHovered = enableRowSpan && hoveredGroupKey !== null && rowGroupKey === hoveredGroupKey;
|
|
754
|
+
const isGroupSelected = enableRowSpan && rowGroupKey !== null && selectedGroupKeys.has(rowGroupKey);
|
|
755
|
+
const visibleCells = row.getVisibleCells();
|
|
756
|
+
const columnIdsByIndex = visibleCells.map((cell) => cell.column.id);
|
|
757
|
+
const isVisuallySelectedAt = activeSelectionBounds ? (targetRow, targetCol) => {
|
|
758
|
+
if (targetCol < activeSelectionBounds.startCol || targetCol > activeSelectionBounds.endCol) {
|
|
759
|
+
return false;
|
|
760
|
+
}
|
|
761
|
+
const columnId = columnIdsByIndex[targetCol];
|
|
762
|
+
const { startRow, rowSpan: span } = resolveRowSpanAt(
|
|
763
|
+
columnId ? columnRowSpanMap.get(columnId) : void 0,
|
|
764
|
+
targetRow
|
|
765
|
+
);
|
|
766
|
+
return isCellInSelection(
|
|
767
|
+
startRow,
|
|
768
|
+
targetCol,
|
|
769
|
+
activeSelectionBounds,
|
|
770
|
+
span
|
|
771
|
+
);
|
|
772
|
+
} : void 0;
|
|
773
|
+
const expandCellIndex = enableExpand ? resolveExpandCellIndex(visibleCells, toggleField) : -1;
|
|
774
|
+
const canExpand = enableExpand && !preventExpand && canExpandRow(rowData);
|
|
775
|
+
const expandKey = toggleField && rowData[toggleField] !== null && rowData[toggleField] !== void 0 ? String(rowData[toggleField]) : null;
|
|
776
|
+
const isExpanded = expandKey !== null && Boolean(expandedRows?.has(expandKey));
|
|
777
|
+
const rowLevel = typeof rowData.level === "number" ? rowData.level : 0;
|
|
778
|
+
const editInputRef = useRef2(null);
|
|
779
|
+
const isRowEditing = editingCell?.rowIndex === rowIndex;
|
|
780
|
+
useEffect2(() => {
|
|
781
|
+
if (!isRowEditing) return;
|
|
782
|
+
editInputRef.current?.focus();
|
|
783
|
+
editInputRef.current?.select();
|
|
784
|
+
}, [isRowEditing, editingCell?.colIndex]);
|
|
785
|
+
return /* @__PURE__ */ jsx3(
|
|
786
|
+
"tr",
|
|
787
|
+
{
|
|
788
|
+
ref: measureElement,
|
|
789
|
+
"data-index": virtualIndex,
|
|
790
|
+
"data-selected": isRowSelected ? "" : void 0,
|
|
791
|
+
"data-hovered": isRowHovered || isGroupHovered ? "" : void 0,
|
|
792
|
+
"data-expandable": enableExpand && canExpand ? "" : void 0,
|
|
793
|
+
"data-expanded": isExpanded ? "" : void 0,
|
|
794
|
+
className: cn(
|
|
795
|
+
"DataTableRowJSX",
|
|
796
|
+
!enableRowSpan && ROW_HOVER_CLASS,
|
|
797
|
+
enableRowSpan && isRowHovered && !isRowSelected && ROW_HOVERED_BG_CLASS,
|
|
798
|
+
isRowSelected && "is-selected",
|
|
799
|
+
enableExpand && canExpand && "is-expandable",
|
|
800
|
+
classNames?.row,
|
|
801
|
+
getRowClassName?.(rowData, rowIndex)
|
|
802
|
+
),
|
|
803
|
+
onMouseEnter: () => onRowHover(rowIndex, rowData),
|
|
804
|
+
onClick: () => {
|
|
805
|
+
if (isRowEditing) return;
|
|
806
|
+
onRowClick?.(rowData, rowIndex);
|
|
807
|
+
if (rowSelectionMode !== "none" && selectOnRowClick) {
|
|
808
|
+
onToggleSelect();
|
|
809
|
+
}
|
|
810
|
+
},
|
|
811
|
+
children: visibleCells.map((cell, cellIndex) => {
|
|
812
|
+
const columnId = cell.column.id;
|
|
813
|
+
const meta = cell.column.columnDef.meta;
|
|
814
|
+
const align = meta?.align ?? "center";
|
|
815
|
+
const cellClassName = meta?.className;
|
|
816
|
+
const isRowSpanColumn = Boolean(enableRowSpan && meta?.rowSpan);
|
|
817
|
+
const isExpandCell = cellIndex === expandCellIndex;
|
|
818
|
+
const editable = isColumnEditable(cell.column.columnDef);
|
|
819
|
+
const editType = getColumnEditType(cell.column.columnDef);
|
|
820
|
+
let rowSpanInfo;
|
|
821
|
+
if (isRowSpanColumn) {
|
|
822
|
+
rowSpanInfo = columnRowSpanMap.get(columnId)?.[rowIndex];
|
|
823
|
+
if (rowSpanInfo && rowSpanInfo.rowSpan === 0) {
|
|
824
|
+
return null;
|
|
825
|
+
}
|
|
826
|
+
}
|
|
827
|
+
const isEditing = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === cellIndex;
|
|
828
|
+
const showCellHover = isRowSpanColumn ? isGroupHovered : isRowHovered;
|
|
829
|
+
const showCellSelected = isRowSpanColumn ? isGroupSelected : isRowSelected;
|
|
830
|
+
const cellRowSpan = rowSpanInfo?.rowSpan ?? 1;
|
|
831
|
+
const isMerged = cellRowSpan > 1;
|
|
832
|
+
const showMergedRightEdge = isMerged && (cellIndex === visibleCells.length - 1 || resolveRowSpanAt(
|
|
833
|
+
columnRowSpanMap.get(columnIdsByIndex[cellIndex + 1]),
|
|
834
|
+
rowIndex
|
|
835
|
+
).rowSpan <= 1);
|
|
836
|
+
const isCellDragSelected = isCellInSelection(
|
|
837
|
+
rowIndex,
|
|
838
|
+
cellIndex,
|
|
839
|
+
activeSelectionBounds,
|
|
840
|
+
cellRowSpan
|
|
841
|
+
);
|
|
842
|
+
const isBottomRightCell = !isEditing && activeSelectionBounds && !dragState.isSelecting && activeSelectionBounds.endRow >= rowIndex && activeSelectionBounds.endRow <= rowIndex + cellRowSpan - 1 && cellIndex === activeSelectionBounds.endCol;
|
|
843
|
+
const selectionEdgeStyle = getCellSelectionEdgeStyle(
|
|
844
|
+
rowIndex,
|
|
845
|
+
cellIndex,
|
|
846
|
+
activeSelectionBounds,
|
|
847
|
+
cellRowSpan,
|
|
848
|
+
isVisuallySelectedAt
|
|
849
|
+
);
|
|
850
|
+
const resolveCellRowIndex = (clientY, element) => getRowIndexInMergedCell(clientY, element, rowIndex, cellRowSpan);
|
|
851
|
+
const hasSelectionEdges = hasCellSelectionEdges(selectionEdgeStyle);
|
|
852
|
+
return /* @__PURE__ */ jsxs2(
|
|
853
|
+
"td",
|
|
854
|
+
{
|
|
855
|
+
rowSpan: rowSpanInfo && rowSpanInfo.rowSpan > 1 ? rowSpanInfo.rowSpan : void 0,
|
|
856
|
+
"data-merged": isMerged && cellIndex > 0 ? "" : void 0,
|
|
857
|
+
"data-merged-edge-right": showMergedRightEdge ? "" : void 0,
|
|
858
|
+
"data-group-selected": enableRowSpan && showCellSelected ? "" : void 0,
|
|
859
|
+
"data-group-hovered": enableRowSpan && showCellHover && !showCellSelected ? "" : void 0,
|
|
860
|
+
"data-selection-fill": isCellDragSelected ? "" : void 0,
|
|
861
|
+
"data-selection-edges": hasSelectionEdges ? "" : void 0,
|
|
862
|
+
"data-editable": editable ? "" : void 0,
|
|
863
|
+
"data-editing": isEditing ? "" : void 0,
|
|
864
|
+
onMouseDown: (event) => {
|
|
865
|
+
if (isEditing) {
|
|
866
|
+
event.stopPropagation();
|
|
867
|
+
return;
|
|
868
|
+
}
|
|
869
|
+
if (!enableCellSelection) return;
|
|
870
|
+
event.preventDefault();
|
|
871
|
+
onCellMouseDown(
|
|
872
|
+
resolveCellRowIndex(event.clientY, event.currentTarget),
|
|
873
|
+
cellIndex
|
|
874
|
+
);
|
|
875
|
+
},
|
|
876
|
+
onMouseEnter: (event) => {
|
|
877
|
+
if (!enableCellSelection) return;
|
|
878
|
+
onCellMouseEnter(
|
|
879
|
+
resolveCellRowIndex(event.clientY, event.currentTarget),
|
|
880
|
+
cellIndex
|
|
881
|
+
);
|
|
882
|
+
},
|
|
883
|
+
onMouseMove: (event) => {
|
|
884
|
+
if (!enableCellSelection) return;
|
|
885
|
+
if (!dragState.isSelecting && !dragState.isFillDragging) return;
|
|
886
|
+
onCellMouseEnter(
|
|
887
|
+
resolveCellRowIndex(event.clientY, event.currentTarget),
|
|
888
|
+
cellIndex
|
|
889
|
+
);
|
|
890
|
+
},
|
|
891
|
+
onDoubleClick: (event) => {
|
|
892
|
+
if (!editable) return;
|
|
893
|
+
event.preventDefault();
|
|
894
|
+
event.stopPropagation();
|
|
895
|
+
onStartEdit(rowIndex, cellIndex);
|
|
896
|
+
},
|
|
897
|
+
style: selectionEdgeStyle,
|
|
898
|
+
className: cn(
|
|
899
|
+
"data-table-cell",
|
|
900
|
+
CELL_ALIGN_CLASS[align],
|
|
901
|
+
cellClassName,
|
|
902
|
+
isMerged && cellIndex > 0 && "is-merged",
|
|
903
|
+
showMergedRightEdge && "is-merged-edge-right",
|
|
904
|
+
enableRowSpan && showCellSelected && "is-group-selected",
|
|
905
|
+
enableRowSpan && showCellHover && !showCellSelected && "is-group-hovered",
|
|
906
|
+
isCellDragSelected && CELL_SELECTION_FILL_CLASS,
|
|
907
|
+
hasSelectionEdges && CELL_SELECTION_EDGES_CLASS,
|
|
908
|
+
editable && "is-editable",
|
|
909
|
+
classNames?.cell
|
|
910
|
+
),
|
|
911
|
+
children: [
|
|
912
|
+
isEditing ? /* @__PURE__ */ jsx3(
|
|
913
|
+
"input",
|
|
914
|
+
{
|
|
915
|
+
ref: editInputRef,
|
|
916
|
+
type: editType === "number" ? "number" : "text",
|
|
917
|
+
defaultValue: draftValue,
|
|
918
|
+
className: cn(
|
|
919
|
+
"cell-edit-input",
|
|
920
|
+
CELL_ALIGN_CLASS[align],
|
|
921
|
+
classNames?.cellEditInput
|
|
922
|
+
),
|
|
923
|
+
onChange: (event) => onDraftValueChange(event.target.value),
|
|
924
|
+
onMouseDown: (event) => event.stopPropagation(),
|
|
925
|
+
onClick: (event) => event.stopPropagation(),
|
|
926
|
+
onKeyDown: (event) => {
|
|
927
|
+
if (event.key === "Enter") {
|
|
928
|
+
event.preventDefault();
|
|
929
|
+
onCommitEdit(event.currentTarget.value);
|
|
930
|
+
}
|
|
931
|
+
if (event.key === "Escape") {
|
|
932
|
+
event.preventDefault();
|
|
933
|
+
onCancelEdit();
|
|
934
|
+
}
|
|
935
|
+
},
|
|
936
|
+
onBlur: (event) => {
|
|
937
|
+
onCommitEdit(event.currentTarget.value);
|
|
938
|
+
}
|
|
939
|
+
}
|
|
940
|
+
) : isExpandCell && enableExpand ? /* @__PURE__ */ jsxs2("div", { className: cn("expand-cell", classNames?.expandCell), children: [
|
|
941
|
+
/* @__PURE__ */ jsxs2(
|
|
942
|
+
"div",
|
|
943
|
+
{
|
|
944
|
+
className: cn(
|
|
945
|
+
"expand-cell-content",
|
|
946
|
+
classNames?.expandCellContent
|
|
947
|
+
),
|
|
948
|
+
children: [
|
|
949
|
+
rowLevel > 0 && /* @__PURE__ */ jsx3(
|
|
950
|
+
"span",
|
|
951
|
+
{
|
|
952
|
+
className: cn(
|
|
953
|
+
"expand-cell-indent",
|
|
954
|
+
classNames?.expandCellIndent
|
|
955
|
+
),
|
|
956
|
+
children: "\xB7"
|
|
957
|
+
}
|
|
958
|
+
),
|
|
959
|
+
/* @__PURE__ */ jsx3(
|
|
960
|
+
"div",
|
|
961
|
+
{
|
|
962
|
+
className: cn(
|
|
963
|
+
"expand-cell-value",
|
|
964
|
+
classNames?.expandCellValue
|
|
965
|
+
),
|
|
966
|
+
children: flexRender(cell.column.columnDef.cell, cell.getContext())
|
|
967
|
+
}
|
|
968
|
+
)
|
|
969
|
+
]
|
|
970
|
+
}
|
|
971
|
+
),
|
|
972
|
+
canExpand && expandKey && /* @__PURE__ */ jsx3(
|
|
973
|
+
"button",
|
|
974
|
+
{
|
|
975
|
+
type: "button",
|
|
976
|
+
"aria-label": isExpanded ? collapseRowLabel : expandRowLabel,
|
|
977
|
+
className: cn(
|
|
978
|
+
"expand-toggle-button",
|
|
979
|
+
classNames?.expandToggle
|
|
980
|
+
),
|
|
981
|
+
onClick: (event) => {
|
|
982
|
+
event.stopPropagation();
|
|
983
|
+
onToggleExpand?.(expandKey);
|
|
984
|
+
},
|
|
985
|
+
onMouseDown: (event) => event.stopPropagation(),
|
|
986
|
+
children: isExpanded ? /* @__PURE__ */ jsx3(
|
|
987
|
+
ChevronUp,
|
|
988
|
+
{
|
|
989
|
+
className: cn(
|
|
990
|
+
"expand-toggle-icon",
|
|
991
|
+
classNames?.expandToggleIcon
|
|
992
|
+
)
|
|
993
|
+
}
|
|
994
|
+
) : /* @__PURE__ */ jsx3(
|
|
995
|
+
ChevronDown,
|
|
996
|
+
{
|
|
997
|
+
className: cn(
|
|
998
|
+
"expand-toggle-icon",
|
|
999
|
+
classNames?.expandToggleIcon
|
|
1000
|
+
)
|
|
1001
|
+
}
|
|
1002
|
+
)
|
|
1003
|
+
}
|
|
1004
|
+
)
|
|
1005
|
+
] }) : flexRender(cell.column.columnDef.cell, cell.getContext()),
|
|
1006
|
+
isBottomRightCell && /* @__PURE__ */ jsx3(
|
|
1007
|
+
"div",
|
|
1008
|
+
{
|
|
1009
|
+
role: "presentation",
|
|
1010
|
+
className: cn("fill-handle", classNames?.fillHandle),
|
|
1011
|
+
onMouseDown: (event) => {
|
|
1012
|
+
event.stopPropagation();
|
|
1013
|
+
event.preventDefault();
|
|
1014
|
+
onFillHandleMouseDown(rowIndex, cellIndex);
|
|
1015
|
+
}
|
|
1016
|
+
}
|
|
1017
|
+
)
|
|
1018
|
+
]
|
|
1019
|
+
},
|
|
1020
|
+
cell.id
|
|
1021
|
+
);
|
|
1022
|
+
})
|
|
1023
|
+
}
|
|
1024
|
+
);
|
|
1025
|
+
}
|
|
1026
|
+
|
|
1027
|
+
// src/components/ui/table/components/DataTable/DataTableToolbar.tsx
|
|
1028
|
+
import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
1029
|
+
function DataTableToolbar({
|
|
1030
|
+
filteredCount,
|
|
1031
|
+
totalCount,
|
|
1032
|
+
summary,
|
|
1033
|
+
selectedCount,
|
|
1034
|
+
selectionLabel,
|
|
1035
|
+
toolbar,
|
|
1036
|
+
className,
|
|
1037
|
+
classNames
|
|
1038
|
+
}) {
|
|
1039
|
+
const displayFiltered = filteredCount ?? totalCount;
|
|
1040
|
+
const hasCount = displayFiltered !== void 0 || totalCount !== void 0;
|
|
1041
|
+
const hasLeftContent = hasCount || Boolean(summary);
|
|
1042
|
+
const hasToolbar = Boolean(toolbar);
|
|
1043
|
+
const selectionContent = selectionLabel?.(selectedCount) ?? null;
|
|
1044
|
+
const hasSelectionContent = selectionContent !== null && selectionContent !== false && selectionContent !== void 0 && typeof selectionContent !== "boolean";
|
|
1045
|
+
if (!hasLeftContent && !hasToolbar && !hasSelectionContent) return null;
|
|
1046
|
+
return /* @__PURE__ */ jsxs3("div", { className: cn("DataTableToolbarJSX", classNames?.toolbar, className), children: [
|
|
1047
|
+
/* @__PURE__ */ jsxs3("div", { className: cn("toolbar-left", classNames?.toolbarLeft), children: [
|
|
1048
|
+
hasCount && /* @__PURE__ */ jsx4("span", { className: cn("toolbar-count", classNames?.toolbarCount), children: displayFiltered !== void 0 && totalCount !== void 0 ? /* @__PURE__ */ jsxs3(Fragment, { children: [
|
|
1049
|
+
/* @__PURE__ */ jsx4("span", { className: "toolbar-count-primary", children: displayFiltered }),
|
|
1050
|
+
/* @__PURE__ */ jsxs3("span", { className: "toolbar-count-placeholder", children: [
|
|
1051
|
+
" / ",
|
|
1052
|
+
totalCount
|
|
1053
|
+
] })
|
|
1054
|
+
] }) : /* @__PURE__ */ jsx4("span", { className: "toolbar-count-primary", children: displayFiltered ?? totalCount }) }),
|
|
1055
|
+
summary
|
|
1056
|
+
] }),
|
|
1057
|
+
/* @__PURE__ */ jsxs3("div", { className: cn("toolbar-right", classNames?.toolbarRight), children: [
|
|
1058
|
+
hasSelectionContent && (typeof selectionContent === "string" || typeof selectionContent === "number" ? /* @__PURE__ */ jsx4("span", { className: cn("toolbar-selection", classNames?.toolbarSelection), children: selectionContent }) : selectionContent),
|
|
1059
|
+
hasToolbar && /* @__PURE__ */ jsx4("div", { className: cn("toolbar-actions", classNames?.toolbarActions), children: toolbar })
|
|
1060
|
+
] })
|
|
1061
|
+
] });
|
|
1062
|
+
}
|
|
1063
|
+
|
|
1064
|
+
// src/core/useGlideTable.ts
|
|
1065
|
+
import {
|
|
1066
|
+
getCoreRowModel,
|
|
1067
|
+
useReactTable
|
|
1068
|
+
} from "@tanstack/react-table";
|
|
1069
|
+
import {
|
|
1070
|
+
useVirtualizer
|
|
1071
|
+
} from "@tanstack/react-virtual";
|
|
1072
|
+
import {
|
|
1073
|
+
useCallback as useCallback3,
|
|
1074
|
+
useEffect as useEffect5,
|
|
1075
|
+
useMemo as useMemo2,
|
|
1076
|
+
useRef as useRef4,
|
|
1077
|
+
useState as useState3
|
|
1078
|
+
} from "react";
|
|
1079
|
+
|
|
1080
|
+
// src/components/ui/table/features/cell-edit/useCellEdit.ts
|
|
1081
|
+
import { useCallback, useEffect as useEffect3, useRef as useRef3, useState } from "react";
|
|
1082
|
+
function useCellEdit({
|
|
1083
|
+
data,
|
|
1084
|
+
rows,
|
|
1085
|
+
onDataChange,
|
|
1086
|
+
onCellChange
|
|
1087
|
+
}) {
|
|
1088
|
+
const [editingCell, setEditingCell] = useState(null);
|
|
1089
|
+
const [draftValue, setDraftValue] = useState("");
|
|
1090
|
+
const draftValueRef = useRef3(draftValue);
|
|
1091
|
+
const editingCellRef = useRef3(editingCell);
|
|
1092
|
+
useEffect3(() => {
|
|
1093
|
+
draftValueRef.current = draftValue;
|
|
1094
|
+
}, [draftValue]);
|
|
1095
|
+
useEffect3(() => {
|
|
1096
|
+
editingCellRef.current = editingCell;
|
|
1097
|
+
}, [editingCell]);
|
|
1098
|
+
const cancelEdit = useCallback(() => {
|
|
1099
|
+
setEditingCell(null);
|
|
1100
|
+
setDraftValue("");
|
|
1101
|
+
}, []);
|
|
1102
|
+
const commitEdit = useCallback(
|
|
1103
|
+
(raw) => {
|
|
1104
|
+
const current = editingCellRef.current;
|
|
1105
|
+
if (!current) return true;
|
|
1106
|
+
if (!onCellChange && !onDataChange) {
|
|
1107
|
+
cancelEdit();
|
|
1108
|
+
return true;
|
|
1109
|
+
}
|
|
1110
|
+
const row = rows[current.rowIndex];
|
|
1111
|
+
const cell = row?.getVisibleCells()[current.colIndex];
|
|
1112
|
+
if (!row || !cell) {
|
|
1113
|
+
cancelEdit();
|
|
1114
|
+
return true;
|
|
1115
|
+
}
|
|
1116
|
+
const value = raw ?? draftValueRef.current;
|
|
1117
|
+
if (!isColumnEditable(cell.column.columnDef)) {
|
|
1118
|
+
cancelEdit();
|
|
1119
|
+
return true;
|
|
1120
|
+
}
|
|
1121
|
+
const parsed = parseCellEditValue(value, getColumnEditType(cell.column.columnDef));
|
|
1122
|
+
if (!parsed.ok) return false;
|
|
1123
|
+
if (onCellChange) {
|
|
1124
|
+
onCellChange(row.id, cell.column.id, parsed.value);
|
|
1125
|
+
cancelEdit();
|
|
1126
|
+
return true;
|
|
1127
|
+
}
|
|
1128
|
+
const next = applyCellEdit(data, rows, current.rowIndex, current.colIndex, value);
|
|
1129
|
+
if (!next) return false;
|
|
1130
|
+
onDataChange?.(next);
|
|
1131
|
+
cancelEdit();
|
|
1132
|
+
return true;
|
|
1133
|
+
},
|
|
1134
|
+
[cancelEdit, data, onCellChange, onDataChange, rows]
|
|
1135
|
+
);
|
|
1136
|
+
const startEdit = useCallback(
|
|
1137
|
+
(rowIndex, colIndex) => {
|
|
1138
|
+
const cell = rows[rowIndex]?.getVisibleCells()[colIndex];
|
|
1139
|
+
if (!cell || !isColumnEditable(cell.column.columnDef)) return;
|
|
1140
|
+
const current = editingCellRef.current;
|
|
1141
|
+
if (current && (current.rowIndex !== rowIndex || current.colIndex !== colIndex) && !commitEdit()) {
|
|
1142
|
+
return;
|
|
1143
|
+
}
|
|
1144
|
+
setEditingCell({ rowIndex, colIndex });
|
|
1145
|
+
setDraftValue(getCellEditDraftValue(cell.getValue()));
|
|
1146
|
+
},
|
|
1147
|
+
[commitEdit, rows]
|
|
1148
|
+
);
|
|
1149
|
+
return {
|
|
1150
|
+
editingCell,
|
|
1151
|
+
draftValue,
|
|
1152
|
+
setDraftValue,
|
|
1153
|
+
startEdit,
|
|
1154
|
+
commitEdit,
|
|
1155
|
+
cancelEdit
|
|
1156
|
+
};
|
|
1157
|
+
}
|
|
1158
|
+
|
|
1159
|
+
// src/components/ui/table/features/cell-selection/useCellSelection.ts
|
|
1160
|
+
import { useCallback as useCallback2, useEffect as useEffect4, useState as useState2 } from "react";
|
|
1161
|
+
|
|
1162
|
+
// src/components/ui/table/features/cell-selection/fillData.ts
|
|
1163
|
+
function getColumnAccessorKey2(columnDef) {
|
|
1164
|
+
if ("accessorKey" in columnDef && columnDef.accessorKey) {
|
|
1165
|
+
return String(columnDef.accessorKey);
|
|
1166
|
+
}
|
|
1167
|
+
return columnDef.id;
|
|
1168
|
+
}
|
|
1169
|
+
function collectFillTargets(rows, sourceBounds, fillBounds) {
|
|
1170
|
+
const targets = [];
|
|
1171
|
+
const sourceHeight = sourceBounds.endRow - sourceBounds.startRow + 1;
|
|
1172
|
+
const sourceWidth = sourceBounds.endCol - sourceBounds.startCol + 1;
|
|
1173
|
+
for (let rowIndex = fillBounds.startRow; rowIndex <= fillBounds.endRow; rowIndex += 1) {
|
|
1174
|
+
for (let colIndex = fillBounds.startCol; colIndex <= fillBounds.endCol; colIndex += 1) {
|
|
1175
|
+
if (isCellInSelection(rowIndex, colIndex, sourceBounds)) continue;
|
|
1176
|
+
const offsetRow = rowIndex - sourceBounds.startRow;
|
|
1177
|
+
const offsetCol = colIndex - sourceBounds.startCol;
|
|
1178
|
+
const sourceRowIndex = sourceBounds.startRow + (offsetRow % sourceHeight + sourceHeight) % sourceHeight;
|
|
1179
|
+
const sourceColIndex = sourceBounds.startCol + (offsetCol % sourceWidth + sourceWidth) % sourceWidth;
|
|
1180
|
+
const targetRow = rows[rowIndex];
|
|
1181
|
+
const targetCell = targetRow?.getVisibleCells()[colIndex];
|
|
1182
|
+
const sourceCell = rows[sourceRowIndex]?.getVisibleCells()[sourceColIndex];
|
|
1183
|
+
if (!targetRow || !targetCell || !sourceCell) continue;
|
|
1184
|
+
const accessorKey = getColumnAccessorKey2(
|
|
1185
|
+
targetCell.column.columnDef
|
|
1186
|
+
);
|
|
1187
|
+
if (!accessorKey) continue;
|
|
1188
|
+
targets.push({
|
|
1189
|
+
rowIndex,
|
|
1190
|
+
accessorKey,
|
|
1191
|
+
columnId: targetCell.column.id,
|
|
1192
|
+
value: sourceCell.getValue(),
|
|
1193
|
+
rowId: targetRow.id
|
|
1194
|
+
});
|
|
1195
|
+
}
|
|
1196
|
+
}
|
|
1197
|
+
return targets;
|
|
1198
|
+
}
|
|
1199
|
+
function collectFillChanges(rows, sourceBounds, fillBounds) {
|
|
1200
|
+
return collectFillTargets(rows, sourceBounds, fillBounds).map(
|
|
1201
|
+
({ rowId, columnId, value }) => ({ rowId, columnId, value })
|
|
1202
|
+
);
|
|
1203
|
+
}
|
|
1204
|
+
function applyFillData(data, rows, sourceBounds, fillBounds) {
|
|
1205
|
+
const newData = data.map((row) => ({ ...row }));
|
|
1206
|
+
const targets = collectFillTargets(rows, sourceBounds, fillBounds);
|
|
1207
|
+
for (const target of targets) {
|
|
1208
|
+
if (!newData[target.rowIndex]) continue;
|
|
1209
|
+
newData[target.rowIndex][target.accessorKey] = target.value;
|
|
1210
|
+
}
|
|
1211
|
+
return newData;
|
|
1212
|
+
}
|
|
1213
|
+
function hasFillExtension(sourceBounds, fillBounds) {
|
|
1214
|
+
if (!sourceBounds) return false;
|
|
1215
|
+
return fillBounds.startRow < sourceBounds.startRow || fillBounds.endRow > sourceBounds.endRow || fillBounds.startCol < sourceBounds.startCol || fillBounds.endCol > sourceBounds.endCol;
|
|
1216
|
+
}
|
|
1217
|
+
|
|
1218
|
+
// src/components/ui/table/features/cell-selection/useCellSelection.ts
|
|
1219
|
+
function useCellSelection({
|
|
1220
|
+
data,
|
|
1221
|
+
rows,
|
|
1222
|
+
enabled = true,
|
|
1223
|
+
onDataChange,
|
|
1224
|
+
onBatchChange
|
|
1225
|
+
}) {
|
|
1226
|
+
const [dragState, setDragState] = useState2(INITIAL_DRAG_STATE);
|
|
1227
|
+
const cellSelectionBounds = getCellSelectionBounds(dragState.start, dragState.end);
|
|
1228
|
+
const activeSelectionBounds = enabled ? getActiveSelectionBounds(dragState, cellSelectionBounds) : null;
|
|
1229
|
+
const handleCellMouseDown = useCallback2(
|
|
1230
|
+
(rowIndex, colIndex) => {
|
|
1231
|
+
if (!enabled) return;
|
|
1232
|
+
setDragState({
|
|
1233
|
+
isSelecting: true,
|
|
1234
|
+
isFillDragging: false,
|
|
1235
|
+
start: { row: rowIndex, col: colIndex },
|
|
1236
|
+
end: { row: rowIndex, col: colIndex },
|
|
1237
|
+
fillAnchor: null,
|
|
1238
|
+
fillEnd: null
|
|
1239
|
+
});
|
|
1240
|
+
},
|
|
1241
|
+
[enabled]
|
|
1242
|
+
);
|
|
1243
|
+
const handleCellMouseEnter = useCallback2(
|
|
1244
|
+
(rowIndex, colIndex) => {
|
|
1245
|
+
if (!enabled) return;
|
|
1246
|
+
setDragState((prev) => {
|
|
1247
|
+
if (prev.isSelecting) {
|
|
1248
|
+
return { ...prev, end: { row: rowIndex, col: colIndex } };
|
|
1249
|
+
}
|
|
1250
|
+
if (prev.isFillDragging) {
|
|
1251
|
+
return { ...prev, fillEnd: { row: rowIndex, col: colIndex } };
|
|
1252
|
+
}
|
|
1253
|
+
return prev;
|
|
1254
|
+
});
|
|
1255
|
+
},
|
|
1256
|
+
[enabled]
|
|
1257
|
+
);
|
|
1258
|
+
const handleFillHandleMouseDown = useCallback2(
|
|
1259
|
+
(rowIndex, colIndex) => {
|
|
1260
|
+
if (!enabled) return;
|
|
1261
|
+
setDragState((prev) => {
|
|
1262
|
+
const bounds = getCellSelectionBounds(prev.start, prev.end);
|
|
1263
|
+
if (!bounds) return prev;
|
|
1264
|
+
return {
|
|
1265
|
+
...prev,
|
|
1266
|
+
isSelecting: false,
|
|
1267
|
+
isFillDragging: true,
|
|
1268
|
+
fillAnchor: { row: bounds.startRow, col: bounds.startCol },
|
|
1269
|
+
fillEnd: { row: rowIndex, col: colIndex }
|
|
1270
|
+
};
|
|
1271
|
+
});
|
|
1272
|
+
},
|
|
1273
|
+
[enabled]
|
|
1274
|
+
);
|
|
1275
|
+
useEffect4(() => {
|
|
1276
|
+
if (!enabled) {
|
|
1277
|
+
setDragState(INITIAL_DRAG_STATE);
|
|
1278
|
+
}
|
|
1279
|
+
}, [enabled]);
|
|
1280
|
+
useEffect4(() => {
|
|
1281
|
+
if (!enabled) return;
|
|
1282
|
+
const handleKeyDown = (e) => {
|
|
1283
|
+
if ((e.ctrlKey || e.metaKey) && e.key === "c" && activeSelectionBounds) {
|
|
1284
|
+
const { startRow, endRow, startCol, endCol } = activeSelectionBounds;
|
|
1285
|
+
const selectedData = rows.slice(startRow, endRow + 1).map((row) => {
|
|
1286
|
+
const cells = row.getVisibleCells();
|
|
1287
|
+
return cells.slice(startCol, endCol + 1).map((cell) => cell.getValue()).join(" ");
|
|
1288
|
+
}).join("\n");
|
|
1289
|
+
navigator.clipboard.writeText(selectedData);
|
|
1290
|
+
}
|
|
1291
|
+
};
|
|
1292
|
+
window.addEventListener("keydown", handleKeyDown);
|
|
1293
|
+
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
1294
|
+
}, [activeSelectionBounds, enabled, rows]);
|
|
1295
|
+
useEffect4(() => {
|
|
1296
|
+
if (!enabled) return;
|
|
1297
|
+
const handleMouseUp = () => {
|
|
1298
|
+
setDragState((prev) => {
|
|
1299
|
+
if (prev.isFillDragging && prev.fillAnchor && prev.fillEnd) {
|
|
1300
|
+
const sourceBounds = getCellSelectionBounds(prev.start, prev.end);
|
|
1301
|
+
const newBounds = getCellSelectionBounds(prev.fillAnchor, prev.fillEnd);
|
|
1302
|
+
if (newBounds) {
|
|
1303
|
+
if (hasFillExtension(sourceBounds, newBounds) && sourceBounds) {
|
|
1304
|
+
if (onBatchChange) {
|
|
1305
|
+
const changes = collectFillChanges(rows, sourceBounds, newBounds);
|
|
1306
|
+
if (changes.length > 0) {
|
|
1307
|
+
onBatchChange(changes);
|
|
1308
|
+
}
|
|
1309
|
+
} else if (onDataChange) {
|
|
1310
|
+
onDataChange(applyFillData(data, rows, sourceBounds, newBounds));
|
|
1311
|
+
}
|
|
1312
|
+
}
|
|
1313
|
+
return {
|
|
1314
|
+
isSelecting: false,
|
|
1315
|
+
isFillDragging: false,
|
|
1316
|
+
start: { row: newBounds.startRow, col: newBounds.startCol },
|
|
1317
|
+
end: { row: newBounds.endRow, col: newBounds.endCol },
|
|
1318
|
+
fillAnchor: null,
|
|
1319
|
+
fillEnd: null
|
|
1320
|
+
};
|
|
1321
|
+
}
|
|
1322
|
+
}
|
|
1323
|
+
if (prev.isSelecting) {
|
|
1324
|
+
return { ...prev, isSelecting: false };
|
|
1325
|
+
}
|
|
1326
|
+
if (prev.isFillDragging) {
|
|
1327
|
+
return { ...prev, isFillDragging: false, fillAnchor: null, fillEnd: null };
|
|
1328
|
+
}
|
|
1329
|
+
return prev;
|
|
1330
|
+
});
|
|
1331
|
+
};
|
|
1332
|
+
window.addEventListener("mouseup", handleMouseUp);
|
|
1333
|
+
return () => window.removeEventListener("mouseup", handleMouseUp);
|
|
1334
|
+
}, [data, enabled, onBatchChange, onDataChange, rows]);
|
|
1335
|
+
return {
|
|
1336
|
+
dragState: enabled ? dragState : INITIAL_DRAG_STATE,
|
|
1337
|
+
activeSelectionBounds,
|
|
1338
|
+
handleCellMouseDown,
|
|
1339
|
+
handleCellMouseEnter,
|
|
1340
|
+
handleFillHandleMouseDown
|
|
1341
|
+
};
|
|
1342
|
+
}
|
|
1343
|
+
|
|
1344
|
+
// src/components/ui/table/features/row-selection/rowSelection.ts
|
|
1345
|
+
function resolveRowSelection(mode, controlledSelection, internalSelection) {
|
|
1346
|
+
if (mode === "none") return {};
|
|
1347
|
+
return controlledSelection ?? internalSelection;
|
|
1348
|
+
}
|
|
1349
|
+
function normalizeSingleSelection(next) {
|
|
1350
|
+
const selectedIds = Object.keys(next).filter((id) => next[id]);
|
|
1351
|
+
if (selectedIds.length <= 1) return next;
|
|
1352
|
+
return { [selectedIds[selectedIds.length - 1]]: true };
|
|
1353
|
+
}
|
|
1354
|
+
function applySelectionUpdater(mode, updater, previous) {
|
|
1355
|
+
const next = typeof updater === "function" ? updater(previous) : updater;
|
|
1356
|
+
return mode === "single" ? normalizeSingleSelection(next) : next;
|
|
1357
|
+
}
|
|
1358
|
+
|
|
1359
|
+
// src/core/labels.ts
|
|
1360
|
+
var DEFAULT_DATA_TABLE_LABELS = {
|
|
1361
|
+
empty: "No data",
|
|
1362
|
+
loading: "Loading...",
|
|
1363
|
+
selection: (selectedCount) => selectedCount > 0 ? `\u2713 ${selectedCount} selected` : null,
|
|
1364
|
+
expandRow: "Expand row",
|
|
1365
|
+
collapseRow: "Collapse row"
|
|
1366
|
+
};
|
|
1367
|
+
function resolveDataTableLabels(partial) {
|
|
1368
|
+
return {
|
|
1369
|
+
...DEFAULT_DATA_TABLE_LABELS,
|
|
1370
|
+
...partial
|
|
1371
|
+
};
|
|
1372
|
+
}
|
|
1373
|
+
|
|
1374
|
+
// src/core/useGlideTable.ts
|
|
1375
|
+
function useGlideTable(options) {
|
|
1376
|
+
const {
|
|
1377
|
+
data,
|
|
1378
|
+
columns,
|
|
1379
|
+
rowSelectionMode = "none",
|
|
1380
|
+
rowSelection: controlledRowSelection,
|
|
1381
|
+
onRowSelectionChange,
|
|
1382
|
+
selectionLabel,
|
|
1383
|
+
emptyText,
|
|
1384
|
+
loadingText,
|
|
1385
|
+
labels: labelsProp,
|
|
1386
|
+
enableRowSpan = false,
|
|
1387
|
+
getRowId,
|
|
1388
|
+
onRowClick,
|
|
1389
|
+
getRowClassName,
|
|
1390
|
+
getRowCanSelect,
|
|
1391
|
+
selectOnRowClick = true,
|
|
1392
|
+
enableCellSelection = true,
|
|
1393
|
+
onDataChange,
|
|
1394
|
+
onCellChange,
|
|
1395
|
+
onBatchChange,
|
|
1396
|
+
preserveRowSelection = false,
|
|
1397
|
+
toggleField,
|
|
1398
|
+
childField,
|
|
1399
|
+
flattenField,
|
|
1400
|
+
qtyField,
|
|
1401
|
+
expandedRows: controlledExpandedRows,
|
|
1402
|
+
onExpandedRowsChange,
|
|
1403
|
+
preventExpand = false,
|
|
1404
|
+
enableVirtualization = true,
|
|
1405
|
+
estimateRowHeight = DATA_TABLE_ROW_HEIGHT,
|
|
1406
|
+
virtualOverscan = DATA_TABLE_VIRTUAL_OVERSCAN
|
|
1407
|
+
} = options;
|
|
1408
|
+
const labels = useMemo2(() => {
|
|
1409
|
+
const resolved = resolveDataTableLabels(labelsProp);
|
|
1410
|
+
return {
|
|
1411
|
+
...resolved,
|
|
1412
|
+
empty: labelsProp?.empty ?? emptyText ?? resolved.empty,
|
|
1413
|
+
loading: labelsProp?.loading ?? loadingText ?? resolved.loading,
|
|
1414
|
+
selection: labelsProp?.selection ?? selectionLabel ?? resolved.selection
|
|
1415
|
+
};
|
|
1416
|
+
}, [labelsProp, emptyText, loadingText, selectionLabel]);
|
|
1417
|
+
const enableExpand = Boolean(toggleField);
|
|
1418
|
+
const [internalRowSelection, setInternalRowSelection] = useState3({});
|
|
1419
|
+
const [internalExpandedRows, setInternalExpandedRows] = useState3(
|
|
1420
|
+
() => /* @__PURE__ */ new Set()
|
|
1421
|
+
);
|
|
1422
|
+
const [hoveredRowIndex, setHoveredRowIndex] = useState3(null);
|
|
1423
|
+
const [hoveredGroupKey, setHoveredGroupKey] = useState3(null);
|
|
1424
|
+
const scrollRef = useRef4(null);
|
|
1425
|
+
const shouldVirtualize = enableVirtualization && !enableRowSpan;
|
|
1426
|
+
useEffect5(() => {
|
|
1427
|
+
if (enableVirtualization && enableRowSpan) {
|
|
1428
|
+
console.warn(
|
|
1429
|
+
"[useGlideTable] enableRowSpan is on; virtualization is disabled to preserve cell merges."
|
|
1430
|
+
);
|
|
1431
|
+
}
|
|
1432
|
+
}, [enableVirtualization, enableRowSpan]);
|
|
1433
|
+
const rowSelection = resolveRowSelection(
|
|
1434
|
+
rowSelectionMode,
|
|
1435
|
+
controlledRowSelection,
|
|
1436
|
+
internalRowSelection
|
|
1437
|
+
);
|
|
1438
|
+
const expandedRows = controlledExpandedRows ?? internalExpandedRows;
|
|
1439
|
+
const handleExpandedRowsChange = useCallback3(
|
|
1440
|
+
(next) => {
|
|
1441
|
+
if (onExpandedRowsChange) {
|
|
1442
|
+
onExpandedRowsChange(next);
|
|
1443
|
+
return;
|
|
1444
|
+
}
|
|
1445
|
+
setInternalExpandedRows(next);
|
|
1446
|
+
},
|
|
1447
|
+
[onExpandedRowsChange]
|
|
1448
|
+
);
|
|
1449
|
+
const tableData = useConvertTreeData({
|
|
1450
|
+
data,
|
|
1451
|
+
enabled: enableExpand,
|
|
1452
|
+
toggleField,
|
|
1453
|
+
childField,
|
|
1454
|
+
flattenField,
|
|
1455
|
+
qtyField,
|
|
1456
|
+
expandedRows,
|
|
1457
|
+
onExpandedRowsChange: enableExpand ? handleExpandedRowsChange : void 0,
|
|
1458
|
+
preventExpand
|
|
1459
|
+
});
|
|
1460
|
+
const table = useReactTable({
|
|
1461
|
+
data: tableData,
|
|
1462
|
+
columns,
|
|
1463
|
+
state: {
|
|
1464
|
+
rowSelection: rowSelectionMode === "none" ? {} : rowSelection
|
|
1465
|
+
},
|
|
1466
|
+
enableRowSelection: rowSelectionMode === "none" ? false : getRowCanSelect ? (row) => getRowCanSelect(row.original, row.index) : true,
|
|
1467
|
+
enableMultiRowSelection: rowSelectionMode === "multi",
|
|
1468
|
+
onRowSelectionChange: (updater) => {
|
|
1469
|
+
if (onRowSelectionChange) {
|
|
1470
|
+
onRowSelectionChange(
|
|
1471
|
+
(previous) => applySelectionUpdater(rowSelectionMode, updater, previous)
|
|
1472
|
+
);
|
|
1473
|
+
return;
|
|
1474
|
+
}
|
|
1475
|
+
setInternalRowSelection(
|
|
1476
|
+
(previous) => applySelectionUpdater(rowSelectionMode, updater, previous)
|
|
1477
|
+
);
|
|
1478
|
+
},
|
|
1479
|
+
getCoreRowModel: getCoreRowModel(),
|
|
1480
|
+
getRowId: getRowId ? (originalRow, index) => getRowId(originalRow, index) : (_originalRow, index) => String(index)
|
|
1481
|
+
});
|
|
1482
|
+
const rowSpanColumnKeys = useMemo2(() => {
|
|
1483
|
+
if (!enableRowSpan) return [];
|
|
1484
|
+
return collectRowSpanColumns(columns);
|
|
1485
|
+
}, [enableRowSpan, columns]);
|
|
1486
|
+
const primaryRowSpanKey = rowSpanColumnKeys[0]?.rowSpanKey;
|
|
1487
|
+
const columnRowSpanMap = useMemo2(
|
|
1488
|
+
() => buildColumnRowSpanMap(tableData, rowSpanColumnKeys),
|
|
1489
|
+
[tableData, rowSpanColumnKeys]
|
|
1490
|
+
);
|
|
1491
|
+
const selectedRows = table.getSelectedRowModel().rows;
|
|
1492
|
+
const selectedCount = selectedRows.length;
|
|
1493
|
+
const rows = table.getRowModel().rows;
|
|
1494
|
+
const columnCount = table.getAllLeafColumns().length || 1;
|
|
1495
|
+
const rowVirtualizer = useVirtualizer({
|
|
1496
|
+
count: shouldVirtualize ? rows.length : 0,
|
|
1497
|
+
getScrollElement: () => scrollRef.current,
|
|
1498
|
+
estimateSize: () => estimateRowHeight,
|
|
1499
|
+
overscan: virtualOverscan
|
|
1500
|
+
});
|
|
1501
|
+
const virtualRows = rowVirtualizer.getVirtualItems();
|
|
1502
|
+
const totalSize = rowVirtualizer.getTotalSize();
|
|
1503
|
+
const paddingTop = virtualRows.length > 0 ? virtualRows[0]?.start ?? 0 : 0;
|
|
1504
|
+
const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows[virtualRows.length - 1]?.end ?? 0) : 0;
|
|
1505
|
+
const selectedGroupKeys = useMemo2(() => {
|
|
1506
|
+
if (!enableRowSpan || !primaryRowSpanKey) return /* @__PURE__ */ new Set();
|
|
1507
|
+
const keys = /* @__PURE__ */ new Set();
|
|
1508
|
+
for (const selectedRow of selectedRows) {
|
|
1509
|
+
const value = selectedRow.original[primaryRowSpanKey];
|
|
1510
|
+
if (value !== null && value !== void 0) keys.add(String(value));
|
|
1511
|
+
}
|
|
1512
|
+
return keys;
|
|
1513
|
+
}, [enableRowSpan, primaryRowSpanKey, selectedRows]);
|
|
1514
|
+
const {
|
|
1515
|
+
dragState,
|
|
1516
|
+
activeSelectionBounds,
|
|
1517
|
+
handleCellMouseDown,
|
|
1518
|
+
handleCellMouseEnter,
|
|
1519
|
+
handleFillHandleMouseDown
|
|
1520
|
+
} = useCellSelection({
|
|
1521
|
+
data: tableData,
|
|
1522
|
+
rows,
|
|
1523
|
+
enabled: enableCellSelection,
|
|
1524
|
+
onDataChange,
|
|
1525
|
+
onBatchChange
|
|
1526
|
+
});
|
|
1527
|
+
const {
|
|
1528
|
+
editingCell,
|
|
1529
|
+
draftValue,
|
|
1530
|
+
setDraftValue,
|
|
1531
|
+
startEdit,
|
|
1532
|
+
commitEdit,
|
|
1533
|
+
cancelEdit
|
|
1534
|
+
} = useCellEdit({ data: tableData, rows, onDataChange, onCellChange });
|
|
1535
|
+
const handleCellMouseDownWithCommit = useCallback3(
|
|
1536
|
+
(rowIndex, colIndex) => {
|
|
1537
|
+
const isSameEditingCell = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === colIndex;
|
|
1538
|
+
if (editingCell && !isSameEditingCell && !commitEdit()) {
|
|
1539
|
+
return;
|
|
1540
|
+
}
|
|
1541
|
+
handleCellMouseDown(rowIndex, colIndex);
|
|
1542
|
+
},
|
|
1543
|
+
[commitEdit, editingCell, handleCellMouseDown]
|
|
1544
|
+
);
|
|
1545
|
+
const clearHover = useCallback3(() => {
|
|
1546
|
+
setHoveredRowIndex(null);
|
|
1547
|
+
setHoveredGroupKey(null);
|
|
1548
|
+
}, []);
|
|
1549
|
+
const handleRowHover = useCallback3(
|
|
1550
|
+
(rowIndex, rowData) => {
|
|
1551
|
+
setHoveredRowIndex(rowIndex);
|
|
1552
|
+
if (!primaryRowSpanKey) {
|
|
1553
|
+
setHoveredGroupKey(null);
|
|
1554
|
+
return;
|
|
1555
|
+
}
|
|
1556
|
+
const groupValue = rowData[primaryRowSpanKey];
|
|
1557
|
+
setHoveredGroupKey(
|
|
1558
|
+
groupValue === null || groupValue === void 0 ? null : String(groupValue)
|
|
1559
|
+
);
|
|
1560
|
+
},
|
|
1561
|
+
[primaryRowSpanKey]
|
|
1562
|
+
);
|
|
1563
|
+
const handleToggleSelect = useCallback3(
|
|
1564
|
+
(row) => {
|
|
1565
|
+
if (!row.getCanSelect()) return;
|
|
1566
|
+
if (preserveRowSelection && row.getIsSelected()) {
|
|
1567
|
+
return;
|
|
1568
|
+
}
|
|
1569
|
+
row.toggleSelected();
|
|
1570
|
+
},
|
|
1571
|
+
[preserveRowSelection]
|
|
1572
|
+
);
|
|
1573
|
+
const handleToggleExpand = useCallback3(
|
|
1574
|
+
(rowKey) => {
|
|
1575
|
+
if (preventExpand) return;
|
|
1576
|
+
handleExpandedRowsChange(toggleExpandedRowId(rowKey, expandedRows));
|
|
1577
|
+
},
|
|
1578
|
+
[preventExpand, handleExpandedRowsChange, expandedRows]
|
|
1579
|
+
);
|
|
1580
|
+
const rowContextValue = useMemo2(() => {
|
|
1581
|
+
return {
|
|
1582
|
+
rowSpan: {
|
|
1583
|
+
enableRowSpan,
|
|
1584
|
+
primaryRowSpanKey,
|
|
1585
|
+
columnRowSpanMap,
|
|
1586
|
+
hoveredRowIndex,
|
|
1587
|
+
hoveredGroupKey,
|
|
1588
|
+
selectedGroupKeys,
|
|
1589
|
+
onRowHover: handleRowHover
|
|
1590
|
+
},
|
|
1591
|
+
selection: {
|
|
1592
|
+
rowSelectionMode,
|
|
1593
|
+
selectOnRowClick,
|
|
1594
|
+
onRowClick,
|
|
1595
|
+
getRowClassName
|
|
1596
|
+
},
|
|
1597
|
+
cellSelection: {
|
|
1598
|
+
enableCellSelection,
|
|
1599
|
+
activeSelectionBounds,
|
|
1600
|
+
dragState,
|
|
1601
|
+
onCellMouseDown: handleCellMouseDownWithCommit,
|
|
1602
|
+
onCellMouseEnter: handleCellMouseEnter,
|
|
1603
|
+
onFillHandleMouseDown: handleFillHandleMouseDown
|
|
1604
|
+
},
|
|
1605
|
+
cellEdit: {
|
|
1606
|
+
editingCell,
|
|
1607
|
+
draftValue,
|
|
1608
|
+
onDraftValueChange: setDraftValue,
|
|
1609
|
+
onStartEdit: startEdit,
|
|
1610
|
+
onCommitEdit: commitEdit,
|
|
1611
|
+
onCancelEdit: cancelEdit
|
|
1612
|
+
},
|
|
1613
|
+
expand: {
|
|
1614
|
+
enableExpand,
|
|
1615
|
+
toggleField,
|
|
1616
|
+
expandedRows,
|
|
1617
|
+
preventExpand,
|
|
1618
|
+
onToggleExpand: handleToggleExpand,
|
|
1619
|
+
expandRowLabel: labels.expandRow,
|
|
1620
|
+
collapseRowLabel: labels.collapseRow
|
|
1621
|
+
}
|
|
1622
|
+
};
|
|
1623
|
+
}, [
|
|
1624
|
+
enableRowSpan,
|
|
1625
|
+
primaryRowSpanKey,
|
|
1626
|
+
columnRowSpanMap,
|
|
1627
|
+
hoveredRowIndex,
|
|
1628
|
+
hoveredGroupKey,
|
|
1629
|
+
selectedGroupKeys,
|
|
1630
|
+
handleRowHover,
|
|
1631
|
+
rowSelectionMode,
|
|
1632
|
+
selectOnRowClick,
|
|
1633
|
+
onRowClick,
|
|
1634
|
+
getRowClassName,
|
|
1635
|
+
enableCellSelection,
|
|
1636
|
+
activeSelectionBounds,
|
|
1637
|
+
dragState,
|
|
1638
|
+
handleCellMouseDownWithCommit,
|
|
1639
|
+
handleCellMouseEnter,
|
|
1640
|
+
handleFillHandleMouseDown,
|
|
1641
|
+
editingCell,
|
|
1642
|
+
draftValue,
|
|
1643
|
+
setDraftValue,
|
|
1644
|
+
startEdit,
|
|
1645
|
+
commitEdit,
|
|
1646
|
+
cancelEdit,
|
|
1647
|
+
enableExpand,
|
|
1648
|
+
toggleField,
|
|
1649
|
+
expandedRows,
|
|
1650
|
+
preventExpand,
|
|
1651
|
+
handleToggleExpand,
|
|
1652
|
+
labels.expandRow,
|
|
1653
|
+
labels.collapseRow
|
|
1654
|
+
]);
|
|
1655
|
+
return {
|
|
1656
|
+
table,
|
|
1657
|
+
tableData,
|
|
1658
|
+
rows,
|
|
1659
|
+
columnCount,
|
|
1660
|
+
selectedCount,
|
|
1661
|
+
labels,
|
|
1662
|
+
emptyText: labels.empty,
|
|
1663
|
+
loadingText: labels.loading,
|
|
1664
|
+
selectionLabel: labels.selection,
|
|
1665
|
+
enableCellSelection,
|
|
1666
|
+
shouldVirtualize,
|
|
1667
|
+
scrollRef,
|
|
1668
|
+
rowVirtualizer,
|
|
1669
|
+
virtualRows,
|
|
1670
|
+
paddingTop,
|
|
1671
|
+
paddingBottom,
|
|
1672
|
+
rowContextValue,
|
|
1673
|
+
handleToggleSelect,
|
|
1674
|
+
clearHover
|
|
1675
|
+
};
|
|
1676
|
+
}
|
|
1677
|
+
|
|
1678
|
+
// src/components/ui/table/components/DataTable/DataTable.tsx
|
|
1679
|
+
import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1680
|
+
function DefaultPending({
|
|
1681
|
+
loadingText,
|
|
1682
|
+
className,
|
|
1683
|
+
classNames
|
|
1684
|
+
}) {
|
|
1685
|
+
return /* @__PURE__ */ jsx5(
|
|
1686
|
+
"div",
|
|
1687
|
+
{
|
|
1688
|
+
className: cn(
|
|
1689
|
+
"DataTableJSX",
|
|
1690
|
+
"DataTableJSX--pending",
|
|
1691
|
+
classNames?.root,
|
|
1692
|
+
classNames?.pending,
|
|
1693
|
+
className
|
|
1694
|
+
),
|
|
1695
|
+
children: /* @__PURE__ */ jsx5("span", { className: cn("data-table-loading-text", classNames?.loadingText), children: loadingText })
|
|
1696
|
+
}
|
|
1697
|
+
);
|
|
1698
|
+
}
|
|
1699
|
+
function DefaultEmpty({
|
|
1700
|
+
emptyText,
|
|
1701
|
+
columnCount,
|
|
1702
|
+
classNames
|
|
1703
|
+
}) {
|
|
1704
|
+
return /* @__PURE__ */ jsx5("tr", { children: /* @__PURE__ */ jsx5(
|
|
1705
|
+
"td",
|
|
1706
|
+
{
|
|
1707
|
+
colSpan: columnCount,
|
|
1708
|
+
className: cn("data-table-empty-cell", classNames?.emptyCell),
|
|
1709
|
+
children: emptyText
|
|
1710
|
+
}
|
|
1711
|
+
) });
|
|
1712
|
+
}
|
|
1713
|
+
function DataTable({
|
|
1714
|
+
isPending = false,
|
|
1715
|
+
summary,
|
|
1716
|
+
toolbar,
|
|
1717
|
+
filteredCount,
|
|
1718
|
+
totalCount,
|
|
1719
|
+
className,
|
|
1720
|
+
classNames,
|
|
1721
|
+
slots,
|
|
1722
|
+
...glideOptions
|
|
1723
|
+
}) {
|
|
1724
|
+
const {
|
|
1725
|
+
table,
|
|
1726
|
+
tableData,
|
|
1727
|
+
rows,
|
|
1728
|
+
columnCount,
|
|
1729
|
+
selectedCount,
|
|
1730
|
+
emptyText,
|
|
1731
|
+
loadingText,
|
|
1732
|
+
selectionLabel,
|
|
1733
|
+
enableCellSelection,
|
|
1734
|
+
shouldVirtualize,
|
|
1735
|
+
scrollRef,
|
|
1736
|
+
rowVirtualizer,
|
|
1737
|
+
virtualRows,
|
|
1738
|
+
paddingTop,
|
|
1739
|
+
paddingBottom,
|
|
1740
|
+
rowContextValue,
|
|
1741
|
+
handleToggleSelect,
|
|
1742
|
+
clearHover
|
|
1743
|
+
} = useGlideTable(glideOptions);
|
|
1744
|
+
const ToolbarSlot = slots?.Toolbar ?? DataTableToolbar;
|
|
1745
|
+
const RowSlot = slots?.Row ?? DataTableRow;
|
|
1746
|
+
const PendingSlot = slots?.Pending ?? DefaultPending;
|
|
1747
|
+
const EmptySlot = slots?.Empty ?? DefaultEmpty;
|
|
1748
|
+
const contextValue = useMemo3(
|
|
1749
|
+
() => ({ ...rowContextValue, classNames }),
|
|
1750
|
+
[rowContextValue, classNames]
|
|
1751
|
+
);
|
|
1752
|
+
if (isPending) {
|
|
1753
|
+
return /* @__PURE__ */ jsx5(
|
|
1754
|
+
PendingSlot,
|
|
1755
|
+
{
|
|
1756
|
+
loadingText,
|
|
1757
|
+
className,
|
|
1758
|
+
classNames
|
|
1759
|
+
}
|
|
1760
|
+
);
|
|
1761
|
+
}
|
|
1762
|
+
return /* @__PURE__ */ jsxs4(
|
|
1763
|
+
"div",
|
|
1764
|
+
{
|
|
1765
|
+
className: cn(
|
|
1766
|
+
"DataTableJSX",
|
|
1767
|
+
!enableCellSelection && "DataTableJSX--no-cell-selection",
|
|
1768
|
+
classNames?.root,
|
|
1769
|
+
className
|
|
1770
|
+
),
|
|
1771
|
+
children: [
|
|
1772
|
+
/* @__PURE__ */ jsx5(
|
|
1773
|
+
ToolbarSlot,
|
|
1774
|
+
{
|
|
1775
|
+
filteredCount: filteredCount ?? tableData.length,
|
|
1776
|
+
totalCount,
|
|
1777
|
+
summary,
|
|
1778
|
+
selectedCount,
|
|
1779
|
+
selectionLabel,
|
|
1780
|
+
toolbar,
|
|
1781
|
+
classNames
|
|
1782
|
+
}
|
|
1783
|
+
),
|
|
1784
|
+
/* @__PURE__ */ jsx5("div", { ref: scrollRef, className: cn("data-table-scroll", classNames?.scroll), children: /* @__PURE__ */ jsxs4(
|
|
1785
|
+
"table",
|
|
1786
|
+
{
|
|
1787
|
+
className: cn("data-table", classNames?.table),
|
|
1788
|
+
onDragStart: enableCellSelection ? (event) => event.preventDefault() : void 0,
|
|
1789
|
+
children: [
|
|
1790
|
+
/* @__PURE__ */ jsx5("thead", { className: cn("data-table-head", classNames?.head), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx5(
|
|
1791
|
+
"tr",
|
|
1792
|
+
{
|
|
1793
|
+
className: cn("data-table-head-row", classNames?.headRow),
|
|
1794
|
+
children: headerGroup.headers.map((header) => {
|
|
1795
|
+
const align = header.column.columnDef.meta?.align ?? "center";
|
|
1796
|
+
const headerClassName = header.column.columnDef.meta?.headerClassName;
|
|
1797
|
+
return /* @__PURE__ */ jsx5(
|
|
1798
|
+
"th",
|
|
1799
|
+
{
|
|
1800
|
+
style: { width: header.getSize() !== 150 ? header.getSize() : void 0 },
|
|
1801
|
+
className: cn(
|
|
1802
|
+
"data-table-head-cell",
|
|
1803
|
+
CELL_ALIGN_CLASS[align],
|
|
1804
|
+
classNames?.headCell,
|
|
1805
|
+
headerClassName
|
|
1806
|
+
),
|
|
1807
|
+
children: header.isPlaceholder ? null : flexRender2(header.column.columnDef.header, header.getContext())
|
|
1808
|
+
},
|
|
1809
|
+
header.id
|
|
1810
|
+
);
|
|
1811
|
+
})
|
|
1812
|
+
},
|
|
1813
|
+
headerGroup.id
|
|
1814
|
+
)) }),
|
|
1815
|
+
/* @__PURE__ */ jsx5(DataTableContextProvider, { value: contextValue, children: /* @__PURE__ */ jsx5(
|
|
1816
|
+
"tbody",
|
|
1817
|
+
{
|
|
1818
|
+
onMouseLeave: clearHover,
|
|
1819
|
+
className: cn("data-table-body", classNames?.body),
|
|
1820
|
+
children: rows.length === 0 ? /* @__PURE__ */ jsx5(
|
|
1821
|
+
EmptySlot,
|
|
1822
|
+
{
|
|
1823
|
+
emptyText,
|
|
1824
|
+
columnCount,
|
|
1825
|
+
classNames
|
|
1826
|
+
}
|
|
1827
|
+
) : shouldVirtualize ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
|
|
1828
|
+
paddingTop > 0 && /* @__PURE__ */ jsx5(
|
|
1829
|
+
"tr",
|
|
1830
|
+
{
|
|
1831
|
+
"aria-hidden": true,
|
|
1832
|
+
className: cn(
|
|
1833
|
+
"data-table-virtual-spacer",
|
|
1834
|
+
classNames?.virtualSpacer
|
|
1835
|
+
),
|
|
1836
|
+
children: /* @__PURE__ */ jsx5(
|
|
1837
|
+
"td",
|
|
1838
|
+
{
|
|
1839
|
+
colSpan: columnCount,
|
|
1840
|
+
style: { height: paddingTop },
|
|
1841
|
+
className: cn(
|
|
1842
|
+
"data-table-virtual-spacer-cell",
|
|
1843
|
+
classNames?.virtualSpacerCell
|
|
1844
|
+
)
|
|
1845
|
+
}
|
|
1846
|
+
)
|
|
1847
|
+
}
|
|
1848
|
+
),
|
|
1849
|
+
virtualRows.map((virtualRow) => {
|
|
1850
|
+
const row = rows[virtualRow.index];
|
|
1851
|
+
if (!row) return null;
|
|
1852
|
+
return /* @__PURE__ */ jsx5(
|
|
1853
|
+
RowSlot,
|
|
1854
|
+
{
|
|
1855
|
+
row,
|
|
1856
|
+
virtualIndex: virtualRow.index,
|
|
1857
|
+
measureElement: rowVirtualizer.measureElement,
|
|
1858
|
+
onToggleSelect: () => handleToggleSelect(row)
|
|
1859
|
+
},
|
|
1860
|
+
row.id
|
|
1861
|
+
);
|
|
1862
|
+
}),
|
|
1863
|
+
paddingBottom > 0 && /* @__PURE__ */ jsx5(
|
|
1864
|
+
"tr",
|
|
1865
|
+
{
|
|
1866
|
+
"aria-hidden": true,
|
|
1867
|
+
className: cn(
|
|
1868
|
+
"data-table-virtual-spacer",
|
|
1869
|
+
classNames?.virtualSpacer
|
|
1870
|
+
),
|
|
1871
|
+
children: /* @__PURE__ */ jsx5(
|
|
1872
|
+
"td",
|
|
1873
|
+
{
|
|
1874
|
+
colSpan: columnCount,
|
|
1875
|
+
style: { height: paddingBottom },
|
|
1876
|
+
className: cn(
|
|
1877
|
+
"data-table-virtual-spacer-cell",
|
|
1878
|
+
classNames?.virtualSpacerCell
|
|
1879
|
+
)
|
|
1880
|
+
}
|
|
1881
|
+
)
|
|
1882
|
+
}
|
|
1883
|
+
)
|
|
1884
|
+
] }) : rows.map((row) => /* @__PURE__ */ jsx5(
|
|
1885
|
+
RowSlot,
|
|
1886
|
+
{
|
|
1887
|
+
row,
|
|
1888
|
+
onToggleSelect: () => handleToggleSelect(row)
|
|
1889
|
+
},
|
|
1890
|
+
row.id
|
|
1891
|
+
))
|
|
1892
|
+
}
|
|
1893
|
+
) })
|
|
1894
|
+
]
|
|
1895
|
+
}
|
|
1896
|
+
) })
|
|
1897
|
+
]
|
|
1898
|
+
}
|
|
1899
|
+
);
|
|
1900
|
+
}
|
|
1901
|
+
|
|
1902
|
+
// src/components/ui/table/components/Table/Table.tsx
|
|
1903
|
+
import { useCallback as useCallback4, useMemo as useMemo4, useState as useState4 } from "react";
|
|
1904
|
+
|
|
1905
|
+
// src/components/ui/table/components/Table/buildColumnDef.tsx
|
|
1906
|
+
import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
1907
|
+
function SortableHeader({
|
|
1908
|
+
label,
|
|
1909
|
+
field,
|
|
1910
|
+
sort,
|
|
1911
|
+
onSort
|
|
1912
|
+
}) {
|
|
1913
|
+
const isActive = sort?.field === field;
|
|
1914
|
+
const Icon = isActive ? sort.direction === "asc" ? ArrowUp : ArrowDown : ArrowUpDown;
|
|
1915
|
+
return /* @__PURE__ */ jsxs5(
|
|
1916
|
+
"button",
|
|
1917
|
+
{
|
|
1918
|
+
type: "button",
|
|
1919
|
+
className: cn("SortableHeaderJSX", isActive ? "is-active" : "is-inactive"),
|
|
1920
|
+
onClick: () => onSort(field),
|
|
1921
|
+
children: [
|
|
1922
|
+
/* @__PURE__ */ jsx6("span", { children: label }),
|
|
1923
|
+
/* @__PURE__ */ jsx6(Icon, { className: "sortable-header-icon" })
|
|
1924
|
+
]
|
|
1925
|
+
}
|
|
1926
|
+
);
|
|
1927
|
+
}
|
|
1928
|
+
function buildColumnDef(props, sort, onSort) {
|
|
1929
|
+
const {
|
|
1930
|
+
field,
|
|
1931
|
+
virtual = false,
|
|
1932
|
+
children,
|
|
1933
|
+
sortable = false,
|
|
1934
|
+
width,
|
|
1935
|
+
align,
|
|
1936
|
+
rowSpan,
|
|
1937
|
+
rowSpanKey,
|
|
1938
|
+
editable,
|
|
1939
|
+
editType,
|
|
1940
|
+
className,
|
|
1941
|
+
headerClassName,
|
|
1942
|
+
render
|
|
1943
|
+
} = props;
|
|
1944
|
+
return {
|
|
1945
|
+
id: field,
|
|
1946
|
+
...!virtual ? { accessorKey: field } : {},
|
|
1947
|
+
size: width ?? 150,
|
|
1948
|
+
header: sortable ? () => /* @__PURE__ */ jsx6(SortableHeader, { label: children, field, sort, onSort }) : (
|
|
1949
|
+
// eslint-disable-next-line @typescript-eslint/promise-function-async
|
|
1950
|
+
() => children
|
|
1951
|
+
),
|
|
1952
|
+
...render ? {
|
|
1953
|
+
// eslint-disable-next-line @typescript-eslint/promise-function-async
|
|
1954
|
+
cell: ({ row, getValue }) => render(
|
|
1955
|
+
getValue(),
|
|
1956
|
+
row,
|
|
1957
|
+
row.index
|
|
1958
|
+
)
|
|
1959
|
+
} : {},
|
|
1960
|
+
meta: {
|
|
1961
|
+
align,
|
|
1962
|
+
rowSpan,
|
|
1963
|
+
rowSpanKey,
|
|
1964
|
+
editable,
|
|
1965
|
+
editType,
|
|
1966
|
+
className,
|
|
1967
|
+
headerClassName
|
|
1968
|
+
}
|
|
1969
|
+
};
|
|
1970
|
+
}
|
|
1971
|
+
|
|
1972
|
+
// src/components/ui/table/components/Table/parseTableChildren.ts
|
|
1973
|
+
import { Children } from "react";
|
|
1974
|
+
|
|
1975
|
+
// src/components/ui/table/components/Table/tableChildTypes.ts
|
|
1976
|
+
import { isValidElement } from "react";
|
|
1977
|
+
var TABLE_HEADER_DISPLAY_NAME = "Table.Header";
|
|
1978
|
+
var TABLE_BODY_DISPLAY_NAME = "Table.Body";
|
|
1979
|
+
var TABLE_COLUMN_DISPLAY_NAME = "Table.Column";
|
|
1980
|
+
var TABLE_PAGINATION_DISPLAY_NAME = "Table.Pagination";
|
|
1981
|
+
function getComponentDisplayName(type) {
|
|
1982
|
+
if (typeof type === "function" || typeof type === "object" && type !== null) {
|
|
1983
|
+
return type.displayName;
|
|
1984
|
+
}
|
|
1985
|
+
return void 0;
|
|
1986
|
+
}
|
|
1987
|
+
function isTableHeaderElement(child) {
|
|
1988
|
+
return isValidElement(child) && getComponentDisplayName(child.type) === TABLE_HEADER_DISPLAY_NAME;
|
|
1989
|
+
}
|
|
1990
|
+
function isTableBodyElement(child) {
|
|
1991
|
+
return isValidElement(child) && getComponentDisplayName(child.type) === TABLE_BODY_DISPLAY_NAME;
|
|
1992
|
+
}
|
|
1993
|
+
function isTableColumnElement(child) {
|
|
1994
|
+
return isValidElement(child) && getComponentDisplayName(child.type) === TABLE_COLUMN_DISPLAY_NAME;
|
|
1995
|
+
}
|
|
1996
|
+
function isTablePaginationElement(child) {
|
|
1997
|
+
return isValidElement(child) && getComponentDisplayName(child.type) === TABLE_PAGINATION_DISPLAY_NAME;
|
|
1998
|
+
}
|
|
1999
|
+
|
|
2000
|
+
// src/components/ui/table/components/Table/parseTableChildren.ts
|
|
2001
|
+
function parseTableChildren(children) {
|
|
2002
|
+
const slots = {
|
|
2003
|
+
header: null,
|
|
2004
|
+
body: null,
|
|
2005
|
+
pagination: null
|
|
2006
|
+
};
|
|
2007
|
+
for (const child of Children.toArray(children)) {
|
|
2008
|
+
if (isTableHeaderElement(child)) {
|
|
2009
|
+
slots.header = child;
|
|
2010
|
+
continue;
|
|
2011
|
+
}
|
|
2012
|
+
if (isTableBodyElement(child)) {
|
|
2013
|
+
slots.body = child;
|
|
2014
|
+
continue;
|
|
2015
|
+
}
|
|
2016
|
+
if (isTablePaginationElement(child)) {
|
|
2017
|
+
slots.pagination = child;
|
|
2018
|
+
}
|
|
2019
|
+
}
|
|
2020
|
+
return slots;
|
|
2021
|
+
}
|
|
2022
|
+
function extractColumnElements(header) {
|
|
2023
|
+
if (!header) return [];
|
|
2024
|
+
const { children } = header.props;
|
|
2025
|
+
return Children.toArray(children).filter(isTableColumnElement);
|
|
2026
|
+
}
|
|
2027
|
+
|
|
2028
|
+
// src/components/ui/table/components/Table/TableBody.tsx
|
|
2029
|
+
function TableBody() {
|
|
2030
|
+
return null;
|
|
2031
|
+
}
|
|
2032
|
+
TableBody.displayName = TABLE_BODY_DISPLAY_NAME;
|
|
2033
|
+
|
|
2034
|
+
// src/components/ui/table/components/Table/TableColumn.tsx
|
|
2035
|
+
function TableColumn(props) {
|
|
2036
|
+
void props;
|
|
2037
|
+
return null;
|
|
2038
|
+
}
|
|
2039
|
+
TableColumn.displayName = TABLE_COLUMN_DISPLAY_NAME;
|
|
2040
|
+
|
|
2041
|
+
// src/components/ui/table/components/Table/tableDataPipeline.ts
|
|
2042
|
+
function sortTableData(data, sort) {
|
|
2043
|
+
if (!sort) return data;
|
|
2044
|
+
const { field, direction } = sort;
|
|
2045
|
+
const multiplier = direction === "asc" ? 1 : -1;
|
|
2046
|
+
return [...data].sort((left, right) => {
|
|
2047
|
+
const leftValue = left[field];
|
|
2048
|
+
const rightValue = right[field];
|
|
2049
|
+
if ((leftValue === null || leftValue === void 0) && (rightValue === null || rightValue === void 0)) {
|
|
2050
|
+
return 0;
|
|
2051
|
+
}
|
|
2052
|
+
if (leftValue === null || leftValue === void 0) return 1;
|
|
2053
|
+
if (rightValue === null || rightValue === void 0) return -1;
|
|
2054
|
+
if (typeof leftValue === "number" && typeof rightValue === "number") {
|
|
2055
|
+
return (leftValue - rightValue) * multiplier;
|
|
2056
|
+
}
|
|
2057
|
+
return String(leftValue).localeCompare(String(rightValue), "ko") * multiplier;
|
|
2058
|
+
});
|
|
2059
|
+
}
|
|
2060
|
+
function paginateTableData(data, page, pageSize) {
|
|
2061
|
+
const safePage = Math.max(1, page);
|
|
2062
|
+
const start = (safePage - 1) * pageSize;
|
|
2063
|
+
return data.slice(start, start + pageSize);
|
|
2064
|
+
}
|
|
2065
|
+
function getTotalPages(totalCount, pageSize) {
|
|
2066
|
+
if (pageSize <= 0) return 1;
|
|
2067
|
+
return Math.max(1, Math.ceil(totalCount / pageSize));
|
|
2068
|
+
}
|
|
2069
|
+
|
|
2070
|
+
// src/components/ui/table/components/Table/TableHeader.tsx
|
|
2071
|
+
function TableHeader(props) {
|
|
2072
|
+
void props;
|
|
2073
|
+
return null;
|
|
2074
|
+
}
|
|
2075
|
+
TableHeader.displayName = TABLE_HEADER_DISPLAY_NAME;
|
|
2076
|
+
|
|
2077
|
+
// src/components/ui/table/components/Table/TablePagination.tsx
|
|
2078
|
+
import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
2079
|
+
function TablePagination({
|
|
2080
|
+
page,
|
|
2081
|
+
pageSize = 10,
|
|
2082
|
+
totalCount = 0,
|
|
2083
|
+
onChange,
|
|
2084
|
+
className
|
|
2085
|
+
}) {
|
|
2086
|
+
const totalPages = getTotalPages(totalCount, pageSize);
|
|
2087
|
+
const safePage = Math.min(Math.max(1, page), totalPages);
|
|
2088
|
+
const canGoPrev = safePage > 1;
|
|
2089
|
+
const canGoNext = safePage < totalPages;
|
|
2090
|
+
return /* @__PURE__ */ jsxs6("div", { className: cn("TablePaginationJSX", className), children: [
|
|
2091
|
+
/* @__PURE__ */ jsx7(
|
|
2092
|
+
"button",
|
|
2093
|
+
{
|
|
2094
|
+
type: "button",
|
|
2095
|
+
className: "pagination-button",
|
|
2096
|
+
disabled: !canGoPrev,
|
|
2097
|
+
onClick: () => onChange(safePage - 1),
|
|
2098
|
+
"aria-label": "Previous page",
|
|
2099
|
+
children: /* @__PURE__ */ jsx7(ChevronLeft, { className: "pagination-button-icon" })
|
|
2100
|
+
}
|
|
2101
|
+
),
|
|
2102
|
+
/* @__PURE__ */ jsxs6("span", { className: "pagination-label", children: [
|
|
2103
|
+
safePage,
|
|
2104
|
+
" / ",
|
|
2105
|
+
totalPages
|
|
2106
|
+
] }),
|
|
2107
|
+
/* @__PURE__ */ jsx7(
|
|
2108
|
+
"button",
|
|
2109
|
+
{
|
|
2110
|
+
type: "button",
|
|
2111
|
+
className: "pagination-button",
|
|
2112
|
+
disabled: !canGoNext,
|
|
2113
|
+
onClick: () => onChange(safePage + 1),
|
|
2114
|
+
"aria-label": "Next page",
|
|
2115
|
+
children: /* @__PURE__ */ jsx7(ChevronRight, { className: "pagination-button-icon" })
|
|
2116
|
+
}
|
|
2117
|
+
)
|
|
2118
|
+
] });
|
|
2119
|
+
}
|
|
2120
|
+
TablePagination.displayName = TABLE_PAGINATION_DISPLAY_NAME;
|
|
2121
|
+
|
|
2122
|
+
// src/components/ui/table/components/Table/Table.tsx
|
|
2123
|
+
import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
2124
|
+
function TableRoot({
|
|
2125
|
+
data,
|
|
2126
|
+
children,
|
|
2127
|
+
className,
|
|
2128
|
+
totalCount,
|
|
2129
|
+
filteredCount,
|
|
2130
|
+
...dataTableProps
|
|
2131
|
+
}) {
|
|
2132
|
+
const { header, pagination: paginationElement } = useMemo4(
|
|
2133
|
+
() => parseTableChildren(children),
|
|
2134
|
+
[children]
|
|
2135
|
+
);
|
|
2136
|
+
const [sort, setSort] = useState4(null);
|
|
2137
|
+
const handleSort = useCallback4((field) => {
|
|
2138
|
+
setSort((previous) => {
|
|
2139
|
+
if (previous?.field !== field) {
|
|
2140
|
+
return { field, direction: "asc" };
|
|
2141
|
+
}
|
|
2142
|
+
if (previous.direction === "asc") {
|
|
2143
|
+
return { field, direction: "desc" };
|
|
2144
|
+
}
|
|
2145
|
+
return null;
|
|
2146
|
+
});
|
|
2147
|
+
}, []);
|
|
2148
|
+
const columns = useMemo4(() => {
|
|
2149
|
+
return extractColumnElements(header).map(
|
|
2150
|
+
(columnElement) => buildColumnDef(columnElement.props, sort, handleSort)
|
|
2151
|
+
);
|
|
2152
|
+
}, [header, sort, handleSort]);
|
|
2153
|
+
const paginationProps = paginationElement?.props;
|
|
2154
|
+
const pageSize = paginationProps?.pageSize ?? 10;
|
|
2155
|
+
const page = paginationProps?.page ?? 1;
|
|
2156
|
+
const resolvedTotalCount = paginationProps?.totalCount ?? totalCount ?? data.length;
|
|
2157
|
+
const tableData = useMemo4(() => {
|
|
2158
|
+
const sortedData = sortTableData(data, sort);
|
|
2159
|
+
if (!paginationProps) return sortedData;
|
|
2160
|
+
return paginateTableData(sortedData, page, pageSize);
|
|
2161
|
+
}, [data, sort, paginationProps, page, pageSize]);
|
|
2162
|
+
if (columns.length === 0) {
|
|
2163
|
+
console.warn("[Table] Declare at least one Table.Column inside Table.Header.");
|
|
2164
|
+
}
|
|
2165
|
+
return /* @__PURE__ */ jsxs7("div", { className: "TableJSX", children: [
|
|
2166
|
+
/* @__PURE__ */ jsx8(
|
|
2167
|
+
DataTable,
|
|
2168
|
+
{
|
|
2169
|
+
...dataTableProps,
|
|
2170
|
+
data: tableData,
|
|
2171
|
+
columns,
|
|
2172
|
+
totalCount: paginationProps ? resolvedTotalCount : totalCount,
|
|
2173
|
+
filteredCount: filteredCount ?? data.length,
|
|
2174
|
+
className: cn(className, paginationProps && "DataTableJSX--with-pagination")
|
|
2175
|
+
}
|
|
2176
|
+
),
|
|
2177
|
+
paginationProps && /* @__PURE__ */ jsx8(
|
|
2178
|
+
TablePagination,
|
|
2179
|
+
{
|
|
2180
|
+
page,
|
|
2181
|
+
pageSize,
|
|
2182
|
+
totalCount: resolvedTotalCount,
|
|
2183
|
+
onChange: paginationProps.onChange,
|
|
2184
|
+
className: paginationProps.className
|
|
2185
|
+
}
|
|
2186
|
+
)
|
|
2187
|
+
] });
|
|
2188
|
+
}
|
|
2189
|
+
function createTable() {
|
|
2190
|
+
function Column(props) {
|
|
2191
|
+
void props;
|
|
2192
|
+
return null;
|
|
2193
|
+
}
|
|
2194
|
+
Column.displayName = TABLE_COLUMN_DISPLAY_NAME;
|
|
2195
|
+
return Object.assign(
|
|
2196
|
+
function BoundTable(props) {
|
|
2197
|
+
return /* @__PURE__ */ jsx8(TableRoot, { ...props });
|
|
2198
|
+
},
|
|
2199
|
+
{
|
|
2200
|
+
Header: TableHeader,
|
|
2201
|
+
Column,
|
|
2202
|
+
Body: TableBody,
|
|
2203
|
+
Pagination: TablePagination
|
|
2204
|
+
}
|
|
2205
|
+
);
|
|
2206
|
+
}
|
|
2207
|
+
var Table = Object.assign(TableRoot, {
|
|
2208
|
+
Header: TableHeader,
|
|
2209
|
+
Column: TableColumn,
|
|
2210
|
+
Body: TableBody,
|
|
2211
|
+
Pagination: TablePagination
|
|
2212
|
+
});
|
|
2213
|
+
export {
|
|
2214
|
+
DataTable,
|
|
2215
|
+
Table,
|
|
2216
|
+
createTable
|
|
2217
|
+
};
|