@mkt-loitd/react-table-grid-custom 1.0.0

package/README.md

@@ -0,0 +1,184 @@
+# 📦 React Table Grid Custom
+
+A powerful, customizable React table component built on top of **react-data-grid**, optimized for **Next.js** and **TypeScript** projects.
+
+> Supports pagination, sorting, row selection, i18n, Mantine UI, and flexible column configuration.
+
+---
+
+## ✨ Features
+
+* ✅ Built on **react-data-grid**
+* ✅ Fully written in **TypeScript**
+* ✅ Pagination & sorting
+* ✅ Row selection (checkbox)
+* ✅ Internationalization (`react-i18next`)
+* ✅ Mantine UI integration
+* ✅ Optimized for **Next.js (App Router & Pages Router)**
+* ✅ Tree-shakeable & ESM/CJS support
+
+---
+
+## 📦 Installation
+
+```bash
+npm install @loitd/react-table-grid-custom
+```
+
+or
+
+```bash
+yarn add @loitd/react-table-grid-custom
+```
+
+or
+
+```bash
+pnpm add @loitd/react-table-grid-custom
+```
+
+---
+
+## ⚠️ Peer Dependencies
+
+Make sure your project already has:
+
+```bash
+react >= 18
+react-dom >= 18
+next >= 13
+```
+
+These are required but **not bundled** with the library.
+
+---
+
+## 🚀 Basic Usage
+
+```tsx
+import ReactTableGridCustom from '@loitd/react-table-grid-custom'
+
+const columns = [
+  { key: 'id', name: 'ID' },
+  { key: 'name', name: 'Name' },
+  { key: 'email', name: 'Email' }
+]
+
+const data = [
+  { id: 1, name: 'John', email: 'john@gmail.com' },
+  { id: 2, name: 'Jane', email: 'jane@gmail.com' }
+]
+
+export default function Example() {
+  return (
+    <div style={{ height: 400 }}>
+      <ReactTableGridCustom
+        columns={columns}
+        data={data}
+        page={1}
+        pageSize={10}
+        total={data.length}
+      />
+    </div>
+  )
+}
+```
+
+---
+
+## 🧩 Props
+
+### `ReactTableGridCustom<T>`
+
+| Prop                       | Type                     | Description              |
+| -------------------------- | ------------------------ | ------------------------ |
+| `columns`                  | `TColumnsTable<T>`       | Column definitions       |
+| `data`                     | `T[]`                    | Table data               |
+| `page`                     | `number`                 | Current page             |
+| `pageSize`                 | `number`                 | Items per page           |
+| `total`                    | `number`                 | Total records            |
+| `onChange`                 | `(page: number) => void` | Page change callback     |
+| `selectedRows`             | `ReadonlySet<Key>`       | Selected rows            |
+| `fetching`                 | `boolean`                | Show loading overlay     |
+| `hiddenPagination`         | `boolean`                | Hide pagination          |
+| `hiddenSTT`                | `boolean`                | Hide index column        |
+| `classNameWapperTable`     | `string`                 | Custom wrapper class     |
+| `classNamePaginationTable` | `string`                 | Pagination wrapper class |
+
+---
+
+## 🌍 Internationalization (i18n)
+
+This component supports `react-i18next`.
+
+Make sure you have:
+
+```bash
+npm install react-i18next i18next
+```
+
+Example translation keys:
+
+```json
+{
+  "display": "Display",
+  "to": "to",
+  "in": "in",
+  "data": "records"
+}
+```
+
+---
+
+## 🎨 Styling
+
+* Uses **Mantine** components
+* Fully compatible with **Tailwind CSS**
+* Includes default styles from `react-data-grid`
+
+```ts
+import 'react-data-grid/lib/styles.css'
+```
+
+---
+
+## 🛠 Development
+
+```bash
+npm run dev
+```
+
+Build package:
+
+```bash
+npm run build
+```
+
+Test publish locally:
+
+```bash
+npm pack
+```
+
+---
+
+## 📁 Package Output
+
+When published, the package includes only:
+
+```
+dist/
+README.md
+```
+
+---
+
+## 📄 License
+
+ISC © LoiTD
+
+---
+
+## 💬 Support
+
+If you find a bug or want to request a feature, feel free to open an issue or contribute.

