@kopexa/data-grid 18.2.0 → 18.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/{chunk-YJSXJPR4.mjs → chunk-EVXFPN6F.mjs} +155 -39
  2. package/dist/data-grid.d.mts +10 -1
  3. package/dist/data-grid.d.ts +10 -1
  4. package/dist/data-grid.js +157 -40
  5. package/dist/data-grid.mjs +5 -3
  6. package/dist/index.js +153 -38
  7. package/dist/index.mjs +1 -1
  8. package/package.json +9 -9
package/dist/{chunk-YJSXJPR4.mjs → chunk-EVXFPN6F.mjs} RENAMED
@@ -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,17 @@ function DataGridTableBase({
166
169
  }
167
170
  );
168
171
  }
172
+ var STICKY_RIGHT_CELL = "sticky end-0 bg-background border-s border-border shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]";
173
+ var stickyRightStyle = (z) => ({
174
+ position: "sticky",
175
+ right: 0,
176
+ zIndex: z
177
+ });
169
178
  function DataGridTableHeadRowCell({
170
179
  children,
171
180
  header,
172
- dndRef
181
+ dndRef,
182
+ stickyRight
173
183
  }) {
174
184
  var _a;
175
185
  const { styles, columnsPinnable } = useDataGridContext();
@@ -183,13 +193,15 @@ function DataGridTableHeadRowCell({
183
193
  ref: dndRef,
184
194
  style: {
185
195
  "--size": `${header.getSize()}px`,
186
- ...columnsPinnable && isPinned && getPinningStyles(column)
196
+ ...columnsPinnable && isPinned && getPinningStyles(column),
197
+ ...stickyRight && stickyRightStyle(30)
187
198
  },
188
199
  "data-pinned": isPinned || void 0,
189
200
  "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
190
201
  className: cn(
191
202
  styles.headerRowCell(),
192
- (_a = header.column.columnDef.meta) == null ? void 0 : _a.headerClassName
203
+ (_a = header.column.columnDef.meta) == null ? void 0 : _a.headerClassName,
204
+ stickyRight && STICKY_RIGHT_CELL
193
205
  ),
194
206
  children
195
207
  },
@@ -226,8 +238,12 @@ function DataGridTableBody({
226
238
  return /* @__PURE__ */ jsx("tbody", { className: cn(styles.body({ className })), ...restProps, children });
227
239
  }
228
240
  function DataGridTableEmpty() {
229
- const { styles, table, emptyMessage } = useDataGridContext();
230
- const totalColumns = table.getVisibleLeafColumns().length;
241
+ const { styles, table, emptyMessage, columnVisibilityToggle } = useDataGridContext();
242
+ const { append: hasSettingsColumn } = getSettingsPlacement(
243
+ table,
244
+ columnVisibilityToggle
245
+ );
246
+ const totalColumns = table.getVisibleLeafColumns().length + (hasSettingsColumn ? 1 : 0);
231
247
  return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: totalColumns, className: styles.empty(), children: emptyMessage || "No data available." }) });
232
248
  }
