@mkt-loitd/react-table-grid-custom 1.0.2 → 1.0.3

package/dist/index.d.mts

@@ -38,8 +38,8 @@ interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key>
     TableLogo?: string;
 }
 
-declare const ReactTableGridCustomInner: <T, SR = unknown, K extends Key = Key>({ classNamePaginationTable, classNameWapperTable, hiddenPagination, hiddenSTT, data, page, pageSize, total, onChange, setConfigPagination, columns, rowKeyGetter, selectedRows, hiddenPaginationText, paginationText, listPageSize, fetching, TableLogo, ...spread }: IReactTableGridCustom<T, SR, K>) => JSX.Element;
-declare const ReactTableGridCustom: typeof ReactTableGridCustomInner;
+type ReactTableGridCustomComponent = <T, SR = unknown, K extends Key = Key>(props: IReactTableGridCustom<T, SR, K>) => JSX.Element;
+declare const ReactTableGridCustom: ReactTableGridCustomComponent;
 
 interface IPaginationParams {
     pageSize?: number;

package/dist/index.d.ts

@@ -38,8 +38,8 @@ interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key>
     TableLogo?: string;
 }
 
-declare const ReactTableGridCustomInner: <T, SR = unknown, K extends Key = Key>({ classNamePaginationTable, classNameWapperTable, hiddenPagination, hiddenSTT, data, page, pageSize, total, onChange, setConfigPagination, columns, rowKeyGetter, selectedRows, hiddenPaginationText, paginationText, listPageSize, fetching, TableLogo, ...spread }: IReactTableGridCustom<T, SR, K>) => JSX.Element;
-declare const ReactTableGridCustom: typeof ReactTableGridCustomInner;
+type ReactTableGridCustomComponent = <T, SR = unknown, K extends Key = Key>(props: IReactTableGridCustom<T, SR, K>) => JSX.Element;
+declare const ReactTableGridCustom: ReactTableGridCustomComponent;
 
 interface IPaginationParams {
     pageSize?: number;

package/dist/index.js

@@ -25,7 +25,12 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/ReactTableGridCustom.tsx
-var import_core2 = require("@mantine/core");
+var import_core = require("@mantine/core");
+var import_lodash = require("lodash");
+var import_react2 = require("react");
+var import_react_data_grid = require("react-data-grid");
+var import_styles = require("react-data-grid/lib/styles.css");
+var import_react_i18next2 = require("react-i18next");
 
 // src/helpers/table.ts
 var calculatorTotalPage = ({ total = 0, pageSize = 0 }) => {
@@ -53,65 +58,20 @@ function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
 
-// src/ReactTableGridCustom.tsx
-var import_lodash = require("lodash");
-var import_react3 = require("react");
-var import_react_data_grid = require("react-data-grid");
-var import_styles = require("react-data-grid/lib/styles.css");
-var import_react_i18next2 = require("react-i18next");
-
-// src/component/ComboboxCustom.tsx
-var import_core = require("@mantine/core");
+// src/hooks/useTranslationTable.ts
 var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var ComboboxCustom = ({ options, onChange, value }) => {
-  const combobox = (0, import_core.useCombobox)({
-    onDropdownClose: () => combobox.resetSelectedOption()
-  });
-  const newOptions = (0, import_react.useMemo)(() => {
-    return (options != null ? options : []).map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_core.Combobox.Option,
-      {
-        className: "page_size-table",
-        value: item,
-        disabled: item === value,
-        children: item
-      },
-      item
-    ));
-  }, [options, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_core.Combobox,
-    {
-      size: "sm",
-      store: combobox,
-      onOptionSubmit: (val) => {
-        onChange && onChange(val);
-        combobox.closeDropdown();
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Combobox.Target, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_core.InputBase,
-          {
-            component: "button",
-            type: "button",
-            pointer: true,
-            rightSectionPointerEvents: "none",
-            onClick: () => combobox.toggleDropdown(),
-            className: "w-[70px]",
-            classNames: { input: "custom_input_table" },
-            children: value || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Input.Placeholder, { children: "Pick value" })
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Combobox.Dropdown, { className: "w-[70px]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Combobox.Options, { children: newOptions }) })
-      ]
-    }
-  );
+var import_react_i18next = require("react-i18next");
+var useTranslationTable = (column) => {
+  const { i18n, t } = (0, import_react_i18next.useTranslation)();
+  const columnTranslation = (0, import_react.useMemo)(() => {
+    return column.map((item) => ({ ...item, name: t(`${item == null ? void 0 : item.name}`) }));
+  }, [i18n == null ? void 0 : i18n.language, column]);
+  return columnTranslation;
 };
-var ComboboxCustom_default = ComboboxCustom;
+var useTranslationTable_default = useTranslationTable;
 
 // src/component/Icons.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 var LoadingIcon = ({
   isSpin = false,
   h = 30,
@@ -119,7 +79,7 @@ var LoadingIcon = ({
   size = 30,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "svg",
     {
       className: `${isSpin ? "animate-spin" : ""} ${className != null ? className : ""}`,
@@ -130,7 +90,7 @@ var LoadingIcon = ({
       height: size || h,
       fill: "currentColor",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" })
     }
   );
 };
@@ -140,7 +100,7 @@ var ArrowIcon = ({
   size,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "svg",
     {
       className,
@@ -151,7 +111,7 @@ var ArrowIcon = ({
       height: size != null ? size : h,
       width: size != null ? size : w,
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -163,35 +123,23 @@ var ArrowIcon = ({
 };
 
 // src/component/RenderSortStatus.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var RenderSortStatus = ({ sortDirection, priority }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    sortDirection !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    sortDirection !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       ArrowIcon,
       {
         className: cn(sortDirection === "DESC" && "-rotate-180", "transition-transform"),
         size: 20
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: priority })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: priority })
   ] });
 };
 var RenderSortStatus_default = RenderSortStatus;
 
-// src/hooks/useTranslationTable.ts
-var import_react2 = require("react");
-var import_react_i18next = require("react-i18next");
-var useTranslationTable = (column) => {
-  const { i18n, t } = (0, import_react_i18next.useTranslation)();
-  const columnTranslation = (0, import_react2.useMemo)(() => {
-    return column.map((item) => ({ ...item, name: t(`${item == null ? void 0 : item.name}`) }));
-  }, [i18n == null ? void 0 : i18n.language, column]);
-  return columnTranslation;
-};
-var useTranslationTable_default = useTranslationTable;
-
 // src/ReactTableGridCustom.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var ReactTableGridCustomInner = ({
   classNamePaginationTable,
   classNameWapperTable,
@@ -214,197 +162,134 @@ var ReactTableGridCustomInner = ({
   ...spread
 }) => {
   const { t } = (0, import_react_i18next2.useTranslation)();
-  const [isLoading, setIsLoading] = (0, import_react3.useState)(true);
-  const tableRef = (0, import_react3.useRef)(null);
-  const [containerWidth, setContainerWidth] = (0, import_react3.useState)(0);
-  const [sortColumns, setSortColumns] = (0, import_react3.useState)([]);
+  const tableRef = (0, import_react2.useRef)(null);
+  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_react3.useMemo)(
-    () => !hiddenPagination ? calculatorTotalPage({
-      total,
-      pageSize
-    }) : 0,
+  const maxPage = (0, import_react2.useMemo)(
+    () => !hiddenPagination ? calculatorTotalPage({ total, pageSize }) : 0,
     [pageSize, total, hiddenPagination]
   );
-  const toInPagination = (0, import_react3.useMemo)(() => {
-    const initPage = {
-      from: 0,
-      to: 0
-    };
-    if (!hiddenPaginationText && pageSize && page) {
-      const from = STT(
-        {
-          page,
-          pageSize
-        },
-        0
-      );
+  const toInPagination = (0, import_react2.useMemo)(() => {
+    if (!hiddenPaginationText && page && pageSize) {
+      const from = STT({ page, pageSize }, 0);
       return {
         from,
-        to: maxPage === page ? total : page * pageSize
+        to: maxPage === page ? total != null ? total : 0 : page * pageSize
       };
     }
-    return initPage;
-  }, [pageSize, page, hiddenPaginationText, maxPage, total]);
-  const columnTranslation = useTranslationTable_default(columns);
-  (0, import_react3.useEffect)(() => {
-    var _a;
-    setIsLoading(false);
-    if ((_a = tableRef.current) == null ? void 0 : _a.element) {
-      const width = tableRef.current.element.offsetWidth;
-      if (width) setContainerWidth(width);
-    }
-  }, []);
-  const newColumns = (0, import_react3.useMemo)(() => {
-    let columnsCustom = [...columnTranslation];
-    const adjustedContainerWidth = containerWidth - 80 + 35;
-    columnsCustom = columnsCustom.map((col) => {
-      const newCol = { ...col };
-      delete newCol.maxWidth;
-      newCol.width = 200;
-      return newCol;
-    });
-    const totalMaxWidth = columnsCustom.reduce((sum, col) => {
-      var _a;
-      return sum + ("width" in col ? Number((_a = col == null ? void 0 : col.width) != null ? _a : 200) : 0);
-    }, 0);
-    if (totalMaxWidth < adjustedContainerWidth && columnsCustom.length > 0) {
-      const evenWidth = Math.floor(adjustedContainerWidth / columnsCustom.length);
-      columnsCustom = columnsCustom.map((col) => {
-        const newCol = { ...col };
-        delete newCol.maxWidth;
-        newCol.width = evenWidth;
-        return newCol;
-      });
-    }
+    return { from: 0, to: 0 };
+  }, [page, pageSize, hiddenPaginationText, maxPage, total]);
+  const columnTranslation = useTranslationTable_default(
+    columns
+  );
+  const newColumns = (0, import_react2.useMemo)(() => {
+    let cols = [
+      ...columnTranslation
+    ];
+    const adjustedWidth = containerWidth - 45;
+    cols = cols.map(
+      (col) => "key" in col ? {
+        ...col,
+        width: 200,
+        maxWidth: void 0
+      } : col
+    );
     if (isSelectRow) {
-      columnsCustom.unshift(import_react_data_grid.SelectColumn);
+      cols.unshift(import_react_data_grid.SelectColumn);
     }
-    if (!hiddenSTT || !hiddenSTT && page && pageSize) {
-      columnsCustom.unshift({
+    if (!hiddenSTT) {
+      const sttColumn = {
         key: "index",
         name: "STT",
         width: 80,
         renderCell: ({ rowIdx }) => STT({ page, pageSize }, rowIdx)
-      });
+      };
+      cols.unshift(sttColumn);
     }
-    return columnsCustom;
-  }, [hiddenSTT, isSelectRow, page, pageSize, columnTranslation, containerWidth]);
-  const customRowKeyGetter = (0, import_react3.useMemo)(() => {
-    return (row) => {
+    return cols;
+  }, [
+    columnTranslation,
+    containerWidth,
+    hiddenSTT,
+    isSelectRow,
+    page,
+    pageSize
+  ]);
+  const customRowKeyGetter = (0, import_react2.useCallback)(
+    (row) => {
       if (typeof rowKeyGetter === "function") {
         return rowKeyGetter(row);
       }
-      return (0, import_lodash.get)(row, rowKeyGetter);
-    };
-  }, [rowKeyGetter]);
-  const handlePageChange = (0, import_react3.useCallback)(
-    (page2) => {
-      if (onChange) {
-        onChange(page2);
-        return;
-      }
-      if (setConfigPagination) {
-        setConfigPagination((prev) => ({ ...prev, page: page2 }));
+      if (typeof rowKeyGetter === "string") {
+        return (0, import_lodash.get)(row, rowKeyGetter);
       }
+      throw new Error(
+        "rowKeyGetter must be a string or a function"
+      );
     },
-    [setConfigPagination, onChange]
+    [rowKeyGetter]
   );
-  const sortedRows = (0, import_react3.useMemo)(() => {
-    var _a, _b, _c;
-    if (sortColumns.length === 0) return data;
-    const direction = (_b = (_a = sortColumns[0]) == null ? void 0 : _a.direction) == null ? void 0 : _b.toLocaleLowerCase();
-    const columnKey = (_c = sortColumns[0]) == null ? void 0 : _c.columnKey;
-    return (0, import_lodash.orderBy)(data, columnKey, direction);
+  const sortedRows = (0, import_react2.useMemo)(() => {
+    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_lodash.orderBy)(data, [iteratee], [order]);
   }, [data, sortColumns]);
-  (0, import_react3.useEffect)(() => {
-    if (page && page > maxPage && maxPage > 0) {
-      handlePageChange(1);
+  (0, import_react2.useEffect)(() => {
+    var _a;
+    setIsLoading(false);
+    if ((_a = tableRef.current) == null ? void 0 : _a.element) {
+      setContainerWidth(tableRef.current.element.offsetWidth);
     }
-  }, [page, maxPage, handlePageChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       className: cn(
-        "wapper_table flex-1 rounded-md overflow-hidden relative h-full flex flex-col min-h-0",
+        "wapper_table flex flex-col h-full min-h-0",
         classNameWapperTable
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative wapper_table_empty wrapperDatagrid flex flex-col flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            import_react_data_grid.DataGrid,
-            {
-              ref: tableRef,
-              "aria-rowcount": sortedRows == null ? void 0 : sortedRows.length,
-              selectedRows,
-              rows: sortedRows,
-              rowKeyGetter: rowKeyGetter && isSelectRow ? customRowKeyGetter : void 0,
-              columns: newColumns,
-              renderers: {
-                renderSortStatus: RenderSortStatus_default,
-                renderCheckbox({ onChange: onChange2, checked, ...spread2 }) {
-                  const handleChange = (e) => {
-                    onChange2(e.target.checked, e.nativeEvent.shiftKey);
-                  };
-                  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core2.Checkbox, { color: "indigo", checked: !!checked, onChange: handleChange, ...spread2 });
-                }
-              },
-              className: "fill-grid flex-1 h-full min-h-0",
-              defaultColumnOptions: {
-                // minWidth: 200,
-                // maxWidth: 200,
-                renderCell: ({ column, row }) => {
-                  const value = (0, import_lodash.get)(row, column.key);
-                  return [null, void 0, ""].includes(value) ? "-" : value;
-                }
-              },
-              sortColumns,
-              onSortColumnsChange: setSortColumns,
-              ...spread
-            }
-          ),
-          total === 0 && TableLogo && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "no_result absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 select-none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-col justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { src: TableLogo, alt: "", className: "size-32" }) }) })
-        ] }),
-        !hiddenPagination && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-          "div",
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_react_data_grid.DataGrid,
           {
-            className: cn(
-              "flex justify-between items-center flex-wrap wapper_pagination p-[10px] pl-2 mt-auto",
-              classNamePaginationTable
-            ),
-            children: [
-              !hiddenPaginationText && page && pageSize && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-sm", children: paginationText ? paginationText({ ...toInPagination, total }) : total ? `${t("display")} ${toInPagination == null ? void 0 : toInPagination.from} ${t("to")} ${toInPagination == null ? void 0 : toInPagination.to} ${t("in")} ${total} ${t("data")}` : "..." }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                ComboboxCustom_default,
-                {
-                  options: listPageSize,
-                  value: pageSize == null ? void 0 : pageSize.toString(),
-                  onChange: (value) => {
-                    if (setConfigPagination) {
-                      setConfigPagination((prev) => ({ ...prev, pageSize: Number(value), page: 1 }));
+            ref: tableRef,
+            rows: sortedRows,
+            columns: newColumns,
+            selectedRows,
+            rowKeyGetter: isSelectRow ? customRowKeyGetter : void 0,
+            sortColumns,
+            onSortColumnsChange: setSortColumns,
+            renderers: {
+              renderSortStatus: RenderSortStatus_default,
+              renderCheckbox({ onChange: onChange2, checked, ...props }) {
+                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);
                     }
                   }
-                }
-              ),
-              !!maxPage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                import_core2.Pagination,
-                {
-                  color: "indigo",
-                  total: maxPage,
-                  size: "sm",
-                  value: page,
-                  onChange: handlePageChange
-                }
-              )
-            ]
+                );
+              }
+            },
+            ...spread
           }
         ),
-        (fetching || isLoading) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute inset-0 bg-gray-50/45 flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "border-[2px] rounded-full border-gray-200 shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LoadingIcon, { isSpin: true }) }) })
+        (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 }) })
       ]
     }
   );
 };