package/dist/index.css

@@ -0,0 +1,57 @@
+/* src/ReactTableGridCustom.css */
+:root {
+  --mkt-border-color: #dee2e6a6;
+}
+.rdg::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+}
+:is(.rdg)::-webkit-scrollbar-track {
+  border-radius: 4px;
+  background-color: transparent;
+}
+:is(.rdg)::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: #dadada;
+}
+div[aria-selected=true] {
+  outline: none !important;
+}
+.wapper_table {
+  border: 1px solid var(--mkt-border-color);
+}
+.wapper_pagination {
+  border-top: 1px solid var(--mkt-border-color);
+  margin-top: 2px;
+}
+div[role=row]:not(:last-child) > div {
+  border-bottom: 1px solid var(--mkt-border-color);
+}
+div[role=row] > div:not(:last-child) {
+  border-right: 1px solid var(--mkt-border-color);
+}
+.page_size-table[data-combobox-disabled] {
+  cursor: default;
+}
+.custom_input_table.mantine-Input-input:focus {
+  outline: none !important;
+  --input-bd: inherit;
+}
+.custom_input_table.mantine-Input-input {
+  --height: 30px;
+  min-height: var(--height);
+  height: var(--height);
+  line-height: var(--height);
+  text-align: center;
+}
+.fill-grid {
+  block-size: 100%;
+}
+div[aria-sort] > span {
+  display: flex;
+  align-items: center;
+}
+.RIGHT_COLUMN_FROZEN_CLASS {
+  position: sticky !important;
+  right: 0 !important;
+}

package/dist/index.d.mts

