@mkt-loitd/react-table-grid-custom 1.3.9 → 1.4.1

package/dist/index.d.mts

@@ -25,26 +25,19 @@ interface useShowHideColumnReturn<T, SR> {
 declare const useShowHideColumn: <T, SR = unknown>({ nameLocal, columns, ignoreColumns }: useShowHideColumnParameter<T, SR>) => useShowHideColumnReturn<T, SR>;
 
 interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key> {
-    /** Data */
+    classNameWapperTable?: string;
+    hiddenSTT?: boolean;
     data: readonly T[];
     columns: readonly ColumnOrColumnGroup<T, SR>[];
-    /** Pagination display */
+    rowKeyGetter?: keyof T | ((row: T) => K);
     page?: number;
     pageSize?: number;
-    hiddenSTT?: boolean;
-    /** Selection */
     enableSelectRow?: boolean;
     selectedRows?: ReadonlySet<K>;
     onSelectedRowsChange?: (rows: ReadonlySet<K>) => void;
-    /** Sorting */
     sortColumns?: readonly SortColumn[];
     onSortColumnsChange?: (sortColumns: readonly SortColumn[]) => void;
-    /** Row key */
-    rowKeyGetter?: keyof T | ((row: T) => K);
-    /** UI */
-    classNameWapperTable?: string;
     fetching?: boolean;
-    /** Events */
     onRowClick?: (row: T, rowIdx: number) => void;
     onRowDoubleClick?: (row: T, rowIdx: number) => void;
 }

package/dist/index.d.ts

@@ -25,26 +25,19 @@ interface useShowHideColumnReturn<T, SR> {
 declare const useShowHideColumn: <T, SR = unknown>({ nameLocal, columns, ignoreColumns }: useShowHideColumnParameter<T, SR>) => useShowHideColumnReturn<T, SR>;
 
 interface IReactTableGridCustom<T = unknown, SR = unknown, K extends Key = Key> {
-    /** Data */
+    classNameWapperTable?: string;
+    hiddenSTT?: boolean;
     data: readonly T[];
     columns: readonly ColumnOrColumnGroup<T, SR>[];
-    /** Pagination display */
+    rowKeyGetter?: keyof T | ((row: T) => K);
     page?: number;
     pageSize?: number;
-    hiddenSTT?: boolean;
-    /** Selection */
     enableSelectRow?: boolean;
     selectedRows?: ReadonlySet<K>;
     onSelectedRowsChange?: (rows: ReadonlySet<K>) => void;
-    /** Sorting */
     sortColumns?: readonly SortColumn[];
     onSortColumnsChange?: (sortColumns: readonly SortColumn[]) => void;
-    /** Row key */
-    rowKeyGetter?: keyof T | ((row: T) => K);
-    /** UI */
-    classNameWapperTable?: string;
     fetching?: boolean;
-    /** Events */
     onRowClick?: (row: T, rowIdx: number) => void;
     onRowDoubleClick?: (row: T, rowIdx: number) => void;
 }

package/dist/index.js

@@ -199,7 +199,6 @@ var useShowHideColumn = ({
 };
 
 // src/component/ui/Table/ReactTableGridCustom.tsx
-var import_core = require("@mantine/core");
 var import_lodash3 = require("lodash");
 var import_react2 = require("react");
 var import_react_data_grid = require("react-data-grid");
@@ -229,52 +228,9 @@ var LoadingIcon = ({
     }
   );
 };
-var ArrowIcon = ({
-  h,
-  w,
-  size,
-  className
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.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_runtime2 = require("react/jsx-runtime");
-var RenderSortStatus = ({ sortDirection, priority }) => {
-  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_runtime2.jsx)("span", { children: priority })
-  ] });
-};
-var RenderSortStatus_default = RenderSortStatus;
 
 // src/component/ui/Table/ReactTableGridCustom.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var ReactTableGridCustomInner = (props) => {
   const {
     classNameWapperTable,
@@ -295,13 +251,13 @@ var ReactTableGridCustomInner = (props) => {
   } = props;
   const isSelectRow = enableSelectRow && selectedRows !== void 0;
   const newColumns = (0, import_react2.useMemo)(() => {
-    let cols = [...columns];
+    const cols = [...columns];
     if (isSelectRow) {
       cols.unshift(import_react_data_grid.SelectColumn);
     }
     if (!hiddenSTT) {
       cols.unshift({
-        key: "index",
+        key: "__index__",
         name: "STT",
         width: 80,
         renderCell: ({ rowIdx }) => STT({ page, pageSize }, rowIdx)
@@ -318,15 +274,15 @@ var ReactTableGridCustomInner = (props) => {
     },
     [rowKeyGetter]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
       className: cn(
-        "wapper_table flex flex-col h-full min-h-0",
+        "wapper_table flex flex-col h-full min-h-0 relative",
         classNameWapperTable
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           import_react_data_grid.DataGrid,
           {
             rows: data,
@@ -337,26 +293,10 @@ var ReactTableGridCustomInner = (props) => {
             sortColumns,
             onSortColumnsChange,
             onCellClick: ({ row, rowIdx }) => onRowClick == null ? void 0 : onRowClick(row, rowIdx),
-            onCellDoubleClick: ({ row, rowIdx }) => onRowDoubleClick == null ? void 0 : onRowDoubleClick(row, rowIdx),
-            renderers: {
-              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,
-                  {
-                    ...props2,
-                    checked: Boolean(checked),
-                    onChange: (e) => onChange(
-                      e.currentTarget.checked,
-                      e.nativeEvent instanceof MouseEvent ? e.nativeEvent.shiftKey : false
-                    )
-                  }
-                );
-              }
-            }
+            onCellDoubleClick: ({ row, rowIdx }) => onRowDoubleClick == null ? void 0 : onRowDoubleClick(row, rowIdx)
           }
         ),
-        fetching && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoadingIcon, { isSpin: true }) })
+        fetching && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-white/60 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoadingIcon, { isSpin: true }) })
       ]
     }
   );