-var ReactTableGridCustom = (0, import_react3.memo)(
+var ReactTableGridCustom = (0, import_react2.memo)(
   ReactTableGridCustomInner
 );
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -1,5 +1,20 @@
 // src/ReactTableGridCustom.tsx
-import { Checkbox, Pagination } from "@mantine/core";
+import { Checkbox } from "@mantine/core";
+import { get, orderBy } from "lodash";
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo as useMemo2,
+  useRef,
+  useState
+} from "react";
+import {
+  DataGrid,
+  SelectColumn
+} from "react-data-grid";
+import "react-data-grid/lib/styles.css";
+import { useTranslation as useTranslation2 } from "react-i18next";
 
 // src/helpers/table.ts
 var calculatorTotalPage = ({ total = 0, pageSize = 0 }) => {
@@ -27,65 +42,20 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-// src/ReactTableGridCustom.tsx
-import { get, orderBy } from "lodash";
-import { memo, useCallback, useEffect, useMemo as useMemo3, useRef, useState } from "react";
-import { DataGrid, SelectColumn } from "react-data-grid";
-import "react-data-grid/lib/styles.css";
-import { useTranslation as useTranslation2 } from "react-i18next";
-
-// src/component/ComboboxCustom.tsx
-import { Combobox, Input, InputBase, useCombobox } from "@mantine/core";
+// src/hooks/useTranslationTable.ts
 import { useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var ComboboxCustom = ({ options, onChange, value }) => {
-  const combobox = useCombobox({
-    onDropdownClose: () => combobox.resetSelectedOption()
-  });
-  const newOptions = useMemo(() => {
-    return (options != null ? options : []).map((item) => /* @__PURE__ */ jsx(
-      Combobox.Option,
-      {
-        className: "page_size-table",
-        value: item,
-        disabled: item === value,
-        children: item
-      },
-      item
-    ));
-  }, [options, value]);
-  return /* @__PURE__ */ jsxs(
-    Combobox,
-    {
-      size: "sm",
-      store: combobox,
-      onOptionSubmit: (val) => {
-        onChange && onChange(val);
-        combobox.closeDropdown();
-      },
-      children: [
-        /* @__PURE__ */ jsx(Combobox.Target, { children: /* @__PURE__ */ jsx(
-          InputBase,
-          {
-            component: "button",
-            type: "button",
-            pointer: true,
-            rightSectionPointerEvents: "none",
-            onClick: () => combobox.toggleDropdown(),
-            className: "w-[70px]",
-            classNames: { input: "custom_input_table" },
-            children: value || /* @__PURE__ */ jsx(Input.Placeholder, { children: "Pick value" })
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Combobox.Dropdown, { className: "w-[70px]", children: /* @__PURE__ */ jsx(Combobox.Options, { children: newOptions }) })
-      ]
-    }
-  );
+import { useTranslation } from "react-i18next";
+var useTranslationTable = (column) => {
+  const { i18n, t } = useTranslation();
+  const columnTranslation = useMemo(() => {
+    return column.map((item) => ({ ...item, name: t(`${item == null ? void 0 : item.name}`) }));
+  }, [i18n == null ? void 0 : i18n.language, column]);
+  return columnTranslation;
 };
-var ComboboxCustom_default = ComboboxCustom;
+var useTranslationTable_default = useTranslationTable;
 
 // src/component/Icons.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var LoadingIcon = ({
   isSpin = false,
   h = 30,
@@ -93,7 +63,7 @@ var LoadingIcon = ({
   size = 30,
   className
 }) => {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "svg",
     {
       className: `${isSpin ? "animate-spin" : ""} ${className != null ? className : ""}`,
@@ -104,7 +74,7 @@ var LoadingIcon = ({
       height: size || h,
       fill: "currentColor",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx2("path", { d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" })
+      children: /* @__PURE__ */ jsx("path", { d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" })
     }
   );
 };
@@ -114,7 +84,7 @@ var ArrowIcon = ({
   size,
   className
 }) => {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "svg",
     {
       className,
@@ -125,7 +95,7 @@ var ArrowIcon = ({
       height: size != null ? size : h,
       width: size != null ? size : w,
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx(
         "path",
         {
           fillRule: "evenodd",
@@ -137,35 +107,23 @@ var ArrowIcon = ({
 };
 
 // src/component/RenderSortStatus.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var RenderSortStatus = ({ sortDirection, priority }) => {
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    sortDirection !== void 0 && /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    sortDirection !== void 0 && /* @__PURE__ */ jsx2(
       ArrowIcon,
       {
         className: cn(sortDirection === "DESC" && "-rotate-180", "transition-transform"),
         size: 20
       }
     ),
-    /* @__PURE__ */ jsx3("span", { children: priority })
+    /* @__PURE__ */ jsx2("span", { children: priority })
   ] });
 };
 var RenderSortStatus_default = RenderSortStatus;
 
-// src/hooks/useTranslationTable.ts
-import { useMemo as useMemo2 } from "react";
-import { useTranslation } from "react-i18next";
-var useTranslationTable = (column) => {
-  const { i18n, t } = useTranslation();
-  const columnTranslation = useMemo2(() => {
-    return column.map((item) => ({ ...item, name: t(`${item == null ? void 0 : item.name}`) }));
-  }, [i18n == null ? void 0 : i18n.language, column]);
-  return columnTranslation;
-};
-var useTranslationTable_default = useTranslationTable;
-
 // src/ReactTableGridCustom.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var ReactTableGridCustomInner = ({
   classNamePaginationTable,
   classNameWapperTable,
@@ -188,192 +146,129 @@ var ReactTableGridCustomInner = ({
   ...spread
 }) => {
   const { t } = useTranslation2();
-  const [isLoading, setIsLoading] = useState(true);
   const tableRef = useRef(null);
+  const [isLoading, setIsLoading] = useState(true);
   const [containerWidth, setContainerWidth] = useState(0);
   const [sortColumns, setSortColumns] = useState([]);
   const isSelectRow = selectedRows !== void 0;
-  const maxPage = useMemo3(
-    () => !hiddenPagination ? calculatorTotalPage({
-      total,
-      pageSize
-    }) : 0,
+  const maxPage = useMemo2(
+    () => !hiddenPagination ? calculatorTotalPage({ total, pageSize }) : 0,
     [pageSize, total, hiddenPagination]
   );
-  const toInPagination = useMemo3(() => {
-    const initPage = {
-      from: 0,
-      to: 0
-    };
-    if (!hiddenPaginationText && pageSize && page) {
-      const from = STT(
-        {
-          page,
-          pageSize
-        },
-        0
-      );
+  const toInPagination = useMemo2(() => {
+    if (!hiddenPaginationText && page && pageSize) {
+      const from = STT({ page, pageSize }, 0);
       return {
         from,
-        to: maxPage === page ? total : page * pageSize
+        to: maxPage === page ? total != null ? total : 0 : page * pageSize
       };
     }
-    return initPage;
-  }, [pageSize, page, hiddenPaginationText, maxPage, total]);
-  const columnTranslation = useTranslationTable_default(columns);
-  useEffect(() => {
-    var _a;
-    setIsLoading(false);
-    if ((_a = tableRef.current) == null ? void 0 : _a.element) {
-      const width = tableRef.current.element.offsetWidth;
-      if (width) setContainerWidth(width);
-    }
-  }, []);
-  const newColumns = useMemo3(() => {
-    let columnsCustom = [...columnTranslation];
-    const adjustedContainerWidth = containerWidth - 80 + 35;
-    columnsCustom = columnsCustom.map((col) => {
-      const newCol = { ...col };
-      delete newCol.maxWidth;
-      newCol.width = 200;
-      return newCol;
-    });
-    const totalMaxWidth = columnsCustom.reduce((sum, col) => {
-      var _a;
-      return sum + ("width" in col ? Number((_a = col == null ? void 0 : col.width) != null ? _a : 200) : 0);
-    }, 0);
-    if (totalMaxWidth < adjustedContainerWidth && columnsCustom.length > 0) {
-      const evenWidth = Math.floor(adjustedContainerWidth / columnsCustom.length);
-      columnsCustom = columnsCustom.map((col) => {
-        const newCol = { ...col };
-        delete newCol.maxWidth;
-        newCol.width = evenWidth;
-        return newCol;
-      });
-    }
+    return { from: 0, to: 0 };
+  }, [page, pageSize, hiddenPaginationText, maxPage, total]);
+  const columnTranslation = useTranslationTable_default(
+    columns
+  );
+  const newColumns = useMemo2(() => {
+    let cols = [
+      ...columnTranslation
+    ];
+    const adjustedWidth = containerWidth - 45;
+    cols = cols.map(
+      (col) => "key" in col ? {
+        ...col,
+        width: 200,
+        maxWidth: void 0
+      } : col
+    );
     if (isSelectRow) {
-      columnsCustom.unshift(SelectColumn);
+      cols.unshift(SelectColumn);
     }
-    if (!hiddenSTT || !hiddenSTT && page && pageSize) {
-      columnsCustom.unshift({
+    if (!hiddenSTT) {
+      const sttColumn = {
         key: "index",
         name: "STT",
         width: 80,
         renderCell: ({ rowIdx }) => STT({ page, pageSize }, rowIdx)
-      });
+      };
+      cols.unshift(sttColumn);
     }
-    return columnsCustom;
-  }, [hiddenSTT, isSelectRow, page, pageSize, columnTranslation, containerWidth]);
-  const customRowKeyGetter = useMemo3(() => {
-    return (row) => {
+    return cols;
+  }, [
+    columnTranslation,
+    containerWidth,
+    hiddenSTT,
+    isSelectRow,
+    page,
+    pageSize
+  ]);
+  const customRowKeyGetter = useCallback(
+    (row) => {
       if (typeof rowKeyGetter === "function") {
         return rowKeyGetter(row);
       }
-      return get(row, rowKeyGetter);
-    };
-  }, [rowKeyGetter]);
-  const handlePageChange = useCallback(
-    (page2) => {
-      if (onChange) {
-        onChange(page2);
-        return;
-      }
-      if (setConfigPagination) {
-        setConfigPagination((prev) => ({ ...prev, page: page2 }));
+      if (typeof rowKeyGetter === "string") {
+        return get(row, rowKeyGetter);
       }
+      throw new Error(
+        "rowKeyGetter must be a string or a function"
+      );
     },
-    [setConfigPagination, onChange]
+    [rowKeyGetter]
   );
-  const sortedRows = useMemo3(() => {
-    var _a, _b, _c;
-    if (sortColumns.length === 0) return data;
-    const direction = (_b = (_a = sortColumns[0]) == null ? void 0 : _a.direction) == null ? void 0 : _b.toLocaleLowerCase();
-    const columnKey = (_c = sortColumns[0]) == null ? void 0 : _c.columnKey;
-    return orderBy(data, columnKey, direction);
+  const sortedRows = useMemo2(() => {
+    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]);
   }, [data, sortColumns]);
   useEffect(() => {
-    if (page && page > maxPage && maxPage > 0) {
-      handlePageChange(1);
+    var _a;
+    setIsLoading(false);
+    if ((_a = tableRef.current) == null ? void 0 : _a.element) {
+      setContainerWidth(tableRef.current.element.offsetWidth);
     }
-  }, [page, maxPage, handlePageChange]);
-  return /* @__PURE__ */ jsxs3(
+  }, []);
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       className: cn(
-        "wapper_table flex-1 rounded-md overflow-hidden relative h-full flex flex-col min-h-0",
+        "wapper_table flex flex-col h-full min-h-0",
         classNameWapperTable
       ),
       children: [
-        /* @__PURE__ */ jsxs3("div", { className: "relative wapper_table_empty wrapperDatagrid flex flex-col flex-1", children: [
-          /* @__PURE__ */ jsx4(
-            DataGrid,
-            {
-              ref: tableRef,
-              "aria-rowcount": sortedRows == null ? void 0 : sortedRows.length,
-              selectedRows,
-              rows: sortedRows,
-              rowKeyGetter: rowKeyGetter && isSelectRow ? customRowKeyGetter : void 0,
-              columns: newColumns,
-              renderers: {
-                renderSortStatus: RenderSortStatus_default,
-                renderCheckbox({ onChange: onChange2, checked, ...spread2 }) {
-                  const handleChange = (e) => {
-                    onChange2(e.target.checked, e.nativeEvent.shiftKey);
-                  };
-                  return /* @__PURE__ */ jsx4(Checkbox, { color: "indigo", checked: !!checked, onChange: handleChange, ...spread2 });
-                }
-              },
-              className: "fill-grid flex-1 h-full min-h-0",
-              defaultColumnOptions: {
-                // minWidth: 200,
-                // maxWidth: 200,
-                renderCell: ({ column, row }) => {
-                  const value = get(row, column.key);
-                  return [null, void 0, ""].includes(value) ? "-" : value;
-                }
-              },
-              sortColumns,
-              onSortColumnsChange: setSortColumns,
-              ...spread
-            }
-          ),
-          total === 0 && TableLogo && /* @__PURE__ */ jsx4("div", { className: "no_result absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 select-none", children: /* @__PURE__ */ jsx4("div", { className: "flex flex-col justify-center", children: /* @__PURE__ */ jsx4("img", { src: TableLogo, alt: "", className: "size-32" }) }) })
-        ] }),
-        !hiddenPagination && /* @__PURE__ */ jsxs3(
-          "div",
+        /* @__PURE__ */ jsx3(
+          DataGrid,
           {
-            className: cn(
-              "flex justify-between items-center flex-wrap wapper_pagination p-[10px] pl-2 mt-auto",
-              classNamePaginationTable
-            ),
-            children: [
-              !hiddenPaginationText && page && pageSize && /* @__PURE__ */ jsx4("div", { className: "text-sm", children: paginationText ? paginationText({ ...toInPagination, total }) : total ? `${t("display")} ${toInPagination == null ? void 0 : toInPagination.from} ${t("to")} ${toInPagination == null ? void 0 : toInPagination.to} ${t("in")} ${total} ${t("data")}` : "..." }),
-              /* @__PURE__ */ jsx4(
-                ComboboxCustom_default,
-                {
-                  options: listPageSize,
-                  value: pageSize == null ? void 0 : pageSize.toString(),
-                  onChange: (value) => {
-                    if (setConfigPagination) {
-                      setConfigPagination((prev) => ({ ...prev, pageSize: Number(value), page: 1 }));
+            ref: tableRef,
+            rows: sortedRows,
+            columns: newColumns,
+            selectedRows,
+            rowKeyGetter: isSelectRow ? customRowKeyGetter : void 0,
+            sortColumns,
+            onSortColumnsChange: setSortColumns,
+            renderers: {
+              renderSortStatus: RenderSortStatus_default,
+              renderCheckbox({ onChange: onChange2, checked, ...props }) {
+                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);
                     }
                   }
-                }
-              ),
-              !!maxPage && /* @__PURE__ */ jsx4(
-                Pagination,
-                {
-                  color: "indigo",
-                  total: maxPage,
-                  size: "sm",
-                  value: page,
-                  onChange: handlePageChange
-                }
-              )
-            ]
+                );
+              }
+            },
+            ...spread
           }
         ),
-        (fetching || isLoading) && /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 bg-gray-50/45 flex justify-center items-center", children: /* @__PURE__ */ jsx4("div", { className: "border-[2px] rounded-full border-gray-200 shadow-sm", children: /* @__PURE__ */ jsx4(LoadingIcon, { isSpin: true }) }) })
+        (fetching || isLoading) && /* @__PURE__ */ jsx3("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx3(LoadingIcon, { isSpin: true }) })
       ]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mkt-loitd/react-table-grid-custom",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React Table Grid Custom component",
   "license": "ISC",
   "private": false,
@@ -12,6 +12,7 @@
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     }
@@ -28,9 +29,9 @@
     "release:patch": "npm version patch --no-git-tag-version"
   },
   "peerDependencies": {
+    "next": ">=13",
     "react": ">=18",
-    "react-dom": ">=18",
-    "next": ">=13"
+    "react-dom": ">=18"
   },
   "dependencies": {
     "@mantine/core": "^8.3.10",
@@ -49,7 +50,8 @@
   },
   "devDependencies": {
     "@types/lodash": "^4.17.21",
-    "@types/react": "^18.2.66",
+    "@types/react": ">=18",
+    "@types/react-dom": ">=18",
     "tslib": "^2.8.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"