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

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 +24 -184
  4. package/dist/index.mjs +26 -193
  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
  });
@@ -200,7 +199,6 @@ var useShowHideColumn = ({
200
199
  };
201
200
 
202
201
  // src/component/ui/Table/ReactTableGridCustom.tsx
203
- var import_core = require("@mantine/core");
204
202
  var import_lodash3 = require("lodash");
205
203
  var import_react2 = require("react");
206
204
  var import_react_data_grid = require("react-data-grid");
@@ -230,76 +228,30 @@ var LoadingIcon = ({
230
228
  }
231
229
  );
232
230
  };
233
- var ArrowIcon = ({
234
- h,
235
- w,
236
- size,
237
- className
238
- }) => {
239
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
240
- "svg",
241
- {
242
- className,
243
- stroke: "currentColor",
244
- fill: "currentColor",
245
- strokeWidth: "0",
246
- viewBox: "0 0 16 16",
247
- height: size != null ? size : h,
248
- width: size != null ? size : w,
249
- xmlns: "http://www.w3.org/2000/svg",
250
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
251
- "path",
252
- {
253
- fillRule: "evenodd",
254
- d: "M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4"
255
- }
256
- )
257
- }
258
- );
259
- };
260
-
261
- // src/component/RenderSortStatus.tsx
262
- var import_jsx_runtime2 = require("react/jsx-runtime");
263
- var RenderSortStatus = ({ sortDirection, priority }) => {
264
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
265
- sortDirection !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
266
- ArrowIcon,
267
- {
268
- className: cn(sortDirection === "DESC" && "-rotate-180", "transition-transform"),
269
- size: 20
270
- }
271
- ),
272
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: priority })
273
- ] });
274
- };
275
- var RenderSortStatus_default = RenderSortStatus;
276
231
 
277
232
  // src/component/ui/Table/ReactTableGridCustom.tsx
278
- var import_jsx_runtime3 = require("react/jsx-runtime");
279
- var ReactTableGridCustomInner = (props, ref) => {
233
+ var import_jsx_runtime2 = require("react/jsx-runtime");
234
+ var ReactTableGridCustomInner = (props) => {
280
235
  const {
281
236
  classNameWapperTable,
282
237
  hiddenSTT,
283
- data = [],
238
+ data,
284
239
  page,
285
240
  pageSize,
286
241
  columns,
287
242
  rowKeyGetter = "uid",
243
+ enableSelectRow,
288
244
  selectedRows,
245
+ onSelectedRowsChange,
246
+ sortColumns,
247
+ onSortColumnsChange,
289
248
  fetching,
290
- // ❌ loại bỏ để tránh warning
291
- children,
292
- renderers,
293
- ...restProps
249
+ onRowClick,
250
+ onRowDoubleClick
294
251
  } = props;
295
- const [isLoading, setIsLoading] = (0, import_react2.useState)(true);
296
- const [sortColumns, setSortColumns] = (0, import_react2.useState)([]);
297
- const isSelectRow = selectedRows !== void 0;
252
+ const isSelectRow = enableSelectRow && selectedRows !== void 0;
298
253
  const newColumns = (0, import_react2.useMemo)(() => {
299
254
  let cols = [...columns];
300
- cols = cols.map(
301
- (col) => "key" in col ? { ...col, width: 200, maxWidth: void 0 } : col
302
- );
303
255
  if (isSelectRow) {
304
256
  cols.unshift(import_react_data_grid.SelectColumn);
305
257
  }
@@ -322,20 +274,7 @@ var ReactTableGridCustomInner = (props, ref) => {
322
274
  },
323
275
  [rowKeyGetter]
324
276
  );
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
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
277
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
339
278
  "div",
340
279
  {
341
280
  className: cn(
@@ -343,130 +282,32 @@ var ReactTableGridCustomInner = (props, ref) => {
343
282
  classNameWapperTable
344
283
  ),
345
284
  children: [
346
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
285
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
347
286
  import_react_data_grid.DataGrid,
348
287
  {
349
- ref,
350
- rows: sortedRows,
288
+ rows: data,
351
289
  columns: newColumns,
352
290
  selectedRows,
291
+ onSelectedRowsChange,
353
292
  rowKeyGetter: isSelectRow ? customRowKeyGetter : void 0,
354
293
  sortColumns,
355
- onSortColumnsChange: setSortColumns,
356
- renderers: {
357
- renderSortStatus: (props2) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RenderSortStatus_default, { ...props2 }),
358
- renderCheckbox({ onChange, checked, ...props2 }) {
359
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
360
- import_core.Checkbox,
361
- {
362
- ...props2,
363
- checked: Boolean(checked),
364
- onChange: (e) => onChange(
365
- e.currentTarget.checked,
366
- e.nativeEvent instanceof MouseEvent ? e.nativeEvent.shiftKey : false
367
- )
368
- }
369
- );
370
- }
371
- },
372
- ...restProps
294
+ onSortColumnsChange,
295
+ onCellClick: ({ row, rowIdx }) => onRowClick == null ? void 0 : onRowClick(row, rowIdx),
296
+ onCellDoubleClick: ({ row, rowIdx }) => onRowDoubleClick == null ? void 0 : onRowDoubleClick(row, rowIdx)
373
297
  }
374
298
  ),
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 }) })
299
+ fetching && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoadingIcon, { isSpin: true }) })
376
300
  ]
