@mkt-loitd/react-table-grid-custom 1.3.6 → 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 -41
  2. package/dist/index.d.ts +26 -41
  3. package/dist/index.js +21 -118
  4. package/dist/index.mjs +24 -128
  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,39 +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'> {
37
- classNameWapperTable?: string;
38
- classNamePaginationTable?: string;
39
- hiddenPagination?: boolean;
40
- hiddenSTT?: boolean;
41
- /** Pagination */
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 */
42
32
  page?: number;
43
33
  pageSize?: number;
44
- total?: number;
45
- data?: T[];
46
- onChange?: Pick<PaginationRootProps, 'onChange'>['onChange'];
47
- setConfigPagination?: Dispatch<SetStateAction<ISetConfigPagination$1>>;
48
- rowKeyGetter?: string | ((row: T) => K);
49
- hiddenPaginationText?: boolean;
50
- paginationText?: (obj: any) => ReactNode;
51
- 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;
52
46
  fetching?: boolean;
53
- TableLogo?: string;
47
+ /** Events */
48
+ onRowClick?: (row: T, rowIdx: number) => void;
49
+ onRowDoubleClick?: (row: T, rowIdx: number) => void;
54
50
  }
55
- interface refTablePaginationClient extends Required<IPaginationParams> {
56
- setConfigSearch: Dispatch<SetStateAction<ISetConfigPagination$1>>;
57
- resetPagition: (conditional?: boolean) => void;
58
- }
59
-
60
- declare const ReactTableGridCustom: <T, SR = unknown, K extends Key = Key>(props: IReactTableGridCustom<T, SR, K> & React.RefAttributes<DataGridHandle>) => React.ReactElement;
61
51
 
62
- type ReactTableGridCustomPaginationClientComponent = <T, SR = unknown, K extends Key = Key>(props: ReactTableGridCustomPaginationClientProps<T, SR, K>) => JSX.Element;
63
- interface ReactTableGridCustomPaginationClientProps<T = unknown, SR = unknown, K extends Key = Key> extends IReactTableGridCustom<T, SR, K> {
64
- initPage?: number;
65
- initPageSize?: number;
66
- refTable?: MutableRefObject<refTablePaginationClient | undefined>;
67
- }
68
- 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;
69
54
 
70
55
  interface ContextMenuProps {
71
56
  selector: string;
@@ -202,4 +187,4 @@ interface IPaginationParams {
202
187
  }
203
188
  type Maybe<T> = T | undefined | null;
204
189
 
205
- 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,39 +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'> {
37
- classNameWapperTable?: string;
38
- classNamePaginationTable?: string;
39
- hiddenPagination?: boolean;
40
- hiddenSTT?: boolean;
41
- /** Pagination */
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 */
42
32
  page?: number;
43
33
  pageSize?: number;
44
- total?: number;
45
- data?: T[];
46
- onChange?: Pick<PaginationRootProps, 'onChange'>['onChange'];
47
- setConfigPagination?: Dispatch<SetStateAction<ISetConfigPagination$1>>;
48
- rowKeyGetter?: string | ((row: T) => K);
49
- hiddenPaginationText?: boolean;
50
- paginationText?: (obj: any) => ReactNode;
51
- 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;
52
46
  fetching?: boolean;
53
- TableLogo?: string;
47
+ /** Events */
48
+ onRowClick?: (row: T, rowIdx: number) => void;
49
+ onRowDoubleClick?: (row: T, rowIdx: number) => void;
54
50
  }
55
- interface refTablePaginationClient extends Required<IPaginationParams> {
56
- setConfigSearch: Dispatch<SetStateAction<ISetConfigPagination$1>>;
57
- resetPagition: (conditional?: boolean) => void;
58
- }
59
-
60
- declare const ReactTableGridCustom: <T, SR = unknown, K extends Key = Key>(props: IReactTableGridCustom<T, SR, K> & React.RefAttributes<DataGridHandle>) => React.ReactElement;
61
51
 
