@kopexa/data-grid 14.0.0 → 14.0.2

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-XYG65G3U.mjs → chunk-ZYU6VXXE.mjs} +69 -39
  2. package/dist/data-grid.d.mts +1 -0
  3. package/dist/data-grid.d.ts +1 -0
  4. package/dist/data-grid.js +67 -38
  5. package/dist/data-grid.mjs +1 -1
  6. package/dist/index.js +67 -38
  7. package/dist/index.mjs +1 -1
  8. package/package.json +5 -5
package/dist/{chunk-XYG65G3U.mjs → chunk-ZYU6VXXE.mjs} RENAMED
@@ -9,7 +9,8 @@ import {
9
9
  flexRender
10
10
  } from "@tanstack/react-table";
11
11
  import {
12
- Fragment
12
+ Fragment,
13
+ useMemo
13
14
  } from "react";
14
15
  import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
15
16
  var [DataGridProvider, useDataGridContext] = (
@@ -35,45 +36,73 @@ function DataGrid(props) {
35
36
  isLoading = false,
36
37
  pageSize = 20,
37
38
  cellBorder,
39
+ onRowClick,
38
40
  ...rest
39
41
  } = props;
40
- const styles = datagrid({
41
- border,
42
- columnsResizable,
43
- columnsDraggable,
44
- columnsPinnable,
45
- headerBackground,
46
- stripped,
47
- rowBorder,
48
- loadingMode,
49
- cellBorder,
50
- rowRounded,
51
- width,
52
- dense
53
- });
42
+ const styles = useMemo(
43
+ () => datagrid({
44
+ border,
45
+ columnsResizable,
46
+ columnsDraggable,
47
+ columnsPinnable,
48
+ headerBackground,
49
+ stripped,
50
+ rowBorder,
51
+ loadingMode,
52
+ cellBorder,
53
+ rowRounded,
54
+ width,
55
+ dense
56
+ }),
57
+ [
58
+ border,
59
+ columnsResizable,
60
+ columnsDraggable,
61
+ columnsPinnable,
62
+ headerBackground,
63
+ stripped,
64
+ rowBorder,
65
+ loadingMode,
66
+ cellBorder,
67
+ rowRounded,
68
+ width,
69
+ dense
70
+ ]
71
+ );
72
+ const providerValue = useMemo(
73
+ () => ({
74
+ table,
75
+ styles,
76
+ columnsResizable,
77
+ columnsDraggable,
78
+ columnsPinnable,
79
+ stripped,
80
+ rowBorder,
81
+ loadingMode,
82
+ emptyMessage,
83
+ isLoading,
84
+ pageSize,
85
+ onRowClick
86
+ }),
87
+ [
88
+ table,
89
+ styles,
90
+ columnsResizable,
91
+ columnsDraggable,
92
+ columnsPinnable,
93
+ stripped,
94
+ rowBorder,
95
+ loadingMode,
96
+ emptyMessage,
97
+ isLoading,
98
+ pageSize,
99
+ onRowClick
100
+ ]
101
+ );
54
102
  if (!table) {
55
103
  throw new Error('DataGrid requires a "table" prop');
56
104
  }
57
- return /* @__PURE__ */ jsx(
58
- DataGridProvider,
59
- {
60
- value: {
61
- table,
62
- styles,
63
- columnsResizable,
64
- columnsDraggable,
65
- columnsPinnable,
66
- stripped,
67
- rowBorder,
68
- loadingMode,
69
- emptyMessage,
70
- isLoading,
71
- pageSize
72
- },
73
- ...rest,
74
- children
75
- }
76
- );
105
+ return /* @__PURE__ */ jsx(DataGridProvider, { value: providerValue, ...rest, children });
77
106
  }
78
107
  function DataGridContainer({
79
108
  children,
@@ -187,13 +216,13 @@ function DataGridTableEmpty() {
187
216
  return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: totalColumns, className: styles.empty(), children: emptyMessage || "No data available." }) });
188
217
  }