377
301
  }
378
302
  );
379
303
  };
380
304
  var ReactTableGridCustom = (0, import_react2.memo)(
381
- (0, import_react2.forwardRef)(ReactTableGridCustomInner)
382
- );
383
-
384
- // src/component/ui/Table/ReactTableGridCustomPaginationClient.tsx
385
- var import_react4 = require("react");
386
-
387
- // src/hooks/useDataPagingClient.ts
388
- 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
- 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
305
+ ReactTableGridCustomInner
465
306
  );
466
307
 
467
308
  // src/component/ui/Table/TableStyleContextWapper.tsx
468
- var import_react5 = require("react");
469
- var import_jsx_runtime5 = require("react/jsx-runtime");
309
+ var import_react3 = require("react");
310
+ var import_jsx_runtime3 = require("react/jsx-runtime");
470
311
  var isClient = typeof window !== "undefined";
471
312
  var TableStyleContextWapper = ({
472
313
  children,
@@ -476,10 +317,10 @@ var TableStyleContextWapper = ({
476
317
  idWapper: externalId
477
318
  }) => {
478
319
  if (!isClient) {
479
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children });
320
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children });
480
321
  }
481
322
  const idWapper = externalId != null ? externalId : "12";
482
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
323
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
483
324
  "div",
484
325
  {
485
326
  id: `wapper_menu_context-${idWapper}`,
@@ -488,7 +329,7 @@ var TableStyleContextWapper = ({
488
329
  }
489
330
  );
490
331
  };