62
- type ReactTableGridCustomPaginationClientComponent = <T, SR = unknown, K extends Key = Key>(props: ReactTableGridCustomPaginationClientProps<T, SR, K>) => JSX.Element;
63
- interface ReactTableGridCustomPaginationClientProps<T = unknown, SR = unknown, K extends Key = Key> extends IReactTableGridCustom<T, SR, K> {
64
- initPage?: number;
65
- initPageSize?: number;
66
- refTable?: MutableRefObject<refTablePaginationClient | undefined>;
67
- }
68
- 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;
69
54
 
70
55
  interface ContextMenuProps {
71
56
  selector: string;
@@ -202,4 +187,4 @@ interface IPaginationParams {
202
187
  }
203
188
  type Maybe<T> = T | undefined | null;
204
189
 
205
- 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,27 +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
- ...spread
293
+ onRowClick,
294
+ onRowDoubleClick
291
295
  } = props;
292
- const [isLoading, setIsLoading] = (0, import_react2.useState)(true);
293
- const [sortColumns, setSortColumns] = (0, import_react2.useState)([]);
294
- const isSelectRow = selectedRows !== void 0;
296
+ const isSelectRow = enableSelectRow && selectedRows !== void 0;
295
297
  const newColumns = (0, import_react2.useMemo)(() => {
296
298
  let cols = [...columns];
297
- cols = cols.map(
298
- (col) => "key" in col ? { ...col, width: 200, maxWidth: void 0 } : col
299
- );
300
299
  if (isSelectRow) {
301
300
  cols.unshift(import_react_data_grid.SelectColumn);
302
301
  }
@@ -319,19 +318,6 @@ var ReactTableGridCustomInner = (props, ref) => {
319
318
  },
320
319
  [rowKeyGetter]
321
320
  );
322
- const sortedRows = (0, import_react2.useMemo)(() => {
323
- if (!sortColumns.length) return data;
324
- const { columnKey, direction } = sortColumns[0];
325
- if (!direction) return data;
326
- return (0, import_lodash3.orderBy)(
327
- data,
328
- [String(columnKey)],
329
- [direction === "ASC" ? "asc" : "desc"]
330
- );
331
- }, [data, sortColumns]);
332
- (0, import_react2.useEffect)(() => {
333
- setIsLoading(false);
334
- }, []);
335
321
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
336
322
  "div",
337
323
  {
@@ -343,13 +329,15 @@ var ReactTableGridCustomInner = (props, ref) => {
343
329
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
344
330
  import_react_data_grid.DataGrid,
345
331
  {
346
- ref,
347
- rows: sortedRows,
332
+ rows: data,
348
333
  columns: newColumns,
349
334
  selectedRows,
335
+ onSelectedRowsChange,
350
336
  rowKeyGetter: isSelectRow ? customRowKeyGetter : void 0,
351
337
  sortColumns,
352
- 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),
353
341
  renderers: {
354
342
  renderSortStatus: (props2) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RenderSortStatus_default, { ...props2 }),
355
343
  renderCheckbox({ onChange, checked, ...props2 }) {
@@ -365,105 +353,21 @@ var ReactTableGridCustomInner = (props, ref) => {
365
353
  }
366
354
  );
367
355
  }
368
- },
369
- ...spread
356
+ }
370
357
  }
371
358
  ),
372
- (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 }) })
373
360
  ]
374
361
  }
375
362
  );
376
363
  };
377
364
  var ReactTableGridCustom = (0, import_react2.memo)(
378
- (0, import_react2.forwardRef)(ReactTableGridCustomInner)
365
+ ReactTableGridCustomInner
379
366
  );
380
367
 
381
- // src/component/ui/Table/ReactTableGridCustomPaginationClient.tsx
382
- var import_react4 = require("react");
383
-
384
- // src/hooks/useDataPagingClient.ts
368
+ // src/component/ui/Table/TableStyleContextWapper.tsx
385
369
  var import_react3 = require("react");
