@kopexa/data-grid 18.2.0 → 18.3.1
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/dist/{chunk-YJSXJPR4.mjs → chunk-ZXID4I26.mjs} +156 -39
- package/dist/data-grid.d.mts +10 -1
- package/dist/data-grid.d.ts +10 -1
- package/dist/data-grid.js +158 -40
- package/dist/data-grid.mjs +5 -3
- package/dist/index.js +154 -38
- package/dist/index.mjs +1 -1
- package/package.json +9 -9
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
} from "./chunk-M6DRKGKE.mjs";
|
|
5
5
|
|
|
6
6
|
// src/data-grid.tsx
|
|
7
|
-
import { Button } from "@kopexa/button";
|
|
7
|
+
import { Button, IconButton } from "@kopexa/button";
|
|
8
8
|
import { Checkbox } from "@kopexa/checkbox";
|
|
9
9
|
import { DropdownMenu } from "@kopexa/dropdown-menu";
|
|
10
10
|
import { useSafeIntl } from "@kopexa/i18n";
|
|
@@ -43,6 +43,7 @@ function DataGrid(props) {
|
|
|
43
43
|
isLoading = false,
|
|
44
44
|
pageSize = 20,
|
|
45
45
|
cellBorder,
|
|
46
|
+
columnVisibilityToggle,
|
|
46
47
|
onRowClick,
|
|
47
48
|
...rest
|
|
48
49
|
} = props;
|
|
@@ -91,6 +92,7 @@ function DataGrid(props) {
|
|
|
91
92
|
emptyMessage,
|
|
92
93
|
isLoading,
|
|
93
94
|
pageSize,
|
|
95
|
+
columnVisibilityToggle,
|
|
94
96
|
onRowClick
|
|
95
97
|
}),
|
|
96
98
|
[
|
|
@@ -107,6 +109,7 @@ function DataGrid(props) {
|
|
|
107
109
|
emptyMessage,
|
|
108
110
|
isLoading,
|
|
109
111
|
pageSize,
|
|
112
|
+
columnVisibilityToggle,
|
|
110
113
|
onRowClick
|
|
111
114
|
]
|
|
112
115
|
);
|
|
@@ -166,10 +169,18 @@ function DataGridTableBase({
|
|
|
166
169
|
}
|
|
167
170
|
);
|
|
168
171
|
}
|
|
172
|
+
var STICKY_RIGHT_HEADER = "dg-sticky-right sticky end-0";
|
|
173
|
+
var STICKY_RIGHT_BODY = "dg-sticky-right sticky end-0 bg-background";
|
|
174
|
+
var stickyRightStyle = (z) => ({
|
|
175
|
+
position: "sticky",
|
|
176
|
+
right: 0,
|
|
177
|
+
zIndex: z
|
|
178
|
+
});
|
|
169
179
|
function DataGridTableHeadRowCell({
|
|
170
180
|
children,
|
|
171
181
|
header,
|
|
172
|
-
dndRef
|
|
182
|
+
dndRef,
|
|
183
|
+
stickyRight
|
|
173
184
|
}) {
|
|
174
185
|
var _a;
|
|
175
186
|
const { styles, columnsPinnable } = useDataGridContext();
|
|
@@ -183,13 +194,15 @@ function DataGridTableHeadRowCell({
|
|
|
183
194
|
ref: dndRef,
|
|
184
195
|
style: {
|
|
185
196
|
"--size": `${header.getSize()}px`,
|
|
186
|
-
...columnsPinnable && isPinned && getPinningStyles(column)
|
|
197
|
+
...columnsPinnable && isPinned && getPinningStyles(column),
|
|
198
|
+
...stickyRight && stickyRightStyle(30)
|
|
187
199
|
},
|
|
188
200
|
"data-pinned": isPinned || void 0,
|
|
189
201
|
"data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
|
|
190
202
|
className: cn(
|
|
191
203
|
styles.headerRowCell(),
|
|
192
|
-
(_a = header.column.columnDef.meta) == null ? void 0 : _a.headerClassName
|
|
204
|
+
(_a = header.column.columnDef.meta) == null ? void 0 : _a.headerClassName,
|
|
205
|
+
stickyRight && STICKY_RIGHT_HEADER
|
|
193
206
|
),
|
|
194
207
|
children
|
|
195
208
|
},
|
|
@@ -226,8 +239,12 @@ function DataGridTableBody({
|
|
|
226
239
|
return /* @__PURE__ */ jsx("tbody", { className: cn(styles.body({ className })), ...restProps, children });
|
|
227
240
|
}
|
|
228
241
|
function DataGridTableEmpty() {
|
|
229
|
-
const { styles, table, emptyMessage } = useDataGridContext();
|
|
230
|
-
const
|
|
242
|
+
const { styles, table, emptyMessage, columnVisibilityToggle } = useDataGridContext();
|
|
243
|
+
const { append: hasSettingsColumn } = getSettingsPlacement(
|
|
244
|
+
table,
|
|
245
|
+
columnVisibilityToggle
|
|
246
|
+
);
|
|
247
|
+
const totalColumns = table.getVisibleLeafColumns().length + (hasSettingsColumn ? 1 : 0);
|
|
231
248
|
return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: totalColumns, className: styles.empty(), children: emptyMessage || "No data available." }) });
|
|
232
249
|
}
|
|
233
250
|
function DataGridTableBodyRowSkeleton({ children }) {
|
|
@@ -248,7 +265,8 @@ function DataGridTableBodyRowCell({
|
|
|
248
265
|
children,
|
|
249
266
|
cell,
|
|
250
267
|
dndRef,
|
|
251
|
-
dndStyle
|
|
268
|
+
dndStyle,
|
|
269
|
+
stickyRight
|
|
252
270
|
}) {
|
|
253
271
|
var _a;
|
|
254
272
|
const { styles, columnsResizable, columnsDraggable, columnsPinnable } = useDataGridContext();
|
|
@@ -264,14 +282,16 @@ function DataGridTableBodyRowCell({
|
|
|
264
282
|
style: {
|
|
265
283
|
"--size": `${column.getSize()}px`,
|
|
266
284
|
...columnsPinnable && isPinned && getPinningStyles(column),
|
|
267
|
-
...dndStyle ? dndStyle : null
|
|
285
|
+
...dndStyle ? dndStyle : null,
|
|
286
|
+
...stickyRight && stickyRightStyle(10)
|
|
268
287
|
},
|
|
269
288
|
"data-pinned": isPinned || void 0,
|
|
270
289
|
"data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
|
|
271
290
|
className: cn(
|
|
272
291
|
styles.bodyRowCell(),
|
|
273
292
|
columnsResizable && column.getCanResize() && "truncate",
|
|
274
|
-
(_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName
|
|
293
|
+
(_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName,
|
|
294
|
+
stickyRight && STICKY_RIGHT_BODY
|
|
275
295
|
),
|
|
276
296
|
children
|
|
277
297
|
},
|
|
@@ -280,7 +300,8 @@ function DataGridTableBodyRowCell({
|
|
|
280
300
|
}
|
|
281
301
|
function DataGridTableBodyRowSkeletonCell({
|
|
282
302
|
children,
|
|
283
|
-
column
|
|
303
|
+
column,
|
|
304
|
+
stickyRight
|
|
284
305
|
}) {
|
|
285
306
|
var _a;
|
|
286
307
|
const { styles, columnsResizable, columnsPinnable } = useDataGridContext();
|
|
@@ -292,14 +313,16 @@ function DataGridTableBodyRowSkeletonCell({
|
|
|
292
313
|
{
|
|
293
314
|
style: {
|
|
294
315
|
"--size": `${column.getSize()}px`,
|
|
295
|
-
...columnsPinnable && isPinned && getPinningStyles(column)
|
|
316
|
+
...columnsPinnable && isPinned && getPinningStyles(column),
|
|
317
|
+
...stickyRight && stickyRightStyle(10)
|
|
296
318
|
},
|
|
297
319
|
"data-pinned": isPinned || void 0,
|
|
298
320
|
"data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
|
|
299
321
|
className: cn(
|
|
300
322
|
styles.bodyRowSkeletonCell(),
|
|
301
323
|
columnsResizable && column.getCanResize() && "truncate",
|
|
302
|
-
(_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName
|
|
324
|
+
(_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName,
|
|
325
|
+
stickyRight && STICKY_RIGHT_BODY
|
|
303
326
|
),
|
|
304
327
|
children
|
|
305
328
|
}
|
|
@@ -330,15 +353,33 @@ function DataGridTableBodyRow({
|
|
|
330
353
|
}
|
|
331
354
|
function DataGridTableBodyRowExpanded({ row }) {
|
|
332
355
|
var _a, _b, _c;
|
|
333
|
-
const { table, styles } = useDataGridContext();
|
|
334
|
-
|
|
356
|
+
const { table, styles, columnVisibilityToggle } = useDataGridContext();
|
|
357
|
+
const { append: hasSettingsColumn } = getSettingsPlacement(
|
|
358
|
+
table,
|
|
359
|
+
columnVisibilityToggle
|
|
360
|
+
);
|
|
361
|
+
return /* @__PURE__ */ jsx("tr", { className: styles.bodyRowExpanded(), children: /* @__PURE__ */ jsx("td", { colSpan: row.getVisibleCells().length + (hasSettingsColumn ? 1 : 0), children: (_c = (_b = (_a = table.getAllColumns().find((column) => {
|
|
335
362
|
var _a2;
|
|
336
363
|
return (_a2 = column.columnDef.meta) == null ? void 0 : _a2.expandedContent;
|
|
337
364
|
})) == null ? void 0 : _a.columnDef.meta) == null ? void 0 : _b.expandedContent) == null ? void 0 : _c.call(_b, row.original) }) });
|
|
338
365
|
}
|
|
366
|
+
var SETTINGS_COLUMN_WIDTH = 44;
|
|
367
|
+
function getSettingsPlacement(table, enabled) {
|
|
368
|
+
if (!enabled) return { append: false };
|
|
369
|
+
if (!table.getAllLeafColumns().some((column) => column.getCanHide())) {
|
|
370
|
+
return { append: false };
|
|
371
|
+
}
|
|
372
|
+
const leafColumns = table.getVisibleLeafColumns();
|
|
373
|
+
const lastColumn = leafColumns[leafColumns.length - 1];
|
|
374
|
+
if (lastColumn && lastColumn.accessorFn == null && !lastColumn.getCanHide()) {
|
|
375
|
+
return { reuseColumnId: lastColumn.id, append: false };
|
|
376
|
+
}
|
|
377
|
+
return { append: true };
|
|
378
|
+
}
|
|
339
379
|
function DataGridTable() {
|
|
340
380
|
const {
|
|
341
381
|
table,
|
|
382
|
+
styles,
|
|
342
383
|
columnsResizable,
|
|
343
384
|
columnsPinnable,
|
|
344
385
|
stripped,
|
|
@@ -346,38 +387,98 @@ function DataGridTable() {
|
|
|
346
387
|
cellBorder,
|
|
347
388
|
loadingMode,
|
|
348
389
|
isLoading,
|
|
349
|
-
pageSize
|
|
390
|
+
pageSize,
|
|
391
|
+
columnVisibilityToggle
|
|
350
392
|
} = useDataGridContext();
|
|
393
|
+
const { reuseColumnId, append: showColumnSettings } = getSettingsPlacement(
|
|
394
|
+
table,
|
|
395
|
+
columnVisibilityToggle
|
|
396
|
+
);
|
|
397
|
+
const headerGroups = table.getHeaderGroups();
|
|
398
|
+
const settingsCellStyle = {
|
|
399
|
+
"--size": `${SETTINGS_COLUMN_WIDTH}px`
|
|
400
|
+
};
|
|
351
401
|
return /* @__PURE__ */ jsxs(DataGridTableBase, { children: [
|
|
352
|
-
/* @__PURE__ */ jsx(DataGridTableHead, { children:
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
402
|
+
/* @__PURE__ */ jsx(DataGridTableHead, { children: headerGroups.map((headerGroup, groupIndex) => /* @__PURE__ */ jsxs(DataGridTableHeadRow, { headerGroup, children: [
|
|
403
|
+
headerGroup.headers.map((header) => {
|
|
404
|
+
const { column } = header;
|
|
405
|
+
const isReuseColumn = reuseColumnId != null && column.id === reuseColumnId;
|
|
406
|
+
const reuseToggleHere = isReuseColumn && groupIndex === headerGroups.length - 1;
|
|
407
|
+
const headerContent = header.isPlaceholder ? null : flexRender(
|
|
356
408
|
header.column.columnDef.header,
|
|
357
409
|
header.getContext()
|
|
358
|
-
)
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
410
|
+
);
|
|
411
|
+
return /* @__PURE__ */ jsxs(
|
|
412
|
+
DataGridTableHeadRowCell,
|
|
413
|
+
{
|
|
414
|
+
header,
|
|
415
|
+
stickyRight: isReuseColumn,
|
|
416
|
+
children: [
|
|
417
|
+
reuseToggleHere ? /* @__PURE__ */ jsxs("span", { className: "flex w-full items-center justify-center gap-1.5", children: [
|
|
418
|
+
headerContent,
|
|
419
|
+
/* @__PURE__ */ jsx(DataGridHeaderColumnToggle, {})
|
|
420
|
+
] }) : headerContent,
|
|
421
|
+
columnsResizable && column.getCanResize() && /* @__PURE__ */ jsx(DataGridTableHeadRowCellResize, { header })
|
|
422
|
+
]
|
|
423
|
+
},
|
|
424
|
+
column.id
|
|
425
|
+
);
|
|
426
|
+
}),
|
|
427
|
+
showColumnSettings && /* @__PURE__ */ jsx(
|
|
428
|
+
"th",
|
|
429
|
+
{
|
|
430
|
+
className: cn(styles.headerRowCell(), STICKY_RIGHT_HEADER),
|
|
431
|
+
style: { ...settingsCellStyle, ...stickyRightStyle(30) },
|
|
432
|
+
children: groupIndex === headerGroups.length - 1 && /* @__PURE__ */ jsx("span", { className: "flex justify-center", children: /* @__PURE__ */ jsx(DataGridHeaderColumnToggle, {}) })
|
|
433
|
+
}
|
|
434
|
+
)
|
|
435
|
+
] }, headerGroup.id)) }),
|
|
362
436
|
(stripped || !rowBorder) && !cellBorder && !columnsPinnable && /* @__PURE__ */ jsx(DataGridTableRowSpacer, {}),
|
|
363
|
-
/* @__PURE__ */ jsx(DataGridTableBody, { children: loadingMode === "skeleton" && isLoading && pageSize ? Array.from({ length: pageSize }).map((_, rowIndex) => /* @__PURE__ */
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
437
|
+
/* @__PURE__ */ jsx(DataGridTableBody, { children: loadingMode === "skeleton" && isLoading && pageSize ? Array.from({ length: pageSize }).map((_, rowIndex) => /* @__PURE__ */ jsxs(DataGridTableBodyRowSkeleton, { children: [
|
|
438
|
+
table.getVisibleFlatColumns().map((column, colIndex) => {
|
|
439
|
+
var _a;
|
|
440
|
+
return /* @__PURE__ */ jsx(
|
|
441
|
+
DataGridTableBodyRowSkeletonCell,
|
|
442
|
+
{
|
|
443
|
+
column,
|
|
444
|
+
stickyRight: reuseColumnId != null && column.id === reuseColumnId,
|
|
445
|
+
children: (_a = column.columnDef.meta) == null ? void 0 : _a.skeleton
|
|
446
|
+
},
|
|
447
|
+
colIndex.toString()
|
|
448
|
+
);
|
|
449
|
+
}),
|
|
450
|
+
showColumnSettings && /* @__PURE__ */ jsx(
|
|
451
|
+
"td",
|
|
367
452
|
{
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
}
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
}) }, rowIndex.toString())) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => {
|
|
453
|
+
className: cn(styles.bodyRowCell(), STICKY_RIGHT_BODY),
|
|
454
|
+
style: { ...settingsCellStyle, ...stickyRightStyle(10) }
|
|
455
|
+
}
|
|
456
|
+
)
|
|
457
|
+
] }, rowIndex.toString())) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => {
|
|
374
458
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
375
|
-
/* @__PURE__ */
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
459
|
+
/* @__PURE__ */ jsxs(DataGridTableBodyRow, { row, children: [
|
|
460
|
+
row.getVisibleCells().map((cell) => {
|
|
461
|
+
return /* @__PURE__ */ jsx(
|
|
462
|
+
DataGridTableBodyRowCell,
|
|
463
|
+
{
|
|
464
|
+
cell,
|
|
465
|
+
stickyRight: reuseColumnId != null && cell.column.id === reuseColumnId,
|
|
466
|
+
children: flexRender(
|
|
467
|
+
cell.column.columnDef.cell,
|
|
468
|
+
cell.getContext()
|
|
469
|
+
)
|
|
470
|
+
},
|
|
471
|
+
cell.id
|
|
472
|
+
);
|
|
473
|
+
}),
|
|
474
|
+
showColumnSettings && /* @__PURE__ */ jsx(
|
|
475
|
+
"td",
|
|
476
|
+
{
|
|
477
|
+
className: cn(styles.bodyRowCell(), STICKY_RIGHT_BODY),
|
|
478
|
+
style: { ...settingsCellStyle, ...stickyRightStyle(10) }
|
|
479
|
+
}
|
|
480
|
+
)
|
|
481
|
+
] }, row.id),
|
|
381
482
|
row.getIsExpanded() && /* @__PURE__ */ jsx(DataGridTableBodyRowExpanded, { row })
|
|
382
483
|
] }, row.id);
|
|
383
484
|
}) : /* @__PURE__ */ jsx(DataGridTableEmpty, {}) })
|
|
@@ -424,6 +525,21 @@ function DataGridColumnToggle({
|
|
|
424
525
|
}) })
|
|
425
526
|
] });
|
|
426
527
|
}
|
|
528
|
+
function DataGridHeaderColumnToggle() {
|
|
529
|
+
const t = useSafeIntl();
|
|
530
|
+
const label = t.formatMessage(dataGridMessages.columns);
|
|
531
|
+
return /* @__PURE__ */ jsx(DataGridColumnToggle, { align: "end", children: /* @__PURE__ */ jsx(
|
|
532
|
+
IconButton,
|
|
533
|
+
{
|
|
534
|
+
"aria-label": label,
|
|
535
|
+
tooltip: label,
|
|
536
|
+
variant: "ghost",
|
|
537
|
+
size: "sm",
|
|
538
|
+
className: "shrink-0",
|
|
539
|
+
children: /* @__PURE__ */ jsx(TableHeaderColumnIcon, {})
|
|
540
|
+
}
|
|
541
|
+
) });
|
|
542
|
+
}
|
|
427
543
|
function DataGridTableRowSelectAll({
|
|
428
544
|
size
|
|
429
545
|
}) {
|
|
@@ -471,6 +587,7 @@ function DataGridTableRowSelect({
|
|
|
471
587
|
export {
|
|
472
588
|
DataGrid,
|
|
473
589
|
DataGridContainer,
|
|
590
|
+
SETTINGS_COLUMN_WIDTH,
|
|
474
591
|
DataGridTable,
|
|
475
592
|
DataGridColumnToggle,
|
|
476
593
|
DataGridTableRowSelectAll,
|
package/dist/data-grid.d.mts
CHANGED
|
@@ -17,6 +17,14 @@ type BaseProps<TData extends object> = {
|
|
|
17
17
|
emptyMessage?: string;
|
|
18
18
|
isLoading?: boolean;
|
|
19
19
|
pageSize?: number;
|
|
20
|
+
/**
|
|
21
|
+
* Render a column-visibility icon button in a trailing column header instead
|
|
22
|
+
* of relying on a standalone `<DataGrid.ColumnToggle />`. Reuses the last
|
|
23
|
+
* column's header when it's a display column (e.g. an actions column),
|
|
24
|
+
* otherwise appends a dedicated fixed-width settings column. No-op when no
|
|
25
|
+
* column is hideable.
|
|
26
|
+
*/
|
|
27
|
+
columnVisibilityToggle?: boolean;
|
|
20
28
|
onRowClick?: (row: TData) => void;
|
|
21
29
|
};
|
|
22
30
|
type DataGridProps<TData extends object> = BaseProps<TData> & DataGridVariants & {
|
|
@@ -28,6 +36,7 @@ declare function DataGridContainer({ children, className, }: {
|
|
|
28
36
|
className?: string;
|
|
29
37
|
border?: boolean;
|
|
30
38
|
}): react_jsx_runtime.JSX.Element;
|
|
39
|
+
declare const SETTINGS_COLUMN_WIDTH = 44;
|
|
31
40
|
declare function DataGridTable<TData>(): react_jsx_runtime.JSX.Element;
|
|
32
41
|
type DataGridColumnToggleProps = {
|
|
33
42
|
/**
|
|
@@ -53,4 +62,4 @@ declare function DataGridTableRowSelect<TData>({ row, size, }: {
|
|
|
53
62
|
size?: "sm" | "md" | "lg";
|
|
54
63
|
}): react_jsx_runtime.JSX.Element;
|
|
55
64
|
|
|
56
|
-
export { DataGrid, DataGridColumnToggle, type DataGridColumnToggleProps, DataGridContainer, type DataGridProps, DataGridTable, DataGridTableRowSelect, DataGridTableRowSelectAll };
|
|
65
|
+
export { DataGrid, DataGridColumnToggle, type DataGridColumnToggleProps, DataGridContainer, type DataGridProps, DataGridTable, DataGridTableRowSelect, DataGridTableRowSelectAll, SETTINGS_COLUMN_WIDTH };
|
package/dist/data-grid.d.ts
CHANGED
|
@@ -17,6 +17,14 @@ type BaseProps<TData extends object> = {
|
|
|
17
17
|
emptyMessage?: string;
|
|
18
18
|
isLoading?: boolean;
|
|
19
19
|
pageSize?: number;
|
|
20
|
+
/**
|
|
21
|
+
* Render a column-visibility icon button in a trailing column header instead
|
|
22
|
+
* of relying on a standalone `<DataGrid.ColumnToggle />`. Reuses the last
|
|
23
|
+
* column's header when it's a display column (e.g. an actions column),
|
|
24
|
+
* otherwise appends a dedicated fixed-width settings column. No-op when no
|
|
25
|
+
* column is hideable.
|
|
26
|
+
*/
|
|
27
|
+
columnVisibilityToggle?: boolean;
|
|
20
28
|
onRowClick?: (row: TData) => void;
|
|
21
29
|
};
|
|
22
30
|
type DataGridProps<TData extends object> = BaseProps<TData> & DataGridVariants & {
|
|
@@ -28,6 +36,7 @@ declare function DataGridContainer({ children, className, }: {
|
|
|
28
36
|
className?: string;
|
|
29
37
|
border?: boolean;
|
|
30
38
|
}): react_jsx_runtime.JSX.Element;
|
|
39
|
+
declare const SETTINGS_COLUMN_WIDTH = 44;
|
|
31
40
|
declare function DataGridTable<TData>(): react_jsx_runtime.JSX.Element;
|
|
32
41
|
type DataGridColumnToggleProps = {
|
|
33
42
|
/**
|
|
@@ -53,4 +62,4 @@ declare function DataGridTableRowSelect<TData>({ row, size, }: {
|
|
|
53
62
|
size?: "sm" | "md" | "lg";
|
|
54
63
|
}): react_jsx_runtime.JSX.Element;
|
|
55
64
|
|
|
56
|
-
export { DataGrid, DataGridColumnToggle, type DataGridColumnToggleProps, DataGridContainer, type DataGridProps, DataGridTable, DataGridTableRowSelect, DataGridTableRowSelectAll };
|
|
65
|
+
export { DataGrid, DataGridColumnToggle, type DataGridColumnToggleProps, DataGridContainer, type DataGridProps, DataGridTable, DataGridTableRowSelect, DataGridTableRowSelectAll, SETTINGS_COLUMN_WIDTH };
|
package/dist/data-grid.js
CHANGED
|
@@ -27,7 +27,8 @@ __export(data_grid_exports, {
|
|
|
27
27
|
DataGridContainer: () => DataGridContainer,
|
|
28
28
|
DataGridTable: () => DataGridTable,
|
|
29
29
|
DataGridTableRowSelect: () => DataGridTableRowSelect,
|
|
30
|
-
DataGridTableRowSelectAll: () => DataGridTableRowSelectAll
|
|
30
|
+
DataGridTableRowSelectAll: () => DataGridTableRowSelectAll,
|
|
31
|
+
SETTINGS_COLUMN_WIDTH: () => SETTINGS_COLUMN_WIDTH
|
|
31
32
|
});
|
|
32
33
|
module.exports = __toCommonJS(data_grid_exports);
|
|
33
34
|
var import_button = require("@kopexa/button");
|
|
@@ -76,6 +77,7 @@ function DataGrid(props) {
|
|
|
76
77
|
isLoading = false,
|
|
77
78
|
pageSize = 20,
|
|
78
79
|
cellBorder,
|
|
80
|
+
columnVisibilityToggle,
|
|
79
81
|
onRowClick,
|
|
80
82
|
...rest
|
|
81
83
|
} = props;
|
|
@@ -124,6 +126,7 @@ function DataGrid(props) {
|
|
|
124
126
|
emptyMessage,
|
|
125
127
|
isLoading,
|
|
126
128
|
pageSize,
|
|
129
|
+
columnVisibilityToggle,
|
|
127
130
|
onRowClick
|
|
128
131
|
}),
|
|
129
132
|
[
|
|
@@ -140,6 +143,7 @@ function DataGrid(props) {
|
|
|
140
143
|
emptyMessage,
|
|
141
144
|
isLoading,
|
|
142
145
|
pageSize,
|
|
146
|
+
columnVisibilityToggle,
|
|
143
147
|
onRowClick
|
|
144
148
|
]
|
|
145
149
|
);
|
|
@@ -199,10 +203,18 @@ function DataGridTableBase({
|
|
|
199
203
|
}
|
|
200
204
|
);
|
|
201
205
|
}
|
|
206
|
+
var STICKY_RIGHT_HEADER = "dg-sticky-right sticky end-0";
|
|
207
|
+
var STICKY_RIGHT_BODY = "dg-sticky-right sticky end-0 bg-background";
|
|
208
|
+
var stickyRightStyle = (z) => ({
|
|
209
|
+
position: "sticky",
|
|
210
|
+
right: 0,
|
|
211
|
+
zIndex: z
|
|
212
|
+
});
|
|
202
213
|
function DataGridTableHeadRowCell({
|
|
203
214
|
children,
|
|
204
215
|
header,
|
|
205
|
-
dndRef
|
|
216
|
+
dndRef,
|
|
217
|
+
stickyRight
|
|
206
218
|
}) {
|
|
207
219
|
var _a;
|
|
208
220
|
const { styles, columnsPinnable } = useDataGridContext();
|
|
@@ -216,13 +228,15 @@ function DataGridTableHeadRowCell({
|
|
|
216
228
|
ref: dndRef,
|
|
217
229
|
style: {
|
|
218
230
|
"--size": `${header.getSize()}px`,
|
|
219
|
-
...columnsPinnable && isPinned && getPinningStyles(column)
|
|
231
|
+
...columnsPinnable && isPinned && getPinningStyles(column),
|
|
232
|
+
...stickyRight && stickyRightStyle(30)
|
|
220
233
|
},
|
|
221
234
|
"data-pinned": isPinned || void 0,
|
|
222
235
|
"data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
|
|
223
236
|
className: (0, import_shared_utils.cn)(
|
|
224
237
|
styles.headerRowCell(),
|
|
225
|
-
(_a = header.column.columnDef.meta) == null ? void 0 : _a.headerClassName
|
|
238
|
+
(_a = header.column.columnDef.meta) == null ? void 0 : _a.headerClassName,
|
|
239
|
+
stickyRight && STICKY_RIGHT_HEADER
|
|
226
240
|
),
|
|
227
241
|
children
|
|
228
242
|
},
|
|
@@ -259,8 +273,12 @@ function DataGridTableBody({
|
|
|
259
273
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { className: (0, import_shared_utils.cn)(styles.body({ className })), ...restProps, children });
|
|
260
274
|
}
|
|
261
275
|
function DataGridTableEmpty() {
|
|
262
|
-
const { styles, table, emptyMessage } = useDataGridContext();
|
|
263
|
-
const
|
|
276
|
+
const { styles, table, emptyMessage, columnVisibilityToggle } = useDataGridContext();
|
|
277
|
+
const { append: hasSettingsColumn } = getSettingsPlacement(
|
|
278
|
+
table,
|
|
279
|
+
columnVisibilityToggle
|
|
280
|
+
);
|
|
281
|
+
const totalColumns = table.getVisibleLeafColumns().length + (hasSettingsColumn ? 1 : 0);
|
|
264
282
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: totalColumns, className: styles.empty(), children: emptyMessage || "No data available." }) });
|
|
265
283
|
}
|
|
266
284
|
function DataGridTableBodyRowSkeleton({ children }) {
|
|
@@ -281,7 +299,8 @@ function DataGridTableBodyRowCell({
|
|
|
281
299
|
children,
|
|
282
300
|
cell,
|
|
283
301
|
dndRef,
|
|
284
|
-
dndStyle
|
|
302
|
+
dndStyle,
|
|
303
|
+
stickyRight
|
|
285
304
|
}) {
|
|
286
305
|
var _a;
|
|
287
306
|
const { styles, columnsResizable, columnsDraggable, columnsPinnable } = useDataGridContext();
|
|
@@ -297,14 +316,16 @@ function DataGridTableBodyRowCell({
|
|
|
297
316
|
style: {
|
|
298
317
|
"--size": `${column.getSize()}px`,
|
|
299
318
|
...columnsPinnable && isPinned && getPinningStyles(column),
|
|
300
|
-
...dndStyle ? dndStyle : null
|
|
319
|
+
...dndStyle ? dndStyle : null,
|
|
320
|
+
...stickyRight && stickyRightStyle(10)
|
|
301
321
|
},
|
|
302
322
|
"data-pinned": isPinned || void 0,
|
|
303
323
|
"data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
|
|
304
324
|
className: (0, import_shared_utils.cn)(
|
|
305
325
|
styles.bodyRowCell(),
|
|
306
326
|
columnsResizable && column.getCanResize() && "truncate",
|
|
307
|
-
(_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName
|
|
327
|
+
(_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName,
|
|
328
|
+
stickyRight && STICKY_RIGHT_BODY
|
|
308
329
|
),
|
|
309
330
|
children
|
|
310
331
|
},
|
|
@@ -313,7 +334,8 @@ function DataGridTableBodyRowCell({
|
|
|
313
334
|
}
|
|
314
335
|
function DataGridTableBodyRowSkeletonCell({
|
|
315
336
|
children,
|
|
316
|
-
column
|
|
337
|
+
column,
|
|
338
|
+
stickyRight
|
|
317
339
|
}) {
|
|
318
340
|
var _a;
|
|
319
341
|
const { styles, columnsResizable, columnsPinnable } = useDataGridContext();
|
|
@@ -325,14 +347,16 @@ function DataGridTableBodyRowSkeletonCell({
|
|
|
325
347
|
{
|
|
326
348
|
style: {
|
|
327
349
|
"--size": `${column.getSize()}px`,
|
|
328
|
-
...columnsPinnable && isPinned && getPinningStyles(column)
|
|
350
|
+
...columnsPinnable && isPinned && getPinningStyles(column),
|
|
351
|
+
...stickyRight && stickyRightStyle(10)
|
|
329
352
|
},
|
|
330
353
|
"data-pinned": isPinned || void 0,
|
|
331
354
|
"data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
|
|
332
355
|
className: (0, import_shared_utils.cn)(
|
|
333
356
|
styles.bodyRowSkeletonCell(),
|
|
334
357
|
columnsResizable && column.getCanResize() && "truncate",
|
|
335
|
-
(_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName
|
|
358
|
+
(_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName,
|
|
359
|
+
stickyRight && STICKY_RIGHT_BODY
|
|
336
360
|
),
|
|
337
361
|
children
|
|
338
362
|
}
|
|
@@ -363,15 +387,33 @@ function DataGridTableBodyRow({
|
|
|
363
387
|
}
|
|
364
388
|
function DataGridTableBodyRowExpanded({ row }) {
|
|
365
389
|
var _a, _b, _c;
|
|
366
|
-
const { table, styles } = useDataGridContext();
|
|
367
|
-
|
|
390
|
+
const { table, styles, columnVisibilityToggle } = useDataGridContext();
|
|
391
|
+
const { append: hasSettingsColumn } = getSettingsPlacement(
|
|
392
|
+
table,
|
|
393
|
+
columnVisibilityToggle
|
|
394
|
+
);
|
|
395
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { className: styles.bodyRowExpanded(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: row.getVisibleCells().length + (hasSettingsColumn ? 1 : 0), children: (_c = (_b = (_a = table.getAllColumns().find((column) => {
|
|
368
396
|
var _a2;
|
|
369
397
|
return (_a2 = column.columnDef.meta) == null ? void 0 : _a2.expandedContent;
|
|
370
398
|
})) == null ? void 0 : _a.columnDef.meta) == null ? void 0 : _b.expandedContent) == null ? void 0 : _c.call(_b, row.original) }) });
|
|
371
399
|
}
|
|
400
|
+
var SETTINGS_COLUMN_WIDTH = 44;
|
|
401
|
+
function getSettingsPlacement(table, enabled) {
|
|
402
|
+
if (!enabled) return { append: false };
|
|
403
|
+
if (!table.getAllLeafColumns().some((column) => column.getCanHide())) {
|
|
404
|
+
return { append: false };
|
|
405
|
+
}
|
|
406
|
+
const leafColumns = table.getVisibleLeafColumns();
|
|
407
|
+
const lastColumn = leafColumns[leafColumns.length - 1];
|
|
408
|
+
if (lastColumn && lastColumn.accessorFn == null && !lastColumn.getCanHide()) {
|
|
409
|
+
return { reuseColumnId: lastColumn.id, append: false };
|
|
410
|
+
}
|
|
411
|
+
return { append: true };
|
|
412
|
+
}
|
|
372
413
|
function DataGridTable() {
|
|
373
414
|
const {
|
|
374
415
|
table,
|
|
416
|
+
styles,
|
|
375
417
|
columnsResizable,
|
|
376
418
|
columnsPinnable,
|
|
377
419
|
stripped,
|
|
@@ -379,38 +421,98 @@ function DataGridTable() {
|
|
|
379
421
|
cellBorder,
|
|
380
422
|
loadingMode,
|
|
381
423
|
isLoading,
|
|
382
|
-
pageSize
|
|
424
|
+
pageSize,
|
|
425
|
+
columnVisibilityToggle
|
|
383
426
|
} = useDataGridContext();
|
|
427
|
+
const { reuseColumnId, append: showColumnSettings } = getSettingsPlacement(
|
|
428
|
+
table,
|
|
429
|
+
columnVisibilityToggle
|
|
430
|
+
);
|
|
431
|
+
const headerGroups = table.getHeaderGroups();
|
|
432
|
+
const settingsCellStyle = {
|
|
433
|
+
"--size": `${SETTINGS_COLUMN_WIDTH}px`
|
|
434
|
+
};
|
|
384
435
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableBase, { children: [
|
|
385
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHead, { children:
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
436
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHead, { children: headerGroups.map((headerGroup, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableHeadRow, { headerGroup, children: [
|
|
437
|
+
headerGroup.headers.map((header) => {
|
|
438
|
+
const { column } = header;
|
|
439
|
+
const isReuseColumn = reuseColumnId != null && column.id === reuseColumnId;
|
|
440
|
+
const reuseToggleHere = isReuseColumn && groupIndex === headerGroups.length - 1;
|
|
441
|
+
const headerContent = header.isPlaceholder ? null : (0, import_react_table.flexRender)(
|
|
389
442
|
header.column.columnDef.header,
|
|
390
443
|
header.getContext()
|
|
391
|
-
)
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
444
|
+
);
|
|
445
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
446
|
+
DataGridTableHeadRowCell,
|
|
447
|
+
{
|
|
448
|
+
header,
|
|
449
|
+
stickyRight: isReuseColumn,
|
|
450
|
+
children: [
|
|
451
|
+
reuseToggleHere ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex w-full items-center justify-center gap-1.5", children: [
|
|
452
|
+
headerContent,
|
|
453
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridHeaderColumnToggle, {})
|
|
454
|
+
] }) : headerContent,
|
|
455
|
+
columnsResizable && column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHeadRowCellResize, { header })
|
|
456
|
+
]
|
|
457
|
+
},
|
|
458
|
+
column.id
|
|
459
|
+
);
|
|
460
|
+
}),
|
|
461
|
+
showColumnSettings && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
462
|
+
"th",
|
|
463
|
+
{
|
|
464
|
+
className: (0, import_shared_utils.cn)(styles.headerRowCell(), STICKY_RIGHT_HEADER),
|
|
465
|
+
style: { ...settingsCellStyle, ...stickyRightStyle(30) },
|
|
466
|
+
children: groupIndex === headerGroups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridHeaderColumnToggle, {}) })
|
|
467
|
+
}
|
|
468
|
+
)
|
|
469
|
+
] }, headerGroup.id)) }),
|
|
395
470
|
(stripped || !rowBorder) && !cellBorder && !columnsPinnable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableRowSpacer, {}),
|
|
396
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBody, { children: loadingMode === "skeleton" && isLoading && pageSize ? Array.from({ length: pageSize }).map((_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime.
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
471
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBody, { children: loadingMode === "skeleton" && isLoading && pageSize ? Array.from({ length: pageSize }).map((_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableBodyRowSkeleton, { children: [
|
|
472
|
+
table.getVisibleFlatColumns().map((column, colIndex) => {
|
|
473
|
+
var _a;
|
|
474
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
475
|
+
DataGridTableBodyRowSkeletonCell,
|
|
476
|
+
{
|
|
477
|
+
column,
|
|
478
|
+
stickyRight: reuseColumnId != null && column.id === reuseColumnId,
|
|
479
|
+
children: (_a = column.columnDef.meta) == null ? void 0 : _a.skeleton
|
|
480
|
+
},
|
|
481
|
+
colIndex.toString()
|
|
482
|
+
);
|
|
483
|
+
}),
|
|
484
|
+
showColumnSettings && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
485
|
+
"td",
|
|
400
486
|
{
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
}
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
}) }, rowIndex.toString())) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => {
|
|
487
|
+
className: (0, import_shared_utils.cn)(styles.bodyRowCell(), STICKY_RIGHT_BODY),
|
|
488
|
+
style: { ...settingsCellStyle, ...stickyRightStyle(10) }
|
|
489
|
+
}
|
|
490
|
+
)
|
|
491
|
+
] }, rowIndex.toString())) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => {
|
|
407
492
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
|
|
408
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
493
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableBodyRow, { row, children: [
|
|
494
|
+
row.getVisibleCells().map((cell) => {
|
|
495
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
496
|
+
DataGridTableBodyRowCell,
|
|
497
|
+
{
|
|
498
|
+
cell,
|
|
499
|
+
stickyRight: reuseColumnId != null && cell.column.id === reuseColumnId,
|
|
500
|
+
children: (0, import_react_table.flexRender)(
|
|
501
|
+
cell.column.columnDef.cell,
|
|
502
|
+
cell.getContext()
|
|
503
|
+
)
|
|
504
|
+
},
|
|
505
|
+
cell.id
|
|
506
|
+
);
|
|
507
|
+
}),
|
|
508
|
+
showColumnSettings && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
509
|
+
"td",
|
|
510
|
+
{
|
|
511
|
+
className: (0, import_shared_utils.cn)(styles.bodyRowCell(), STICKY_RIGHT_BODY),
|
|
512
|
+
style: { ...settingsCellStyle, ...stickyRightStyle(10) }
|
|
513
|
+
}
|
|
514
|
+
)
|
|
515
|
+
] }, row.id),
|
|
414
516
|
row.getIsExpanded() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBodyRowExpanded, { row })
|
|
415
517
|
] }, row.id);
|
|
416
518
|
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableEmpty, {}) })
|
|
@@ -457,6 +559,21 @@ function DataGridColumnToggle({
|
|
|
457
559
|
}) })
|
|
458
560
|
] });
|
|
459
561
|
}
|
|
562
|
+
function DataGridHeaderColumnToggle() {
|
|
563
|
+
const t = (0, import_i18n2.useSafeIntl)();
|
|
564
|
+
const label = t.formatMessage(dataGridMessages.columns);
|
|
565
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridColumnToggle, { align: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
566
|
+
import_button.IconButton,
|
|
567
|
+
{
|
|
568
|
+
"aria-label": label,
|
|
569
|
+
tooltip: label,
|
|
570
|
+
variant: "ghost",
|
|
571
|
+
size: "sm",
|
|
572
|
+
className: "shrink-0",
|
|
573
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.TableHeaderColumnIcon, {})
|
|
574
|
+
}
|
|
575
|
+
) });
|
|
576
|
+
}
|
|
460
577
|
function DataGridTableRowSelectAll({
|
|
461
578
|
size
|
|
462
579
|
}) {
|
|
@@ -507,5 +624,6 @@ function DataGridTableRowSelect({
|
|
|
507
624
|
DataGridContainer,
|
|
508
625
|
DataGridTable,
|
|
509
626
|
DataGridTableRowSelect,
|
|
510
|
-
DataGridTableRowSelectAll
|
|
627
|
+
DataGridTableRowSelectAll,
|
|
628
|
+
SETTINGS_COLUMN_WIDTH
|
|
511
629
|
});
|
package/dist/data-grid.mjs
CHANGED
|
@@ -6,8 +6,9 @@ import {
|
|
|
6
6
|
DataGridContainer,
|
|
7
7
|
DataGridTable,
|
|
8
8
|
DataGridTableRowSelect,
|
|
9
|
-
DataGridTableRowSelectAll
|
|
10
|
-
|
|
9
|
+
DataGridTableRowSelectAll,
|
|
10
|
+
SETTINGS_COLUMN_WIDTH
|
|
11
|
+
} from "./chunk-ZXID4I26.mjs";
|
|
11
12
|
import "./chunk-M6DRKGKE.mjs";
|
|
12
13
|
export {
|
|
13
14
|
DataGrid,
|
|
@@ -15,5 +16,6 @@ export {
|
|
|
15
16
|
DataGridContainer,
|
|
16
17
|
DataGridTable,
|
|
17
18
|
DataGridTableRowSelect,
|
|
18
|
-
DataGridTableRowSelectAll
|
|
19
|
+
DataGridTableRowSelectAll,
|
|
20
|
+
SETTINGS_COLUMN_WIDTH
|
|
19
21
|
};
|
package/dist/index.js
CHANGED
|
@@ -72,6 +72,7 @@ function DataGrid(props) {
|
|
|
72
72
|
isLoading = false,
|
|
73
73
|
pageSize = 20,
|
|
74
74
|
cellBorder,
|
|
75
|
+
columnVisibilityToggle,
|
|
75
76
|
onRowClick,
|
|
76
77
|
...rest
|
|
77
78
|
} = props;
|
|
@@ -120,6 +121,7 @@ function DataGrid(props) {
|
|
|
120
121
|
emptyMessage,
|
|
121
122
|
isLoading,
|
|
122
123
|
pageSize,
|
|
124
|
+
columnVisibilityToggle,
|
|
123
125
|
onRowClick
|
|
124
126
|
}),
|
|
125
127
|
[
|
|
@@ -136,6 +138,7 @@ function DataGrid(props) {
|
|
|
136
138
|
emptyMessage,
|
|
137
139
|
isLoading,
|
|
138
140
|
pageSize,
|
|
141
|
+
columnVisibilityToggle,
|
|
139
142
|
onRowClick
|
|
140
143
|
]
|
|
141
144
|
);
|
|
@@ -195,10 +198,18 @@ function DataGridTableBase({
|
|
|
195
198
|
}
|
|
196
199
|
);
|
|
197
200
|
}
|
|
201
|
+
var STICKY_RIGHT_HEADER = "dg-sticky-right sticky end-0";
|
|
202
|
+
var STICKY_RIGHT_BODY = "dg-sticky-right sticky end-0 bg-background";
|
|
203
|
+
var stickyRightStyle = (z) => ({
|
|
204
|
+
position: "sticky",
|
|
205
|
+
right: 0,
|
|
206
|
+
zIndex: z
|
|
207
|
+
});
|
|
198
208
|
function DataGridTableHeadRowCell({
|
|
199
209
|
children,
|
|
200
210
|
header,
|
|
201
|
-
dndRef
|
|
211
|
+
dndRef,
|
|
212
|
+
stickyRight
|
|
202
213
|
}) {
|
|
203
214
|
var _a;
|
|
204
215
|
const { styles, columnsPinnable } = useDataGridContext();
|
|
@@ -212,13 +223,15 @@ function DataGridTableHeadRowCell({
|
|
|
212
223
|
ref: dndRef,
|
|
213
224
|
style: {
|
|
214
225
|
"--size": `${header.getSize()}px`,
|
|
215
|
-
...columnsPinnable && isPinned && getPinningStyles(column)
|
|
226
|
+
...columnsPinnable && isPinned && getPinningStyles(column),
|
|
227
|
+
...stickyRight && stickyRightStyle(30)
|
|
216
228
|
},
|
|
217
229
|
"data-pinned": isPinned || void 0,
|
|
218
230
|
"data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
|
|
219
231
|
className: (0, import_shared_utils.cn)(
|
|
220
232
|
styles.headerRowCell(),
|
|
221
|
-
(_a = header.column.columnDef.meta) == null ? void 0 : _a.headerClassName
|
|
233
|
+
(_a = header.column.columnDef.meta) == null ? void 0 : _a.headerClassName,
|
|
234
|
+
stickyRight && STICKY_RIGHT_HEADER
|
|
222
235
|
),
|
|
223
236
|
children
|
|
224
237
|
},
|
|
@@ -255,8 +268,12 @@ function DataGridTableBody({
|
|
|
255
268
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { className: (0, import_shared_utils.cn)(styles.body({ className })), ...restProps, children });
|
|
256
269
|
}
|
|
257
270
|
function DataGridTableEmpty() {
|
|
258
|
-
const { styles, table, emptyMessage } = useDataGridContext();
|
|
259
|
-
const
|
|
271
|
+
const { styles, table, emptyMessage, columnVisibilityToggle } = useDataGridContext();
|
|
272
|
+
const { append: hasSettingsColumn } = getSettingsPlacement(
|
|
273
|
+
table,
|
|
274
|
+
columnVisibilityToggle
|
|
275
|
+
);
|
|
276
|
+
const totalColumns = table.getVisibleLeafColumns().length + (hasSettingsColumn ? 1 : 0);
|
|
260
277
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: totalColumns, className: styles.empty(), children: emptyMessage || "No data available." }) });
|
|
261
278
|
}
|
|
262
279
|
function DataGridTableBodyRowSkeleton({ children }) {
|
|
@@ -277,7 +294,8 @@ function DataGridTableBodyRowCell({
|
|
|
277
294
|
children,
|
|
278
295
|
cell,
|
|
279
296
|
dndRef,
|
|
280
|
-
dndStyle
|
|
297
|
+
dndStyle,
|
|
298
|
+
stickyRight
|
|
281
299
|
}) {
|
|
282
300
|
var _a;
|
|
283
301
|
const { styles, columnsResizable, columnsDraggable, columnsPinnable } = useDataGridContext();
|
|
@@ -293,14 +311,16 @@ function DataGridTableBodyRowCell({
|
|
|
293
311
|
style: {
|
|
294
312
|
"--size": `${column.getSize()}px`,
|
|
295
313
|
...columnsPinnable && isPinned && getPinningStyles(column),
|
|
296
|
-
...dndStyle ? dndStyle : null
|
|
314
|
+
...dndStyle ? dndStyle : null,
|
|
315
|
+
...stickyRight && stickyRightStyle(10)
|
|
297
316
|
},
|
|
298
317
|
"data-pinned": isPinned || void 0,
|
|
299
318
|
"data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
|
|
300
319
|
className: (0, import_shared_utils.cn)(
|
|
301
320
|
styles.bodyRowCell(),
|
|
302
321
|
columnsResizable && column.getCanResize() && "truncate",
|
|
303
|
-
(_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName
|
|
322
|
+
(_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName,
|
|
323
|
+
stickyRight && STICKY_RIGHT_BODY
|
|
304
324
|
),
|
|
305
325
|
children
|
|
306
326
|
},
|
|
@@ -309,7 +329,8 @@ function DataGridTableBodyRowCell({
|
|
|
309
329
|
}
|
|
310
330
|
function DataGridTableBodyRowSkeletonCell({
|
|
311
331
|
children,
|
|
312
|
-
column
|
|
332
|
+
column,
|
|
333
|
+
stickyRight
|
|
313
334
|
}) {
|
|
314
335
|
var _a;
|
|
315
336
|
const { styles, columnsResizable, columnsPinnable } = useDataGridContext();
|
|
@@ -321,14 +342,16 @@ function DataGridTableBodyRowSkeletonCell({
|
|
|
321
342
|
{
|
|
322
343
|
style: {
|
|
323
344
|
"--size": `${column.getSize()}px`,
|
|
324
|
-
...columnsPinnable && isPinned && getPinningStyles(column)
|
|
345
|
+
...columnsPinnable && isPinned && getPinningStyles(column),
|
|
346
|
+
...stickyRight && stickyRightStyle(10)
|
|
325
347
|
},
|
|
326
348
|
"data-pinned": isPinned || void 0,
|
|
327
349
|
"data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
|
|
328
350
|
className: (0, import_shared_utils.cn)(
|
|
329
351
|
styles.bodyRowSkeletonCell(),
|
|
330
352
|
columnsResizable && column.getCanResize() && "truncate",
|
|
331
|
-
(_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName
|
|
353
|
+
(_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName,
|
|
354
|
+
stickyRight && STICKY_RIGHT_BODY
|
|
332
355
|
),
|
|
333
356
|
children
|
|
334
357
|
}
|
|
@@ -359,15 +382,33 @@ function DataGridTableBodyRow({
|
|
|
359
382
|
}
|
|
360
383
|
function DataGridTableBodyRowExpanded({ row }) {
|
|
361
384
|
var _a, _b, _c;
|
|
362
|
-
const { table, styles } = useDataGridContext();
|
|
363
|
-
|
|
385
|
+
const { table, styles, columnVisibilityToggle } = useDataGridContext();
|
|
386
|
+
const { append: hasSettingsColumn } = getSettingsPlacement(
|
|
387
|
+
table,
|
|
388
|
+
columnVisibilityToggle
|
|
389
|
+
);
|
|
390
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { className: styles.bodyRowExpanded(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: row.getVisibleCells().length + (hasSettingsColumn ? 1 : 0), children: (_c = (_b = (_a = table.getAllColumns().find((column) => {
|
|
364
391
|
var _a2;
|
|
365
392
|
return (_a2 = column.columnDef.meta) == null ? void 0 : _a2.expandedContent;
|
|
366
393
|
})) == null ? void 0 : _a.columnDef.meta) == null ? void 0 : _b.expandedContent) == null ? void 0 : _c.call(_b, row.original) }) });
|
|
367
394
|
}
|
|
395
|
+
var SETTINGS_COLUMN_WIDTH = 44;
|
|
396
|
+
function getSettingsPlacement(table, enabled) {
|
|
397
|
+
if (!enabled) return { append: false };
|
|
398
|
+
if (!table.getAllLeafColumns().some((column) => column.getCanHide())) {
|
|
399
|
+
return { append: false };
|
|
400
|
+
}
|
|
401
|
+
const leafColumns = table.getVisibleLeafColumns();
|
|
402
|
+
const lastColumn = leafColumns[leafColumns.length - 1];
|
|
403
|
+
if (lastColumn && lastColumn.accessorFn == null && !lastColumn.getCanHide()) {
|
|
404
|
+
return { reuseColumnId: lastColumn.id, append: false };
|
|
405
|
+
}
|
|
406
|
+
return { append: true };
|
|
407
|
+
}
|
|
368
408
|
function DataGridTable() {
|
|
369
409
|
const {
|
|
370
410
|
table,
|
|
411
|
+
styles,
|
|
371
412
|
columnsResizable,
|
|
372
413
|
columnsPinnable,
|
|
373
414
|
stripped,
|
|
@@ -375,38 +416,98 @@ function DataGridTable() {
|
|
|
375
416
|
cellBorder,
|
|
376
417
|
loadingMode,
|
|
377
418
|
isLoading,
|
|
378
|
-
pageSize
|
|
419
|
+
pageSize,
|
|
420
|
+
columnVisibilityToggle
|
|
379
421
|
} = useDataGridContext();
|
|
422
|
+
const { reuseColumnId, append: showColumnSettings } = getSettingsPlacement(
|
|
423
|
+
table,
|
|
424
|
+
columnVisibilityToggle
|
|
425
|
+
);
|
|
426
|
+
const headerGroups = table.getHeaderGroups();
|
|
427
|
+
const settingsCellStyle = {
|
|
428
|
+
"--size": `${SETTINGS_COLUMN_WIDTH}px`
|
|
429
|
+
};
|
|
380
430
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableBase, { children: [
|
|
381
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHead, { children:
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
431
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHead, { children: headerGroups.map((headerGroup, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableHeadRow, { headerGroup, children: [
|
|
432
|
+
headerGroup.headers.map((header) => {
|
|
433
|
+
const { column } = header;
|
|
434
|
+
const isReuseColumn = reuseColumnId != null && column.id === reuseColumnId;
|
|
435
|
+
const reuseToggleHere = isReuseColumn && groupIndex === headerGroups.length - 1;
|
|
436
|
+
const headerContent = header.isPlaceholder ? null : (0, import_react_table.flexRender)(
|
|
385
437
|
header.column.columnDef.header,
|
|
386
438
|
header.getContext()
|
|
387
|
-
)
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
439
|
+
);
|
|
440
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
441
|
+
DataGridTableHeadRowCell,
|
|
442
|
+
{
|
|
443
|
+
header,
|
|
444
|
+
stickyRight: isReuseColumn,
|
|
445
|
+
children: [
|
|
446
|
+
reuseToggleHere ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex w-full items-center justify-center gap-1.5", children: [
|
|
447
|
+
headerContent,
|
|
448
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridHeaderColumnToggle, {})
|
|
449
|
+
] }) : headerContent,
|
|
450
|
+
columnsResizable && column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHeadRowCellResize, { header })
|
|
451
|
+
]
|
|
452
|
+
},
|
|
453
|
+
column.id
|
|
454
|
+
);
|
|
455
|
+
}),
|
|
456
|
+
showColumnSettings && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
457
|
+
"th",
|
|
458
|
+
{
|
|
459
|
+
className: (0, import_shared_utils.cn)(styles.headerRowCell(), STICKY_RIGHT_HEADER),
|
|
460
|
+
style: { ...settingsCellStyle, ...stickyRightStyle(30) },
|
|
461
|
+
children: groupIndex === headerGroups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridHeaderColumnToggle, {}) })
|
|
462
|
+
}
|
|
463
|
+
)
|
|
464
|
+
] }, headerGroup.id)) }),
|
|
391
465
|
(stripped || !rowBorder) && !cellBorder && !columnsPinnable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableRowSpacer, {}),
|
|
392
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBody, { children: loadingMode === "skeleton" && isLoading && pageSize ? Array.from({ length: pageSize }).map((_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime.
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
466
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBody, { children: loadingMode === "skeleton" && isLoading && pageSize ? Array.from({ length: pageSize }).map((_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableBodyRowSkeleton, { children: [
|
|
467
|
+
table.getVisibleFlatColumns().map((column, colIndex) => {
|
|
468
|
+
var _a;
|
|
469
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
470
|
+
DataGridTableBodyRowSkeletonCell,
|
|
471
|
+
{
|
|
472
|
+
column,
|
|
473
|
+
stickyRight: reuseColumnId != null && column.id === reuseColumnId,
|
|
474
|
+
children: (_a = column.columnDef.meta) == null ? void 0 : _a.skeleton
|
|
475
|
+
},
|
|
476
|
+
colIndex.toString()
|
|
477
|
+
);
|
|
478
|
+
}),
|
|
479
|
+
showColumnSettings && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
480
|
+
"td",
|
|
396
481
|
{
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
}
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
}) }, rowIndex.toString())) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => {
|
|
482
|
+
className: (0, import_shared_utils.cn)(styles.bodyRowCell(), STICKY_RIGHT_BODY),
|
|
483
|
+
style: { ...settingsCellStyle, ...stickyRightStyle(10) }
|
|
484
|
+
}
|
|
485
|
+
)
|
|
486
|
+
] }, rowIndex.toString())) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => {
|
|
403
487
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
|
|
404
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
488
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableBodyRow, { row, children: [
|
|
489
|
+
row.getVisibleCells().map((cell) => {
|
|
490
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
491
|
+
DataGridTableBodyRowCell,
|
|
492
|
+
{
|
|
493
|
+
cell,
|
|
494
|
+
stickyRight: reuseColumnId != null && cell.column.id === reuseColumnId,
|
|
495
|
+
children: (0, import_react_table.flexRender)(
|
|
496
|
+
cell.column.columnDef.cell,
|
|
497
|
+
cell.getContext()
|
|
498
|
+
)
|
|
499
|
+
},
|
|
500
|
+
cell.id
|
|
501
|
+
);
|
|
502
|
+
}),
|
|
503
|
+
showColumnSettings && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
504
|
+
"td",
|
|
505
|
+
{
|
|
506
|
+
className: (0, import_shared_utils.cn)(styles.bodyRowCell(), STICKY_RIGHT_BODY),
|
|
507
|
+
style: { ...settingsCellStyle, ...stickyRightStyle(10) }
|
|
508
|
+
}
|
|
509
|
+
)
|
|
510
|
+
] }, row.id),
|
|
410
511
|
row.getIsExpanded() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBodyRowExpanded, { row })
|
|
411
512
|
] }, row.id);
|
|
412
513
|
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableEmpty, {}) })
|
|
@@ -453,6 +554,21 @@ function DataGridColumnToggle({
|
|
|
453
554
|
}) })
|
|
454
555
|
] });
|
|
455
556
|
}
|
|
557
|
+
function DataGridHeaderColumnToggle() {
|
|
558
|
+
const t = (0, import_i18n2.useSafeIntl)();
|
|
559
|
+
const label = t.formatMessage(dataGridMessages.columns);
|
|
560
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridColumnToggle, { align: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
561
|
+
import_button.IconButton,
|
|
562
|
+
{
|
|
563
|
+
"aria-label": label,
|
|
564
|
+
tooltip: label,
|
|
565
|
+
variant: "ghost",
|
|
566
|
+
size: "sm",
|
|
567
|
+
className: "shrink-0",
|
|
568
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.TableHeaderColumnIcon, {})
|
|
569
|
+
}
|
|
570
|
+
) });
|
|
571
|
+
}
|
|
456
572
|
function DataGridTableRowSelectAll({
|
|
457
573
|
size
|
|
458
574
|
}) {
|
package/dist/index.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kopexa/data-grid",
|
|
3
|
-
"version": "18.
|
|
3
|
+
"version": "18.3.1",
|
|
4
4
|
"description": "A DataGrid Component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"data-grid"
|
|
@@ -28,17 +28,17 @@
|
|
|
28
28
|
"motion": ">=12.23.6",
|
|
29
29
|
"react": ">=19.0.0-rc.0",
|
|
30
30
|
"react-dom": ">=19.0.0-rc.0",
|
|
31
|
-
"@kopexa/theme": "18.
|
|
31
|
+
"@kopexa/theme": "18.3.1"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@tanstack/react-table": "^8.21.3",
|
|
35
|
-
"@kopexa/react-utils": "18.
|
|
36
|
-
"@kopexa/
|
|
37
|
-
"@kopexa/
|
|
38
|
-
"@kopexa/
|
|
39
|
-
"@kopexa/
|
|
40
|
-
"@kopexa/
|
|
41
|
-
"@kopexa/
|
|
35
|
+
"@kopexa/react-utils": "18.3.1",
|
|
36
|
+
"@kopexa/i18n": "18.3.1",
|
|
37
|
+
"@kopexa/shared-utils": "18.3.1",
|
|
38
|
+
"@kopexa/dropdown-menu": "18.3.1",
|
|
39
|
+
"@kopexa/icons": "18.3.1",
|
|
40
|
+
"@kopexa/button": "18.3.1",
|
|
41
|
+
"@kopexa/checkbox": "18.3.1"
|
|
42
42
|
},
|
|
43
43
|
"clean-package": "../../../clean-package.config.json",
|
|
44
44
|
"module": "dist/index.mjs",
|