491
- var TableStyleContextMenuWapper = (0, import_react5.memo)(
332
+ var TableStyleContextMenuWapper = (0, import_react3.memo)(
492
333
  TableStyleContextWapper
493
334
  );
494
335
  TableStyleContextMenuWapper.getIdFromOutside = (externalId) => {
@@ -497,7 +338,6 @@ TableStyleContextMenuWapper.getIdFromOutside = (externalId) => {
497
338
  // Annotate the CommonJS export names for ESM import in node:
498
339
  0 && (module.exports = {
499
340
  ReactTableGridCustom,
500
- ReactTableGridCustomPaginationClient,
501
341
  TableStyleContextMenuWapper,
502
342
  useShowHideColumn
503
343
  });
package/dist/index.mjs CHANGED
@@ -161,15 +161,11 @@ var useShowHideColumn = ({
161
161
  };
162
162
 
163
163
  // src/component/ui/Table/ReactTableGridCustom.tsx
164
- import { Checkbox } from "@mantine/core";
165
- import { get, orderBy } from "lodash";
164
+ import { get } from "lodash";
166
165
  import {
167
166
  memo,
168
- forwardRef,
169
167
  useCallback as useCallback2,
170
- useEffect,
171
- useMemo as useMemo2,
172
- useState as useState2
168
+ useMemo as useMemo2
173
169
  } from "react";
174
170
  import {
175
171
  DataGrid,
@@ -201,76 +197,30 @@ var LoadingIcon = ({
201
197
  }
202
198
  );
203
199
  };
204
- var ArrowIcon = ({
205
- h,
206
- w,
207
- size,
208
- className
209
- }) => {
210
- return /* @__PURE__ */ jsx(
211
- "svg",
212
- {
213
- className,
214
- stroke: "currentColor",
215
- fill: "currentColor",
216
- strokeWidth: "0",
217
- viewBox: "0 0 16 16",
218
- height: size != null ? size : h,
219
- width: size != null ? size : w,
220
- xmlns: "http://www.w3.org/2000/svg",
221
- children: /* @__PURE__ */ jsx(
222
- "path",
223
- {
224
- fillRule: "evenodd",
225
- d: "M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4"
226
- }
227
- )
228
- }
229
- );
230
- };
231
-
232
- // src/component/RenderSortStatus.tsx
233
- import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
234
- var RenderSortStatus = ({ sortDirection, priority }) => {
235
- return /* @__PURE__ */ jsxs(Fragment, { children: [
236
- sortDirection !== void 0 && /* @__PURE__ */ jsx2(
237
- ArrowIcon,
238
- {
239
- className: cn(sortDirection === "DESC" && "-rotate-180", "transition-transform"),
240
- size: 20
241
- }
242
- ),
243
- /* @__PURE__ */ jsx2("span", { children: priority })
244
- ] });
245
- };
246
- var RenderSortStatus_default = RenderSortStatus;
247
200
 
248
201
  // src/component/ui/Table/ReactTableGridCustom.tsx
249
- import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
250
- var ReactTableGridCustomInner = (props, ref) => {
202
+ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
203
+ var ReactTableGridCustomInner = (props) => {
251
204
  const {
252
205
  classNameWapperTable,
253
206
  hiddenSTT,
254
- data = [],
207
+ data,
255
208
  page,
256
209
  pageSize,
257
210
  columns,
258
211
  rowKeyGetter = "uid",
212
+ enableSelectRow,
259
213
  selectedRows,
214
+ onSelectedRowsChange,
215
+ sortColumns,
216
+ onSortColumnsChange,
260
217
  fetching,
261
- // ❌ loại bỏ để tránh warning
262
- children,
263
- renderers,
264
- ...restProps
218
+ onRowClick,
219
+ onRowDoubleClick
265
220
  } = props;
266
- const [isLoading, setIsLoading] = useState2(true);
267
- const [sortColumns, setSortColumns] = useState2([]);
268
- const isSelectRow = selectedRows !== void 0;
221
+ const isSelectRow = enableSelectRow && selectedRows !== void 0;
269
222
  const newColumns = useMemo2(() => {
270
223
  let cols = [...columns];
271
- cols = cols.map(
272
- (col) => "key" in col ? { ...col, width: 200, maxWidth: void 0 } : col
273
- );
274
224
  if (isSelectRow) {
275
225
  cols.unshift(SelectColumn);
276
226
  }
@@ -293,20 +243,7 @@ var ReactTableGridCustomInner = (props, ref) => {
293
243
  },
294
244
  [rowKeyGetter]
295
245
  );
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
- return /* @__PURE__ */ jsxs2(
246
+ return /* @__PURE__ */ jsxs(
310
247
  "div",
311
248
  {
312
249
  className: cn(
@@ -314,135 +251,32 @@ var ReactTableGridCustomInner = (props, ref) => {
314
251
  classNameWapperTable
315
252
  ),
316
253
  children: [
317
- /* @__PURE__ */ jsx3(
254
+ /* @__PURE__ */ jsx2(
318
255
  DataGrid,
319
256
  {
320
- ref,
321
- rows: sortedRows,
257
+ rows: data,
322
258
  columns: newColumns,
323
259
  selectedRows,
260
+ onSelectedRowsChange,
324
261
  rowKeyGetter: isSelectRow ? customRowKeyGetter : void 0,
325
262
  sortColumns,
326
- onSortColumnsChange: setSortColumns,
327
- renderers: {
328
- renderSortStatus: (props2) => /* @__PURE__ */ jsx3(RenderSortStatus_default, { ...props2 }),
329
- renderCheckbox({ onChange, checked, ...props2 }) {
330
- return /* @__PURE__ */ jsx3(
331
- Checkbox,
332
- {
333
- ...props2,
334
- checked: Boolean(checked),
335
- onChange: (e) => onChange(
336
- e.currentTarget.checked,
337
- e.nativeEvent instanceof MouseEvent ? e.nativeEvent.shiftKey : false
338
- )
339
- }
340
- );
341
- }
342
- },
343
- ...restProps
263
+ onSortColumnsChange,
264
+ onCellClick: ({ row, rowIdx }) => onRowClick == null ? void 0 : onRowClick(row, rowIdx),
265
+ onCellDoubleClick: ({ row, rowIdx }) => onRowDoubleClick == null ? void 0 : onRowDoubleClick(row, rowIdx)
344
266
  }
345
267
  ),
346
- (fetching || isLoading) && /* @__PURE__ */ jsx3("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx3(LoadingIcon, { isSpin: true }) })
268
+ fetching && /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx2(LoadingIcon, { isSpin: true }) })
347
269
  ]
348
270
  }
349
271
  );
350
272
  };
351
273
  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
274
+ ReactTableGridCustomInner
441
275
  );
442
276
 
443
277
  // 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";
278
+ import { memo as memo2 } from "react";
279
+ import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
446
280
  var isClient = typeof window !== "undefined";
447
281
  var TableStyleContextWapper = ({
448
282
  children,
@@ -452,10 +286,10 @@ var TableStyleContextWapper = ({
452
286
  idWapper: externalId
453
287
  }) => {
454
288
  if (!isClient) {
455
- return /* @__PURE__ */ jsx5(Fragment2, { children });
289
+ return /* @__PURE__ */ jsx3(Fragment, { children });
456
290
  }
457
291
  const idWapper = externalId != null ? externalId : "12";
458
- return /* @__PURE__ */ jsx5(
292
+ return /* @__PURE__ */ jsx3(
459
293
  "div",
460
294
  {
461
295
  id: `wapper_menu_context-${idWapper}`,
@@ -464,7 +298,7 @@ var TableStyleContextWapper = ({
464
298
  }
465
299
  );
466
300
  };
467
- var TableStyleContextMenuWapper = memo3(
301
+ var TableStyleContextMenuWapper = memo2(
468
302
  TableStyleContextWapper
469
303
  );
470
304
  TableStyleContextMenuWapper.getIdFromOutside = (externalId) => {
@@ -472,7 +306,6 @@ TableStyleContextMenuWapper.getIdFromOutside = (externalId) => {
472
306
  };
473
307
  export {
474
308
  ReactTableGridCustom,
475
- ReactTableGridCustomPaginationClient,
476
309
  TableStyleContextMenuWapper,
477
310
  useShowHideColumn
478
311
  };
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.10",
4
4
  "description": "React Table Grid Custom component",
5
5
  "license": "ISC",
6
6
  "private": false,