386
- var useDataPagingClient = ({ data = [], page, pageSize }) => {
387
- const newData = (0, import_react3.useMemo)(() => {
388
- if (page && pageSize) {
389
- const startIndex = (page - 1) * pageSize;
390
- return data.slice(startIndex, startIndex + pageSize);
391
- }
392
- return data;
393
- }, [data, page, pageSize]);
394
- return newData;
395
- };
396
- var useDataPagingClient_default = useDataPagingClient;
397
-
398
- // src/component/ui/Table/ReactTableGridCustomPaginationClient.tsx
399
370
  var import_jsx_runtime4 = require("react/jsx-runtime");
400
- var ReactTableGridCustomPaginationClientInner = ({
401
- data,
402
- initPage = 1,
403
- initPageSize = 200,
404
- refTable,
405
- ...spread
406
- }) => {
407
- const [configSearch, setConfigSearch] = (0, import_react4.useState)({
408
- page: initPage,
409
- pageSize: initPageSize
410
- });
411
- const newDataAccount = useDataPagingClient_default({
412
- data,
413
- page: configSearch == null ? void 0 : configSearch.page,
414
- pageSize: configSearch == null ? void 0 : configSearch.pageSize
415
- });
416
- const resetPage = (0, import_react4.useCallback)(() => {
417
- setConfigSearch((prev) => ({
418
- ...prev,
419
- page: 1
420
- }));
421
- }, []);
422
- (0, import_react4.useImperativeHandle)(
423
- refTable,
424
- () => {
425
- var _a, _b;
426
- return {
427
- setConfigSearch,
428
- page: (_a = configSearch == null ? void 0 : configSearch.page) != null ? _a : initPage,
429
- pageSize: (_b = configSearch == null ? void 0 : configSearch.pageSize) != null ? _b : initPageSize,
430
- resetPagition: (conditional = true) => {
431
- if (conditional && (configSearch == null ? void 0 : configSearch.page) !== 1) {
432
- resetPage();
433
- } else {
434
- resetPage();
435
- }
436
- }
437
- };
438
- },
439
- [
440
- setConfigSearch,
441
- configSearch == null ? void 0 : configSearch.page,
442
- configSearch == null ? void 0 : configSearch.pageSize,
443
- initPage,
444
- initPageSize,
445
- resetPage
446
- ]
447
- );
448
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
449
- ReactTableGridCustom,
450
- {
451
- data: newDataAccount,
452
- total: (data == null ? void 0 : data.length) || 0,
453
- page: configSearch == null ? void 0 : configSearch.page,
454
- pageSize: configSearch == null ? void 0 : configSearch.pageSize,
455
- setConfigPagination: setConfigSearch,
456
- ...spread
457
- }
458
- );
459
- };
460
- var ReactTableGridCustomPaginationClient = (0, import_react4.memo)(
461
- ReactTableGridCustomPaginationClientInner
462
- );
463
-
464
- // src/component/ui/Table/TableStyleContextWapper.tsx
465
- var import_react5 = require("react");
466
- var import_jsx_runtime5 = require("react/jsx-runtime");
467
371
  var isClient = typeof window !== "undefined";