@@ -367,7 +307,7 @@ var ReactTableGridCustom = (0, import_react2.memo)(
 
 // src/component/ui/Table/TableStyleContextWapper.tsx
 var import_react3 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var isClient = typeof window !== "undefined";
 var TableStyleContextWapper = ({
   children,
@@ -377,10 +317,10 @@ var TableStyleContextWapper = ({
   idWapper: externalId
 }) => {
   if (!isClient) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children });
   }
   const idWapper = externalId != null ? externalId : "12";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
       id: `wapper_menu_context-${idWapper}`,

package/dist/index.mjs

@@ -161,7 +161,6 @@ var useShowHideColumn = ({
 };
 
 // src/component/ui/Table/ReactTableGridCustom.tsx
-import { Checkbox } from "@mantine/core";
 import { get } from "lodash";
 import {
   memo,
@@ -198,52 +197,9 @@ var LoadingIcon = ({
     }
   );
 };
-var ArrowIcon = ({
-  h,
-  w,
-  size,
-  className
-}) => {
-  return /* @__PURE__ */ 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__ */ 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
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var RenderSortStatus = ({ sortDirection, priority }) => {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    sortDirection !== void 0 && /* @__PURE__ */ jsx2(
-      ArrowIcon,
-      {
-        className: cn(sortDirection === "DESC" && "-rotate-180", "transition-transform"),
-        size: 20
-      }
-    ),
-    /* @__PURE__ */ jsx2("span", { children: priority })
-  ] });
-};
-var RenderSortStatus_default = RenderSortStatus;
 
 // src/component/ui/Table/ReactTableGridCustom.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var ReactTableGridCustomInner = (props) => {
   const {
     classNameWapperTable,
@@ -264,13 +220,13 @@ var ReactTableGridCustomInner = (props) => {
   } = props;
   const isSelectRow = enableSelectRow && selectedRows !== void 0;
   const newColumns = useMemo2(() => {
-    let cols = [...columns];
+    const cols = [...columns];
     if (isSelectRow) {
       cols.unshift(SelectColumn);
     }
     if (!hiddenSTT) {
       cols.unshift({
-        key: "index",
+        key: "__index__",
         name: "STT",
         width: 80,
         renderCell: ({ rowIdx }) => STT({ page, pageSize }, rowIdx)
@@ -287,15 +243,15 @@ var ReactTableGridCustomInner = (props) => {
     },
     [rowKeyGetter]
   );
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "wapper_table flex flex-col h-full min-h-0",
+        "wapper_table flex flex-col h-full min-h-0 relative",
         classNameWapperTable
       ),
       children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx2(
           DataGrid,
           {
             rows: data,
@@ -306,26 +262,10 @@ var ReactTableGridCustomInner = (props) => {
             sortColumns,
             onSortColumnsChange,
             onCellClick: ({ row, rowIdx }) => onRowClick == null ? void 0 : onRowClick(row, rowIdx),
-            onCellDoubleClick: ({ row, rowIdx }) => onRowDoubleClick == null ? void 0 : onRowDoubleClick(row, rowIdx),
-            renderers: {
-              renderSortStatus: (props2) => /* @__PURE__ */ jsx3(RenderSortStatus_default, { ...props2 }),
-              renderCheckbox({ onChange, checked, ...props2 }) {
-                return /* @__PURE__ */ jsx3(
-                  Checkbox,
-                  {
-                    ...props2,
-                    checked: Boolean(checked),
-                    onChange: (e) => onChange(
-                      e.currentTarget.checked,
-                      e.nativeEvent instanceof MouseEvent ? e.nativeEvent.shiftKey : false
-                    )
-                  }
-                );
-              }
-            }
+            onCellDoubleClick: ({ row, rowIdx }) => onRowDoubleClick == null ? void 0 : onRowDoubleClick(row, rowIdx)
           }
         ),
-        fetching && /* @__PURE__ */ jsx3("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx3(LoadingIcon, { isSpin: true }) })
+        fetching && /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 flex items-center justify-center bg-white/60 z-10", children: /* @__PURE__ */ jsx2(LoadingIcon, { isSpin: true }) })
       ]
     }
   );
@@ -336,7 +276,7 @@ var ReactTableGridCustom = memo(
 
 // src/component/ui/Table/TableStyleContextWapper.tsx
 import { memo as memo2 } from "react";
-import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
 var isClient = typeof window !== "undefined";
 var TableStyleContextWapper = ({
   children,
@@ -346,10 +286,10 @@ var TableStyleContextWapper = ({
   idWapper: externalId
 }) => {
   if (!isClient) {
-    return /* @__PURE__ */ jsx4(Fragment2, { children });
+    return /* @__PURE__ */ jsx3(Fragment, { children });
   }
   const idWapper = externalId != null ? externalId : "12";
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       id: `wapper_menu_context-${idWapper}`,

package/package.json

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