189
218
  function DataGridTableBodyRowSkeleton({ children }) {
190
- const { table, styles } = useDataGridContext();
219
+ const { table, styles, onRowClick } = useDataGridContext();
191
220
  return /* @__PURE__ */ jsx(
192
221
  "tr",
193
222
  {
194
223
  className: cn(
195
224
  styles.bodyRowSkeleton,
196
- // props.onRowClick && 'cursor-pointer',
225
+ onRowClick && "cursor-pointer",
197
226
  table.options.enableRowSelection && "[&_>:first-child]:relative"
198
227
  ),
199
228
  children
@@ -265,16 +294,17 @@ function DataGridTableBodyRow({
265
294
  dndRef,
266
295
  dndStyle
267
296
  }) {
268
- const { styles, table } = useDataGridContext();
297
+ const { styles, table, onRowClick } = useDataGridContext();
269
298
  return /* @__PURE__ */ jsx(
270
299
  "tr",
271
300
  {
272
301
  ref: dndRef,
273
302
  style: { ...dndStyle ? dndStyle : null },
274
303
  "data-state": table.options.enableRowSelection && row.getIsSelected() ? "selected" : void 0,
304
+ onClick: () => onRowClick == null ? void 0 : onRowClick(row.original),
275
305
  className: cn(
276
306
  styles.bodyRow(),
277
- //props.onRowClick && 'cursor-pointer',
307
+ onRowClick && "cursor-pointer",
278
308
  table.options.enableRowSelection && "[&_>:first-child]:relative"
279
309
  ),
280
310
  children
package/dist/data-grid.d.mts CHANGED
@@ -17,6 +17,7 @@ type BaseProps<TData extends object> = {
17
17
  emptyMessage?: string;
18
18
  isLoading?: boolean;
19
19
  pageSize?: number;
20
+ onRowClick?: (row: TData) => void;
20
21
  };
21
22
  type DataGridProps<TData extends object> = BaseProps<TData> & DataGridVariants & {
22
23
  children?: ReactNode;
package/dist/data-grid.d.ts CHANGED
@@ -17,6 +17,7 @@ type BaseProps<TData extends object> = {
17
17
  emptyMessage?: string;
18
18
  isLoading?: boolean;
19
19
  pageSize?: number;
20
+ onRowClick?: (row: TData) => void;
20
21
  };
21
22
  type DataGridProps<TData extends object> = BaseProps<TData> & DataGridVariants & {
22
23
  children?: ReactNode;
package/dist/data-grid.js CHANGED
@@ -59,45 +59,73 @@ function DataGrid(props) {
59
59
  isLoading = false,
60
60
  pageSize = 20,
61
61
  cellBorder,
62
+ onRowClick,
62
63
  ...rest
63
64
  } = props;
64
- const styles = (0, import_theme.datagrid)({
65
- border,
66
- columnsResizable,
67
- columnsDraggable,
68
- columnsPinnable,
69
- headerBackground,
70
- stripped,
71
- rowBorder,
72
- loadingMode,
73
- cellBorder,
74
- rowRounded,
75
- width,
76
- dense
77
- });
65
+ const styles = (0, import_react.useMemo)(
66
+ () => (0, import_theme.datagrid)({
67
+ border,
68
+ columnsResizable,
69
+ columnsDraggable,
70
+ columnsPinnable,
71
+ headerBackground,
72
+ stripped,
73
+ rowBorder,
74
+ loadingMode,
75
+ cellBorder,
76
+ rowRounded,
77
+ width,
78
+ dense
79
+ }),
80
+ [
81
+ border,
82
+ columnsResizable,
83
+ columnsDraggable,
84
+ columnsPinnable,
85
+ headerBackground,
86
+ stripped,
87
+ rowBorder,
88
+ loadingMode,
89
+ cellBorder,
90
+ rowRounded,
91
+ width,
92
+ dense
93
+ ]
94
+ );
95
+ const providerValue = (0, import_react.useMemo)(
96
+ () => ({
97
+ table,
98
+ styles,
99
+ columnsResizable,
100
+ columnsDraggable,
101
+ columnsPinnable,
102
+ stripped,
103
+ rowBorder,
104
+ loadingMode,
105
+ emptyMessage,
106
+ isLoading,
107
+ pageSize,
108
+ onRowClick
109
+ }),
110
+ [
111
+ table,
112
+ styles,
113
+ columnsResizable,
114
+ columnsDraggable,
115
+ columnsPinnable,
116
+ stripped,
117
+ rowBorder,
118
+ loadingMode,
119
+ emptyMessage,
120
+ isLoading,
121
+ pageSize,
122
+ onRowClick
123
+ ]
124
+ );
78
125
  if (!table) {
79
126
  throw new Error('DataGrid requires a "table" prop');
80
127
  }
81
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
82
- DataGridProvider,
83
- {
84
- value: {
85
- table,
86
- styles,
87
- columnsResizable,
88
- columnsDraggable,
89
- columnsPinnable,
90
- stripped,
91
- rowBorder,
92
- loadingMode,
93
- emptyMessage,
94
- isLoading,
95
- pageSize
96
- },
97
- ...rest,
98
- children
99
- }
100
- );
128
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridProvider, { value: providerValue, ...rest, children });
101
129
  }
102
130
  function DataGridContainer({
103
131
  children,
@@ -211,13 +239,13 @@ function DataGridTableEmpty() {
211
239
  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." }) });
212
240
  }
213
241
  function DataGridTableBodyRowSkeleton({ children }) {
214
- const { table, styles } = useDataGridContext();
242
+ const { table, styles, onRowClick } = useDataGridContext();
215
243
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
216
244
  "tr",
217
245
  {
218
246
  className: (0, import_shared_utils.cn)(
219
247
  styles.bodyRowSkeleton,
220
- // props.onRowClick && 'cursor-pointer',
248
+ onRowClick && "cursor-pointer",
221
249
  table.options.enableRowSelection && "[&_>:first-child]:relative"
222
250
  ),
223
251
  children
@@ -289,16 +317,17 @@ function DataGridTableBodyRow({
289
317
  dndRef,
290
318
  dndStyle
291
319
  }) {
292
- const { styles, table } = useDataGridContext();
320
+ const { styles, table, onRowClick } = useDataGridContext();
293
321
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
294
322
  "tr",
295
323
  {
296
324
  ref: dndRef,
297
325
  style: { ...dndStyle ? dndStyle : null },
298
326
  "data-state": table.options.enableRowSelection && row.getIsSelected() ? "selected" : void 0,
327
+ onClick: () => onRowClick == null ? void 0 : onRowClick(row.original),
299
328
  className: (0, import_shared_utils.cn)(
300
329
  styles.bodyRow(),
301
- //props.onRowClick && 'cursor-pointer',
330
+ onRowClick && "cursor-pointer",
302
331
  table.options.enableRowSelection && "[&_>:first-child]:relative"
303
332
  ),
304
333
  children
package/dist/data-grid.mjs CHANGED
@@ -6,7 +6,7 @@ import {
6
6
  DataGridTable,
7
7
  DataGridTableRowSelect,
8
8
  DataGridTableRowSelectAll
9
- } from "./chunk-XYG65G3U.mjs";
9
+ } from "./chunk-ZYU6VXXE.mjs";
10
10
  export {
11
11
  DataGrid,
12
12
  DataGridContainer,
package/dist/index.js CHANGED
@@ -56,45 +56,73 @@ function DataGrid(props) {
56
56
  isLoading = false,
57
57
  pageSize = 20,
58
58
  cellBorder,
59
+ onRowClick,
59
60
  ...rest
60
61
  } = props;
61
- const styles = (0, import_theme.datagrid)({
62
- border,
63
- columnsResizable,
64
- columnsDraggable,
65
- columnsPinnable,
66
- headerBackground,
67
- stripped,
68
- rowBorder,
69
- loadingMode,
70
- cellBorder,
71
- rowRounded,
72
- width,
73
- dense
74
- });
62
+ const styles = (0, import_react.useMemo)(
63
+ () => (0, import_theme.datagrid)({
64
+ border,
65
+ columnsResizable,
66
+ columnsDraggable,
67
+ columnsPinnable,
68
+ headerBackground,
69
+ stripped,
70
+ rowBorder,
71
+ loadingMode,
72
+ cellBorder,
73
+ rowRounded,
74
+ width,
75
+ dense
76
+ }),
77
+ [
78
+ border,
79
+ columnsResizable,
80
+ columnsDraggable,
81
+ columnsPinnable,
82
+ headerBackground,
83
+ stripped,
84
+ rowBorder,
85
+ loadingMode,
86
+ cellBorder,
87
+ rowRounded,
88
+ width,
89
+ dense
90
+ ]
91
+ );
92
+ const providerValue = (0, import_react.useMemo)(
93
+ () => ({
94
+ table,
95
+ styles,
96
+ columnsResizable,
97
+ columnsDraggable,
98
+ columnsPinnable,
99
+ stripped,
100
+ rowBorder,
101
+ loadingMode,
102
+ emptyMessage,
103
+ isLoading,
104
+ pageSize,
105
+ onRowClick
106
+ }),
107
+ [
108
+ table,
109
+ styles,
110
+ columnsResizable,
111
+ columnsDraggable,
112
+ columnsPinnable,
113
+ stripped,
114
+ rowBorder,
115
+ loadingMode,
116
+ emptyMessage,
117
+ isLoading,
118
+ pageSize,
119
+ onRowClick
120
+ ]
121
+ );
75
122
  if (!table) {
76
123
  throw new Error('DataGrid requires a "table" prop');
77
124
  }
78
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
79
- DataGridProvider,
80
- {
81
- value: {
82
- table,
83
- styles,
84
- columnsResizable,
85
- columnsDraggable,
86
- columnsPinnable,
87
- stripped,
88
- rowBorder,
89
- loadingMode,
90
- emptyMessage,
91
- isLoading,
92
- pageSize
93
- },
94
- ...rest,
95
- children
96
- }
97
- );
125
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DataGridProvider, { value: providerValue, ...rest, children });
98
126
  }
99
127
  function DataGridContainer({
100
128
  children,
@@ -208,13 +236,13 @@ function DataGridTableEmpty() {
208
236
  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." }) });
209
237
  }
210
238
  function DataGridTableBodyRowSkeleton({ children }) {
211
- const { table, styles } = useDataGridContext();
239
+ const { table, styles, onRowClick } = useDataGridContext();
212
240
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
213
241
  "tr",
214
242
  {
215
243
  className: (0, import_shared_utils.cn)(
216
244
  styles.bodyRowSkeleton,
217
- // props.onRowClick && 'cursor-pointer',
245
+ onRowClick && "cursor-pointer",
218
246
  table.options.enableRowSelection && "[&_>:first-child]:relative"
219
247
  ),
220
248
  children
@@ -286,16 +314,17 @@ function DataGridTableBodyRow({
286
314
  dndRef,
287
315
  dndStyle
288
316
  }) {
289
- const { styles, table } = useDataGridContext();
317
+ const { styles, table, onRowClick } = useDataGridContext();
290
318
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
291
319
  "tr",
292
320
  {
293
321
  ref: dndRef,
294
322
  style: { ...dndStyle ? dndStyle : null },
295
323
  "data-state": table.options.enableRowSelection && row.getIsSelected() ? "selected" : void 0,
324
+ onClick: () => onRowClick == null ? void 0 : onRowClick(row.original),
296
325
  className: (0, import_shared_utils.cn)(
297
326
  styles.bodyRow(),
298
- //props.onRowClick && 'cursor-pointer',
327
+ onRowClick && "cursor-pointer",
299
328
  table.options.enableRowSelection && "[&_>:first-child]:relative"
300
329
  ),
301
330
  children
package/dist/index.mjs CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  DataGridTable,
6
6
  DataGridTableRowSelect,
7
7
  DataGridTableRowSelectAll
8
- } from "./chunk-XYG65G3U.mjs";
8
+ } from "./chunk-ZYU6VXXE.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": "14.0.0",
3
+ "version": "14.0.2",
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": "14.0.0"
31
+ "@kopexa/theme": "14.0.2"
32
32
  },
33
33
  "dependencies": {
34
34
  "@tanstack/react-table": "^8.21.3",
35
- "@kopexa/react-utils": "14.0.0",
36
- "@kopexa/shared-utils": "14.0.0",
37
- "@kopexa/checkbox": "14.0.0"
35
+ "@kopexa/react-utils": "14.0.2",
36
+ "@kopexa/shared-utils": "14.0.2",
37
+ "@kopexa/checkbox": "14.0.2"
38
38
  },
39
39
  "clean-package": "../../../clean-package.config.json",
40
40
  "module": "dist/index.mjs",