@@ -0,0 +1,71 @@
+import { Key, Dispatch, SetStateAction, ReactNode, JSX } from 'react';
+import { ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
+import { PaginationRootProps } from '@mantine/core';
+
+type TColumnsTable<T = unknown, SR = unknown> = readonly ColumnOrColumnGroup<NoInfer<T>, NoInfer<SR>>[];
+interface IPaginationParams$1 {
+    pageSize?: number;
+    page?: number;
+}
+interface IObjectDynamic {
+    [key: string]: any;
+}
+interface ISetConfigPagination extends IPaginationParams$1, IObjectDynamic {
+}
+
+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 {
+    classNameWapperTable?: string;
+    classNamePaginationTable?: string;
+    hiddenPagination?: boolean;
+    hiddenSTT?: boolean;
+    data?: T[];
+    /** Nếu hàm onChange nên dùng useCallback */
+    onChange?: Pick<PaginationRootProps, 'onChange'>['onChange'];
+    setConfigPagination?: Dispatch<SetStateAction<ISetConfigPagination>>;
+    /** Nếu hàm rowKeyGetter nên dùng useCallback*/
+    rowKeyGetter?: string | Maybe<(row: NoInfer<T>) => K>;
+    hiddenPaginationText?: boolean;
+    /** dùng hàm paginationText nên dùng useCallback*/
+    paginationText?: (obj: IPaginationTextFunc) => ReactNode;
+    listPageSize?: string[];
+    fetching?: boolean;
+    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;
+
+interface IPaginationParams {
+    pageSize?: number;
+    page?: number;
+}
+type Maybe<T> = T | undefined | null;
+interface ICalculatorTotalPage extends IPaginationParams {
+    total?: number;
+}
+interface ISTTParams extends IPaginationParams {
+}
+interface useShowHideColumnParameter<T, SR = unknown> {
+    nameLocal?: string;
+    /** nếu đầu vào là columns: Functions() thì nên dùng useMemo thì sẽ tối ưu hơn */
+    columns: TColumnsTable<T, SR>;
+    ignoreColumns?: string[];
+}
+interface useShowHideColumnReturn<T, SR> {
+    hiddenColumns: string[];
+    setHiddenColumns: Dispatch<SetStateAction<string[]>>;
+    columnsTable: TColumnsTable<T, SR>;
+    changeHiddenColumn: (key: string | string[]) => void;
+    newShowhideColumns: TColumnsTable<T, SR>;
+    locationColumns: string[];
+    handleFindLocation: (filterColumns: TColumnsTable<T, SR>, locationColumns?: string[]) => TColumnsTable<T, SR>;
+    handleChangeLocation?: (arr: string[]) => void;
+}
+
+export { type ICalculatorTotalPage, type IPaginationParams, type IReactTableGridCustom, type ISTTParams, type Maybe, ReactTableGridCustom, ReactTableGridCustom as ReactTableGridCustomDefault, type TColumnsTable, type useShowHideColumnParameter, type useShowHideColumnReturn };

package/dist/index.d.ts

@@ -0,0 +1,71 @@
+import { Key, Dispatch, SetStateAction, ReactNode, JSX } from 'react';
+import { ColumnOrColumnGroup, DataGridProps } from 'react-data-grid';
+import { PaginationRootProps } from '@mantine/core';
+
+type TColumnsTable<T = unknown, SR = unknown> = readonly ColumnOrColumnGroup<NoInfer<T>, NoInfer<SR>>[];
+interface IPaginationParams$1 {
+    pageSize?: number;
+    page?: number;
+}
+interface IObjectDynamic {
+    [key: string]: any;
+}
+interface ISetConfigPagination extends IPaginationParams$1, IObjectDynamic {
+}
+
+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 {
+    classNameWapperTable?: string;
+    classNamePaginationTable?: string;
+    hiddenPagination?: boolean;
+    hiddenSTT?: boolean;
+    data?: T[];
+    /** Nếu hàm onChange nên dùng useCallback */
+    onChange?: Pick<PaginationRootProps, 'onChange'>['onChange'];
+    setConfigPagination?: Dispatch<SetStateAction<ISetConfigPagination>>;
+    /** Nếu hàm rowKeyGetter nên dùng useCallback*/
+    rowKeyGetter?: string | Maybe<(row: NoInfer<T>) => K>;
+    hiddenPaginationText?: boolean;
+    /** dùng hàm paginationText nên dùng useCallback*/
+    paginationText?: (obj: IPaginationTextFunc) => ReactNode;
+    listPageSize?: string[];
+    fetching?: boolean;
+    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;
+
+interface IPaginationParams {
+    pageSize?: number;
+    page?: number;
+}
+type Maybe<T> = T | undefined | null;
+interface ICalculatorTotalPage extends IPaginationParams {
+    total?: number;
+}
+interface ISTTParams extends IPaginationParams {
+}
+interface useShowHideColumnParameter<T, SR = unknown> {
+    nameLocal?: string;
+    /** nếu đầu vào là columns: Functions() thì nên dùng useMemo thì sẽ tối ưu hơn */
+    columns: TColumnsTable<T, SR>;
+    ignoreColumns?: string[];
+}
+interface useShowHideColumnReturn<T, SR> {
+    hiddenColumns: string[];
+    setHiddenColumns: Dispatch<SetStateAction<string[]>>;
+    columnsTable: TColumnsTable<T, SR>;
+    changeHiddenColumn: (key: string | string[]) => void;
+    newShowhideColumns: TColumnsTable<T, SR>;
+    locationColumns: string[];
+    handleFindLocation: (filterColumns: TColumnsTable<T, SR>, locationColumns?: string[]) => TColumnsTable<T, SR>;
+    handleChangeLocation?: (arr: string[]) => void;
+}
+
+export { type ICalculatorTotalPage, type IPaginationParams, type IReactTableGridCustom, type ISTTParams, type Maybe, ReactTableGridCustom, ReactTableGridCustom as ReactTableGridCustomDefault, type TColumnsTable, type useShowHideColumnParameter, type useShowHideColumnReturn };

package/dist/index.js

@@ -0,0 +1,417 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ReactTableGridCustom: () => ReactTableGridCustom,
+  ReactTableGridCustomDefault: () => ReactTableGridCustom_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ReactTableGridCustom.tsx
+var import_core2 = require("@mantine/core");
+
+// 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;
+  let per_page = 0;
+  if ((data == null ? void 0 : data.page) !== void 0 && (data == null ? void 0 : data.pageSize) !== void 0) {
+    current_page = data.page;
+    per_page = data.pageSize;
+  }
+  let i = (current_page - 1) * per_page;
+  i = isNaN(i) ? 0 : i;
+  stt = i + (index != null ? index : 0) + 1;
+  return stt;
+};
+
+// src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+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");
+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 ComboboxCustom_default = ComboboxCustom;
+
+// src/component/Icons.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var LoadingIcon = ({
+  isSpin = false,
+  h = 30,
+  w = 30,
+  size = 30,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      className: `${isSpin ? "animate-spin" : ""} ${className != null ? className : ""}`,
+      viewBox: "0 0 1024 1024",
+      focusable: "false",
+      "data-icon": "loading",
+      width: size || w,
+      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" })
+    }
+  );
+};
+var ArrowIcon = ({
+  h,
+  w,
+  size,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      className,
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      viewBox: "0 0 16 16",
+      height: size != null ? size : h,
+      width: size != null ? size : w,
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fillRule: "evenodd",
+          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"
+        }
+      )
+    }
+  );
+};
+
+// src/component/RenderSortStatus.tsx
+var import_jsx_runtime3 = 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)(
+      ArrowIcon,
+      {
+        className: cn(sortDirection === "DESC" && "-rotate-180", "transition-transform"),
+        size: 20
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.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 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,
+  ...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 isSelectRow = selectedRows !== void 0;
+  const maxPage = (0, import_react3.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
+      );
+      return {
+        from,
+        to: maxPage === page ? total : 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;
+      });
+    }
+    if (isSelectRow) {
+      columnsCustom.unshift(import_react_data_grid.SelectColumn);
+    }
+    if (!hiddenSTT || !hiddenSTT && page && pageSize) {
+      columnsCustom.unshift({
+        key: "index",
+        name: "STT",
+        width: 80,
+        renderCell: ({ rowIdx }) => STT({ page, pageSize }, rowIdx)
+      });
+    }
+    return columnsCustom;
+  }, [hiddenSTT, isSelectRow, page, pageSize, columnTranslation, containerWidth]);
+  const customRowKeyGetter = (0, import_react3.useMemo)(() => {
+    return (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 }));
+      }
+    },
+    [setConfigPagination, onChange]
+  );
+  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);
+  }, [data, sortColumns]);
+  (0, import_react3.useEffect)(() => {
+    if (page && page > maxPage && maxPage > 0) {
+      handlePageChange(1);
+    }
+  }, [page, maxPage, handlePageChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: cn(
+        "wapper_table flex-1 rounded-md overflow-hidden relative h-full flex flex-col 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",
+          {
+            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 }));
+                    }
+                  }
+                }
+              ),
+              !!maxPage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                import_core2.Pagination,
+                {
+                  color: "indigo",
+                  total: maxPage,
+                  size: "sm",
+                  value: page,
+                  onChange: handlePageChange
+                }
+              )
+            ]
+          }
+        ),
+        (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 }) }) })
+      ]
+    }
+  );
+};
+var ReactTableGridCustom = (0, import_react3.memo)(
+  ReactTableGridCustomInner
+);
+var ReactTableGridCustom_default = ReactTableGridCustom;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ReactTableGridCustom,
+  ReactTableGridCustomDefault
+});

