es-grid-template 0.1.3 → 1.1.4

package/es/grid-component/CheckboxFilter.js

@@ -149,11 +149,9 @@ const CheckboxFilter = props => {
     children: node.children?.map(item => getFilterData(item)) || []
   });
   const onCheckAll = e => {
-    // console.log('e.target.checked', e.target.checked)
     if (e.target.checked) {
       const allFilterKeys = flattenKeys(options).map(key => String(key));
 
-      // console.log('allFilterKeys', allFilterKeys)
       // setFilteredKeysSync(allFilterKeys);
       onSelect?.(allFilterKeys);
     } else {

package/es/grid-component/ColumnsChoose.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import type { ColumnsTable } from "./type";
 export type IColumnsChoose<RecordType> = {
     columns: ColumnsTable<RecordType>;
-    triggerChangeColumns?: (columns: ColumnsTable<RecordType>) => void;
+    triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void;
     t?: any;
 };
 export declare const ColumnsChoose: <RecordType extends object>(props: IColumnsChoose<RecordType>) => React.JSX.Element;

package/es/grid-component/ColumnsChoose.js

@@ -137,7 +137,7 @@ export const ColumnsChoose = props => {
   };
   const handleAccept = () => {
     const rs1 = updateColumns(propsColumns, selectedKeys);
-    triggerChangeColumns?.(rs1);
+    triggerChangeColumns?.(rs1, 'columnChoose');
     hide();
   };
   const handleCancel = () => {
@@ -169,8 +169,6 @@ export const ColumnsChoose = props => {
       checkable: true
       // onSelect={(keys, info) => {
       //   const key = info.node.key
-      //   console.log('selectedKeys', keys)
-      //   console.log('info', info)
       //
       //   const find = findItemByKey(columns, 'key', key)
       //
@@ -185,7 +183,6 @@ export const ColumnsChoose = props => {
       //
       //     // const rs  = [...selectedKeys, keys[0]]
       //
-      //     // console.log('rs', rs)
       //     // setSelectedKeys(keys)
       //   // }
       // }}

package/es/grid-component/Command.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { Fragment, useState } from "react";
-// import {getTemplate} from "../../hooks"
 import classnames from "classnames";
 import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useRole, useInteractions, FloatingPortal
 // useClick
@@ -74,7 +73,7 @@ const Command = props => {
     ref: refs.setFloating,
     style: {
       ...floatingStyles,
-      zIndex: 99
+      zIndex: 1999
     }
   }, getFloatingProps()), item.tooltip)));
 };

package/es/grid-component/InternalTable.js

