@kopexa/data-grid 17.0.2 → 17.1.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 (6) hide show
  1. package/dist/{chunk-ZYU6VXXE.mjs → chunk-2FNDG7N7.mjs} +22 -17
  2. package/dist/data-grid.js +22 -17
  3. package/dist/data-grid.mjs +1 -1
  4. package/dist/index.js +22 -17
  5. package/dist/index.mjs +1 -1
  6. package/package.json +5 -5
package/dist/{chunk-ZYU6VXXE.mjs → chunk-2FNDG7N7.mjs} RENAMED
@@ -29,7 +29,7 @@ function DataGrid(props) {
29
29
  rowBorder = datagrid.defaultVariants.rowBorder,
30
30
  dense = datagrid.defaultVariants.dense,
31
31
  rowRounded = datagrid.defaultVariants.rowRounded,
32
- headerBackground = datagrid.defaultVariants.headerBackground,
32
+ headerColor = datagrid.defaultVariants.headerColor,
33
33
  width = datagrid.defaultVariants.width,
34
34
  loadingMode,
35
35
  emptyMessage,
@@ -45,7 +45,7 @@ function DataGrid(props) {
45
45
  columnsResizable,
46
46
  columnsDraggable,
47
47
  columnsPinnable,
48
- headerBackground,
48
+ headerColor,
49
49
  stripped,
50
50
  rowBorder,
51
51
  loadingMode,
@@ -59,7 +59,7 @@ function DataGrid(props) {
59
59
  columnsResizable,
60
60
  columnsDraggable,
61
61
  columnsPinnable,
62
- headerBackground,
62
+ headerColor,
63
63
  stripped,
64
64
  rowBorder,
65
65
  loadingMode,
@@ -78,6 +78,7 @@ function DataGrid(props) {
78
78
  columnsPinnable,
79
79
  stripped,
80
80
  rowBorder,
81
+ cellBorder,
81
82
  loadingMode,
82
83
  emptyMessage,
83
84
  isLoading,
@@ -92,6 +93,7 @@ function DataGrid(props) {
92
93
  columnsPinnable,
93
94
  stripped,
94
95
  rowBorder,
96
+ cellBorder,
95
97
  loadingMode,
96
98
  emptyMessage,
97
99
  isLoading,
@@ -158,7 +160,7 @@ function DataGridTableHeadRowCell({
158
160
  dndRef
159
161
  }) {
160
162
  var _a;
161
- const { styles } = useDataGridContext();
163
+ const { styles, columnsPinnable } = useDataGridContext();
162
164
  const { column } = header;
163
165
  const isPinned = column.getIsPinned();
164
166
  const isLastLeftPinned = isPinned === "left" && column.getIsLastColumn("left");
@@ -168,7 +170,8 @@ function DataGridTableHeadRowCell({
168
170
  {
169
171
  ref: dndRef,
170
172
  style: {
171
- "--size": `${header.getSize()}px`
173
+ "--size": `${header.getSize()}px`,
174
+ ...columnsPinnable && isPinned && getPinningStyles(column)
172
175
  },
173
176
  "data-pinned": isPinned || void 0,
174
177
  "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
@@ -247,7 +250,7 @@ function DataGridTableBodyRowCell({
247
250
  ref: dndRef,
248
251
  ...columnsDraggable && !isPinned ? { cell } : {},
249
252
  style: {
250
- ...columnsPinnable && column.getCanPin() && getPinningStyles(column),
253
+ ...columnsPinnable && isPinned && getPinningStyles(column),
251
254
  ...dndStyle ? dndStyle : null
252
255
  },
253
256
  "data-pinned": isPinned || void 0,
@@ -255,11 +258,7 @@ function DataGridTableBodyRowCell({
255
258
  className: cn(
256
259
  styles.bodyRowCell(),
257
260
  columnsResizable && column.getCanResize() && "truncate",
258
- (_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName,
259
- columnsPinnable && column.getCanPin() && '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"'
260
- // column.getIndex() === 0 || column.getIndex() === row.getVisibleCells().length - 1
261
- // ? props.tableClassNames?.edgeCell
262
- // : '',
261
+ (_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName
263
262
  ),
264
263
  children
265
264
  },
@@ -272,17 +271,21 @@ function DataGridTableBodyRowSkeletonCell({
272
271
  }) {
273
272
  var _a;
274
273
  const { styles, columnsResizable, columnsPinnable } = useDataGridContext();
274
+ const isPinned = column.getIsPinned();
275
+ const isLastLeftPinned = isPinned === "left" && column.getIsLastColumn("left");
276
+ const isFirstRightPinned = isPinned === "right" && column.getIsFirstColumn("right");
275
277
  return /* @__PURE__ */ jsx(
276
278
  "td",
277
279
  {
280
+ style: {
281
+ ...columnsPinnable && isPinned && getPinningStyles(column)
282
+ },
283
+ "data-pinned": isPinned || void 0,
284
+ "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
278
285
  className: cn(
279
286
  styles.bodyRowSkeletonCell(),
280
287
  columnsResizable && column.getCanResize() && "truncate",
281
- (_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName,
282
- columnsPinnable && column.getCanPin() && '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"'
283
- // column.getIndex() === 0 || column.getIndex() === table.getVisibleFlatColumns().length - 1
284
- // ? props.tableClassNames?.edgeCell
285
- // : '',
288
+ (_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName
286
289
  ),
287
290
  children
288
291
  }
@@ -323,8 +326,10 @@ function DataGridTable() {
323
326
  const {
324
327
  table,
325
328
  columnsResizable,
329
+ columnsPinnable,
326
330
  stripped,
327
331
  rowBorder,
332
+ cellBorder,
328
333
  loadingMode,
329
334
  isLoading,
330
335
  pageSize
@@ -340,7 +345,7 @@ function DataGridTable() {
340
345
  columnsResizable && column.getCanResize() && /* @__PURE__ */ jsx(DataGridTableHeadRowCellResize, { header })
341
346
  ] }, column.id);
342
347
  }) }, headerGroup.id)) }),
343
- (stripped || !rowBorder) && /* @__PURE__ */ jsx(DataGridTableRowSpacer, {}),
348
+ (stripped || !rowBorder) && !cellBorder && !columnsPinnable && /* @__PURE__ */ jsx(DataGridTableRowSpacer, {}),
344
349
  /* @__PURE__ */ jsx(DataGridTableBody, { children: loadingMode === "skeleton" && isLoading && pageSize ? Array.from({ length: pageSize }).map((_, rowIndex) => /* @__PURE__ */ jsx(DataGridTableBodyRowSkeleton, { children: table.getVisibleFlatColumns().map((column, colIndex) => {
345
350
  var _a;
346
351
  return /* @__PURE__ */ jsx(
package/dist/data-grid.js CHANGED
@@ -52,7 +52,7 @@ function DataGrid(props) {
52
52
  rowBorder = import_theme.datagrid.defaultVariants.rowBorder,
53
53
  dense = import_theme.datagrid.defaultVariants.dense,
54
54
  rowRounded = import_theme.datagrid.defaultVariants.rowRounded,
55
- headerBackground = import_theme.datagrid.defaultVariants.headerBackground,
55
+ headerColor = import_theme.datagrid.defaultVariants.headerColor,
56
56
  width = import_theme.datagrid.defaultVariants.width,
57
57
  loadingMode,
58
58
  emptyMessage,
@@ -68,7 +68,7 @@ function DataGrid(props) {
68
68
  columnsResizable,
69
69
  columnsDraggable,
70
70
  columnsPinnable,
71
- headerBackground,
71
+ headerColor,
72
72
  stripped,
73
73
  rowBorder,
74
74
  loadingMode,
@@ -82,7 +82,7 @@ function DataGrid(props) {
82
82
  columnsResizable,
83
83
  columnsDraggable,
84
84
  columnsPinnable,
85
- headerBackground,
85
+ headerColor,
86
86
  stripped,
87
87
  rowBorder,
88
88
  loadingMode,
@@ -101,6 +101,7 @@ function DataGrid(props) {
101
101
  columnsPinnable,
102
102
  stripped,
103
103
  rowBorder,
104
+ cellBorder,
104
105
  loadingMode,
105
106
  emptyMessage,
106
107
  isLoading,
@@ -115,6 +116,7 @@ function DataGrid(props) {
115
116
  columnsPinnable,
116
117
  stripped,
117
118
  rowBorder,
119
+ cellBorder,
118
120
  loadingMode,
119
121
  emptyMessage,
120
122
  isLoading,
@@ -181,7 +183,7 @@ function DataGridTableHeadRowCell({
181
183
  dndRef
182
184
  }) {
183
185
  var _a;
184
- const { styles } = useDataGridContext();
186
+ const { styles, columnsPinnable } = useDataGridContext();
185
187
  const { column } = header;
186
188
  const isPinned = column.getIsPinned();
187
189
  const isLastLeftPinned = isPinned === "left" && column.getIsLastColumn("left");
@@ -191,7 +193,8 @@ function DataGridTableHeadRowCell({
191
193
  {
192
194
  ref: dndRef,
193
195
  style: {
194
- "--size": `${header.getSize()}px`
196
+ "--size": `${header.getSize()}px`,
197
+ ...columnsPinnable && isPinned && getPinningStyles(column)
195
198
  },
196
199
  "data-pinned": isPinned || void 0,
197
200
  "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
@@ -270,7 +273,7 @@ function DataGridTableBodyRowCell({
270
273
  ref: dndRef,
271
274
  ...columnsDraggable && !isPinned ? { cell } : {},
272
275
  style: {
273
- ...columnsPinnable && column.getCanPin() && getPinningStyles(column),
276
+ ...columnsPinnable && isPinned && getPinningStyles(column),
274
277
  ...dndStyle ? dndStyle : null
275
278
  },
276
279
  "data-pinned": isPinned || void 0,
@@ -278,11 +281,7 @@ function DataGridTableBodyRowCell({
278
281
  className: (0, import_shared_utils.cn)(
279
282
  styles.bodyRowCell(),
280
283
  columnsResizable && column.getCanResize() && "truncate",
281
- (_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName,
282
- columnsPinnable && column.getCanPin() && '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"'
283
- // column.getIndex() === 0 || column.getIndex() === row.getVisibleCells().length - 1
284
- // ? props.tableClassNames?.edgeCell
285
- // : '',
284
+ (_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName
286
285
  ),
287
286
  children
288
287
  },
@@ -295,17 +294,21 @@ function DataGridTableBodyRowSkeletonCell({
295
294
  }) {
296
295
  var _a;
297
296
  const { styles, columnsResizable, columnsPinnable } = useDataGridContext();
297
+ const isPinned = column.getIsPinned();
298
+ const isLastLeftPinned = isPinned === "left" && column.getIsLastColumn("left");
299
+ const isFirstRightPinned = isPinned === "right" && column.getIsFirstColumn("right");
298
300
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
299
301
  "td",
300
302
  {
303
+ style: {
304
+ ...columnsPinnable && isPinned && getPinningStyles(column)
305
+ },
306
+ "data-pinned": isPinned || void 0,
307
+ "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
301
308
  className: (0, import_shared_utils.cn)(
302
309
  styles.bodyRowSkeletonCell(),
303
310
  columnsResizable && column.getCanResize() && "truncate",
304
- (_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName,
305
- columnsPinnable && column.getCanPin() && '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"'
306
- // column.getIndex() === 0 || column.getIndex() === table.getVisibleFlatColumns().length - 1
307
- // ? props.tableClassNames?.edgeCell
308
- // : '',
311
+ (_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName
309
312
  ),
310
313
  children
311
314
  }
@@ -346,8 +349,10 @@ function DataGridTable() {
346
349
  const {
347
350
  table,
348
351
  columnsResizable,
352
+ columnsPinnable,
349
353
  stripped,
350
354
  rowBorder,
355
+ cellBorder,
351
356
  loadingMode,
352
357
  isLoading,
353
358
  pageSize
@@ -363,7 +368,7 @@ function DataGridTable() {
363
368
  columnsResizable && column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHeadRowCellResize, { header })
364
369
  ] }, column.id);
365
370
  }) }, headerGroup.id)) }),
366
- (stripped || !rowBorder) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableRowSpacer, {}),
371
+ (stripped || !rowBorder) && !cellBorder && !columnsPinnable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableRowSpacer, {}),
367
372
  /* @__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) => {
368
373
  var _a;
369
374
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
package/dist/data-grid.mjs CHANGED
@@ -6,7 +6,7 @@ import {
6
6
  DataGridTable,
7
7
  DataGridTableRowSelect,
8
8
  DataGridTableRowSelectAll
9
- } from "./chunk-ZYU6VXXE.mjs";
9
+ } from "./chunk-2FNDG7N7.mjs";
10
10
  export {
11
11
  DataGrid,
12
12
  DataGridContainer,
package/dist/index.js CHANGED
@@ -49,7 +49,7 @@ function DataGrid(props) {
49
49
  rowBorder = import_theme.datagrid.defaultVariants.rowBorder,
50
50
  dense = import_theme.datagrid.defaultVariants.dense,
51
51
  rowRounded = import_theme.datagrid.defaultVariants.rowRounded,
52
- headerBackground = import_theme.datagrid.defaultVariants.headerBackground,
52
+ headerColor = import_theme.datagrid.defaultVariants.headerColor,
53
53
  width = import_theme.datagrid.defaultVariants.width,
54
54
  loadingMode,
55
55
  emptyMessage,
@@ -65,7 +65,7 @@ function DataGrid(props) {
65
65
  columnsResizable,
66
66
  columnsDraggable,
67
67
  columnsPinnable,
68
- headerBackground,
68
+ headerColor,
69
69
  stripped,
70
70
  rowBorder,
71
71
  loadingMode,
@@ -79,7 +79,7 @@ function DataGrid(props) {
79
79
  columnsResizable,
80
80
  columnsDraggable,
81
81
  columnsPinnable,
82
- headerBackground,
82
+ headerColor,
83
83
  stripped,
84
84
  rowBorder,
85
85
  loadingMode,
@@ -98,6 +98,7 @@ function DataGrid(props) {
98
98
  columnsPinnable,
99
99
  stripped,
100
100
  rowBorder,
101
+ cellBorder,
101
102
  loadingMode,
102
103
  emptyMessage,
103
104
  isLoading,
@@ -112,6 +113,7 @@ function DataGrid(props) {
112
113
  columnsPinnable,
113
114
  stripped,
114
115
  rowBorder,
116
+ cellBorder,
115
117
  loadingMode,
116
118
  emptyMessage,
117
119
  isLoading,
@@ -178,7 +180,7 @@ function DataGridTableHeadRowCell({
178
180
  dndRef
179
181
  }) {
180
182
  var _a;
181
- const { styles } = useDataGridContext();
183
+ const { styles, columnsPinnable } = useDataGridContext();
182
184
  const { column } = header;
183
185
  const isPinned = column.getIsPinned();
184
186
  const isLastLeftPinned = isPinned === "left" && column.getIsLastColumn("left");
@@ -188,7 +190,8 @@ function DataGridTableHeadRowCell({
188
190
  {
189
191
  ref: dndRef,
190
192
  style: {
191
- "--size": `${header.getSize()}px`
193
+ "--size": `${header.getSize()}px`,
194
+ ...columnsPinnable && isPinned && getPinningStyles(column)
192
195
  },
193
196
  "data-pinned": isPinned || void 0,
194
197
  "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
@@ -267,7 +270,7 @@ function DataGridTableBodyRowCell({
267
270
  ref: dndRef,
268
271
  ...columnsDraggable && !isPinned ? { cell } : {},
269
272
  style: {
270
- ...columnsPinnable && column.getCanPin() && getPinningStyles(column),
273
+ ...columnsPinnable && isPinned && getPinningStyles(column),
271
274
  ...dndStyle ? dndStyle : null
272
275
  },
273
276
  "data-pinned": isPinned || void 0,
@@ -275,11 +278,7 @@ function DataGridTableBodyRowCell({
275
278
  className: (0, import_shared_utils.cn)(
276
279
  styles.bodyRowCell(),
277
280
  columnsResizable && column.getCanResize() && "truncate",
278
- (_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName,
279
- columnsPinnable && column.getCanPin() && '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"'
280
- // column.getIndex() === 0 || column.getIndex() === row.getVisibleCells().length - 1
281
- // ? props.tableClassNames?.edgeCell
282
- // : '',
281
+ (_a = cell.column.columnDef.meta) == null ? void 0 : _a.cellClassName
283
282
  ),
284
283
  children
285
284
  },
@@ -292,17 +291,21 @@ function DataGridTableBodyRowSkeletonCell({
292
291
  }) {
293
292
  var _a;
294
293
  const { styles, columnsResizable, columnsPinnable } = useDataGridContext();
294
+ const isPinned = column.getIsPinned();
295
+ const isLastLeftPinned = isPinned === "left" && column.getIsLastColumn("left");
296
+ const isFirstRightPinned = isPinned === "right" && column.getIsFirstColumn("right");
295
297
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
296
298
  "td",
297
299
  {
300
+ style: {
301
+ ...columnsPinnable && isPinned && getPinningStyles(column)
302
+ },
303
+ "data-pinned": isPinned || void 0,
304
+ "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : void 0,
298
305
  className: (0, import_shared_utils.cn)(
299
306
  styles.bodyRowSkeletonCell(),
300
307
  columnsResizable && column.getCanResize() && "truncate",
301
- (_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName,
302
- columnsPinnable && column.getCanPin() && '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"'
303
- // column.getIndex() === 0 || column.getIndex() === table.getVisibleFlatColumns().length - 1
304
- // ? props.tableClassNames?.edgeCell
305
- // : '',
308
+ (_a = column.columnDef.meta) == null ? void 0 : _a.cellClassName
306
309
  ),
307
310
  children
308
311
  }
@@ -343,8 +346,10 @@ function DataGridTable() {
343
346
  const {
344
347
  table,
345
348
  columnsResizable,
349
+ columnsPinnable,
346
350
  stripped,
347
351
  rowBorder,
352
+ cellBorder,
348
353
  loadingMode,
349
354
  isLoading,
350
355
  pageSize
@@ -360,7 +365,7 @@ function DataGridTable() {
360
365
  columnsResizable && column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableHeadRowCellResize, { header })
361
366
  ] }, column.id);
362
367
  }) }, headerGroup.id)) }),
363
- (stripped || !rowBorder) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableRowSpacer, {}),
368
+ (stripped || !rowBorder) && !cellBorder && !columnsPinnable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridTableRowSpacer, {}),
364
369
  /* @__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) => {
365
370
  var _a;
366
371
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
package/dist/index.mjs CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  DataGridTable,
6
6
  DataGridTableRowSelect,
7
7
  DataGridTableRowSelectAll
8
- } from "./chunk-ZYU6VXXE.mjs";
8
+ } from "./chunk-2FNDG7N7.mjs";
9
9
 
10
10
  // src/index.ts
11
11
  var DataGrid2 = Object.assign(DataGrid, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kopexa/data-grid",
3
- "version": "17.0.2",
3
+ "version": "17.1.0",
4
4
  "description": "A DataGrid Component",
5
5
  "keywords": [
6
6
  "data-grid"
@@ -28,13 +28,13 @@
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": "17.0.2"
31
+ "@kopexa/theme": "17.2.0"
32
32
  },
33
33
  "dependencies": {
34
34
  "@tanstack/react-table": "^8.21.3",
35
- "@kopexa/react-utils": "17.0.2",
36
- "@kopexa/shared-utils": "17.0.2",
37
- "@kopexa/checkbox": "17.0.2"
35
+ "@kopexa/react-utils": "17.0.6",
36
+ "@kopexa/shared-utils": "17.0.6",
37
+ "@kopexa/checkbox": "17.0.6"
38
38
  },
39
39
  "clean-package": "../../../clean-package.config.json",
40
40
  "module": "dist/index.mjs",