468
372
  var TableStyleContextWapper = ({
469
373
  children,
@@ -473,10 +377,10 @@ var TableStyleContextWapper = ({
473
377
  idWapper: externalId
474
378
  }) => {
475
379
  if (!isClient) {
476
- 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 });
477
381
  }
478
382
  const idWapper = externalId != null ? externalId : "12";
479
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
383
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
480
384
  "div",
481
385
  {
482
386
  id: `wapper_menu_context-${idWapper}`,
@@ -485,7 +389,7 @@ var TableStyleContextWapper = ({
485
389
  }
486
390
  );
487
391
  };
488
- var TableStyleContextMenuWapper = (0, import_react5.memo)(
392
+ var TableStyleContextMenuWapper = (0, import_react3.memo)(
489
393
  TableStyleContextWapper
490
394
  );
491
395
  TableStyleContextMenuWapper.getIdFromOutside = (externalId) => {
@@ -494,7 +398,6 @@ TableStyleContextMenuWapper.getIdFromOutside = (externalId) => {
494
398
  // Annotate the CommonJS export names for ESM import in node:
495
399
  0 && (module.exports = {
496
400
  ReactTableGridCustom,
497
- ReactTableGridCustomPaginationClient,
498
401
  TableStyleContextMenuWapper,
499
402
  useShowHideColumn
500
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,27 +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
- ...spread
262
+ onRowClick,
263
+ onRowDoubleClick
262
264
  } = props;
263
- const [isLoading, setIsLoading] = useState2(true);
264
- const [sortColumns, setSortColumns] = useState2([]);
265
- const isSelectRow = selectedRows !== void 0;
265
+ const isSelectRow = enableSelectRow && selectedRows !== void 0;
266
266
  const newColumns = useMemo2(() => {
267
267
  let cols = [...columns];
268
- cols = cols.map(
269
- (col) => "key" in col ? { ...col, width: 200, maxWidth: void 0 } : col
270
- );
271
268
  if (isSelectRow) {
272
269
  cols.unshift(SelectColumn);
273
270
  }
@@ -290,19 +287,6 @@ var ReactTableGridCustomInner = (props, ref) => {
290
287
  },
291
288
  [rowKeyGetter]
292
289
  );
293
- const sortedRows = useMemo2(() => {
294
- if (!sortColumns.length) return data;
295
- const { columnKey, direction } = sortColumns[0];
296
- if (!direction) return data;
297
- return orderBy(
298
- data,
299
- [String(columnKey)],
300
- [direction === "ASC" ? "asc" : "desc"]
301
- );
302
- }, [data, sortColumns]);
303
- useEffect(() => {
304
- setIsLoading(false);
305
- }, []);
306
290
  return /* @__PURE__ */ jsxs2(
307
291
  "div",
308
292
  {
@@ -314,13 +298,15 @@ var ReactTableGridCustomInner = (props, ref) => {
314
298
  /* @__PURE__ */ jsx3(
315
299
  DataGrid,
316
300
  {
317
- ref,
318
- rows: sortedRows,
301
+ rows: data,
319
302
  columns: newColumns,
320
303
  selectedRows,
304
+ onSelectedRowsChange,
321
305
  rowKeyGetter: isSelectRow ? customRowKeyGetter : void 0,
322
306
  sortColumns,
323
- 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),
324
310
  renderers: {
325
311
  renderSortStatus: (props2) => /* @__PURE__ */ jsx3(RenderSortStatus_default, { ...props2 }),
326
312
  renderCheckbox({ onChange, checked, ...props2 }) {
@@ -336,110 +322,21 @@ var ReactTableGridCustomInner = (props, ref) => {
336
322
  }
337
323
  );
338
324
  }
339
- },
340
- ...spread
325
+ }
341
326
  }
342
327
  ),
343
- (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 }) })
344
329
  ]
345
330
  }
346
331
  );
347
332
  };
