@mkt-loitd/react-table-grid-custom 1.3.7 → 1.3.9

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 (5) hide show
  1. package/dist/index.d.mts +26 -44
  2. package/dist/index.d.ts +26 -44
  3. package/dist/index.js +21 -121
  4. package/dist/index.mjs +24 -131
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -1,19 +1,10 @@
1
- import { Dispatch, SetStateAction, Key, ReactNode, MutableRefObject, JSX, FC } from 'react';
2
- import { ColumnOrColumnGroup, DataGridProps, DataGridHandle } from 'react-data-grid';
1
+ import { Dispatch, SetStateAction, Key, ReactNode, FC } from 'react';
2
+ import { ColumnOrColumnGroup, SortColumn } from 'react-data-grid';
3
3
  export { Column, ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
4
- import { PaginationRootProps } from '@mantine/core';
4
+ import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
  import { UseMutateFunction } from '@tanstack/react-query';
6
6
 
7
7
  type TColumnsTable<T = unknown, SR = unknown> = readonly ColumnOrColumnGroup<NoInfer<T>, NoInfer<SR>>[];
8
- interface IPaginationParams$1 {
9
- pageSize?: number;
10
- page?: number;
11
- }
12
- interface IObjectDynamic {
13
- [key: string]: any;
14
- }
15
- interface ISetConfigPagination$1 extends IPaginationParams$1, IObjectDynamic {
16
- }
17
8
  interface useShowHideColumnParameter<T, SR = unknown> {
18
9
  nameLocal?: string;
19
10
  /** nếu đầu vào là columns: Functions() thì nên dùng useMemo thì sẽ tối ưu hơn */
@@ -33,42 +24,33 @@ interface useShowHideColumnReturn<T, SR> {
33
24
 
34
25
  declare const useShowHideColumn: <T, SR = unknown>({ nameLocal, columns, ignoreColumns }: useShowHideColumnParameter<T, SR>) => useShowHideColumnReturn<T, SR>;
35
26
 
36
- interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key> extends Omit<DataGridProps<T, SR, K>, 'rows' | 'rowKeyGetter' | 'renderers' | 'children'> {
37
- classNameWapperTable?: string;
38
- classNamePaginationTable?: string;
39
- hiddenPagination?: boolean;
40
- hiddenSTT?: boolean;
27
+ interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key> {
28
+ /** Data */
29
+ data: readonly T[];
30
+ columns: readonly ColumnOrColumnGroup<T, SR>[];
31
+ /** Pagination display */
41
32
  page?: number;
42
33
  pageSize?: number;
43
- total?: number;
44
- data?: T[];
45
- onChange?: Pick<PaginationRootProps, 'onChange'>['onChange'];
46
- setConfigPagination?: Dispatch<SetStateAction<ISetConfigPagination$1>>;
47
- rowKeyGetter?: string | ((row: T) => K);
48
- hiddenPaginationText?: boolean;
49
- paginationText?: (obj: {
50
- page?: number;
51
- pageSize?: number;
52
- total?: number;
53
- }) => ReactNode;
54
- listPageSize?: string[];
34
+ hiddenSTT?: boolean;
35
+ /** Selection */
36
+ enableSelectRow?: boolean;
37
+ selectedRows?: ReadonlySet<K>;
38
+ onSelectedRowsChange?: (rows: ReadonlySet<K>) => void;
39
+ /** Sorting */
40
+ sortColumns?: readonly SortColumn[];
41
+ onSortColumnsChange?: (sortColumns: readonly SortColumn[]) => void;
42
+ /** Row key */
43
+ rowKeyGetter?: keyof T | ((row: T) => K);
44
+ /** UI */
45
+ classNameWapperTable?: string;
55
46
  fetching?: boolean;
56
- TableLogo?: string;
47
+ /** Events */
48
+ onRowClick?: (row: T, rowIdx: number) => void;
49
+ onRowDoubleClick?: (row: T, rowIdx: number) => void;
57
50
  }
58
- interface refTablePaginationClient extends Required<IPaginationParams> {
59
- setConfigSearch: Dispatch<SetStateAction<ISetConfigPagination$1>>;
60
- resetPagition: (conditional?: boolean) => void;
61
- }
62
-
63
- declare const ReactTableGridCustom: <T, SR = unknown, K extends Key = Key>(props: IReactTableGridCustom<T, SR, K> & React.RefAttributes<DataGridHandle>) => React.ReactElement;
64
51
 
65
- type ReactTableGridCustomPaginationClientComponent = <T, SR = unknown, K extends Key = Key>(props: ReactTableGridCustomPaginationClientProps<T, SR, K>) => JSX.Element;
66
- interface ReactTableGridCustomPaginationClientProps<T = unknown, SR = unknown, K extends Key = Key> extends IReactTableGridCustom<T, SR, K> {
67
- initPage?: number;
68
- initPageSize?: number;
69
- refTable?: MutableRefObject<refTablePaginationClient | undefined>;
70
- }
71
- declare const ReactTableGridCustomPaginationClient: ReactTableGridCustomPaginationClientComponent;
52
+ declare const ReactTableGridCustomInner: <T, SR = unknown, K extends Key = Key>(props: IReactTableGridCustom<T, SR, K>) => react_jsx_runtime.JSX.Element;
53
+ declare const ReactTableGridCustom: typeof ReactTableGridCustomInner;
72
54
 
73
55
  interface ContextMenuProps {
74
56
  selector: string;
@@ -205,4 +187,4 @@ interface IPaginationParams {
205
187
  }
206
188
  type Maybe<T> = T | undefined | null;
207
189
 
208
- export { type IPaginationParams, type IReactTableGridCustom, type Maybe, ReactTableGridCustom, ReactTableGridCustomPaginationClient, type TColumnsTable, TableStyleContextMenuWapper, type TableStyleWapperProps, useShowHideColumn };
190
+ export { type IPaginationParams, type IReactTableGridCustom, type Maybe, ReactTableGridCustom, type TColumnsTable, TableStyleContextMenuWapper, type TableStyleWapperProps, useShowHideColumn };
package/dist/index.d.ts CHANGED
@@ -1,19 +1,10 @@
1
- import { Dispatch, SetStateAction, Key, ReactNode, MutableRefObject, JSX, FC } from 'react';
2
- import { ColumnOrColumnGroup, DataGridProps, DataGridHandle } from 'react-data-grid';
1
+ import { Dispatch, SetStateAction, Key, ReactNode, FC } from 'react';
2
+ import { ColumnOrColumnGroup, SortColumn } from 'react-data-grid';
3
3
  export { Column, ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
4
- import { PaginationRootProps } from '@mantine/core';
4
+ import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
  import { UseMutateFunction } from '@tanstack/react-query';
6
6
 
7
7
  type TColumnsTable<T = unknown, SR = unknown> = readonly ColumnOrColumnGroup<NoInfer<T>, NoInfer<SR>>[];
8
- interface IPaginationParams$1 {
9
- pageSize?: number;
10
- page?: number;
11
- }
12
- interface IObjectDynamic {
13
- [key: string]: any;
14
- }
15
- interface ISetConfigPagination$1 extends IPaginationParams$1, IObjectDynamic {
16
- }
17
8
  interface useShowHideColumnParameter<T, SR = unknown> {
18
9
  nameLocal?: string;
19
10
  /** nếu đầu vào là columns: Functions() thì nên dùng useMemo thì sẽ tối ưu hơn */
@@ -33,42 +24,33 @@ interface useShowHideColumnReturn<T, SR> {
33
24
 
34
25
  declare const useShowHideColumn: <T, SR = unknown>({ nameLocal, columns, ignoreColumns }: useShowHideColumnParameter<T, SR>) => useShowHideColumnReturn<T, SR>;
35
26
 
36
- interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key> extends Omit<DataGridProps<T, SR, K>, 'rows' | 'rowKeyGetter' | 'renderers' | 'children'> {
37
- classNameWapperTable?: string;
38
- classNamePaginationTable?: string;
39
- hiddenPagination?: boolean;
40
- hiddenSTT?: boolean;
27
+ interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key> {
28
+ /** Data */
29
+ data: readonly T[];
30
+ columns: readonly ColumnOrColumnGroup<T, SR>[];
31
+ /** Pagination display */
41
32
  page?: number;
42
33
  pageSize?: number;
43
- total?: number;
44
- data?: T[];
45
- onChange?: Pick<PaginationRootProps, 'onChange'>['onChange'];
46
- setConfigPagination?: Dispatch<SetStateAction<ISetConfigPagination$1>>;
47
- rowKeyGetter?: string | ((row: T) => K);
48
- hiddenPaginationText?: boolean;
49
- paginationText?: (obj: {
50
- page?: number;
51
- pageSize?: number;
52
- total?: number;
53
- }) => ReactNode;
54
- listPageSize?: string[];
34
+ hiddenSTT?: boolean;
35
+ /** Selection */
36
+ enableSelectRow?: boolean;
37
+ selectedRows?: ReadonlySet<K>;
38
+ onSelectedRowsChange?: (rows: ReadonlySet<K>) => void;
39
+ /** Sorting */
40
+ sortColumns?: readonly SortColumn[];
41
+ onSortColumnsChange?: (sortColumns: readonly SortColumn[]) => void;
42
+ /** Row key */
43
+ rowKeyGetter?: keyof T | ((row: T) => K);
44
+ /** UI */
45
+ classNameWapperTable?: string;
55
46
  fetching?: boolean;
56
- TableLogo?: string;
47
+ /** Events */
48
+ onRowClick?: (row: T, rowIdx: number) => void;
49
+ onRowDoubleClick?: (row: T, rowIdx: number) => void;
57
50
  }
58
- interface refTablePaginationClient extends Required<IPaginationParams> {
59
- setConfigSearch: Dispatch<SetStateAction<ISetConfigPagination$1>>;
60
- resetPagition: (conditional?: boolean) => void;
61
- }
62
-
63
- declare const ReactTableGridCustom: <T, SR = unknown, K extends Key = Key>(props: IReactTableGridCustom<T, SR, K> & React.RefAttributes<DataGridHandle>) => React.ReactElement;
64
51
 
65
- type ReactTableGridCustomPaginationClientComponent = <T, SR = unknown, K extends Key = Key>(props: ReactTableGridCustomPaginationClientProps<T, SR, K>) => JSX.Element;
66
- interface ReactTableGridCustomPaginationClientProps<T = unknown, SR = unknown, K extends Key = Key> extends IReactTableGridCustom<T, SR, K> {
67
- initPage?: number;
68
- initPageSize?: number;
69
- refTable?: MutableRefObject<refTablePaginationClient | undefined>;
70
- }
71
- declare const ReactTableGridCustomPaginationClient: ReactTableGridCustomPaginationClientComponent;
52
+ declare const ReactTableGridCustomInner: <T, SR = unknown, K extends Key = Key>(props: IReactTableGridCustom<T, SR, K>) => react_jsx_runtime.JSX.Element;
53
+ declare const ReactTableGridCustom: typeof ReactTableGridCustomInner;
72
54
 
73
55
  interface ContextMenuProps {
74
56
  selector: string;
@@ -205,4 +187,4 @@ interface IPaginationParams {
205
187
  }
206
188
  type Maybe<T> = T | undefined | null;
207
189
 
208
- export { type IPaginationParams, type IReactTableGridCustom, type Maybe, ReactTableGridCustom, ReactTableGridCustomPaginationClient, type TColumnsTable, TableStyleContextMenuWapper, type TableStyleWapperProps, useShowHideColumn };
190
+ export { type IPaginationParams, type IReactTableGridCustom, type Maybe, ReactTableGridCustom, type TColumnsTable, TableStyleContextMenuWapper, type TableStyleWapperProps, useShowHideColumn };
package/dist/index.js CHANGED
@@ -31,7 +31,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
31
31
  var index_exports = {};
32
32
  __export(index_exports, {
33
33
  ReactTableGridCustom: () => ReactTableGridCustom,
34
- ReactTableGridCustomPaginationClient: () => ReactTableGridCustomPaginationClient,
35
34
  TableStyleContextMenuWapper: () => TableStyleContextMenuWapper,
36
35
  useShowHideColumn: () => useShowHideColumn
37
36
  });
@@ -276,30 +275,27 @@ var RenderSortStatus_default = RenderSortStatus;
276
275
 
277
276
  // src/component/ui/Table/ReactTableGridCustom.tsx
278
277
  var import_jsx_runtime3 = require("react/jsx-runtime");
279
- var ReactTableGridCustomInner = (props, ref) => {
278
+ var ReactTableGridCustomInner = (props) => {
280
279
  const {
281
280
  classNameWapperTable,
282
281
  hiddenSTT,
283
- data = [],
282
+ data,
284
283
  page,
285
284
  pageSize,
286
285
  columns,
287
286
  rowKeyGetter = "uid",
287
+ enableSelectRow,
288
288
  selectedRows,
289
+ onSelectedRowsChange,
290
+ sortColumns,
291
+ onSortColumnsChange,
289
292
  fetching,
290
- // ❌ loại bỏ để tránh warning
291
- children,
292
- renderers,
293
- ...restProps
293
+ onRowClick,
294
+ onRowDoubleClick
294
295
  } = props;
295
- const [isLoading, setIsLoading] = (0, import_react2.useState)(true);
296
- const [sortColumns, setSortColumns] = (0, import_react2.useState)([]);
297
- const isSelectRow = selectedRows !== void 0;
296
+ const isSelectRow = enableSelectRow && selectedRows !== void 0;
298
297
  const newColumns = (0, import_react2.useMemo)(() => {
299
298
  let cols = [...columns];
300
- cols = cols.map(
301
- (col) => "key" in col ? { ...col, width: 200, maxWidth: void 0 } : col
302
- );
303
299
  if (isSelectRow) {
304
300
  cols.unshift(import_react_data_grid.SelectColumn);
305
301
  }
@@ -322,19 +318,6 @@ var ReactTableGridCustomInner = (props, ref) => {
322
318
  },
323
319
  [rowKeyGetter]
324
320
  );
325
- const sortedRows = (0, import_react2.useMemo)(() => {
326
- if (!sortColumns.length) return data;
327
- const { columnKey, direction } = sortColumns[0];
328
- if (!direction) return data;
329
- return (0, import_lodash3.orderBy)(
330
- data,
331
- [String(columnKey)],
332
- [direction === "ASC" ? "asc" : "desc"]
333
- );
334
- }, [data, sortColumns]);
335
- (0, import_react2.useEffect)(() => {
336
- setIsLoading(false);
337
- }, []);
338
321
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
339
322
  "div",
340
323
  {
@@ -346,13 +329,15 @@ var ReactTableGridCustomInner = (props, ref) => {
346
329
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
347
330
  import_react_data_grid.DataGrid,
348
331
  {
349
- ref,
350
- rows: sortedRows,
332
+ rows: data,
351
333
  columns: newColumns,
352
334
  selectedRows,
335
+ onSelectedRowsChange,
353
336
  rowKeyGetter: isSelectRow ? customRowKeyGetter : void 0,
354
337
  sortColumns,
355
- onSortColumnsChange: setSortColumns,
338
+ onSortColumnsChange,
339
+ onCellClick: ({ row, rowIdx }) => onRowClick == null ? void 0 : onRowClick(row, rowIdx),
340
+ onCellDoubleClick: ({ row, rowIdx }) => onRowDoubleClick == null ? void 0 : onRowDoubleClick(row, rowIdx),
356
341
  renderers: {
357
342
  renderSortStatus: (props2) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RenderSortStatus_default, { ...props2 }),
358
343
  renderCheckbox({ onChange, checked, ...props2 }) {
@@ -368,105 +353,21 @@ var ReactTableGridCustomInner = (props, ref) => {
368
353
  }
369
354
  );
370
355
  }
371
- },
372
- ...restProps
356
+ }
373
357
  }
374
358
  ),
375
- (fetching || isLoading) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoadingIcon, { isSpin: true }) })
359
+ fetching && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoadingIcon, { isSpin: true }) })
376
360
  ]
377
361
  }
378
362
  );
379
363
  };
380
364
  var ReactTableGridCustom = (0, import_react2.memo)(
381
- (0, import_react2.forwardRef)(ReactTableGridCustomInner)
365
+ ReactTableGridCustomInner
382
366
  );
383
367
 
384
- // src/component/ui/Table/ReactTableGridCustomPaginationClient.tsx
385
- var import_react4 = require("react");
386
-
387
- // src/hooks/useDataPagingClient.ts
368
+ // src/component/ui/Table/TableStyleContextWapper.tsx
388
369
  var import_react3 = require("react");
389
- var useDataPagingClient = ({ data = [], page, pageSize }) => {
390
- const newData = (0, import_react3.useMemo)(() => {
391
- if (page && pageSize) {
392
- const startIndex = (page - 1) * pageSize;
393
- return data.slice(startIndex, startIndex + pageSize);
394
- }
395
- return data;
396
- }, [data, page, pageSize]);
397
- return newData;
398
- };
399
- var useDataPagingClient_default = useDataPagingClient;
400
-
401
- // src/component/ui/Table/ReactTableGridCustomPaginationClient.tsx
402
370
  var import_jsx_runtime4 = require("react/jsx-runtime");
403
- var ReactTableGridCustomPaginationClientInner = ({
404
- data,
405
- initPage = 1,
406
- initPageSize = 200,
407
- refTable,
408
- ...spread
409
- }) => {
410
- const [configSearch, setConfigSearch] = (0, import_react4.useState)({
411
- page: initPage,
412
- pageSize: initPageSize
413
- });
414
- const newDataAccount = useDataPagingClient_default({
415
- data,
416
- page: configSearch == null ? void 0 : configSearch.page,
417
- pageSize: configSearch == null ? void 0 : configSearch.pageSize
418
- });
419
- const resetPage = (0, import_react4.useCallback)(() => {
420
- setConfigSearch((prev) => ({
421
- ...prev,
422
- page: 1
423
- }));
424
- }, []);
425
- (0, import_react4.useImperativeHandle)(
426
- refTable,
427
- () => {
428
- var _a, _b;
429
- return {
430
- setConfigSearch,
431
- page: (_a = configSearch == null ? void 0 : configSearch.page) != null ? _a : initPage,
432
- pageSize: (_b = configSearch == null ? void 0 : configSearch.pageSize) != null ? _b : initPageSize,
433
- resetPagition: (conditional = true) => {
434
- if (conditional && (configSearch == null ? void 0 : configSearch.page) !== 1) {
435
- resetPage();
436
- } else {
437
- resetPage();
438
- }
439
- }
440
- };
441
- },
442
- [
443
- setConfigSearch,
444
- configSearch == null ? void 0 : configSearch.page,
445
- configSearch == null ? void 0 : configSearch.pageSize,
446
- initPage,
447
- initPageSize,
448
- resetPage
449
- ]
450
- );
451
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
452
- ReactTableGridCustom,
453
- {
454
- data: newDataAccount,
455
- total: (data == null ? void 0 : data.length) || 0,
456
- page: configSearch == null ? void 0 : configSearch.page,
457
- pageSize: configSearch == null ? void 0 : configSearch.pageSize,
458
- setConfigPagination: setConfigSearch,
459
- ...spread
460
- }
461
- );
462
- };
463
- var ReactTableGridCustomPaginationClient = (0, import_react4.memo)(
464
- ReactTableGridCustomPaginationClientInner
465
- );
466
-
467
- // src/component/ui/Table/TableStyleContextWapper.tsx
468
- var import_react5 = require("react");
469
- var import_jsx_runtime5 = require("react/jsx-runtime");
470
371
  var isClient = typeof window !== "undefined";