@@ -282,10 +282,9 @@ const InternalTable = props => {
   const mergedColumns = React.useMemo(() => {
     return transformColumns(columns);
   }, [transformColumns, columns]);
-
-  // console.log('mergedColumns', mergedColumns)
-
-  const triggerChangeColumns = () => {};
+  const triggerChangeColumns = newColumns => {
+    setColumns(newColumns);
+  };
   const triggerChangeData = newData => {
     setIsManualUpdate(true);
     setData(newData);

package/es/grid-component/TableGrid.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
-import type { GridTableProps } from "./type";
+import type { ColumnsTable, GridTableProps } from "./type";
 type GridProps<T> = GridTableProps<T> & {
-    triggerChangeColumns?: () => void;
+    triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
     triggerChangeData?: () => void;
     tableRef: any;
     getRowKey: any;

package/es/grid-component/TableGrid.js

@@ -2,7 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { Fragment, useLayoutEffect, useRef } from 'react';
 import { createStyles } from 'antd-style';
 import { numericFormatter } from "react-numeric-component";
+// import type {CheckboxProps} from "rc-master-ui";
 import { Table, Toolbar } from "rc-master-ui";
+// import { conductCheck } from 'rc-tree/lib/utils/conductUtil';
+// import { devUseWarning } from '../../_util/warning';
+// import { arrAdd, arrDel } from 'rc-tree/lib/util';
+
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import ContextMenu from "./ContextMenu";
@@ -16,7 +21,13 @@ import Pagination from "rc-master-ui/es/pagination";
 import ComponentSpinner from "./LoadingSpinner";
 import { ColumnsChoose } from "./ColumnsChoose";
 // import {useMergedState} from "rc-util";
-// import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import useMergedState from "rc-util/es/hooks/useMergedState";
+// import {convertDataToEntities} from "rc-tree/lib/utils/treeUtil";
+// import type {DataNode} from "rc-tree/lib/interface";
+// import {devUseWarning} from "antd/es/_util/warning";
+// import type {GetCheckDisabled} from "rc-tree/es/interface";
+// import useLazyKVMap from "antd/es/table/hooks/useLazyKVMap";
+// import useMultipleSelect from "rc-master-ui/es/_util/hooks/useMultipleSelect";
 
 const convertFilters = filters => {
   const result = [];
@@ -84,7 +95,21 @@ const useStyle = createStyles(({
 });
 // type OnChange = NonNullable<TableProps<any>['onChange']>;
 
-// const EMPTY_LIST: React.Key[] = [];
+const EMPTY_LIST = [];
+
+// const flattenData = <RecordType extends AnyObject = AnyObject>(
+//   childrenColumnName: keyof RecordType,
+//   data?: RecordType[],
+// ): RecordType[] => {
+//   let list: RecordType[] = [];
+//   (data || []).forEach((record) => {
+//     list.push(record);
+//     if (record && typeof record === 'object' && childrenColumnName in record) {
+//       list = [...list, ...flattenData<RecordType>(childrenColumnName, record[childrenColumnName])];
+//     }
+//   });
+//   return list;
+// };
 
 const TableGrid = props => {
   const {
@@ -126,11 +151,13 @@ const TableGrid = props => {
   const {
     mode,
     type,
-    checkboxOnly,
+    // checkboxOnly,
     hideSelectAll,
     columnWidth,
-    selectedRowKeys
-    // defaultSelectedRowKeys
+    selectedRowKeys,
+    defaultSelectedRowKeys
+    // getCheckboxProps,
+    // checkStrictly = true
   } = selectionSettings || {};
   const clickRef = useRef(null);
   const menuRef = useRef(null);
@@ -145,26 +172,15 @@ const TableGrid = props => {
     viewportHeight
   });
 
-  // const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>(defaultSelected);
-
   // ========================= Keys =========================
-  // const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(
-  //   selectedRowKeys || defaultSelectedRowKeys || EMPTY_LIST,
-  //   {
-  //     value: selectedRowKeys,
-  //   },
-  // );
-
-  // console.log('mergedSelectedKeys', mergedSelectedKeys)
-
-  // Reset if rowSelection reset
-
-  // React.useEffect(() => {
-  //   if (!selectionSettings) {
-  //     setMergedSelectedKeys(EMPTY_LIST);
-  //   }
-  // }, [!!selectionSettings]);
-
+  const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(selectedRowKeys || defaultSelectedRowKeys || EMPTY_LIST, {
+    value: selectedRowKeys
+  });
+  React.useEffect(() => {
+    if (!selectionSettings) {
+      setMergedSelectedKeys(EMPTY_LIST);
+    }
+  }, [!!selectionSettings]);
   const contextMenuItems = React.useMemo(() => {
     if (typeof contextMenuHidden === "function" && propContextMenuItems && selectedRowData) {
       const hiddenItems = contextMenuHidden({
@@ -232,24 +248,6 @@ const TableGrid = props => {
       });
     }
   };
-  const handleRowClick = () => () => {
-    // const key = getRowKey(record, index);
-
-    // const keySet = new Set(derivedSelectedKeySet);
-
-    // console.log('key', key)
-
-    if (checkboxOnly !== true) {
-      if (type === 'single') {}
-    }
-    if (clickRef.current) return;
-
-    // @ts-ignore
-    clickRef.current = setTimeout(() => {
-      // console.log("Single Click:", record);
-      clickRef.current = null;
-    }, 250);
-  };
   const handleRowDoubleClick = (record, index) => e => {
     if (clickRef.current) {
       clearTimeout(clickRef.current);
@@ -263,7 +261,7 @@ const TableGrid = props => {
   };
   const onSelectChange = (keys, selectedRows, info, selectedRow) => {
     if (info.type === 'all') {
-      // setMergedSelectedKeys(keys)
+      setMergedSelectedKeys(keys);
       rowSelected?.({
         selected: selectedRows,
         type: 'rowSelected',
@@ -271,7 +269,7 @@ const TableGrid = props => {
       });
     } else {
       if (selectionSettings?.type === 'multiple') {
-        // setMergedSelectedKeys(keys)
+        setMergedSelectedKeys(keys);
         rowSelected?.({
           selected: selectedRows,
           type: 'rowSelected',
@@ -279,8 +277,7 @@ const TableGrid = props => {
         });
       } else {
         // @ts-ignore
-        // setMergedSelectedKeys([selectedRow[rowKey]])
-
+        setMergedSelectedKeys(keys);
         rowSelected?.({
           selected: [selectedRow],
           type: 'rowSelected',
@@ -322,7 +319,7 @@ const TableGrid = props => {
     // className={styles.customTable}
     ,
     className: classNames(className, {
-      'table-none-column-select': selectionSettings?.mode === undefined && selectionSettings?.type !== 'multiple'
+      'table-none-column-select': mode === undefined && type !== 'multiple'
     }, styles.customTable),
     bordered: true,
     virtual: virtual,
@@ -336,17 +333,19 @@ const TableGrid = props => {
     onRow: (data, index) => {
       return {
         onDoubleClick: handleRowDoubleClick(data, index),
-        // onClick: handleRowClick,
-        onClick: handleRowClick(),
+        // onClick: handleRowClick(data, index),
         onContextMenu: onContextMenu(data)
       };
     },
     rowSelection: {
       ...selectionSettings,
-      type: selectionSettings?.mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
+      type: mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
       columnWidth: !mode ? 0.0000001 : columnWidth ?? 50,
       onChange: onSelectChange,
-      selectedRowKeys: mode === 'checkbox' && type === 'single' ? selectedRowKeys : undefined,
+      // selectedRowKeys: mode === 'checkbox' && type === 'single' ? selectedRowKeys : undefined,
+      // selectedRowKeys: mode === 'checkbox' && type === 'single' ? mergedSelectedKeys : undefined,
+
+      selectedRowKeys: mergedSelectedKeys,
       defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
       preserveSelectedRowKeys: true,
       ...rowSelection,
@@ -408,7 +407,6 @@ const TableGrid = props => {
         mode: 'responsive'
         // mode={'scroll'}
         // onClick={(val: any) => {
-        //   console.log(val)
         // }}
       }), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
         columns: columns,
@@ -416,6 +414,13 @@ const TableGrid = props => {
         triggerChangeColumns: triggerChangeColumns
       }), /*#__PURE__*/React.createElement("div", null)));
     }
+
+    // rowClassName={(record) => (selectionSettings?.getCheckboxProps(record).disabled ? "row-disabled" : "")}
+    ,
+    rowClassName: record => {
+      const originalOnCell = selectionSettings?.getCheckboxProps?.(record) || {};
+      return originalOnCell.disabled ? 'row-disabled' : '';
+    }
   }, rest)), pagination && pagination.onChange && /*#__PURE__*/React.createElement(Pagination
   // style={{padding: '0.75rem 1rem'}}
   , _extends({

package/es/grid-component/styles.scss

@@ -12,6 +12,7 @@ $cell-selected-bg: #E6EFFD !default;
 $cell-index-selected-bg: #0550C5 !default;
 $cell-index-focus-bg: #CEDBEF !default;
 $rowSelectedHoverBg: 'ui-rc' !default;
+$boxShadowColor: rgba(5, 5, 5, 0.09) !default;
 
 .react-hot-toast {
   font-size: 1rem;
@@ -58,6 +59,7 @@ $rowSelectedHoverBg: 'ui-rc' !default;
   }
 
   .#{$prefix}-table-tbody {
+
     .#{$prefix}-table-row {
       &.#{$prefix}-table-row-selected {
         > .#{$prefix}-table-cell {
@@ -65,6 +67,12 @@ $rowSelectedHoverBg: 'ui-rc' !default;
         }
       }
 
+      &.row-disabled {
+        .ui-rc-table-cell {
+          //background-color: #f5f5f5;
+        }
+      }
+
       > .#{$prefix}-table-cell {
         &.#{$prefix}-table-cell-row-hover {
           background: #FBDED6;
@@ -83,6 +91,7 @@ $rowSelectedHoverBg: 'ui-rc' !default;
 
       }
     }
+
     .ui-rc-table-placeholder {
       .ui-rc-table-cell {
         padding-top: 0 !important;
@@ -178,7 +187,7 @@ $rowSelectedHoverBg: 'ui-rc' !default;
     }
 
     &.#{$prefix}-table-ping-right:not(.#{$prefix}-table-has-fix-right) .#{$prefix}-table-container::after {
-      box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.2);
+      box-shadow: inset -10px 0 8px -8px $boxShadowColor;
     }
 
   }
@@ -186,14 +195,14 @@ $rowSelectedHoverBg: 'ui-rc' !default;
   .#{$prefix}-table-ping-left {
     .#{$prefix}-table-cell-fix-left-first::after,
     .#{$prefix}-table-cell-fix-left-last::after {
-      box-shadow: inset 10px 0 8px -8px rgba(5, 5, 5, 0.1);
+      box-shadow: inset 10px 0 8px -8px $boxShadowColor;
     }
   }
 
   .#{$prefix}-table-ping-right {
     .#{$prefix}-table-cell-fix-right-first::after,
     .#{$prefix}-table-cell-fix-right-last::after {
-      box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.1);
+      box-shadow: inset -10px 0 8px -8px $boxShadowColor;
     }
   }
 

package/es/grid-component/table/Grid.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
+import type { ColumnsTable } from "../type";
 import type { GridTableProps } from "../type";
 type Props<T> = GridTableProps<T> & {
     setColumns?: any;
     tableRef: any;
     getRowKey: any;
+    triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
 };
 declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Grid;

package/es/grid-component/table/Grid.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { Fragment, useMemo } from 'react';
 import { GridStyle } from "../GridStyle";
 import TableGrid from "../TableGrid";
-import Command from "../Command";
 import { renderContent } from "../hooks/useColumns";
 const Grid = props => {
   const {
@@ -14,6 +13,7 @@ const Grid = props => {
     style,
     format,
     getRowKey,
+    triggerChangeColumns,
     ...rest
   } = props;
   const transformColumns = React.useCallback(cols => {
@@ -45,21 +45,21 @@ const Grid = props => {
           render: (_, __, rowIndex) => rowIndex + 1
         };
       }
-      if (transformedColumn.dataIndex === "command") {
-        return {
-          ...transformedColumn,
-          onCell: () => ({
-            className: "ui-rc-cell-command"
-          }),
-          render: () => /*#__PURE__*/React.createElement("div", {
-            className: "ui-rc-cell-command__content"
-          }, column.commandItems?.map((item, index) => item.visible !== false ? /*#__PURE__*/React.createElement(Command, {
-            key: `command-${index}`,
-            item: item,
-            onClick: e => e.preventDefault()
-          }) : null))
-        };
-      }
+
+      // if (transformedColumn.dataIndex === "command") {
+      //   return {
+      //     ...transformedColumn,
+      //     onCell: () => ({ className: "ui-rc-cell-command" }),
+      //     render: () => (
+      //       <div className="ui-rc-cell-command__content">
+      //         {column.commandItems?.map((item, index) =>
+      //           item.visible !== false ? <Command key={`command-${index}`} item={item} onClick={(e) => e.preventDefault()} /> : null
+      //         )}
+      //       </div>
+      //     ),
+      //   };
+      // }
+
       return {
         ...transformedColumn,
         render: (value, record, rowIndex) => renderContent(column, value, record, rowIndex, format)
@@ -83,7 +83,8 @@ const Grid = props => {
       ...style,
       minHeight: height
     },
-    getRowKey: getRowKey
+    getRowKey: getRowKey,
+    triggerChangeColumns: triggerChangeColumns
   }))));
 };
 export default Grid;

package/es/grid-component/table/GridEdit.d.ts

@@ -2,10 +2,11 @@ import React from 'react';
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import type { TableEditProps } from "../type";
+import type { ColumnsTable } from "../type";
 import type { GetRowKey } from "../type";
 type Props<RecordType> = TableEditProps<RecordType> & {
     tableRef: any;
-    triggerChangeColumns?: () => void;
+    triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void;
     triggerChangeData?: (newData: RecordType[], type: string) => void;
     getRowKey: GetRowKey<RecordType>;
 };

package/es/grid-component/table/GridEdit.js

@@ -140,10 +140,6 @@ const GridEdit = props => {
         newSelectedCells.add(`${r}-${c}`);
       }
     }
-
-    // console.log('newSelectedCells', newSelectedCells)
-    // setSelectedCells(newSelectedCells)
-
     setSelectedCells(new Set(newSelectedCells));
     // forceUpdate();
     setUpdateKey(prev => prev + 1); // Cập nhật key để trigger re-render
@@ -321,7 +317,6 @@ const GridEdit = props => {
     // }
   };
   const onSubmit = formData => {
-    console.log('onSubmit', formData);
     try {
       // const record = (await form.validateFields()) as RecordType;
       const row = {
@@ -375,8 +370,6 @@ const GridEdit = props => {
       option,
       field
     } = args;
-
-    // console.log('newState', newState)
     //
     // console.log('getValues()', getValues())
 
@@ -400,7 +393,6 @@ const GridEdit = props => {
       };
       if (onCellChange) {
         if (onCellChange.length > 1) {
-          console.log('onCellChange Callback');
           onCellChange({
             field,
             indexCol: 1,
@@ -414,7 +406,6 @@ const GridEdit = props => {
             sumValue: []
           }, handleChangeCallback);
         } else {
-          console.log('onCellChange');
           onCellChange({
             field,
             indexCol: 1,
@@ -433,7 +424,6 @@ const GridEdit = props => {
       console.log('aaaaaa blur');
     }
     if (prevState && newState && prevState !== newState && type === 'enter') {
-      console.log('enter');
       onSubmit(record);
     }
   };

package/es/grid-component/type.d.ts

@@ -1,4 +1,4 @@
-import type { Key, ReactElement, ReactNode } from "react";
+import type { ReactElement, ReactNode } from "react";
 import type React from "react";
 import type { IOperator } from "./hooks";
 import type { TypeFilter, TableProps as RcTableProps, TableColumnType as RcColumnType, EditType } from "rc-master-ui";
@@ -9,6 +9,7 @@ import type { FieldNames, FilterFunc } from "rc-select/es/Select";
 import type { ColorPickerProps } from "antd";
 export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file" | "quarter" | "year" | "datetime" | "string" | "boolean" | "checkbox" | "color" | null | undefined;
 export type AnyObject = Record<PropertyKey, any>;
+export type Key = React.Key;
 export type SelectMode = 'checkbox' | 'radio' | undefined;
 export type ITextAlign = 'center' | 'left' | 'right';
 export type Frozen = 'left' | 'right' | 'Left' | 'Right';
@@ -210,6 +211,7 @@ export type SourceFilter = {
     loadOptions?: (search: string, callback: (newOptions: any[]) => void) => void;
 };
 export type RowSelection<RecordType> = Omit<TableRowSelection<RecordType>, 'type' | 'columnWidth' | 'hideSelectAll' | 'defaultSelectedRowKeys'>;
+export type RowSelectMethod = 'all' | 'none' | 'invert' | 'single' | 'multiple';
 export type SelectionSettings = Omit<TableRowSelection, 'type' | 'onChange' | 'onSelect' | 'onSelectAll' | 'onSelectNone' | 'onSelectMultiple'> & {
     mode?: 'checkbox' | 'radio';
     type?: 'single' | 'multiple';

package/lib/grid-component/CheckboxFilter.js

@@ -158,11 +158,9 @@ const CheckboxFilter = props => {
     children: node.children?.map(item => getFilterData(item)) || []
   });
   const onCheckAll = e => {
-    // console.log('e.target.checked', e.target.checked)
     if (e.target.checked) {
       const allFilterKeys = (0, _useFilter.flattenKeys)(options).map(key => String(key));
 
-      // console.log('allFilterKeys', allFilterKeys)
       // setFilteredKeysSync(allFilterKeys);
       onSelect?.(allFilterKeys);
     } else {

package/lib/grid-component/ColumnsChoose.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import type { ColumnsTable } from "./type";
 export type IColumnsChoose<RecordType> = {
     columns: ColumnsTable<RecordType>;
-    triggerChangeColumns?: (columns: ColumnsTable<RecordType>) => void;
+    triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void;
     t?: any;
 };
 export declare const ColumnsChoose: <RecordType extends object>(props: IColumnsChoose<RecordType>) => React.JSX.Element;

package/lib/grid-component/ColumnsChoose.js

@@ -146,7 +146,7 @@ const ColumnsChoose = props => {
   };
   const handleAccept = () => {
     const rs1 = (0, _hooks.updateColumns)(propsColumns, selectedKeys);
-    triggerChangeColumns?.(rs1);
+    triggerChangeColumns?.(rs1, 'columnChoose');
     hide();
   };
   const handleCancel = () => {
@@ -178,8 +178,6 @@ const ColumnsChoose = props => {
       checkable: true
       // onSelect={(keys, info) => {
       //   const key = info.node.key
-      //   console.log('selectedKeys', keys)
-      //   console.log('info', info)
       //
       //   const find = findItemByKey(columns, 'key', key)
       //
@@ -194,7 +192,6 @@ const ColumnsChoose = props => {
       //
       //     // const rs  = [...selectedKeys, keys[0]]
       //
-      //     // console.log('rs', rs)
       //     // setSelectedKeys(keys)
       //   // }
       // }}

package/lib/grid-component/Command.js

@@ -13,8 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _hooks = require("./hooks");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// import {getTemplate} from "../../hooks"
-
 // import {Button} from "antd";
 
 const TooltipStyle = _styledComponents.default.div.withConfig({
@@ -83,7 +81,7 @@ const Command = props => {
     ref: refs.setFloating,
     style: {
       ...floatingStyles,
-      zIndex: 99
+      zIndex: 1999
     }
   }, getFloatingProps()), item.tooltip)));
 };

package/lib/grid-component/InternalTable.js

@@ -291,10 +291,9 @@ const InternalTable = props => {
   const mergedColumns = _react.default.useMemo(() => {
     return transformColumns(columns);
   }, [transformColumns, columns]);
-
-  // console.log('mergedColumns', mergedColumns)
-
-  const triggerChangeColumns = () => {};
+  const triggerChangeColumns = newColumns => {
+    setColumns(newColumns);
+  };
   const triggerChangeData = newData => {
     setIsManualUpdate(true);
     setData(newData);

package/lib/grid-component/TableGrid.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
-import type { GridTableProps } from "./type";
+import type { ColumnsTable, GridTableProps } from "./type";
 type GridProps<T> = GridTableProps<T> & {
-    triggerChangeColumns?: () => void;
+    triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
     triggerChangeData?: () => void;
     tableRef: any;
     getRowKey: any;

package/lib/grid-component/TableGrid.js

@@ -20,10 +20,23 @@ var _useColumns = require("./hooks/useColumns");
 var _pagination = _interopRequireDefault(require("rc-master-ui/es/pagination"));
 var _LoadingSpinner = _interopRequireDefault(require("./LoadingSpinner"));
 var _ColumnsChoose = require("./ColumnsChoose");
+var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import type {CheckboxProps} from "rc-master-ui";
+
+// import { conductCheck } from 'rc-tree/lib/utils/conductUtil';
+// import { devUseWarning } from '../../_util/warning';
+// import { arrAdd, arrDel } from 'rc-tree/lib/util';
+
 // import {useMergedState} from "rc-util";
-// import useMergedState from 'rc-util/lib/hooks/useMergedState';
+
+// import {convertDataToEntities} from "rc-tree/lib/utils/treeUtil";
+// import type {DataNode} from "rc-tree/lib/interface";
+// import {devUseWarning} from "antd/es/_util/warning";
+// import type {GetCheckDisabled} from "rc-tree/es/interface";
+// import useLazyKVMap from "antd/es/table/hooks/useLazyKVMap";
+// import useMultipleSelect from "rc-master-ui/es/_util/hooks/useMultipleSelect";
 
 const convertFilters = filters => {
   const result = [];
@@ -91,7 +104,21 @@ const useStyle = (0, _antdStyle.createStyles)(({
 });
 // type OnChange = NonNullable<TableProps<any>['onChange']>;
 
-// const EMPTY_LIST: React.Key[] = [];
+const EMPTY_LIST = [];
+
+// const flattenData = <RecordType extends AnyObject = AnyObject>(
+//   childrenColumnName: keyof RecordType,
+//   data?: RecordType[],
+// ): RecordType[] => {
+//   let list: RecordType[] = [];
+//   (data || []).forEach((record) => {
+//     list.push(record);
+//     if (record && typeof record === 'object' && childrenColumnName in record) {
+//       list = [...list, ...flattenData<RecordType>(childrenColumnName, record[childrenColumnName])];
+//     }
+//   });
+//   return list;
+// };
 
 const TableGrid = props => {
   const {
@@ -133,11 +160,13 @@ const TableGrid = props => {
   const {
     mode,
     type,
-    checkboxOnly,
+    // checkboxOnly,
     hideSelectAll,
     columnWidth,
-    selectedRowKeys
-    // defaultSelectedRowKeys
+    selectedRowKeys,
+    defaultSelectedRowKeys
+    // getCheckboxProps,
+    // checkStrictly = true
   } = selectionSettings || {};
   const clickRef = (0, _react.useRef)(null);
   const menuRef = (0, _react.useRef)(null);
@@ -152,26 +181,15 @@ const TableGrid = props => {
     viewportHeight
   });
 
-  // const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>(defaultSelected);
-
   // ========================= Keys =========================
-  // const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(
-  //   selectedRowKeys || defaultSelectedRowKeys || EMPTY_LIST,
-  //   {
-  //     value: selectedRowKeys,
-  //   },
-  // );
-
-  // console.log('mergedSelectedKeys', mergedSelectedKeys)
-
-  // Reset if rowSelection reset
-
-  // React.useEffect(() => {
-  //   if (!selectionSettings) {
-  //     setMergedSelectedKeys(EMPTY_LIST);
-  //   }
-  // }, [!!selectionSettings]);
-
+  const [mergedSelectedKeys, setMergedSelectedKeys] = (0, _useMergedState.default)(selectedRowKeys || defaultSelectedRowKeys || EMPTY_LIST, {
+    value: selectedRowKeys
+  });
+  _react.default.useEffect(() => {
+    if (!selectionSettings) {
+      setMergedSelectedKeys(EMPTY_LIST);
+    }
+  }, [!!selectionSettings]);
   const contextMenuItems = _react.default.useMemo(() => {
     if (typeof contextMenuHidden === "function" && propContextMenuItems && selectedRowData) {
       const hiddenItems = contextMenuHidden({
@@ -239,24 +257,6 @@ const TableGrid = props => {
       });
     }
   };
-  const handleRowClick = () => () => {
-    // const key = getRowKey(record, index);
-
-    // const keySet = new Set(derivedSelectedKeySet);
-
-    // console.log('key', key)
-
-    if (checkboxOnly !== true) {
-      if (type === 'single') {}
-    }
-    if (clickRef.current) return;
-
-    // @ts-ignore
-    clickRef.current = setTimeout(() => {
-      // console.log("Single Click:", record);
-      clickRef.current = null;
-    }, 250);
-  };
   const handleRowDoubleClick = (record, index) => e => {
     if (clickRef.current) {
       clearTimeout(clickRef.current);
@@ -270,7 +270,7 @@ const TableGrid = props => {
   };
   const onSelectChange = (keys, selectedRows, info, selectedRow) => {
     if (info.type === 'all') {
-      // setMergedSelectedKeys(keys)
+      setMergedSelectedKeys(keys);
       rowSelected?.({
         selected: selectedRows,
         type: 'rowSelected',
@@ -278,7 +278,7 @@ const TableGrid = props => {
       });
     } else {
       if (selectionSettings?.type === 'multiple') {
-        // setMergedSelectedKeys(keys)
+        setMergedSelectedKeys(keys);
         rowSelected?.({
           selected: selectedRows,
           type: 'rowSelected',
@@ -286,8 +286,7 @@ const TableGrid = props => {
         });
       } else {
         // @ts-ignore
-        // setMergedSelectedKeys([selectedRow[rowKey]])
-
+        setMergedSelectedKeys(keys);
         rowSelected?.({
           selected: [selectedRow],
           type: 'rowSelected',
@@ -329,7 +328,7 @@ const TableGrid = props => {
     // className={styles.customTable}
     ,
     className: (0, _classnames.default)(className, {
-      'table-none-column-select': selectionSettings?.mode === undefined && selectionSettings?.type !== 'multiple'
+      'table-none-column-select': mode === undefined && type !== 'multiple'
     }, styles.customTable),
     bordered: true,
     virtual: virtual,
@@ -343,17 +342,19 @@ const TableGrid = props => {
     onRow: (data, index) => {
       return {
         onDoubleClick: handleRowDoubleClick(data, index),
-        // onClick: handleRowClick,
-        onClick: handleRowClick(),
+        // onClick: handleRowClick(data, index),
         onContextMenu: onContextMenu(data)
       };
     },
     rowSelection: {
       ...selectionSettings,
-      type: selectionSettings?.mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
+      type: mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
       columnWidth: !mode ? 0.0000001 : columnWidth ?? 50,
       onChange: onSelectChange,
-      selectedRowKeys: mode === 'checkbox' && type === 'single' ? selectedRowKeys : undefined,
+      // selectedRowKeys: mode === 'checkbox' && type === 'single' ? selectedRowKeys : undefined,
+      // selectedRowKeys: mode === 'checkbox' && type === 'single' ? mergedSelectedKeys : undefined,
+
+      selectedRowKeys: mergedSelectedKeys,
       defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
       preserveSelectedRowKeys: true,
       ...rowSelection,
@@ -415,7 +416,6 @@ const TableGrid = props => {
         mode: 'responsive'
         // mode={'scroll'}
         // onClick={(val: any) => {
-        //   console.log(val)
         // }}
       }), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
         columns: columns,
@@ -423,6 +423,13 @@ const TableGrid = props => {
         triggerChangeColumns: triggerChangeColumns
       }), /*#__PURE__*/_react.default.createElement("div", null)));
     }
+
+    // rowClassName={(record) => (selectionSettings?.getCheckboxProps(record).disabled ? "row-disabled" : "")}
+    ,
+    rowClassName: record => {
+      const originalOnCell = selectionSettings?.getCheckboxProps?.(record) || {};
+      return originalOnCell.disabled ? 'row-disabled' : '';
+    }
   }, rest)), pagination && pagination.onChange && /*#__PURE__*/_react.default.createElement(_pagination.default
   // style={{padding: '0.75rem 1rem'}}
   , (0, _extends2.default)({

package/lib/grid-component/styles.scss

@@ -12,6 +12,7 @@ $cell-selected-bg: #E6EFFD !default;
 $cell-index-selected-bg: #0550C5 !default;
 $cell-index-focus-bg: #CEDBEF !default;
 $rowSelectedHoverBg: 'ui-rc' !default;
+$boxShadowColor: rgba(5, 5, 5, 0.09) !default;
 
 .react-hot-toast {
   font-size: 1rem;
@@ -58,6 +59,7 @@ $rowSelectedHoverBg: 'ui-rc' !default;
   }
 
   .#{$prefix}-table-tbody {
+
     .#{$prefix}-table-row {
       &.#{$prefix}-table-row-selected {
         > .#{$prefix}-table-cell {
@@ -65,6 +67,12 @@ $rowSelectedHoverBg: 'ui-rc' !default;
         }
       }
 
+      &.row-disabled {
+        .ui-rc-table-cell {
+          //background-color: #f5f5f5;
+        }
+      }
+
       > .#{$prefix}-table-cell {
         &.#{$prefix}-table-cell-row-hover {
           background: #FBDED6;
@@ -83,6 +91,7 @@ $rowSelectedHoverBg: 'ui-rc' !default;
 
       }
     }
+
     .ui-rc-table-placeholder {
       .ui-rc-table-cell {
         padding-top: 0 !important;
@@ -178,7 +187,7 @@ $rowSelectedHoverBg: 'ui-rc' !default;
     }
 
     &.#{$prefix}-table-ping-right:not(.#{$prefix}-table-has-fix-right) .#{$prefix}-table-container::after {
-      box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.2);
+      box-shadow: inset -10px 0 8px -8px $boxShadowColor;
     }
 
   }
@@ -186,14 +195,14 @@ $rowSelectedHoverBg: 'ui-rc' !default;
   .#{$prefix}-table-ping-left {
     .#{$prefix}-table-cell-fix-left-first::after,
     .#{$prefix}-table-cell-fix-left-last::after {
-      box-shadow: inset 10px 0 8px -8px rgba(5, 5, 5, 0.1);
+      box-shadow: inset 10px 0 8px -8px $boxShadowColor;
     }
   }
 
   .#{$prefix}-table-ping-right {
     .#{$prefix}-table-cell-fix-right-first::after,
     .#{$prefix}-table-cell-fix-right-last::after {
-      box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.1);
+      box-shadow: inset -10px 0 8px -8px $boxShadowColor;
     }
   }
 

package/lib/grid-component/table/Grid.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
+import type { ColumnsTable } from "../type";
 import type { GridTableProps } from "../type";
 type Props<T> = GridTableProps<T> & {
     setColumns?: any;
     tableRef: any;
     getRowKey: any;
+    triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
 };
 declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Grid;

package/lib/grid-component/table/Grid.js

@@ -9,7 +9,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _GridStyle = require("../GridStyle");
 var _TableGrid = _interopRequireDefault(require("../TableGrid"));
-var _Command = _interopRequireDefault(require("../Command"));
 var _useColumns = require("../hooks/useColumns");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -23,6 +22,7 @@ const Grid = props => {
     style,
     format,
     getRowKey,
+    triggerChangeColumns,
     ...rest
   } = props;
   const transformColumns = _react.default.useCallback(cols => {
@@ -54,21 +54,21 @@ const Grid = props => {
           render: (_, __, rowIndex) => rowIndex + 1
         };
       }
-      if (transformedColumn.dataIndex === "command") {
-        return {
-          ...transformedColumn,
-          onCell: () => ({
-            className: "ui-rc-cell-command"
-          }),
-          render: () => /*#__PURE__*/_react.default.createElement("div", {
-            className: "ui-rc-cell-command__content"
-          }, column.commandItems?.map((item, index) => item.visible !== false ? /*#__PURE__*/_react.default.createElement(_Command.default, {
-            key: `command-${index}`,
-            item: item,
-            onClick: e => e.preventDefault()
-          }) : null))
-        };
-      }
+
+      // if (transformedColumn.dataIndex === "command") {
+      //   return {
+      //     ...transformedColumn,
+      //     onCell: () => ({ className: "ui-rc-cell-command" }),
+      //     render: () => (
+      //       <div className="ui-rc-cell-command__content">
+      //         {column.commandItems?.map((item, index) =>
+      //           item.visible !== false ? <Command key={`command-${index}`} item={item} onClick={(e) => e.preventDefault()} /> : null
+      //         )}
+      //       </div>
+      //     ),
+      //   };
+      // }
+
       return {
         ...transformedColumn,
         render: (value, record, rowIndex) => (0, _useColumns.renderContent)(column, value, record, rowIndex, format)
@@ -92,7 +92,8 @@ const Grid = props => {
       ...style,
       minHeight: height
     },
-    getRowKey: getRowKey
+    getRowKey: getRowKey,
+    triggerChangeColumns: triggerChangeColumns
   }))));
 };
 var _default = exports.default = Grid;

package/lib/grid-component/table/GridEdit.d.ts

@@ -2,10 +2,11 @@ import React from 'react';
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import type { TableEditProps } from "../type";
+import type { ColumnsTable } from "../type";
 import type { GetRowKey } from "../type";
 type Props<RecordType> = TableEditProps<RecordType> & {
     tableRef: any;
-    triggerChangeColumns?: () => void;
+    triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void;
     triggerChangeData?: (newData: RecordType[], type: string) => void;
     getRowKey: GetRowKey<RecordType>;
 };

package/lib/grid-component/table/GridEdit.js

@@ -149,10 +149,6 @@ const GridEdit = props => {
         newSelectedCells.add(`${r}-${c}`);
       }
     }
-
-    // console.log('newSelectedCells', newSelectedCells)
-    // setSelectedCells(newSelectedCells)
-
     setSelectedCells(new Set(newSelectedCells));
     // forceUpdate();
     setUpdateKey(prev => prev + 1); // Cập nhật key để trigger re-render
@@ -330,7 +326,6 @@ const GridEdit = props => {
     // }
   };
   const onSubmit = formData => {
-    console.log('onSubmit', formData);
     try {
       // const record = (await form.validateFields()) as RecordType;
       const row = {
@@ -384,8 +379,6 @@ const GridEdit = props => {
       option,
       field
     } = args;
-
-    // console.log('newState', newState)
     //
     // console.log('getValues()', getValues())
 
@@ -409,7 +402,6 @@ const GridEdit = props => {
       };
       if (onCellChange) {
         if (onCellChange.length > 1) {
-          console.log('onCellChange Callback');
           onCellChange({
             field,
             indexCol: 1,
@@ -423,7 +415,6 @@ const GridEdit = props => {
             sumValue: []
           }, handleChangeCallback);
         } else {
-          console.log('onCellChange');
           onCellChange({
             field,
             indexCol: 1,
@@ -442,7 +433,6 @@ const GridEdit = props => {
       console.log('aaaaaa blur');
     }
     if (prevState && newState && prevState !== newState && type === 'enter') {
-      console.log('enter');
       onSubmit(record);
     }
   };

package/lib/grid-component/type.d.ts

@@ -1,4 +1,4 @@
-import type { Key, ReactElement, ReactNode } from "react";
+import type { ReactElement, ReactNode } from "react";
 import type React from "react";
 import type { IOperator } from "./hooks";
 import type { TypeFilter, TableProps as RcTableProps, TableColumnType as RcColumnType, EditType } from "rc-master-ui";
@@ -9,6 +9,7 @@ import type { FieldNames, FilterFunc } from "rc-select/es/Select";
 import type { ColorPickerProps } from "antd";
 export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file" | "quarter" | "year" | "datetime" | "string" | "boolean" | "checkbox" | "color" | null | undefined;
 export type AnyObject = Record<PropertyKey, any>;
+export type Key = React.Key;
 export type SelectMode = 'checkbox' | 'radio' | undefined;
 export type ITextAlign = 'center' | 'left' | 'right';
 export type Frozen = 'left' | 'right' | 'Left' | 'Right';
@@ -210,6 +211,7 @@ export type SourceFilter = {
     loadOptions?: (search: string, callback: (newOptions: any[]) => void) => void;
 };
 export type RowSelection<RecordType> = Omit<TableRowSelection<RecordType>, 'type' | 'columnWidth' | 'hideSelectAll' | 'defaultSelectedRowKeys'>;
+export type RowSelectMethod = 'all' | 'none' | 'invert' | 'single' | 'multiple';
 export type SelectionSettings = Omit<TableRowSelection, 'type' | 'onChange' | 'onSelect' | 'onSelectAll' | 'onSelectNone' | 'onSelectMultiple'> & {
     mode?: 'checkbox' | 'radio';
     type?: 'single' | 'multiple';

package/package.json

@@ -1,102 +1,102 @@
-{
-  "name": "es-grid-template",
-  "version": "0.1.3",
-  "description": "es-grid-template",
-  "keywords": [
-    "react",
-    "react-component",
-    "grid",
-    "table"
-  ],
-  "license": "MIT",
-  "main": "lib/index",
-  "module": "es/index",
-  "files": [
-    "lib",
-    "es",
-    "assets/*.css",
-    "assets/*.less"
-  ],
-  "scripts": {
-    "compile": "father build",
-    "docs:build": "dumi build",
-    "__docs:deploy": "gh-pages -d dist",
-    "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
-    "now-build": "npm run docs:build",
-    "prepare": "dumi setup",
-    "prepublishOnly": "npm run compile",
-    "postpublish": "npm run docs:build",
-    "__postpublish": "npm run docs:build && npm run docs:deploy",
-    "start": "dumi dev",
-    "test": "vitest --watch false",
-    "coverage": "vitest run --coverage"
-  },
-  "dependencies": {
-    "@ant-design/colors": "^8.0.0",
-    "@ant-design/cssinjs": "^1.22.0",
-    "@ant-design/cssinjs-utils": "^1.1.1",
-    "@ant-design/icons": "^5.5.2",
-    "@babel/runtime": "^7.11.2",
-    "@core-rc/rc-select": "^0.0.8",
-    "@ctrl/tinycolor": "^3.6.1",
-    "@faker-js/faker": "^9.5.0",
-    "@floating-ui/react": "^0.27.5",
-    "@rc-component/color-picker": "^2.0.1",
-    "@rc-component/father-plugin": "^2.0.1",
-    "@rc-component/trigger": "^2.0.0",
-    "@rc-component/util": "^1.0.1",
-    "@types/react-resizable": "^3.0.8",
-    "@types/styled-components": "^5.1.34",
-    "@vitest/coverage-v8": "^2.0.5",
-    "antd": "^5.24.1",
-    "antd-style": "^3.7.1",
-    "becoxy-icons": "^1.9.9",
-    "classnames": "^2.3.1",
-    "dayjs": "^1.11.13",
-    "lodash": "^4.17.21",
-    "moment": "^2.30.1",
-    "postcss": "^8.4.35",
-    "rc-checkbox": "^3.5.0",
-    "rc-dropdown": "^4.2.1",
-    "rc-field-form": "^2.6.0",
-    "rc-master-ui": "^1.1.10-0",
-    "rc-select": "^14.16.3",
-    "rc-tooltip": "^6.3.0",
-    "rc-tree": "^5.10.1",
-    "rc-tree-select": "^5.24.5",
-    "react-hook-form": "^7.54.2",
-    "react-hot-toast": "^2.5.2",
-    "react-numeric-component": "^1.0.7",
-    "react-resizable": "^3.0.5",
-    "sass": "^1.81.0",
-    "styled-components": "^6.1.15",
-    "throttle-debounce": "^5.0.2",
-    "vitest": "^2.0.5"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.26.4",
-    "@babel/preset-env": "^7.26.9",
-    "@rc-component/np": "^1.0.3",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.4.0",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
-    "@types/warning": "^3.0.0",
-    "cross-env": "^7.0.0",
-    "dumi": "^2.2.13",
-    "eslint": "^8.56.0",
-    "eslint-plugin-unicorn": "^55.0.0",
-    "father": "^4.0.0",
-    "gh-pages": "^3.1.0",
-    "less": "^4.1.1",
-    "np": "^7.1.0",
-    "rc-test": "^7.0.9",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^4.0.5"
-  },
-  "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
-  }
-}
+{
+  "name": "es-grid-template",
+  "version": "1.1.4",
+  "description": "es-grid-template",
+  "keywords": [
+    "react",
+    "react-component",
+    "grid",
+    "table"
+  ],
+  "license": "MIT",
+  "main": "lib/index",
+  "module": "es/index",
+  "files": [
+    "lib",
+    "es",
+    "assets/*.css",
+    "assets/*.less"
+  ],
+  "scripts": {
+    "compile": "father build",
+    "docs:build": "dumi build",
+    "__docs:deploy": "gh-pages -d dist",
+    "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
+    "now-build": "npm run docs:build",
+    "prepare": "dumi setup",
+    "prepublishOnly": "npm run compile",
+    "postpublish": "npm run docs:build",
+    "__postpublish": "npm run docs:build && npm run docs:deploy",
+    "start": "dumi dev",
+    "test": "vitest --watch false",
+    "coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@ant-design/colors": "^8.0.0",
+    "@ant-design/cssinjs": "^1.22.0",
+    "@ant-design/cssinjs-utils": "^1.1.1",
+    "@ant-design/icons": "^5.5.2",
+    "@babel/runtime": "^7.11.2",
+    "@core-rc/rc-select": "^0.0.8",
+    "@ctrl/tinycolor": "^3.6.1",
+    "@faker-js/faker": "^9.5.0",
+    "@floating-ui/react": "^0.27.5",
+    "@rc-component/color-picker": "^2.0.1",
+    "@rc-component/father-plugin": "^2.0.1",
+    "@rc-component/trigger": "^2.0.0",
+    "@rc-component/util": "^1.0.1",
+    "@types/react-resizable": "^3.0.8",
+    "@types/styled-components": "^5.1.34",
+    "@vitest/coverage-v8": "^2.0.5",
+    "antd": "^5.24.1",
+    "antd-style": "^3.7.1",
+    "becoxy-icons": "^1.9.9",
+    "classnames": "^2.3.1",
+    "dayjs": "^1.11.13",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "postcss": "^8.4.35",
+    "rc-checkbox": "^3.5.0",
+    "rc-dropdown": "^4.2.1",
+    "rc-field-form": "^2.6.0",
+    "rc-master-ui": "^1.1.1",
+    "rc-select": "^14.16.3",
+    "rc-tooltip": "^6.3.0",
+    "rc-tree": "^5.10.1",
+    "rc-tree-select": "^5.24.5",
+    "react-hook-form": "^7.54.2",
+    "react-hot-toast": "^2.5.2",
+    "react-numeric-component": "^1.0.7",
+    "react-resizable": "^3.0.5",
+    "sass": "^1.81.0",
+    "styled-components": "^6.1.15",
+    "throttle-debounce": "^5.0.2",
+    "vitest": "^2.0.5"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.26.4",
+    "@babel/preset-env": "^7.26.9",
+    "@rc-component/np": "^1.0.3",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.4.0",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@types/warning": "^3.0.0",
+    "cross-env": "^7.0.0",
+    "dumi": "^2.2.13",
+    "eslint": "^8.56.0",
+    "eslint-plugin-unicorn": "^55.0.0",
+    "father": "^4.0.0",
+    "gh-pages": "^3.1.0",
+    "less": "^4.1.1",
+    "np": "^7.1.0",
+    "rc-test": "^7.0.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  }
+}