233
249
  function DataGridTableBodyRowSkeleton({ children }) {
@@ -248,7 +264,8 @@ function DataGridTableBodyRowCell({
248
264
  children,
249
265
  cell,
250
266
  dndRef,
251
- dndStyle
267
+ dndStyle,
268
+ stickyRight
252
269
  }) {
253
270
  var _a;
254
271
  const { styles, columnsResizable, columnsDraggable, columnsPinnable } = useDataGridContext();
@@ -264,14 +281,16 @@ function DataGridTableBodyRowCell({
264
281
  style: {
265
282
  "--size": `${column.getSize()}px`,
266
283
  ...columnsPinnable && isPinned && getPinningStyles(column),
267
- ...dndStyle ? dndStyle : null
284
+ ...dndStyle ? dndStyle : null,
285
+ ...stickyRight && stickyRightStyle(10)
268
286
  },
269
287
  "data-pinned": isPinned || void 0,
270
288
  "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
271
289
  className: cn(
272
290
  styles.bodyRowCell(),
273
291
  columnsResizable && column.getCanResize() && "truncate",
274
- (_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName
292
+ (_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName,
293
+ stickyRight && STICKY_RIGHT_CELL
275
294
  ),
276
295
  children
277
296
  },
@@ -280,7 +299,8 @@ function DataGridTableBodyRowCell({
280
299
  }
281
300
  function DataGridTableBodyRowSkeletonCell({
282
301
  children,
283
- column
302
+ column,
303
+ stickyRight
284
304
  }) {
285
305
  var _a;
286
306
  const { styles, columnsResizable, columnsPinnable } = useDataGridContext();
@@ -292,14 +312,16 @@ function DataGridTableBodyRowSkeletonCell({
292
312
  {
293
313
  style: {
294
314
  "--size": `${column.getSize()}px`,
295
- ...columnsPinnable && isPinned && getPinningStyles(column)
315
+ ...columnsPinnable && isPinned && getPinningStyles(column),
316
+ ...stickyRight && stickyRightStyle(10)
296
317
  },
297
318
  "data-pinned": isPinned || void 0,
298
319
  "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
299
320
  className: cn(
300
321
  styles.bodyRowSkeletonCell(),
301
322
  columnsResizable && column.getCanResize() && "truncate",
302
- (_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName
323
+ (_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName,
324
+ stickyRight && STICKY_RIGHT_CELL
303
325
  ),
304
326
  children
305
327
  }
@@ -330,15 +352,33 @@ function DataGridTableBodyRow({
330
352
  }
331
353
  function DataGridTableBodyRowExpanded({ row }) {
332
354
  var _a, _b, _c;
333
- const { table, styles } = useDataGridContext();
334
- return /* @__PURE__ */ jsx("tr", { className: styles.bodyRowExpanded(), children: /* @__PURE__ */ jsx("td", { colSpan: row.getVisibleCells().length, children: (_c = (_b = (_a = table.getAllColumns().find((column) => {
355
+ const { table, styles, columnVisibilityToggle } = useDataGridContext();
356
+ const { append: hasSettingsColumn } = getSettingsPlacement(
357
+ table,
358
+ columnVisibilityToggle
359
+ );
360
+ 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
361
  var _a2;
336
362
  return (_a2 = column.columnDef.meta) == null ? void 0 : _a2.expandedContent;
337
363
  })) == null ? void 0 : _a.columnDef.meta) == null ? void 0 : _b.expandedContent) == null ? void 0 : _c.call(_b, row.original) }) });
338
364
  }
365
+ var SETTINGS_COLUMN_WIDTH = 44;
366
+ function getSettingsPlacement(table, enabled) {
367
+ if (!enabled) return { append: false };
368
+ if (!table.getAllLeafColumns().some((column) => column.getCanHide())) {
369
+ return { append: false };
370
+ }
371
+ const leafColumns = table.getVisibleLeafColumns();
372
+ const lastColumn = leafColumns[leafColumns.length - 1];
373
+ if (lastColumn && lastColumn.accessorFn == null) {
374
+ return { reuseColumnId: lastColumn.id, append: false };
375
+ }
376
+ return { append: true };
377
+ }
339
378
  function DataGridTable() {
340
379
  const {
341
380
  table,
381
+ styles,
342
382
  columnsResizable,
343
383
  columnsPinnable,
344
384
  stripped,
@@ -346,38 +386,98 @@ function DataGridTable() {
346
386
  cellBorder,
347
387
  loadingMode,
348
388
  isLoading,
349
- pageSize
389
+ pageSize,
390
+ columnVisibilityToggle
350
391
  } = useDataGridContext();
392
+ const { reuseColumnId, append: showColumnSettings } = getSettingsPlacement(
393
+ table,
394
+ columnVisibilityToggle
395
+ );
396
+ const headerGroups = table.getHeaderGroups();
397
+ const settingsCellStyle = {
398
+ "--size": `${SETTINGS_COLUMN_WIDTH}px`
399
+ };
351
400
  return /* @__PURE__ */ jsxs(DataGridTableBase, { children: [
352
- /* @__PURE__ */ jsx(DataGridTableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(DataGridTableHeadRow, { headerGroup, children: headerGroup.headers.map((header) => {
353
- const { column } = header;
354
- return /* @__PURE__ */ jsxs(DataGridTableHeadRowCell, { header, children: [
355
- header.isPlaceholder ? null : flexRender(
401
+ /* @__PURE__ */ jsx(DataGridTableHead, { children: headerGroups.map((headerGroup, groupIndex) => /* @__PURE__ */ jsxs(DataGridTableHeadRow, { headerGroup, children: [
402
+ headerGroup.headers.map((header) => {
403
+ const { column } = header;
404
+ const isReuseColumn = reuseColumnId != null && column.id === reuseColumnId;
405
+ const reuseToggleHere = isReuseColumn && groupIndex === headerGroups.length - 1;
406
+ const headerContent = header.isPlaceholder ? null : flexRender(
356
407
  header.column.columnDef.header,
357
408
  header.getContext()
358
- ),
359
- columnsResizable && column.getCanResize() && /* @__PURE__ */ jsx(DataGridTableHeadRowCellResize, { header })
360
- ] }, column.id);
361
- }) }, headerGroup.id)) }),
409
+ );
410
+ return /* @__PURE__ */ jsxs(
411
+ DataGridTableHeadRowCell,
412
+ {
413
+ header,
414
+ stickyRight: isReuseColumn,
415
+ children: [
416
+ reuseToggleHere ? /* @__PURE__ */ jsxs("span", { className: "flex w-full items-center justify-center gap-1.5", children: [
417
+ headerContent,
418
+ /* @__PURE__ */ jsx(DataGridHeaderColumnToggle, {})
419
+ ] }) : headerContent,
420
+ columnsResizable && column.getCanResize() && /* @__PURE__ */ jsx(DataGridTableHeadRowCellResize, { header })
421
+ ]
422
+ },
423
+ column.id
424
+ );
425
+ }),
426
+ showColumnSettings && /* @__PURE__ */ jsx(
427
+ "th",
428
+ {
429
+ className: cn(styles.headerRowCell(), STICKY_RIGHT_CELL),
430
+ style: { ...settingsCellStyle, ...stickyRightStyle(30) },
431
+ children: groupIndex === headerGroups.length - 1 && /* @__PURE__ */ jsx("span", { className: "flex justify-center", children: /* @__PURE__ */ jsx(DataGridHeaderColumnToggle, {}) })
432
+ }
433
+ )
434
+ ] }, headerGroup.id)) }),
362
435
  (stripped || !rowBorder) && !cellBorder && !columnsPinnable && /* @__PURE__ */ jsx(DataGridTableRowSpacer, {}),
363
- /* @__PURE__ */ jsx(DataGridTableBody, { children: loadingMode === "skeleton" && isLoading && pageSize ? Array.from({ length: pageSize }).map((_, rowIndex) => /* @__PURE__ */ jsx(DataGridTableBodyRowSkeleton, { children: table.getVisibleFlatColumns().map((column, colIndex) => {
364
- var _a;
365
- return /* @__PURE__ */ jsx(
366
- DataGridTableBodyRowSkeletonCell,
436
+ /* @__PURE__ */ jsx(DataGridTableBody, { children: loadingMode === "skeleton" && isLoading && pageSize ? Array.from({ length: pageSize }).map((_, rowIndex) => /* @__PURE__ */ jsxs(DataGridTableBodyRowSkeleton, { children: [
437
+ table.getVisibleFlatColumns().map((column, colIndex) => {
438
+ var _a;
439
+ return /* @__PURE__ */ jsx(
440
+ DataGridTableBodyRowSkeletonCell,
441
+ {
442
+ column,
443
+ stickyRight: reuseColumnId != null && column.id === reuseColumnId,
444
+ children: (_a = column.columnDef.meta) == null ? void 0 : _a.skeleton
445
+ },
446
+ colIndex.toString()
447
+ );
448
+ }),
449
+ showColumnSettings && /* @__PURE__ */ jsx(
450
+ "td",
367
451
  {
368
- column,
369
- children: (_a = column.columnDef.meta) == null ? void 0 : _a.skeleton
370
- },
371
- colIndex.toString()
372
- );
373
- }) }, rowIndex.toString())) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => {
452
+ className: cn(styles.bodyRowCell(), STICKY_RIGHT_CELL),
453
+ style: { ...settingsCellStyle, ...stickyRightStyle(10) }
454
+ }
455
+ )
456
+ ] }, rowIndex.toString())) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => {
374
457
  return /* @__PURE__ */ jsxs(Fragment, { children: [
375
- /* @__PURE__ */ jsx(DataGridTableBodyRow, { row, children: row.getVisibleCells().map((cell) => {
376
- return /* @__PURE__ */ jsx(DataGridTableBodyRowCell, { cell, children: flexRender(
377
- cell.column.columnDef.cell,
378
- cell.getContext()
379
- ) }, cell.id);
380
- }) }, row.id),
458
+ /* @__PURE__ */ jsxs(DataGridTableBodyRow, { row, children: [
459
+ row.getVisibleCells().map((cell) => {
460
+ return /* @__PURE__ */ jsx(
461
+ DataGridTableBodyRowCell,
462
+ {
463
+ cell,
464
+ stickyRight: reuseColumnId != null && cell.column.id === reuseColumnId,
465
+ children: flexRender(
466
+ cell.column.columnDef.cell,
467
+ cell.getContext()
468
+ )
469
+ },
470
+ cell.id
471
+ );
472
+ }),
473
+ showColumnSettings && /* @__PURE__ */ jsx(
474
+ "td",
475
+ {
476
+ className: cn(styles.bodyRowCell(), STICKY_RIGHT_CELL),
477
+ style: { ...settingsCellStyle, ...stickyRightStyle(10) }
478
+ }
479
+ )
480
+ ] }, row.id),
381
481
  row.getIsExpanded() && /* @__PURE__ */ jsx(DataGridTableBodyRowExpanded, { row })
382
482
  ] }, row.id);
383
483
  }) : /* @__PURE__ */ jsx(DataGridTableEmpty, {}) })
@@ -424,6 +524,21 @@ function DataGridColumnToggle({
424
524
  }) })
425
525
  ] });
426
526
  }
527
+ function DataGridHeaderColumnToggle() {
528
+ const t = useSafeIntl();
529
+ const label = t.formatMessage(dataGridMessages.columns);
530
+ return /* @__PURE__ */ jsx(DataGridColumnToggle, { align: "end", children: /* @__PURE__ */ jsx(
531
+ IconButton,
532
+ {
533
+ "aria-label": label,
534
+ tooltip: label,
535
+ variant: "ghost",
536
+ size: "sm",
537
+ className: "shrink-0",
538
+ children: /* @__PURE__ */ jsx(TableHeaderColumnIcon, {})
539
+ }
540
+ ) });
541
+ }
427
542
  function DataGridTableRowSelectAll({
428
543
  size
429
544
  }) {
@@ -471,6 +586,7 @@ function DataGridTableRowSelect({
471
586
  export {
472
587
  DataGrid,
473
588
  DataGridContainer,
589
+ SETTINGS_COLUMN_WIDTH,
474
590
  DataGridTable,
475
591
  DataGridColumnToggle,
476
592
  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,17 @@ function DataGridTableBase({
199
203
  }
200
204
  );
201
205
  }
206
+ var STICKY_RIGHT_CELL = "sticky end-0 bg-background border-s border-border shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]";
207
+ var stickyRightStyle = (z) => ({
208
+ position: "sticky",
209
+ right: 0,
210
+ zIndex: z
211
+ });
202
212
  function DataGridTableHeadRowCell({
203
213
  children,
204
214
  header,
205
- dndRef
215
+ dndRef,
216
+ stickyRight
206
217
  }) {
207
218
  var _a;
208
219
  const { styles, columnsPinnable } = useDataGridContext();
@@ -216,13 +227,15 @@ function DataGridTableHeadRowCell({
216
227
  ref: dndRef,
217
228
  style: {
218
229
  "--size": `${header.getSize()}px`,
219
- ...columnsPinnable && isPinned && getPinningStyles(column)
230
+ ...columnsPinnable && isPinned && getPinningStyles(column),
231
+ ...stickyRight && stickyRightStyle(30)
220
232
  },
221
233
  "data-pinned": isPinned || void 0,
222
234
  "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
223
235
  className: (0, import_shared_utils.cn)(
224
236
  styles.headerRowCell(),
225
- (_a = header.column.columnDef.meta) == null ? void 0 : _a.headerClassName
237
+ (_a = header.column.columnDef.meta) == null ? void 0 : _a.headerClassName,
238
+ stickyRight && STICKY_RIGHT_CELL
226
239
  ),
227
240
  children
228
241
  },
@@ -259,8 +272,12 @@ function DataGridTableBody({
259
272
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { className: (0, import_shared_utils.cn)(styles.body({ className })), ...restProps, children });
260
273
  }
261
274
  function DataGridTableEmpty() {
262
- const { styles, table, emptyMessage } = useDataGridContext();
263
- const totalColumns = table.getVisibleLeafColumns().length;
275
+ const { styles, table, emptyMessage, columnVisibilityToggle } = useDataGridContext();
276
+ const { append: hasSettingsColumn } = getSettingsPlacement(
277
+ table,
278
+ columnVisibilityToggle
279
+ );
280
+ const totalColumns = table.getVisibleLeafColumns().length + (hasSettingsColumn ? 1 : 0);
264
281
  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
282
  }
266
283
  function DataGridTableBodyRowSkeleton({ children }) {
@@ -281,7 +298,8 @@ function DataGridTableBodyRowCell({
281
298
  children,
282
299
  cell,
283
300
  dndRef,
284
- dndStyle
301
+ dndStyle,
302
+ stickyRight
285
303
  }) {
286
304
  var _a;
287
305
  const { styles, columnsResizable, columnsDraggable, columnsPinnable } = useDataGridContext();
@@ -297,14 +315,16 @@ function DataGridTableBodyRowCell({
297
315
  style: {
298
316
  "--size": `${column.getSize()}px`,
299
317
  ...columnsPinnable && isPinned && getPinningStyles(column),
300
- ...dndStyle ? dndStyle : null
318
+ ...dndStyle ? dndStyle : null,
319
+ ...stickyRight && stickyRightStyle(10)
301
320
  },
302
321
  "data-pinned": isPinned || void 0,
303
322
  "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
304
323
  className: (0, import_shared_utils.cn)(
305
324
  styles.bodyRowCell(),
306
325
  columnsResizable && column.getCanResize() && "truncate",
307
- (_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName
326
+ (_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName,
327
+ stickyRight && STICKY_RIGHT_CELL
308
328
  ),
309
329
  children
310
330
  },
@@ -313,7 +333,8 @@ function DataGridTableBodyRowCell({
313
333
  }
314
334
  function DataGridTableBodyRowSkeletonCell({
315
335
  children,
316
- column
336
+ column,
337
+ stickyRight
317
338
  }) {
318
339
  var _a;
319
340
  const { styles, columnsResizable, columnsPinnable } = useDataGridContext();
@@ -325,14 +346,16 @@ function DataGridTableBodyRowSkeletonCell({
325
346
  {
326
347
  style: {
327
348
  "--size": `${column.getSize()}px`,
328
- ...columnsPinnable && isPinned && getPinningStyles(column)
349
+ ...columnsPinnable && isPinned && getPinningStyles(column),
350
+ ...stickyRight && stickyRightStyle(10)
329
351
  },
330
352
  "data-pinned": isPinned || void 0,
331
353
  "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
332
354
  className: (0, import_shared_utils.cn)(
333
355
  styles.bodyRowSkeletonCell(),
334
356
  columnsResizable && column.getCanResize() && "truncate",
335
- (_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName
357
+ (_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName,
358
+ stickyRight && STICKY_RIGHT_CELL
336
359
  ),
337
360
  children
338
361
  }
@@ -363,15 +386,33 @@ function DataGridTableBodyRow({
363
386
  }
364
387
  function DataGridTableBodyRowExpanded({ row }) {
365
388
  var _a, _b, _c;
366
- const { table, styles } = useDataGridContext();
367
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { className: styles.bodyRowExpanded(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: row.getVisibleCells().length, children: (_c = (_b = (_a = table.getAllColumns().find((column) => {
389
+ const { table, styles, columnVisibilityToggle } = useDataGridContext();
390
+ const { append: hasSettingsColumn } = getSettingsPlacement(
391
+ table,
392
+ columnVisibilityToggle
393
+ );
394
+ 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
395
  var _a2;
369
396
  return (_a2 = column.columnDef.meta) == null ? void 0 : _a2.expandedContent;
370
397
  })) == null ? void 0 : _a.columnDef.meta) == null ? void 0 : _b.expandedContent) == null ? void 0 : _c.call(_b, row.original) }) });
371
398
  }
399
+ var SETTINGS_COLUMN_WIDTH = 44;
400
+ function getSettingsPlacement(table, enabled) {
401
+ if (!enabled) return { append: false };
402
+ if (!table.getAllLeafColumns().some((column) => column.getCanHide())) {
403
+ return { append: false };
404
+ }
405
+ const leafColumns = table.getVisibleLeafColumns();
406
+ const lastColumn = leafColumns[leafColumns.length - 1];
407
+ if (lastColumn && lastColumn.accessorFn == null) {
408
+ return { reuseColumnId: lastColumn.id, append: false };
409
+ }
410
+ return { append: true };
411
+ }
372
412
  function DataGridTable() {
373
413
  const {
374
414
  table,
415
+ styles,
375
416
  columnsResizable,
376
417
  columnsPinnable,
377
418
  stripped,
@@ -379,38 +420,98 @@ function DataGridTable() {
379
420
  cellBorder,
380
421
  loadingMode,
381
422
  isLoading,
382
- pageSize
423
+ pageSize,
424
+ columnVisibilityToggle
383
425
  } = useDataGridContext();
426
+ const { reuseColumnId, append: showColumnSettings } = getSettingsPlacement(
427
+ table,
428
+ columnVisibilityToggle
429
+ );
430
+ const headerGroups = table.getHeaderGroups();
431
+ const settingsCellStyle = {
432
+ "--size": `${SETTINGS_COLUMN_WIDTH}px`
433
+ };
384
434
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableBase, { children: [
385
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHeadRow, { headerGroup, children: headerGroup.headers.map((header) => {
386
- const { column } = header;
387
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableHeadRowCell, { header, children: [
388
- header.isPlaceholder ? null : (0, import_react_table.flexRender)(
435
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHead, { children: headerGroups.map((headerGroup, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableHeadRow, { headerGroup, children: [
436
+ headerGroup.headers.map((header) => {
437
+ const { column } = header;
438
+ const isReuseColumn = reuseColumnId != null && column.id === reuseColumnId;
439
+ const reuseToggleHere = isReuseColumn && groupIndex === headerGroups.length - 1;
440
+ const headerContent = header.isPlaceholder ? null : (0, import_react_table.flexRender)(
389
441
  header.column.columnDef.header,
390
442
  header.getContext()
391
- ),
392
- columnsResizable && column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHeadRowCellResize, { header })
393
- ] }, column.id);
394
- }) }, headerGroup.id)) }),
443
+ );
444
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
445
+ DataGridTableHeadRowCell,
446
+ {
447
+ header,
448
+ stickyRight: isReuseColumn,
449
+ children: [
450
+ reuseToggleHere ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex w-full items-center justify-center gap-1.5", children: [
451
+ headerContent,
452
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridHeaderColumnToggle, {})
453
+ ] }) : headerContent,
454
+ columnsResizable && column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHeadRowCellResize, { header })
455
+ ]
456
+ },
457
+ column.id
458
+ );
459
+ }),
460
+ showColumnSettings && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
461
+ "th",
462
+ {
463
+ className: (0, import_shared_utils.cn)(styles.headerRowCell(), STICKY_RIGHT_CELL),
464
+ style: { ...settingsCellStyle, ...stickyRightStyle(30) },
465
+ children: groupIndex === headerGroups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridHeaderColumnToggle, {}) })
466
+ }
467
+ )
468
+ ] }, headerGroup.id)) }),
395
469
  (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.jsx)(DataGridTableBodyRowSkeleton, { children: table.getVisibleFlatColumns().map((column, colIndex) => {
397
- var _a;
398
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
399
- DataGridTableBodyRowSkeletonCell,
470
+ /* @__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: [
471
+ table.getVisibleFlatColumns().map((column, colIndex) => {
472
+ var _a;
473
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
474
+ DataGridTableBodyRowSkeletonCell,
475
+ {
476
+ column,
477
+ stickyRight: reuseColumnId != null && column.id === reuseColumnId,
478
+ children: (_a = column.columnDef.meta) == null ? void 0 : _a.skeleton
479
+ },
480
+ colIndex.toString()
481
+ );
482
+ }),
483
+ showColumnSettings && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
484
+ "td",
400
485
  {
401
- column,
402
- children: (_a = column.columnDef.meta) == null ? void 0 : _a.skeleton
403
- },
404
- colIndex.toString()
405
- );
406
- }) }, rowIndex.toString())) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => {
486
+ className: (0, import_shared_utils.cn)(styles.bodyRowCell(), STICKY_RIGHT_CELL),
487
+ style: { ...settingsCellStyle, ...stickyRightStyle(10) }
488
+ }
489
+ )
490
+ ] }, rowIndex.toString())) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => {
407
491
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
408
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBodyRow, { row, children: row.getVisibleCells().map((cell) => {
409
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBodyRowCell, { cell, children: (0, import_react_table.flexRender)(
410
- cell.column.columnDef.cell,
411
- cell.getContext()
412
- ) }, cell.id);
413
- }) }, row.id),
492
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableBodyRow, { row, children: [
493
+ row.getVisibleCells().map((cell) => {
494
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
495
+ DataGridTableBodyRowCell,
496
+ {
497
+ cell,
498
+ stickyRight: reuseColumnId != null && cell.column.id === reuseColumnId,
499
+ children: (0, import_react_table.flexRender)(
500
+ cell.column.columnDef.cell,
501
+ cell.getContext()
502
+ )
503
+ },
504
+ cell.id
505
+ );
506
+ }),
507
+ showColumnSettings && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
508
+ "td",
509
+ {
510
+ className: (0, import_shared_utils.cn)(styles.bodyRowCell(), STICKY_RIGHT_CELL),
511
+ style: { ...settingsCellStyle, ...stickyRightStyle(10) }
512
+ }
513
+ )
514
+ ] }, row.id),
414
515
  row.getIsExpanded() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBodyRowExpanded, { row })
415
516
  ] }, row.id);
416
517
  }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableEmpty, {}) })
@@ -457,6 +558,21 @@ function DataGridColumnToggle({
457
558
  }) })
458
559
  ] });
459
560
  }
561
+ function DataGridHeaderColumnToggle() {
562
+ const t = (0, import_i18n2.useSafeIntl)();
563
+ const label = t.formatMessage(dataGridMessages.columns);
564
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridColumnToggle, { align: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
565
+ import_button.IconButton,
566
+ {
567
+ "aria-label": label,
568
+ tooltip: label,
569
+ variant: "ghost",
570
+ size: "sm",
571
+ className: "shrink-0",
572
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.TableHeaderColumnIcon, {})
573
+ }
574
+ ) });
575
+ }
460
576
  function DataGridTableRowSelectAll({
461
577
  size
462
578
  }) {
@@ -507,5 +623,6 @@ function DataGridTableRowSelect({
507
623
  DataGridContainer,
508
624
  DataGridTable,
509
625
  DataGridTableRowSelect,
510
- DataGridTableRowSelectAll
626
+ DataGridTableRowSelectAll,
627
+ SETTINGS_COLUMN_WIDTH
511
628
  });
package/dist/data-grid.mjs CHANGED
@@ -6,8 +6,9 @@ import {
6
6
  DataGridContainer,
7
7
  DataGridTable,
8
8
  DataGridTableRowSelect,
9
- DataGridTableRowSelectAll
10
- } from "./chunk-YJSXJPR4.mjs";
9
+ DataGridTableRowSelectAll,
10
+ SETTINGS_COLUMN_WIDTH
11
+ } from "./chunk-EVXFPN6F.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,17 @@ function DataGridTableBase({
195
198
  }
196
199
  );
197
200
  }
201
+ var STICKY_RIGHT_CELL = "sticky end-0 bg-background border-s border-border shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]";
202
+ var stickyRightStyle = (z) => ({
203
+ position: "sticky",
204
+ right: 0,
205
+ zIndex: z
206
+ });
198
207
  function DataGridTableHeadRowCell({
199
208
  children,
200
209
  header,
201
- dndRef
210
+ dndRef,
211
+ stickyRight
202
212
  }) {
203
213
  var _a;
204
214
  const { styles, columnsPinnable } = useDataGridContext();
@@ -212,13 +222,15 @@ function DataGridTableHeadRowCell({
212
222
  ref: dndRef,
213
223
  style: {
214
224
  "--size": `${header.getSize()}px`,
215
- ...columnsPinnable && isPinned && getPinningStyles(column)
225
+ ...columnsPinnable && isPinned && getPinningStyles(column),
226
+ ...stickyRight && stickyRightStyle(30)
216
227
  },
217
228
  "data-pinned": isPinned || void 0,
218
229
  "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
219
230
  className: (0, import_shared_utils.cn)(
220
231
  styles.headerRowCell(),
221
- (_a = header.column.columnDef.meta) == null ? void 0 : _a.headerClassName
232
+ (_a = header.column.columnDef.meta) == null ? void 0 : _a.headerClassName,
233
+ stickyRight && STICKY_RIGHT_CELL
222
234
  ),
223
235
  children
224
236
  },
@@ -255,8 +267,12 @@ function DataGridTableBody({
255
267
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { className: (0, import_shared_utils.cn)(styles.body({ className })), ...restProps, children });
256
268
  }
257
269
  function DataGridTableEmpty() {
258
- const { styles, table, emptyMessage } = useDataGridContext();
259
- const totalColumns = table.getVisibleLeafColumns().length;
270
+ const { styles, table, emptyMessage, columnVisibilityToggle } = useDataGridContext();
271
+ const { append: hasSettingsColumn } = getSettingsPlacement(
272
+ table,
273
+ columnVisibilityToggle
274
+ );
275
+ const totalColumns = table.getVisibleLeafColumns().length + (hasSettingsColumn ? 1 : 0);
260
276
  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
277
  }
262
278
  function DataGridTableBodyRowSkeleton({ children }) {
@@ -277,7 +293,8 @@ function DataGridTableBodyRowCell({
277
293
  children,
278
294
  cell,
279
295
  dndRef,
280
- dndStyle
296
+ dndStyle,
297
+ stickyRight
281
298
  }) {
282
299
  var _a;
283
300
  const { styles, columnsResizable, columnsDraggable, columnsPinnable } = useDataGridContext();
@@ -293,14 +310,16 @@ function DataGridTableBodyRowCell({
293
310
  style: {
294
311
  "--size": `${column.getSize()}px`,
295
312
  ...columnsPinnable && isPinned && getPinningStyles(column),
296
- ...dndStyle ? dndStyle : null
313
+ ...dndStyle ? dndStyle : null,
314
+ ...stickyRight && stickyRightStyle(10)
297
315
  },
298
316
  "data-pinned": isPinned || void 0,
299
317
  "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
300
318
  className: (0, import_shared_utils.cn)(
301
319
  styles.bodyRowCell(),
302
320
  columnsResizable && column.getCanResize() && "truncate",
303
- (_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName
321
+ (_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName,
322
+ stickyRight && STICKY_RIGHT_CELL
304
323
  ),
305
324
  children
306
325
  },
@@ -309,7 +328,8 @@ function DataGridTableBodyRowCell({
309
328
  }
310
329
  function DataGridTableBodyRowSkeletonCell({
311
330
  children,
312
- column
331
+ column,
332
+ stickyRight
313
333
  }) {
314
334
  var _a;
315
335
  const { styles, columnsResizable, columnsPinnable } = useDataGridContext();
@@ -321,14 +341,16 @@ function DataGridTableBodyRowSkeletonCell({
321
341
  {
322
342
  style: {
323
343
  "--size": `${column.getSize()}px`,
324
- ...columnsPinnable && isPinned && getPinningStyles(column)
344
+ ...columnsPinnable && isPinned && getPinningStyles(column),
345
+ ...stickyRight && stickyRightStyle(10)
325
346
  },
326
347
  "data-pinned": isPinned || void 0,
327
348
  "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
328
349
  className: (0, import_shared_utils.cn)(
329
350
  styles.bodyRowSkeletonCell(),
330
351
  columnsResizable && column.getCanResize() && "truncate",
331
- (_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName
352
+ (_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName,
353
+ stickyRight && STICKY_RIGHT_CELL
332
354
  ),
333
355
  children
334
356
  }
@@ -359,15 +381,33 @@ function DataGridTableBodyRow({
359
381
  }
360
382
  function DataGridTableBodyRowExpanded({ row }) {
361
383
  var _a, _b, _c;
362
- const { table, styles } = useDataGridContext();
363
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { className: styles.bodyRowExpanded(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: row.getVisibleCells().length, children: (_c = (_b = (_a = table.getAllColumns().find((column) => {
384
+ const { table, styles, columnVisibilityToggle } = useDataGridContext();
385
+ const { append: hasSettingsColumn } = getSettingsPlacement(
386
+ table,
387
+ columnVisibilityToggle
388
+ );
389
+ 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
390
  var _a2;
365
391
  return (_a2 = column.columnDef.meta) == null ? void 0 : _a2.expandedContent;
366
392
  })) == null ? void 0 : _a.columnDef.meta) == null ? void 0 : _b.expandedContent) == null ? void 0 : _c.call(_b, row.original) }) });
367
393
  }
394
+ var SETTINGS_COLUMN_WIDTH = 44;
395
+ function getSettingsPlacement(table, enabled) {
396
+ if (!enabled) return { append: false };
397
+ if (!table.getAllLeafColumns().some((column) => column.getCanHide())) {
398
+ return { append: false };
399
+ }
400
+ const leafColumns = table.getVisibleLeafColumns();
401
+ const lastColumn = leafColumns[leafColumns.length - 1];
402
+ if (lastColumn && lastColumn.accessorFn == null) {
403
+ return { reuseColumnId: lastColumn.id, append: false };
404
+ }
405
+ return { append: true };
406
+ }
368
407
  function DataGridTable() {
369
408
  const {
370
409
  table,
410
+ styles,
371
411
  columnsResizable,
372
412
  columnsPinnable,
373
413
  stripped,
@@ -375,38 +415,98 @@ function DataGridTable() {
375
415
  cellBorder,
376
416
  loadingMode,
377
417
  isLoading,
378
- pageSize
418
+ pageSize,
419
+ columnVisibilityToggle
379
420
  } = useDataGridContext();
421
+ const { reuseColumnId, append: showColumnSettings } = getSettingsPlacement(
422
+ table,
423
+ columnVisibilityToggle
424
+ );
425
+ const headerGroups = table.getHeaderGroups();
426
+ const settingsCellStyle = {
427
+ "--size": `${SETTINGS_COLUMN_WIDTH}px`
428
+ };
380
429
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableBase, { children: [
381
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHeadRow, { headerGroup, children: headerGroup.headers.map((header) => {
382
- const { column } = header;
383
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableHeadRowCell, { header, children: [
384
- header.isPlaceholder ? null : (0, import_react_table.flexRender)(
430
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHead, { children: headerGroups.map((headerGroup, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableHeadRow, { headerGroup, children: [
431
+ headerGroup.headers.map((header) => {
432
+ const { column } = header;
433
+ const isReuseColumn = reuseColumnId != null && column.id === reuseColumnId;
434
+ const reuseToggleHere = isReuseColumn && groupIndex === headerGroups.length - 1;
435
+ const headerContent = header.isPlaceholder ? null : (0, import_react_table.flexRender)(
385
436
  header.column.columnDef.header,
386
437
  header.getContext()
387
- ),
388
- columnsResizable && column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHeadRowCellResize, { header })
389
- ] }, column.id);
390
- }) }, headerGroup.id)) }),
438
+ );
439
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
440
+ DataGridTableHeadRowCell,
441
+ {
442
+ header,
443
+ stickyRight: isReuseColumn,
444
+ children: [
445
+ reuseToggleHere ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex w-full items-center justify-center gap-1.5", children: [
446
+ headerContent,
447
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridHeaderColumnToggle, {})
448
+ ] }) : headerContent,
449
+ columnsResizable && column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHeadRowCellResize, { header })
450
+ ]
451
+ },
452
+ column.id
453
+ );
454
+ }),
455
+ showColumnSettings && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
456
+ "th",
457
+ {
458
+ className: (0, import_shared_utils.cn)(styles.headerRowCell(), STICKY_RIGHT_CELL),
459
+ style: { ...settingsCellStyle, ...stickyRightStyle(30) },
460
+ children: groupIndex === headerGroups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridHeaderColumnToggle, {}) })
461
+ }
462
+ )
463
+ ] }, headerGroup.id)) }),
391
464
  (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.jsx)(DataGridTableBodyRowSkeleton, { children: table.getVisibleFlatColumns().map((column, colIndex) => {
393
- var _a;
394
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
395
- DataGridTableBodyRowSkeletonCell,
465
+ /* @__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: [
466
+ table.getVisibleFlatColumns().map((column, colIndex) => {
467
+ var _a;
468
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
469
+ DataGridTableBodyRowSkeletonCell,
470
+ {
471
+ column,
472
+ stickyRight: reuseColumnId != null && column.id === reuseColumnId,
473
+ children: (_a = column.columnDef.meta) == null ? void 0 : _a.skeleton
474
+ },
475
+ colIndex.toString()
476
+ );
477
+ }),
478
+ showColumnSettings && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
479
+ "td",
396
480
  {
397
- column,
398
- children: (_a = column.columnDef.meta) == null ? void 0 : _a.skeleton
399
- },
400
- colIndex.toString()
401
- );
402
- }) }, rowIndex.toString())) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => {
481
+ className: (0, import_shared_utils.cn)(styles.bodyRowCell(), STICKY_RIGHT_CELL),
482
+ style: { ...settingsCellStyle, ...stickyRightStyle(10) }
483
+ }
484
+ )
485
+ ] }, rowIndex.toString())) : table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => {
403
486
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
404
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBodyRow, { row, children: row.getVisibleCells().map((cell) => {
405
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBodyRowCell, { cell, children: (0, import_react_table.flexRender)(
406
- cell.column.columnDef.cell,
407
- cell.getContext()
408
- ) }, cell.id);
409
- }) }, row.id),
487
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DataGridTableBodyRow, { row, children: [
488
+ row.getVisibleCells().map((cell) => {
489
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
490
+ DataGridTableBodyRowCell,
491
+ {
492
+ cell,
493
+ stickyRight: reuseColumnId != null && cell.column.id === reuseColumnId,
494
+ children: (0, import_react_table.flexRender)(
495
+ cell.column.columnDef.cell,
496
+ cell.getContext()
497
+ )
498
+ },
499
+ cell.id
500
+ );
501
+ }),
502
+ showColumnSettings && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
503
+ "td",
504
+ {
505
+ className: (0, import_shared_utils.cn)(styles.bodyRowCell(), STICKY_RIGHT_CELL),
506
+ style: { ...settingsCellStyle, ...stickyRightStyle(10) }
507
+ }
508
+ )
509
+ ] }, row.id),
410
510
  row.getIsExpanded() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableBodyRowExpanded, { row })
411
511
  ] }, row.id);
412
512
  }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableEmpty, {}) })
@@ -453,6 +553,21 @@ function DataGridColumnToggle({
453
553
  }) })
454
554
  ] });
455
555
  }
556
+ function DataGridHeaderColumnToggle() {
557
+ const t = (0, import_i18n2.useSafeIntl)();
558
+ const label = t.formatMessage(dataGridMessages.columns);
559
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridColumnToggle, { align: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
560
+ import_button.IconButton,
561
+ {
562
+ "aria-label": label,
563
+ tooltip: label,
564
+ variant: "ghost",
565
+ size: "sm",
566
+ className: "shrink-0",
567
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.TableHeaderColumnIcon, {})
568
+ }
569
+ ) });
570
+ }
456
571
  function DataGridTableRowSelectAll({
457
572
  size
458
573
  }) {
package/dist/index.mjs CHANGED
@@ -6,7 +6,7 @@ import {
6
6
  DataGridTable,
7
7
  DataGridTableRowSelect,
8
8
  DataGridTableRowSelectAll
9
- } from "./chunk-YJSXJPR4.mjs";
9
+ } from "./chunk-EVXFPN6F.mjs";
10
10
  import "./chunk-M6DRKGKE.mjs";
11
11
 
12
12
  // src/index.ts
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kopexa/data-grid",
3
- "version": "18.2.0",
3
+ "version": "18.3.0",
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.2.0"
31
+ "@kopexa/theme": "18.3.0"
32
32
  },
33
33
  "dependencies": {
34
34
  "@tanstack/react-table": "^8.21.3",
35
- "@kopexa/react-utils": "18.2.0",
36
- "@kopexa/checkbox": "18.2.0",
37
- "@kopexa/icons": "18.2.0",
38
- "@kopexa/button": "18.2.0",
39
- "@kopexa/i18n": "18.2.0",
40
- "@kopexa/shared-utils": "18.2.0",
41
- "@kopexa/dropdown-menu": "18.2.0"
35
+ "@kopexa/checkbox": "18.3.0",
36
+ "@kopexa/button": "18.3.0",
37
+ "@kopexa/shared-utils": "18.3.0",
38
+ "@kopexa/i18n": "18.3.0",
39
+ "@kopexa/icons": "18.3.0",
40
+ "@kopexa/react-utils": "18.3.0",
41
+ "@kopexa/dropdown-menu": "18.3.0"
42
42
  },
43
43
  "clean-package": "../../../clean-package.config.json",
44
44
  "module": "dist/index.mjs",