348
333
  var ReactTableGridCustom = memo(
349
- forwardRef(ReactTableGridCustomInner)
350
- );
351
-
352
- // src/component/ui/Table/ReactTableGridCustomPaginationClient.tsx
353
- import {
354
- memo as memo2,
355
- useCallback as useCallback3,
356
- useImperativeHandle,
357
- useState as useState3
358
- } from "react";
359
-
360
- // src/hooks/useDataPagingClient.ts
361
- import { useMemo as useMemo3 } from "react";
362
- var useDataPagingClient = ({ data = [], page, pageSize }) => {
363
- const newData = useMemo3(() => {
364
- if (page && pageSize) {
365
- const startIndex = (page - 1) * pageSize;
366
- return data.slice(startIndex, startIndex + pageSize);
367
- }
368
- return data;
369
- }, [data, page, pageSize]);
370
- return newData;
371
- };
372
- var useDataPagingClient_default = useDataPagingClient;
373
-
374
- // src/component/ui/Table/ReactTableGridCustomPaginationClient.tsx
375
- import { jsx as jsx4 } from "react/jsx-runtime";
376
- var ReactTableGridCustomPaginationClientInner = ({
377
- data,
378
- initPage = 1,
379
- initPageSize = 200,
380
- refTable,
381
- ...spread
382
- }) => {
383
- const [configSearch, setConfigSearch] = useState3({
384
- page: initPage,
385
- pageSize: initPageSize
386
- });
387
- const newDataAccount = useDataPagingClient_default({
388
- data,
389
- page: configSearch == null ? void 0 : configSearch.page,
390
- pageSize: configSearch == null ? void 0 : configSearch.pageSize
391
- });
392
- const resetPage = useCallback3(() => {
393
- setConfigSearch((prev) => ({
394
- ...prev,
395
- page: 1
396
- }));
397
- }, []);
398
- useImperativeHandle(
399
- refTable,
400
- () => {
401
- var _a, _b;
402
- return {
403
- setConfigSearch,
404
- page: (_a = configSearch == null ? void 0 : configSearch.page) != null ? _a : initPage,
405
- pageSize: (_b = configSearch == null ? void 0 : configSearch.pageSize) != null ? _b : initPageSize,
406
- resetPagition: (conditional = true) => {
407
- if (conditional && (configSearch == null ? void 0 : configSearch.page) !== 1) {
408
- resetPage();
409
- } else {
410
- resetPage();
411
- }
412
- }
413
- };
414
- },
415
- [
416
- setConfigSearch,
417
- configSearch == null ? void 0 : configSearch.page,
418
- configSearch == null ? void 0 : configSearch.pageSize,
419
- initPage,
420
- initPageSize,
421
- resetPage
422
- ]
423
- );
424
- return /* @__PURE__ */ jsx4(
425
- ReactTableGridCustom,
426
- {
427
- data: newDataAccount,
428
- total: (data == null ? void 0 : data.length) || 0,
429
- page: configSearch == null ? void 0 : configSearch.page,
430
- pageSize: configSearch == null ? void 0 : configSearch.pageSize,
431
- setConfigPagination: setConfigSearch,
432
- ...spread
433
- }
434
- );
435
- };
436
- var ReactTableGridCustomPaginationClient = memo2(
437
- ReactTableGridCustomPaginationClientInner
334
+ ReactTableGridCustomInner
438
335
  );
439
336
 
440
337
  // src/component/ui/Table/TableStyleContextWapper.tsx
441
- import { memo as memo3 } from "react";
442
- 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";
443
340
  var isClient = typeof window !== "undefined";
444
341
  var TableStyleContextWapper = ({
445
342
  children,
@@ -449,10 +346,10 @@ var TableStyleContextWapper = ({
449
346
  idWapper: externalId
450
347
  }) => {
451
348
  if (!isClient) {
452
- return /* @__PURE__ */ jsx5(Fragment2, { children });
349
+ return /* @__PURE__ */ jsx4(Fragment2, { children });
453
350
  }
454
351
  const idWapper = externalId != null ? externalId : "12";
455
- return /* @__PURE__ */ jsx5(
352
+ return /* @__PURE__ */ jsx4(
456
353
  "div",
457
354
  {
458
355
  id: `wapper_menu_context-${idWapper}`,
@@ -461,7 +358,7 @@ var TableStyleContextWapper = ({
461
358
  }
462
359
  );
463
360
  };
464
- var TableStyleContextMenuWapper = memo3(
361
+ var TableStyleContextMenuWapper = memo2(
465
362
  TableStyleContextWapper
466
363
  );
467
364
  TableStyleContextMenuWapper.getIdFromOutside = (externalId) => {
@@ -469,7 +366,6 @@ TableStyleContextMenuWapper.getIdFromOutside = (externalId) => {
469
366
  };
470
367
  export {
471
368
  ReactTableGridCustom,
472
- ReactTableGridCustomPaginationClient,
473
369
  TableStyleContextMenuWapper,
474
370
  useShowHideColumn
475
371
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mkt-loitd/react-table-grid-custom",
3
- "version": "1.3.6",
3
+ "version": "1.3.9",
4
4
  "description": "React Table Grid Custom component",
5
5
  "license": "ISC",
6
6
  "private": false,