package/dist/index.mjs

@@ -0,0 +1,390 @@
+"use client";
+
+// src/ReactTableGridCustom.tsx
+import { Checkbox, Pagination } from "@mantine/core";
+
+// 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;
+  let per_page = 0;
+  if ((data == null ? void 0 : data.page) !== void 0 && (data == null ? void 0 : data.pageSize) !== void 0) {
+    current_page = data.page;
+    per_page = data.pageSize;
+  }
+  let i = (current_page - 1) * per_page;
+  i = isNaN(i) ? 0 : i;
+  stt = i + (index != null ? index : 0) + 1;
+  return stt;
+};
+
+// src/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+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";
+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 }) })
+      ]
+    }
+  );
+};
+var ComboboxCustom_default = ComboboxCustom;
+
+// src/component/Icons.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var LoadingIcon = ({
+  isSpin = false,
+  h = 30,
+  w = 30,
+  size = 30,
+  className
+}) => {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      className: `${isSpin ? "animate-spin" : ""} ${className != null ? className : ""}`,
+      viewBox: "0 0 1024 1024",
+      focusable: "false",
+      "data-icon": "loading",
+      width: size || w,
+      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" })
+    }
+  );
+};
+var ArrowIcon = ({
+  h,
+  w,
+  size,
+  className
+}) => {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      className,
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      viewBox: "0 0 16 16",
+      height: size != null ? size : h,
+      width: size != null ? size : w,
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx2(
+        "path",
+        {
+          fillRule: "evenodd",
+          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"
+        }
+      )
+    }
+  );
+};
+
+// src/component/RenderSortStatus.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var RenderSortStatus = ({ sortDirection, priority }) => {
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    sortDirection !== void 0 && /* @__PURE__ */ jsx3(
+      ArrowIcon,
+      {
+        className: cn(sortDirection === "DESC" && "-rotate-180", "transition-transform"),
+        size: 20
+      }
+    ),
+    /* @__PURE__ */ jsx3("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";
+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,
+  ...spread
+}) => {
+  const { t } = useTranslation2();
+  const [isLoading, setIsLoading] = useState(true);
+  const tableRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [sortColumns, setSortColumns] = useState([]);
+  const isSelectRow = selectedRows !== void 0;
+  const maxPage = useMemo3(
+    () => !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
+      );
+      return {
+        from,
+        to: maxPage === page ? total : 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;
+      });
+    }
+    if (isSelectRow) {
+      columnsCustom.unshift(SelectColumn);
+    }
+    if (!hiddenSTT || !hiddenSTT && page && pageSize) {
+      columnsCustom.unshift({
+        key: "index",
+        name: "STT",
+        width: 80,
+        renderCell: ({ rowIdx }) => STT({ page, pageSize }, rowIdx)
+      });
+    }
+    return columnsCustom;
+  }, [hiddenSTT, isSelectRow, page, pageSize, columnTranslation, containerWidth]);
+  const customRowKeyGetter = useMemo3(() => {
+    return (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 }));
+      }
+    },
+    [setConfigPagination, onChange]
+  );
+  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);
+  }, [data, sortColumns]);
+  useEffect(() => {
+    if (page && page > maxPage && maxPage > 0) {
+      handlePageChange(1);
+    }
+  }, [page, maxPage, handlePageChange]);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        "wapper_table flex-1 rounded-md overflow-hidden relative h-full flex flex-col 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",
+          {
+            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 }));
+                    }
+                  }
+                }
+              ),
+              !!maxPage && /* @__PURE__ */ jsx4(
+                Pagination,
+                {
+                  color: "indigo",
+                  total: maxPage,
+                  size: "sm",
+                  value: page,
+                  onChange: handlePageChange
+                }
+              )
+            ]
+          }
+        ),
+        (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 }) }) })
+      ]
+    }
+  );
+};
+var ReactTableGridCustom = memo(
+  ReactTableGridCustomInner
+);
+var ReactTableGridCustom_default = ReactTableGridCustom;
+export {
+  ReactTableGridCustom,
+  ReactTableGridCustom_default as ReactTableGridCustomDefault
+};

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@mkt-loitd/react-table-grid-custom",
+  "version": "1.0.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "private": false,
+  "description": "React Table Grid Custom component",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "dev": "tsup src/index.ts --watch --format esm,cjs --dts",
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "prepublishOnly": "npm run build",
+    "release:patch": "npm version patch --no-git-tag-version"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "next": ">=13"
+  },
+  "dependencies": {
+    "@mantine/core": "^8.3.10",
+    "@tanstack/react-query": "^5.90.12",
+    "clsx": "^2.1.1",
+    "formik": "^2.4.9",
+    "i18next": "^25.7.3",
+    "idb": "^8.0.3",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "react-data-grid": "^7.0.0-beta.59",
+    "react-i18next": "^16.5.0",
+    "react-select": "^5.10.2",
+    "tailwind-merge": "^3.4.0",
+    "typeorm": "^0.3.28"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.17.21",
+    "@types/react": "^18.2.66",
+    "tslib": "^2.8.1",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/loitd140201/react-table.git"
+  },
+  "author": "",
+  "bugs": {
+    "url": "https://github.com/loitd140201/react-table/issues"
+  },
+  "homepage": "https://github.com/loitd140201/react-table#readme"
+}