471
372
  var TableStyleContextWapper = ({
472
373
  children,
@@ -476,10 +377,10 @@ var TableStyleContextWapper = ({
476
377
  idWapper: externalId
477
378
  }) => {
478
379
  if (!isClient) {
479
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children });
380
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
480
381
  }
481
382
  const idWapper = externalId != null ? externalId : "12";
482
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
383
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
483
384
  "div",
484
385
  {
485
386
  id: `wapper_menu_context-${idWapper}`,
@@ -488,7 +389,7 @@ var TableStyleContextWapper = ({
488
389
  }
489
390
  );
490
391
  };
491
- var TableStyleContextMenuWapper = (0, import_react5.memo)(
392
+ var TableStyleContextMenuWapper = (0, import_react3.memo)(
492
393
  TableStyleContextWapper
493
394
  );
494
395
  TableStyleContextMenuWapper.getIdFromOutside = (externalId) => {
@@ -497,7 +398,6 @@ TableStyleContextMenuWapper.getIdFromOutside = (externalId) => {
497
398
  // Annotate the CommonJS export names for ESM import in node:
498
399
  0 && (module.exports = {
499
400
  ReactTableGridCustom,
500
- ReactTableGridCustomPaginationClient,
501
401
  TableStyleContextMenuWapper,
502
402
  useShowHideColumn
503
403
  });
package/dist/index.mjs CHANGED
@@ -162,14 +162,11 @@ var useShowHideColumn = ({
162
162
 
163
163
  // src/component/ui/Table/ReactTableGridCustom.tsx
164
164
  import { Checkbox } from "@mantine/core";
165
- import { get, orderBy } from "lodash";
165
+ import { get } from "lodash";
166
166
  import {
167
167
  memo,
168
- forwardRef,
169
168
  useCallback as useCallback2,
170
- useEffect,
171
- useMemo as useMemo2,
172
- useState as useState2
169
+ useMemo as useMemo2
173
170
  } from "react";
174
171
  import {
175
172
  DataGrid,
@@ -247,30 +244,27 @@ var RenderSortStatus_default = RenderSortStatus;
247
244
 
248
245
  // src/component/ui/Table/ReactTableGridCustom.tsx
249
246
  import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
250
- var ReactTableGridCustomInner = (props, ref) => {
247
+ var ReactTableGridCustomInner = (props) => {
251
248
  const {
252
249
  classNameWapperTable,
253
250
  hiddenSTT,
254
- data = [],
251
+ data,
255
252
  page,
256
253
  pageSize,
257
254
  columns,
258
255
  rowKeyGetter = "uid",
256
+ enableSelectRow,
259
257
  selectedRows,
258
+ onSelectedRowsChange,
259
+ sortColumns,
260
+ onSortColumnsChange,
260
261
  fetching,
261
- // ❌ loại bỏ để tránh warning
262
- children,
263
- renderers,
264
- ...restProps
262
+ onRowClick,
263
+ onRowDoubleClick
265
264
  } = props;
266
- const [isLoading, setIsLoading] = useState2(true);
267
- const [sortColumns, setSortColumns] = useState2([]);
268
- const isSelectRow = selectedRows !== void 0;
265
+ const isSelectRow = enableSelectRow && selectedRows !== void 0;
269
266
  const newColumns = useMemo2(() => {
270
267
  let cols = [...columns];
271
- cols = cols.map(
272
- (col) => "key" in col ? { ...col, width: 200, maxWidth: void 0 } : col
273
- );
274
268
  if (isSelectRow) {
275
269
  cols.unshift(SelectColumn);
276
270
  }
@@ -293,19 +287,6 @@ var ReactTableGridCustomInner = (props, ref) => {
293
287
  },
294
288
  [rowKeyGetter]
295
289
  );
296
- const sortedRows = useMemo2(() => {
297
- if (!sortColumns.length) return data;
298
- const { columnKey, direction } = sortColumns[0];
299
- if (!direction) return data;
300
- return orderBy(
301
- data,
302
- [String(columnKey)],
303
- [direction === "ASC" ? "asc" : "desc"]
304
- );
305
- }, [data, sortColumns]);
306
- useEffect(() => {
307
- setIsLoading(false);
308
- }, []);
309
290
  return /* @__PURE__ */ jsxs2(
310
291
  "div",
311
292
  {
@@ -317,13 +298,15 @@ var ReactTableGridCustomInner = (props, ref) => {
317
298
  /* @__PURE__ */ jsx3(
318
299
  DataGrid,
319
300
  {
320
- ref,
321
- rows: sortedRows,
301
+ rows: data,
322
302
  columns: newColumns,
323
303
  selectedRows,
304
+ onSelectedRowsChange,
324
305
  rowKeyGetter: isSelectRow ? customRowKeyGetter : void 0,
325
306
  sortColumns,
326
- onSortColumnsChange: setSortColumns,
307
+ onSortColumnsChange,
308
+ onCellClick: ({ row, rowIdx }) => onRowClick == null ? void 0 : onRowClick(row, rowIdx),
309
+ onCellDoubleClick: ({ row, rowIdx }) => onRowDoubleClick == null ? void 0 : onRowDoubleClick(row, rowIdx),
327
310
  renderers: {
328
311
  renderSortStatus: (props2) => /* @__PURE__ */ jsx3(RenderSortStatus_default, { ...props2 }),
329
312
  renderCheckbox({ onChange, checked, ...props2 }) {
@@ -339,110 +322,21 @@ var ReactTableGridCustomInner = (props, ref) => {
339
322
  }
340
323
  );
341
324
  }
342
- },
343
- ...restProps
325
+ }
344
326
  }
345
327
  ),
346
- (fetching || isLoading) && /* @__PURE__ */ jsx3("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx3(LoadingIcon, { isSpin: true }) })
328
+ fetching && /* @__PURE__ */ jsx3("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx3(LoadingIcon, { isSpin: true }) })
347
329
  ]
348
330
  }
349
331
  );
350
332
  };
351
333
  var ReactTableGridCustom = memo(
352
- forwardRef(ReactTableGridCustomInner)
353
- );
354
-
355
- // src/component/ui/Table/ReactTableGridCustomPaginationClient.tsx
356
- import {
357
- memo as memo2,
358
- useCallback as useCallback3,
359
- useImperativeHandle,
360
- useState as useState3
361
- } from "react";
362
-
363
- // src/hooks/useDataPagingClient.ts
364
- import { useMemo as useMemo3 } from "react";
365
- var useDataPagingClient = ({ data = [], page, pageSize }) => {
366
- const newData = useMemo3(() => {
367
- if (page && pageSize) {
368
- const startIndex = (page - 1) * pageSize;
369
- return data.slice(startIndex, startIndex + pageSize);
370
- }
371
- return data;
372
- }, [data, page, pageSize]);
373
- return newData;
374
- };
375
- var useDataPagingClient_default = useDataPagingClient;
376
-
377
- // src/component/ui/Table/ReactTableGridCustomPaginationClient.tsx
378
- import { jsx as jsx4 } from "react/jsx-runtime";
379
- var ReactTableGridCustomPaginationClientInner = ({
380
- data,
381
- initPage = 1,
382
- initPageSize = 200,
383
- refTable,
384
- ...spread
385
- }) => {
386
- const [configSearch, setConfigSearch] = useState3({
387
- page: initPage,
388
- pageSize: initPageSize
389
- });
390
- const newDataAccount = useDataPagingClient_default({
391
- data,
392
- page: configSearch == null ? void 0 : configSearch.page,
393
- pageSize: configSearch == null ? void 0 : configSearch.pageSize
394
- });
395
- const resetPage = useCallback3(() => {
396
- setConfigSearch((prev) => ({
397
- ...prev,
398
- page: 1
399
- }));
400
- }, []);
401
- useImperativeHandle(
402
- refTable,
403
- () => {
404
- var _a, _b;
405
- return {
406
- setConfigSearch,
407
- page: (_a = configSearch == null ? void 0 : configSearch.page) != null ? _a : initPage,
408
- pageSize: (_b = configSearch == null ? void 0 : configSearch.pageSize) != null ? _b : initPageSize,
409
- resetPagition: (conditional = true) => {
410
- if (conditional && (configSearch == null ? void 0 : configSearch.page) !== 1) {
411
- resetPage();
412
- } else {
413
- resetPage();
414
- }
415
- }
416
- };
417
- },
418
- [
419
- setConfigSearch,
420
- configSearch == null ? void 0 : configSearch.page,
421
- configSearch == null ? void 0 : configSearch.pageSize,
422
- initPage,
423
- initPageSize,
424
- resetPage
425
- ]
426
- );
427
- return /* @__PURE__ */ jsx4(
428
- ReactTableGridCustom,
429
- {
430
- data: newDataAccount,
431
- total: (data == null ? void 0 : data.length) || 0,
432
- page: configSearch == null ? void 0 : configSearch.page,
433
- pageSize: configSearch == null ? void 0 : configSearch.pageSize,
434
- setConfigPagination: setConfigSearch,
435
- ...spread
436
- }
437
- );
438
- };
439
- var ReactTableGridCustomPaginationClient = memo2(
440
- ReactTableGridCustomPaginationClientInner
334
+ ReactTableGridCustomInner
441
335
  );
442
336
 
443
337
  // src/component/ui/Table/TableStyleContextWapper.tsx
444
- import { memo as memo3 } from "react";
445
- import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
338
+ import { memo as memo2 } from "react";
339
+ import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
446
340
  var isClient = typeof window !== "undefined";
447
341
  var TableStyleContextWapper = ({
448
342
  children,
@@ -452,10 +346,10 @@ var TableStyleContextWapper = ({
452
346
  idWapper: externalId
453
347
  }) => {
454
348
  if (!isClient) {
455
- return /* @__PURE__ */ jsx5(Fragment2, { children });
349
+ return /* @__PURE__ */ jsx4(Fragment2, { children });
456
350
  }
457
351
  const idWapper = externalId != null ? externalId : "12";
458
- return /* @__PURE__ */ jsx5(
352
+ return /* @__PURE__ */ jsx4(
459
353
  "div",
460
354
  {
461
355
  id: `wapper_menu_context-${idWapper}`,
@@ -464,7 +358,7 @@ var TableStyleContextWapper = ({
464
358
  }
465
359
  );
466
360
  };
467
- var TableStyleContextMenuWapper = memo3(
361
+ var TableStyleContextMenuWapper = memo2(
468
362
  TableStyleContextWapper
469
363
  );
470
364
  TableStyleContextMenuWapper.getIdFromOutside = (externalId) => {
@@ -472,7 +366,6 @@ TableStyleContextMenuWapper.getIdFromOutside = (externalId) => {
472
366
  };
473
367
  export {
474
368
  ReactTableGridCustom,
475
- ReactTableGridCustomPaginationClient,
476
369
  TableStyleContextMenuWapper,
477
370
  useShowHideColumn
478
371
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mkt-loitd/react-table-grid-custom",
3
- "version": "1.3.7",
3
+ "version": "1.3.9",
4
4
  "description": "React Table Grid Custom component",
5
5
  "license": "ISC",
6
6
  "private": false,