@mkt-loitd/react-table-grid-custom 1.3.3 → 1.3.6

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { Dispatch, SetStateAction, Key, ReactNode, JSX, MutableRefObject, FC } from 'react';
-import { ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
+import { Dispatch, SetStateAction, Key, ReactNode, MutableRefObject, JSX, FC } from 'react';
+import { ColumnOrColumnGroup, DataGridProps, DataGridHandle } from 'react-data-grid';
 export { Column, ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
 import { PaginationRootProps } from '@mantine/core';
 import { UseMutateFunction } from '@tanstack/react-query';
@@ -30,44 +30,34 @@ interface useShowHideColumnReturn<T, SR> {
     handleFindLocation: (filterColumns: TColumnsTable<T, SR>, locationColumns?: string[]) => TColumnsTable<T, SR>;
     handleChangeLocation?: (arr: string[]) => void;
 }
-interface ICalculatorTotalPage extends IPaginationParams$1 {
-    total?: number;
-}
 
 declare const useShowHideColumn: <T, SR = unknown>({ nameLocal, columns, ignoreColumns }: useShowHideColumnParameter<T, SR>) => useShowHideColumnReturn<T, SR>;
 
-interface IPaginationText {
-    from?: number;
-    to?: number;
-}
-interface IPaginationTextFunc extends IPaginationText, Pick<ICalculatorTotalPage, 'total'> {
-}
-interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key> extends Omit<DataGridProps<T, SR, K>, 'rows' | 'rowKeyGetter'>, ICalculatorTotalPage {
+interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key> extends Omit<DataGridProps<T, SR, K>, 'rows' | 'rowKeyGetter'> {
     classNameWapperTable?: string;
     classNamePaginationTable?: string;
     hiddenPagination?: boolean;
     hiddenSTT?: boolean;
+    /** Pagination */
+    page?: number;
+    pageSize?: number;
+    total?: number;
     data?: T[];
-    /** Nếu hàm onChange nên dùng useCallback */
     onChange?: Pick<PaginationRootProps, 'onChange'>['onChange'];
     setConfigPagination?: Dispatch<SetStateAction<ISetConfigPagination$1>>;
-    /** Nếu hàm rowKeyGetter nên dùng useCallback*/
-    rowKeyGetter?: string | Maybe<(row: NoInfer<T>) => K>;
+    rowKeyGetter?: string | ((row: T) => K);
     hiddenPaginationText?: boolean;
-    /** dùng hàm paginationText nên dùng useCallback*/
-    paginationText?: (obj: IPaginationTextFunc) => ReactNode;
+    paginationText?: (obj: any) => ReactNode;
     listPageSize?: string[];
     fetching?: boolean;
     TableLogo?: string;
-    [key: string]: any;
 }
 interface refTablePaginationClient extends Required<IPaginationParams> {
     setConfigSearch: Dispatch<SetStateAction<ISetConfigPagination$1>>;
     resetPagition: (conditional?: boolean) => void;
 }
 
-type ReactTableGridCustomComponent = <T, SR = unknown, K extends Key = Key>(props: IReactTableGridCustom<T, SR, K>) => JSX.Element;
-declare const ReactTableGridCustom: ReactTableGridCustomComponent;
+declare const ReactTableGridCustom: <T, SR = unknown, K extends Key = Key>(props: IReactTableGridCustom<T, SR, K> & React.RefAttributes<DataGridHandle>) => React.ReactElement;
 
 type ReactTableGridCustomPaginationClientComponent = <T, SR = unknown, K extends Key = Key>(props: ReactTableGridCustomPaginationClientProps<T, SR, K>) => JSX.Element;
 interface ReactTableGridCustomPaginationClientProps<T = unknown, SR = unknown, K extends Key = Key> extends IReactTableGridCustom<T, SR, K> {

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { Dispatch, SetStateAction, Key, ReactNode, JSX, MutableRefObject, FC } from 'react';
-import { ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
+import { Dispatch, SetStateAction, Key, ReactNode, MutableRefObject, JSX, FC } from 'react';
+import { ColumnOrColumnGroup, DataGridProps, DataGridHandle } from 'react-data-grid';
 export { Column, ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
 import { PaginationRootProps } from '@mantine/core';
 import { UseMutateFunction } from '@tanstack/react-query';
@@ -30,44 +30,34 @@ interface useShowHideColumnReturn<T, SR> {
     handleFindLocation: (filterColumns: TColumnsTable<T, SR>, locationColumns?: string[]) => TColumnsTable<T, SR>;
     handleChangeLocation?: (arr: string[]) => void;
 }
-interface ICalculatorTotalPage extends IPaginationParams$1 {
-    total?: number;
-}
 
 declare const useShowHideColumn: <T, SR = unknown>({ nameLocal, columns, ignoreColumns }: useShowHideColumnParameter<T, SR>) => useShowHideColumnReturn<T, SR>;
 
-interface IPaginationText {
-    from?: number;
-    to?: number;
-}
-interface IPaginationTextFunc extends IPaginationText, Pick<ICalculatorTotalPage, 'total'> {
-}
-interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key> extends Omit<DataGridProps<T, SR, K>, 'rows' | 'rowKeyGetter'>, ICalculatorTotalPage {
+interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key> extends Omit<DataGridProps<T, SR, K>, 'rows' | 'rowKeyGetter'> {
     classNameWapperTable?: string;
     classNamePaginationTable?: string;
     hiddenPagination?: boolean;
     hiddenSTT?: boolean;
+    /** Pagination */
+    page?: number;
+    pageSize?: number;
+    total?: number;
     data?: T[];
-    /** Nếu hàm onChange nên dùng useCallback */
     onChange?: Pick<PaginationRootProps, 'onChange'>['onChange'];
     setConfigPagination?: Dispatch<SetStateAction<ISetConfigPagination$1>>;
-    /** Nếu hàm rowKeyGetter nên dùng useCallback*/
-    rowKeyGetter?: string | Maybe<(row: NoInfer<T>) => K>;
+    rowKeyGetter?: string | ((row: T) => K);
     hiddenPaginationText?: boolean;
-    /** dùng hàm paginationText nên dùng useCallback*/
-    paginationText?: (obj: IPaginationTextFunc) => ReactNode;
+    paginationText?: (obj: any) => ReactNode;
     listPageSize?: string[];
     fetching?: boolean;
     TableLogo?: string;
-    [key: string]: any;
 }
 interface refTablePaginationClient extends Required<IPaginationParams> {
     setConfigSearch: Dispatch<SetStateAction<ISetConfigPagination$1>>;
     resetPagition: (conditional?: boolean) => void;
 }
 
-type ReactTableGridCustomComponent = <T, SR = unknown, K extends Key = Key>(props: IReactTableGridCustom<T, SR, K>) => JSX.Element;
-declare const ReactTableGridCustom: ReactTableGridCustomComponent;
+declare const ReactTableGridCustom: <T, SR = unknown, K extends Key = Key>(props: IReactTableGridCustom<T, SR, K> & React.RefAttributes<DataGridHandle>) => React.ReactElement;
 
 type ReactTableGridCustomPaginationClientComponent = <T, SR = unknown, K extends Key = Key>(props: ReactTableGridCustomPaginationClientProps<T, SR, K>) => JSX.Element;
 interface ReactTableGridCustomPaginationClientProps<T = unknown, SR = unknown, K extends Key = Key> extends IReactTableGridCustom<T, SR, K> {

package/dist/index.js

@@ -70,10 +70,6 @@ var arrayLocal = (array) => {
 };
 
 // src/helpers/table.ts
-var calculatorTotalPage = ({ total = 0, pageSize = 0 }) => {
-  if (!pageSize || pageSize && pageSize <= 0) return 0;
-  return Math.ceil(total / pageSize);
-};
 var STT = (data, index) => {
   let stt = 1;
   let current_page = 0;
@@ -280,79 +276,46 @@ var RenderSortStatus_default = RenderSortStatus;
 
 // src/component/ui/Table/ReactTableGridCustom.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var ReactTableGridCustomInner = ({
-  classNamePaginationTable,
-  classNameWapperTable,
-  hiddenPagination,
-  hiddenSTT,
-  data = [],
-  page,
-  pageSize,
-  total,
-  onChange,
-  setConfigPagination,
-  columns,
-  rowKeyGetter = "uid",
-  selectedRows,
-  hiddenPaginationText,
-  paginationText,
-  listPageSize = ["10", "100", "200", "500", "1000", "5000"],
-  fetching,
-  TableLogo,
-  tableRef,
-  ...spread
-}) => {
+var ReactTableGridCustomInner = (props, ref) => {
+  const {
+    classNameWapperTable,
+    hiddenSTT,
+    data = [],
+    page,
+    pageSize,
+    columns,
+    rowKeyGetter = "uid",
+    selectedRows,
+    fetching,
+    ...spread
+  } = props;
   const [isLoading, setIsLoading] = (0, import_react2.useState)(true);
-  const [containerWidth, setContainerWidth] = (0, import_react2.useState)(0);
   const [sortColumns, setSortColumns] = (0, import_react2.useState)([]);
   const isSelectRow = selectedRows !== void 0;
-  const maxPage = (0, import_react2.useMemo)(
-    () => !hiddenPagination ? calculatorTotalPage({ total, pageSize }) : 0,
-    [pageSize, total, hiddenPagination]
-  );
   const newColumns = (0, import_react2.useMemo)(() => {
-    let cols = [
-      ...columns
-    ];
+    let cols = [...columns];
     cols = cols.map(
-      (col) => "key" in col ? {
-        ...col,
-        width: 200,
-        maxWidth: void 0
-      } : col
+      (col) => "key" in col ? { ...col, width: 200, maxWidth: void 0 } : col
     );
     if (isSelectRow) {
       cols.unshift(import_react_data_grid.SelectColumn);
     }
     if (!hiddenSTT) {
-      const sttColumn = {
+      cols.unshift({
         key: "index",
         name: "STT",
         width: 80,
         renderCell: ({ rowIdx }) => STT({ page, pageSize }, rowIdx)
-      };
-      cols.unshift(sttColumn);
+      });
     }
     return cols;
-  }, [
-    columns,
-    containerWidth,
-    hiddenSTT,
-    isSelectRow,
-    page,
-    pageSize
-  ]);
+  }, [columns, hiddenSTT, isSelectRow, page, pageSize]);
   const customRowKeyGetter = (0, import_react2.useCallback)(
     (row) => {
       if (typeof rowKeyGetter === "function") {
         return rowKeyGetter(row);
       }
-      if (typeof rowKeyGetter === "string") {
-        return (0, import_lodash3.get)(row, rowKeyGetter);
-      }
-      throw new Error(
-        "rowKeyGetter must be a string or a function"
-      );
+      return (0, import_lodash3.get)(row, rowKeyGetter);
     },
     [rowKeyGetter]
   );
@@ -360,16 +323,14 @@ var ReactTableGridCustomInner = ({
     if (!sortColumns.length) return data;
     const { columnKey, direction } = sortColumns[0];
     if (!direction) return data;
-    const order = direction === "ASC" ? "asc" : "desc";
-    const iteratee = typeof columnKey === "string" ? columnKey : String(columnKey);
-    return (0, import_lodash3.orderBy)(data, [iteratee], [order]);
+    return (0, import_lodash3.orderBy)(
+      data,
+      [String(columnKey)],
+      [direction === "ASC" ? "asc" : "desc"]
+    );
   }, [data, sortColumns]);
   (0, import_react2.useEffect)(() => {
-    var _a;
     setIsLoading(false);
-    if ((_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.element) {
-      setContainerWidth(tableRef.current.element.offsetWidth);
-    }
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
@@ -382,7 +343,7 @@ var ReactTableGridCustomInner = ({
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           import_react_data_grid.DataGrid,
           {
-            ref: tableRef,
+            ref,
             rows: sortedRows,
             columns: newColumns,
             selectedRows,
@@ -390,18 +351,17 @@ var ReactTableGridCustomInner = ({
             sortColumns,
             onSortColumnsChange: setSortColumns,
             renderers: {
-              renderSortStatus: (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RenderSortStatus_default, { ...props }),
-              renderCheckbox({ onChange: onChange2, checked, ...props }) {
+              renderSortStatus: (props2) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RenderSortStatus_default, { ...props2 }),
+              renderCheckbox({ onChange, checked, ...props2 }) {
                 return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   import_core.Checkbox,
                   {
-                    ...props,
-                    checked: !!checked,
-                    onChange: (e) => {
-                      const nativeEvent = e.nativeEvent;
-                      const shiftKey = nativeEvent instanceof MouseEvent ? nativeEvent.shiftKey : false;
-                      onChange2(e.target.checked, shiftKey);
-                    }
+                    ...props2,
+                    checked: Boolean(checked),
+                    onChange: (e) => onChange(
+                      e.currentTarget.checked,
+                      e.nativeEvent instanceof MouseEvent ? e.nativeEvent.shiftKey : false
+                    )
                   }
                 );
               }
@@ -415,7 +375,7 @@ var ReactTableGridCustomInner = ({
   );
 };
 var ReactTableGridCustom = (0, import_react2.memo)(
-  ReactTableGridCustomInner
+  (0, import_react2.forwardRef)(ReactTableGridCustomInner)
 );
 
 // src/component/ui/Table/ReactTableGridCustomPaginationClient.tsx

package/dist/index.mjs

@@ -31,10 +31,6 @@ var arrayLocal = (array) => {
 };
 
 // src/helpers/table.ts
-var calculatorTotalPage = ({ total = 0, pageSize = 0 }) => {
-  if (!pageSize || pageSize && pageSize <= 0) return 0;
-  return Math.ceil(total / pageSize);
-};
 var STT = (data, index) => {
   let stt = 1;
   let current_page = 0;
@@ -169,6 +165,7 @@ import { Checkbox } from "@mantine/core";
 import { get, orderBy } from "lodash";
 import {
   memo,
+  forwardRef,
   useCallback as useCallback2,
   useEffect,
   useMemo as useMemo2,
@@ -250,79 +247,46 @@ var RenderSortStatus_default = RenderSortStatus;
 
 // src/component/ui/Table/ReactTableGridCustom.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var ReactTableGridCustomInner = ({
-  classNamePaginationTable,
-  classNameWapperTable,
-  hiddenPagination,
-  hiddenSTT,
-  data = [],
-  page,
-  pageSize,
-  total,
-  onChange,
-  setConfigPagination,
-  columns,
-  rowKeyGetter = "uid",
-  selectedRows,
-  hiddenPaginationText,
-  paginationText,
-  listPageSize = ["10", "100", "200", "500", "1000", "5000"],
-  fetching,
-  TableLogo,
-  tableRef,
-  ...spread
-}) => {
+var ReactTableGridCustomInner = (props, ref) => {
+  const {
+    classNameWapperTable,
+    hiddenSTT,
+    data = [],
+    page,
+    pageSize,
+    columns,
+    rowKeyGetter = "uid",
+    selectedRows,
+    fetching,
+    ...spread
+  } = props;
   const [isLoading, setIsLoading] = useState2(true);
-  const [containerWidth, setContainerWidth] = useState2(0);
   const [sortColumns, setSortColumns] = useState2([]);
   const isSelectRow = selectedRows !== void 0;
-  const maxPage = useMemo2(
-    () => !hiddenPagination ? calculatorTotalPage({ total, pageSize }) : 0,
-    [pageSize, total, hiddenPagination]
-  );
   const newColumns = useMemo2(() => {
-    let cols = [
-      ...columns
-    ];
+    let cols = [...columns];
     cols = cols.map(
-      (col) => "key" in col ? {
-        ...col,
-        width: 200,
-        maxWidth: void 0
-      } : col
+      (col) => "key" in col ? { ...col, width: 200, maxWidth: void 0 } : col
     );
     if (isSelectRow) {
       cols.unshift(SelectColumn);
     }
     if (!hiddenSTT) {
-      const sttColumn = {
+      cols.unshift({
         key: "index",
         name: "STT",
         width: 80,
         renderCell: ({ rowIdx }) => STT({ page, pageSize }, rowIdx)
-      };
-      cols.unshift(sttColumn);
+      });
     }
     return cols;
-  }, [
-    columns,
-    containerWidth,
-    hiddenSTT,
-    isSelectRow,
-    page,
-    pageSize
-  ]);
+  }, [columns, hiddenSTT, isSelectRow, page, pageSize]);
   const customRowKeyGetter = useCallback2(
     (row) => {
       if (typeof rowKeyGetter === "function") {
         return rowKeyGetter(row);
       }
-      if (typeof rowKeyGetter === "string") {
-        return get(row, rowKeyGetter);
-      }
-      throw new Error(
-        "rowKeyGetter must be a string or a function"
-      );
+      return get(row, rowKeyGetter);
     },
     [rowKeyGetter]
   );
@@ -330,16 +294,14 @@ var ReactTableGridCustomInner = ({
     if (!sortColumns.length) return data;
     const { columnKey, direction } = sortColumns[0];
     if (!direction) return data;
-    const order = direction === "ASC" ? "asc" : "desc";
-    const iteratee = typeof columnKey === "string" ? columnKey : String(columnKey);
-    return orderBy(data, [iteratee], [order]);
+    return orderBy(
+      data,
+      [String(columnKey)],
+      [direction === "ASC" ? "asc" : "desc"]
+    );
   }, [data, sortColumns]);
   useEffect(() => {
-    var _a;
     setIsLoading(false);
-    if ((_a = tableRef == null ? void 0 : tableRef.current) == null ? void 0 : _a.element) {
-      setContainerWidth(tableRef.current.element.offsetWidth);
-    }
   }, []);
   return /* @__PURE__ */ jsxs2(
     "div",
@@ -352,7 +314,7 @@ var ReactTableGridCustomInner = ({
         /* @__PURE__ */ jsx3(
           DataGrid,
           {
-            ref: tableRef,
+            ref,
             rows: sortedRows,
             columns: newColumns,
             selectedRows,
@@ -360,18 +322,17 @@ var ReactTableGridCustomInner = ({
             sortColumns,
             onSortColumnsChange: setSortColumns,
             renderers: {
-              renderSortStatus: (props) => /* @__PURE__ */ jsx3(RenderSortStatus_default, { ...props }),
-              renderCheckbox({ onChange: onChange2, checked, ...props }) {
+              renderSortStatus: (props2) => /* @__PURE__ */ jsx3(RenderSortStatus_default, { ...props2 }),
+              renderCheckbox({ onChange, checked, ...props2 }) {
                 return /* @__PURE__ */ jsx3(
                   Checkbox,
                   {
-                    ...props,
-                    checked: !!checked,
-                    onChange: (e) => {
-                      const nativeEvent = e.nativeEvent;
-                      const shiftKey = nativeEvent instanceof MouseEvent ? nativeEvent.shiftKey : false;
-                      onChange2(e.target.checked, shiftKey);
-                    }
+                    ...props2,
+                    checked: Boolean(checked),
+                    onChange: (e) => onChange(
+                      e.currentTarget.checked,
+                      e.nativeEvent instanceof MouseEvent ? e.nativeEvent.shiftKey : false
+                    )
                   }
                 );
               }
@@ -385,7 +346,7 @@ var ReactTableGridCustomInner = ({
   );
 };
 var ReactTableGridCustom = memo(
-  ReactTableGridCustomInner
+  forwardRef(ReactTableGridCustomInner)
 );
 
 // src/component/ui/Table/ReactTableGridCustomPaginationClient.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mkt-loitd/react-table-grid-custom",
-  "version": "1.3.3",
+  "version": "1.3.6",
   "description": "React Table Grid Custom component",
   "license": "ISC",
   "private": false,