es-grid-template 0.0.7 → 0.0.8

package/lib/{GridTable.js → TableGrid.js}

@@ -7,55 +7,38 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _uiRc = require("ui-rc");
 var _reactResizable = require("react-resizable");
 var _antdStyle = require("antd-style");
 var _reactNumericComponent = require("react-numeric-component");
 var _icons = require("@ant-design/icons");
+var _rcMasterUi = require("rc-master-ui");
 var _dayjs = _interopRequireDefault(require("dayjs"));
 require("dayjs/locale/es");
 require("dayjs/locale/vi");
 require("./styles.scss");
+var _en_US = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/en_US"));
+var _vi_VN = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/vi_VN"));
 var _moment = _interopRequireDefault(require("moment"));
 var _CheckboxFilter = _interopRequireDefault(require("./CheckboxFilter"));
 var _ContextMenu = _interopRequireDefault(require("./ContextMenu"));
-var _ColumnsChoose = require("./ColumnsChoose");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _hooks = require("./hooks");
 var _antd = require("antd");
 var _useColumns = require("./hooks/useColumns");
+var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
+var _pagination = _interopRequireDefault(require("rc-master-ui/es/pagination"));
+var _space = _interopRequireDefault(require("rc-master-ui/es/space"));
+var _becoxyIcons = require("becoxy-icons");
+var _LoadingSpinner = _interopRequireDefault(require("./LoadingSpinner"));
+var _ColumnsChoose = require("./ColumnsChoose");
 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 {Button, DatePicker, Input, Space} from "antd"
-
-// import {flatColumns} from "../../hooks/useColumns";
-// import {
-//   checkDecimalSeparator,
-//   checkThousandSeparator,
-//   convertDateToDayjs,
-//   convertDayjsToDate,
-//   getTypeFilter,
-//   getDatepickerFormat,
-//   isColor,
-//   isEmpty,
-//   numberOperator,
-//   sumDataByField,
-//   translateOption
-// } from "../hooks";
-
-// import type {ColumnsType, ColumnType, GridTableProps} from "../../type";
-
-// import en from 'antd/es/date-picker/locale/en_US'
-
-// import vi from 'antd/es/date-picker/locale/vi_VN'
-
-// import type {PickerLocale} from "antd/es/date-picker/generatePicker";
-
-// import type {PickerLocale} from "ui-rc/dist/date-picker/generatePicker";
+// import styled from "styled-components";
 
+_dayjs.default.extend(_customParseFormat.default);
 const {
   RangePicker
-} = _uiRc.DatePicker;
+} = _rcMasterUi.DatePicker;
 const convertFilters = filters => {
   const result = [];
   filters.forEach(({
@@ -65,25 +48,25 @@ const convertFilters = filters => {
     operator
   }) => {
     if (!filteredKeys || filteredKeys.length === 0) return;
-    if (column.typeFilter === "DateRange" && filteredKeys.length === 2) {
+    if (column?.typeFilter === "DateRange" && filteredKeys.length === 2) {
       result.push({
         key,
-        field: column.dataIndex,
+        field: column?.dataIndex,
         value: filteredKeys[0],
         predicate: "and",
         operator: "greaterthanorequal"
       }, {
         key,
-        field: column.dataIndex,
+        field: column?.dataIndex,
         value: filteredKeys[1],
         predicate: "and",
         operator: "lessthanorequal"
       });
-    } else if (column.typeFilter === 'Checkbox') {
+    } else if (column?.typeFilter === 'Checkbox') {
       filteredKeys.forEach(value => {
         result.push({
           key,
-          field: column.dataIndex,
+          field: column?.dataIndex,
           value,
           predicate: "or",
           operator
@@ -92,7 +75,7 @@ const convertFilters = filters => {
     } else {
       result.push({
         key,
-        field: column.dataIndex,
+        field: column?.dataIndex,
         value: filteredKeys[0],
         predicate: 'and',
         operator
@@ -149,10 +132,13 @@ const useStyle = (0, _antdStyle.createStyles)(({
     `
   };
 });
-const GridTable = props => {
+// type OnChange = NonNullable<TableProps<any>['onChange']>;
+
+const TableGrid = props => {
   const {
     columns: defaultColumns,
     dataSource,
+    title,
     format,
     virtual = true,
     t,
@@ -169,23 +155,27 @@ const GridTable = props => {
     rowSelection,
     rowSelected,
     rowKey = 'id',
+    pagination,
+    scroll,
+    onFilterClick,
+    dataSourceFilter: propDataSourceFilter,
+    loading,
+    setColumns,
+    // dataSourceFilter,
     ...rest
   } = props;
   const {
     styles
   } = useStyle();
+  const locale = lang && lang === 'en' ? _en_US.default : _vi_VN.default;
+  // const locale =  vi
 
-  // const locale = lang && lang === 'en' ? en : vi
-
-  // const buddhistLocale: PickerLocale = {
-  //   ...locale,
-  //   lang: {
-  //     ...locale.lang
-  //
-  //   }
-  // }
-
-  // console.log('buddhistLocale', buddhistLocale)
+  const buddhistLocale = {
+    ...locale,
+    lang: {
+      ...locale.lang
+    }
+  };
   const clickRef = (0, _react.useRef)(null);
   const searchInput = (0, _react.useRef)(null);
   const menuRef = (0, _react.useRef)(null);
@@ -202,9 +192,11 @@ const GridTable = props => {
     viewportWidth,
     viewportHeight
   });
-  // const [filters, setFilters] = React.useState<any[]>([])
-
   const [selectedRowKeys, setSelectedRowKeys] = (0, _react.useState)(defaultSelected);
+  const [dataSourceFilter, setDataSourceFilter] = (0, _react.useState)(propDataSourceFilter ?? []);
+  _react.default.useEffect(() => {
+    setDataSourceFilter(propDataSourceFilter ?? []);
+  }, [propDataSourceFilter]);
   const contextMenuItems = _react.default.useMemo(() => {
     if (typeof contextMenuHidden === "function" && propContextMenuItems && selectedRowData) {
       const hiddenItems = contextMenuHidden({
@@ -222,15 +214,15 @@ const GridTable = props => {
   (0, _react.useLayoutEffect)(() => {
     setMenuVisible(false);
   }, []);
-  const handleSearch = (selectedKeys, confirm
-  // dataIndex: any
-  ) => {
+  const handleSearch = (selectedKeys, confirm) => {
     confirm();
   };
   const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue) => {
     const type = (0, _hooks.getTypeFilter)(column);
-    const dateFormat = (0, _hooks.getDatepickerFormat)(column.type, column) ?? 'DD/MM/YYYY';
-    const dateRangeFormat = (0, _hooks.getDatepickerFormat)(column.type, column) ?? 'DD/MM/YYYY';
+    const dateFormat = (0, _hooks.getDatepickerFormat)(column?.typeFilter ?? column?.type, column) ?? 'DD/MM/YYYY';
+    const dateRangeFormat = (0, _hooks.getDatepickerFormat)(column?.type, column) ?? 'DD/MM/YYYY';
+    const find = dataSourceFilter?.find(it => it.key === column?.key);
+    const options = find ? find.data : [];
     switch (type) {
       case 'Number':
         return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
@@ -242,7 +234,7 @@ const GridTable = props => {
           // allowNegative={col.format && col.format.allowNegative === true}
           ,
           allowNegative: true,
-          customInput: _uiRc.Input,
+          customInput: _rcMasterUi.Input,
           className: ' rounded-0 input-element form-control',
           onValueChange: values => {
             // onChangeValueFilter(type, values.floatValue)
@@ -262,7 +254,7 @@ const GridTable = props => {
           // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
           ,
           allowNegative: true,
-          customInput: _uiRc.Input,
+          customInput: _rcMasterUi.Input,
           className: ' rounded-0 input-element form-control'
           // onValueChange={(values: any) => {
           //   onChangeValueFilter(type, values.floatValue, 'min')
@@ -276,7 +268,7 @@ const GridTable = props => {
           // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
           ,
           allowNegative: true,
-          customInput: _uiRc.Input,
+          customInput: _rcMasterUi.Input,
           className: ' rounded-0 input-element form-control',
           onValueChange: () => {
             // onChangeValueFilter(type, values.floatValue, 'max')
@@ -287,21 +279,20 @@ const GridTable = props => {
         const dateValue = selectedKeys[0] ? (0, _hooks.convertDateToDayjs)(new Date(selectedKeys[0]), dateFormat) : null;
         return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
           className: 'mb-1'
-        }, /*#__PURE__*/_react.default.createElement(_uiRc.DatePicker, {
+        }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.DatePicker, {
           format: {
             format: dateFormat,
             type: 'mask'
-          }
-          // locale={buddhistLocale}
-          ,
+          },
+          locale: buddhistLocale,
           style: {
             width: '100%',
             height: '100%'
           },
           value: dateValue,
           defaultValue: dateValue,
-          placeholder: column.placeholder,
-          onChange: (valueDate, dateString) => {
+          placeholder: column?.placeholder,
+          onChange: (date, dateString) => {
             const newDateValue = dateString ? (0, _moment.default)((0, _hooks.convertDayjsToDate)(dateString, dateFormat)).format() : null;
             setSelectedKeys(newDateValue ? [newDateValue] : []);
           }
@@ -334,11 +325,136 @@ const GridTable = props => {
           // popupClassName={'adv-popup-container'}
           // getPopupContainer={() => menuRef.current}
         }))));
+      case 'Week':
+        const weekValue = !(0, _hooks.isEmpty)(selectedKeys[0]) ? (0, _dayjs.default)(selectedKeys[0], dateFormat) : null;
+        return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+          className: 'mb-1'
+        }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.DatePicker, {
+          format: {
+            format: dateFormat,
+            type: 'mask'
+          },
+          picker: 'week',
+          locale: buddhistLocale,
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          value: weekValue,
+          defaultValue: weekValue,
+          placeholder: column?.placeholder,
+          onChange: (date, dateString) => {
+            const newDateValue = dateString ?? null;
+            setSelectedKeys(newDateValue ? [newDateValue] : []);
+          }
+        }))));
+      case 'Month':
+        const monthValue = !(0, _hooks.isEmpty)(selectedKeys[0]) ? (0, _dayjs.default)(selectedKeys[0], dateFormat) : null;
+        return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+          className: 'mb-1'
+        }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.DatePicker, {
+          format: {
+            format: dateFormat,
+            type: 'mask'
+          },
+          picker: 'month',
+          locale: buddhistLocale,
+          style: {
+            width: '100%',
+            height: '100%'
+          },
+          value: monthValue,
+          defaultValue: monthValue,
+          placeholder: column?.placeholder,
+          onChange: (date, dateString) => {
+            const newDateValue = dateString ?? null;
+            setSelectedKeys(newDateValue ? [newDateValue] : []);
+          }
+        })));
+
+      // case 'Quarter':
+      //
+      //   // const monthValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null
+      //
+      //   const pickerFormat  = getDatepickerFormat(getEditType(col) as IEditType, col)
+      //   const pickerValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], pickerFormat) : null
+      //
+      //   return (
+      //     <Fragment>
+      //       <div>
+      //
+      //
+      //         <div className={'mb-1'}>
+      //
+      //           <DatePicker
+      //             format={{
+      //               format: dateFormat,
+      //               type: 'mask'
+      //             }}
+      //             locale={buddhistLocale}
+      //             style={{width: '100%', height: '100%'}}
+      //             value={pickerValue}
+      //             defaultValue={pickerValue}
+      //             placeholder={column.placeholder}
+      //             onChange={(date, dateString) => {
+      //               const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+      //               setSelectedKeys(newDateValue ? [newDateValue] : [])
+      //
+      //             }}
+      //
+      //           />
+      //         </div>
+      //
+      //
+      //       </div>
+      //     </Fragment>
+      //   )
+      //
+      // case 'Year':
+      //
+      //   // const monthValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null
+      //
+      //   const pickerFormat  = getDatepickerFormat(getEditType(col) as IEditType, col)
+      //   const pickerValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], pickerFormat) : null
+      //
+      //   return (
+      //     <Fragment>
+      //       <div>
+      //
+      //
+      //         <div className={'mb-1'}>
+      //
+      //           <DatePicker
+      //             format={{
+      //               format: dateFormat,
+      //               type: 'mask'
+      //             }}
+      //             locale={buddhistLocale}
+      //             style={{width: '100%', height: '100%'}}
+      //             value={pickerValue}
+      //             defaultValue={pickerValue}
+      //             placeholder={column.placeholder}
+      //             onChange={(date, dateString) => {
+      //               const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+      //               setSelectedKeys(newDateValue ? [newDateValue] : [])
+      //
+      //             }}
+      //
+      //           />
+      //         </div>
+      //
+      //
+      //       </div>
+      //     </Fragment>
+      //   )
+
       case 'Dropdown':
         return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
           className: 'mb-1'
-        }, /*#__PURE__*/_react.default.createElement(_uiRc.Select, {
-          options: (0, _hooks.translateOption)(_hooks.numberOperator, t),
+        }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select
+        // options={translateOption(numberOperator, t)}
+        , {
+          options: options,
           style: {
             width: '100%',
             marginBottom: 8
@@ -409,54 +525,17 @@ const GridTable = props => {
             filterCheckall: 'Chọn tất cả'
           },
           selectedKeys: selectedKeys,
-          onSelect: setSelectedKeys,
-          options: [{
-            text: 'Joe',
-            value: 'Joe'
-          }, {
-            text: 'Jim',
-            value: 'Jim'
-          }, {
-            text: 'Green',
-            value: 'Green'
-          }, {
-            text: 'Black',
-            value: 'Black'
-          }, {
-            text: 'Category 1',
-            value: 'Category 1'
-          }, {
-            text: 'Yellow',
-            value: 'Yellow'
-          }, {
-            text: 'Pink',
-            value: 'Pink'
-          }, {
-            text: 'Category 2',
-            value: 'Category 666'
-          }, {
-            text: 'Category 2',
-            value: 'Category 555'
-          }, {
-            text: 'Category 2',
-            value: 'Category 55'
-          }, {
-            text: 'Category 2',
-            value: 'Category 44'
-          }, {
-            text: 'Category 2',
-            value: 'Category 33'
-          }, {
-            text: 'Category 2',
-            value: 'Category 22'
-          }, {
-            text: 'Category 2',
-            value: 'Category 11'
-          }
-          // {
-          //   text: 'Submenu',
-          //   value: 'Submenu',
-          //   children: [
+          onSelect: setSelectedKeys
+          // options={
+          //   [
+          //     {
+          //       text: 'Joe',
+          //       value: 'Joe',
+          //     },
+          //     {
+          //       text: 'Jim',
+          //       value: 'Jim',
+          //     },
           //     {
           //       text: 'Green',
           //       value: 'Green',
@@ -465,9 +544,65 @@ const GridTable = props => {
           //       text: 'Black',
           //       value: 'Black',
           //     },
-          //   ],
-          // },
-          ],
+          //     {
+          //       text: 'Category 1',
+          //       value: 'Category 1'
+          //     },
+          //     {
+          //       text: 'Yellow',
+          //       value: 'Yellow',
+          //     },
+          //     {
+          //       text: 'Pink',
+          //       value: 'Pink',
+          //     },
+          //     {
+          //       text: 'Category 2',
+          //       value: 'Category 666'
+          //     },
+          //     {
+          //       text: 'Category 2',
+          //       value: 'Category 555'
+          //     },
+          //     {
+          //       text: 'Category 2',
+          //       value: 'Category 55'
+          //     },
+          //     {
+          //       text: 'Category 2',
+          //       value: 'Category 44'
+          //     },
+          //     {
+          //       text: 'Category 2',
+          //       value: 'Category 33'
+          //     },
+          //     {
+          //       text: 'Category 2',
+          //       value: 'Category 22'
+          //     },
+          //     {
+          //       text: 'Category 2',
+          //       value: 'Category 11'
+          //     }
+          //     // {
+          //     //   text: 'Submenu',
+          //     //   value: 'Submenu',
+          //     //   children: [
+          //     //     {
+          //     //       text: 'Green',
+          //     //       value: 'Green',
+          //     //     },
+          //     //     {
+          //     //       text: 'Black',
+          //     //       value: 'Black',
+          //     //     },
+          //     //   ],
+          //     // },
+          //   ]
+          // }
+          ,
+
+          options: options,
           filterMultiple: true,
           open: visible,
           searchValue: searchValue,
@@ -477,9 +612,9 @@ const GridTable = props => {
       default:
         return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
           className: 'mb-1'
-        }, /*#__PURE__*/_react.default.createElement(_uiRc.Input, {
+        }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Input, {
           ref: searchInput,
-          placeholder: `Search ${column.key}`,
+          placeholder: `Search ${column?.dataIndex}`,
           value: selectedKeys[0],
           onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : []),
           onPressEnter: () => handleSearch(selectedKeys, confirm),
@@ -487,12 +622,33 @@ const GridTable = props => {
         }))));
     }
   };
+  const onFilterCallback = (key, data) => {
+    // console.log(key, data)
+
+    const find = dataSourceFilter.find(it => it.key === key);
+    if (find) {
+      const newData = (0, _hooks.updateArrayByKey)(dataSourceFilter, {
+        key,
+        data
+      }, 'key');
+      setDataSourceFilter(newData);
+    } else {
+      const newData = [...dataSourceFilter, {
+        key,
+        data
+      }];
+      setDataSourceFilter(newData);
+    }
+
+    // setDataSourceFilter([{key, data}])
+  };
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const getColumnSearchProps = column => ({
     filterDropdown: ({
       setSelectedKeys,
       selectedKeys,
       confirm,
-      // clearFilters,
       close,
       setOperatorKey,
       operatorKey,
@@ -500,16 +656,15 @@ const GridTable = props => {
       searchValue,
       setSearchValue
     }) => {
-      // const typeFilter = getTypeFilter(columns as RcColumnType)
       return /*#__PURE__*/_react.default.createElement("div", {
         style: {
           padding: 8,
           minWidth: 275
         },
         onKeyDown: e => e.stopPropagation()
-      }, (column.showOperator !== false || column.typeFilter !== 'DateRange' && column.typeFilter !== 'NumberRange') && /*#__PURE__*/_react.default.createElement("div", {
+      }, (column?.showOperator !== false || column?.typeFilter !== 'DateRange' && column?.typeFilter !== 'NumberRange') && /*#__PURE__*/_react.default.createElement("div", {
         className: 'mb-1'
-      }, /*#__PURE__*/_react.default.createElement(_uiRc.Select, {
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
         options: (0, _hooks.translateOption)(_hooks.numberOperator, t),
         style: {
           width: '100%',
@@ -523,7 +678,7 @@ const GridTable = props => {
         style: {
           marginBottom: 8
         }
-      }, renderFilter(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue)), /*#__PURE__*/_react.default.createElement("div", {
+      }, renderFilter(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue)), /*#__PURE__*/_react.default.createElement(_space.default, {
         style: {
           justifyContent: 'end',
           width: '100%'
@@ -549,50 +704,52 @@ const GridTable = props => {
         }
       }, "close")));
     },
-    // filterIcon: (filtered: boolean) => (
-    //   <SearchOutlined style={{ color: filtered ? '#1677ff' : undefined }} />
-    // ),
-
-    onFilter: (value, record) => {
-      // @ts-ignore
-      return record[column.dataIndex];
-    },
+    filterIcon: filtered => /*#__PURE__*/_react.default.createElement(_becoxyIcons.FilterFill, {
+      fontSize: 12,
+      onClick: () => {
+        console.log('onFilterClick', column);
+        onFilterClick?.(column, onFilterCallback);
+      },
+      style: {
+        color: filtered ? '#283046' : undefined
+      }
+    }),
     filterDropdownProps: {
       onOpenChange(open) {
         if (open) {
           setTimeout(() => searchInput.current?.select(), 100);
         }
       }
-
-      // trigger: ['hover']
     }
   });
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const renderContent = column => value => {
     switch (column?.type) {
       case 'number':
-        const thousandSeparator = column.format?.thousandSeparator ? column.format?.thousandSeparator : format?.thousandSeparator;
-        const decimalSeparator = column.format?.decimalSeparator ? column.format?.decimalSeparator : format?.decimalSeparator;
-        const dec = column.format?.decimalScale || column.format?.decimalScale === 0 ? column.format?.decimalScale : format?.decimalScale;
+        const thousandSeparator = column?.format?.thousandSeparator ? column?.format?.thousandSeparator : format?.thousandSeparator;
+        const decimalSeparator = column?.format?.decimalSeparator ? column?.format?.decimalSeparator : format?.decimalSeparator;
+        const dec = column?.format?.decimalScale || column?.format?.decimalScale === 0 ? column?.format?.decimalScale : format?.decimalScale;
         const content = !(0, _hooks.isEmpty)(value) ? dec || dec === 0 ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString() : '0';
         const numericFormatProps = {
           thousandSeparator: (0, _hooks.checkThousandSeparator)(thousandSeparator, decimalSeparator),
           decimalSeparator: (0, _hooks.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
-          allowNegative: (column.format?.allowNegative ? column.format?.allowNegative : format?.allowNegative) ?? true,
-          prefix: column.format?.prefix ? column.format?.prefix : format?.prefix,
-          suffix: column.format?.suffix ? column.format?.suffix : format?.suffix,
-          decimalScale: column.format?.decimalScale || column.format?.decimalScale === 0 ? column.format?.decimalScale : format?.decimalScale,
-          fixedDecimalScale: (column.format?.fixedDecimalScale ? column.format?.fixedDecimalScale : format?.fixedDecimalScale) ?? false
+          allowNegative: (column?.format?.allowNegative ? column?.format?.allowNegative : format?.allowNegative) ?? true,
+          prefix: column?.format?.prefix ? column?.format?.prefix : format?.prefix,
+          suffix: column?.format?.suffix ? column?.format?.suffix : format?.suffix,
+          decimalScale: column?.format?.decimalScale || column?.format?.decimalScale === 0 ? column?.format?.decimalScale : format?.decimalScale,
+          fixedDecimalScale: (column?.format?.fixedDecimalScale ? column?.format?.fixedDecimalScale : format?.fixedDecimalScale) ?? false
         };
         return !(0, _hooks.isEmpty)(content) ? (0, _reactNumericComponent.numericFormatter)(content, numericFormatProps) : '';
       case 'date':
-        return value ? (0, _dayjs.default)(value).format(column.format?.dateFormat ?? format?.dateFormat ?? 'DD/MM/YYYY') : '';
+        return value ? (0, _dayjs.default)(value).format(column?.format?.dateFormat ?? format?.dateFormat ?? 'DD/MM/YYYY') : '';
       case 'time':
         return value ? value : '';
       case 'year':
         const year = value ? (0, _moment.default)(value).format('yyyy') : '';
         return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, year);
       case 'datetime':
-        return value ? (0, _moment.default)(value).format(column.format?.datetimeFormat ?? format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
+        return value ? (0, _moment.default)(value).format(column?.format?.datetimeFormat ?? format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
       case 'boolean':
         return value ? 'true' : 'false';
       case 'color':
@@ -604,7 +761,7 @@ const GridTable = props => {
           }
         }) : '');
       case 'checkbox':
-        return /*#__PURE__*/_react.default.createElement(_uiRc.Input, {
+        return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Input, {
           checked: !!content,
           readOnly: true,
           type: "checkbox"
@@ -619,117 +776,45 @@ const GridTable = props => {
         return value;
     }
   };
-  const addIsFilter = columns => {
-    return columns.map(column => {
+  const addFilter = _react.default.useCallback(cols => {
+    return cols.map(column => {
       // @ts-ignore
-      if (!column?.dataIndex && !column.key) {
+      if (!column?.dataIndex && !column?.key) {
         return column;
       }
       // @ts-ignore
-      if (column?.children && column.children.length > 0) {
+      if (column?.children && column?.children.length > 0) {
         return {
           ...column,
           // @ts-ignore
-          children: addIsFilter(column.children) // Xử lý đệ quy cho cấp con
+          children: addFilter(column?.children) // Xử lý đệ quy cho cấp con
         };
       }
       // @ts-ignore
-      if (column?.dataIndex === 'index' || column.allowFiltering === false) {
+      if (column?.dataIndex === 'index' || column?.allowFiltering === false) {
         return {
           ...column
         };
       }
       return {
         ...getColumnSearchProps(column),
+        onFilter: (value, record) => {
+          // @ts-ignore
+          return record[column?.dataIndex];
+        },
         render: renderContent(column),
-        ...column
-      };
-    });
-  };
-  const tmpColumns = (0, _react.useMemo)(() => {
-    // return addIsFilter(defaultColumns ?? [])
-    return addIsFilter(defaultColumns ? [_uiRc.Table.SELECTION_COLUMN, ...defaultColumns] : []);
-  }, [defaultColumns]);
-  const [columns, setColumns] = (0, _react.useState)(tmpColumns ?? []);
-  const handleResize = indexPath => (e, {
-    size
-  }) => {
-    const updateColumns = (cols, path) => {
-      const [currentIndex, ...restPath] = path;
-      return cols.map((col, idx) => {
-        if (idx === currentIndex) {
-          if (restPath.length === 0) {
-            // Cập nhật width của cột cuối cùng trong path
-            // return { ...col, width: size.width }
-
-            // Kiểm tra minWidth trước khi cập nhật width
-            if (col.minWidth && size.width < col.minWidth) {
-              e.preventDefault();
-              return col; // Không cập nhật nếu nhỏ hơn minWidth
-            }
-
-            // Kiểm tra minWidth trước khi cập nhật width
-            if (col.maxWidth && size.width > col.maxWidth) {
-              e.preventDefault();
-              return col; // Không cập nhật nếu nhỏ hơn minWidth
-            }
-            return {
-              ...col,
-              width: size.width
-            };
-          } else if (col.children) {
-            // Tiếp tục cập nhật các cấp con
-            return {
-              ...col,
-              children: updateColumns(col.children, restPath)
-            };
-          }
+        ...column,
+        ellipsis: column?.ellipsis !== false,
+        sorter: () => {
+          // console.log('a, b, sortOrder', a, b, sortOrder)
         }
-        // e.preventDefault()
-        return col;
-      });
-    };
-    setColumns(prevColumns => updateColumns(prevColumns, indexPath));
-  };
-  const addResizeHandlers = (cols, parentPath = []) => {
-    return cols.map((col, index) => {
-      const currentPath = [...parentPath, index];
-      if (!col?.dataIndex && !col.key) {
-        return col;
-      }
-      if (col.children) {
-        return {
-          ...col,
-          ellipsis: col.ellipsis !== true,
-          children: addResizeHandlers(col.children, currentPath)
-        };
-      }
-      return {
-        ...col,
-        ellipsis: col.ellipsis !== true,
-        onHeaderCell: () => ({
-          width: col.width,
-          onResize: handleResize(currentPath)
-        })
       };
     });
-  };
-
-  // const resizableColumns = createResizableColumns(columns)
-
-  // const resizableColumns = addResizeHandlers(columns)
-  const resizableColumns = (0, _react.useMemo)(() => {
-    return addResizeHandlers(columns);
-  }, [columns]);
-
-  // const handleReset = (clearFilters: () => void) => {
-  //   clearFilters()
-  // }
-
-  // const handleChangeOperator = (val: IFilterOperator) => {
-  //   setOperator(val)
-  // }
-
+  }, [getColumnSearchProps, renderContent]);
+  const tmpColumns = (0, _react.useMemo)(() => {
+    // @ts-ignore
+    return addFilter(defaultColumns ?? []);
+  }, [addFilter, defaultColumns]);
   const onContextMenu = data => event => {
     event.preventDefault(); // Ngăn chặn menu mặc định của trình duyệt
 
@@ -827,7 +912,22 @@ const GridTable = props => {
       }
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_ContextMenu.default, {
+  const handleChange = sorter => {
+    console.log('Various parameters', sorter);
+    // setFilteredInfo(filters);
+    // setSortedInfo(sorter as Sorts);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        Table: {
+          rowHoverBg: '#eb461912',
+          rowSelectedBg: '#eb4619',
+          rowSelectedHoverBg: '#eb4619'
+        }
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ContextMenu.default, {
     open: menuVisible,
     pos: position,
     setOpen: setMenuVisible,
@@ -835,7 +935,14 @@ const GridTable = props => {
     contextMenuItems: contextMenuItems,
     contextMenuClick: contextMenuClick,
     rowData: selectedRowData
-  }), /*#__PURE__*/_react.default.createElement(_uiRc.Table, (0, _extends2.default)({}, rest, {
+  }), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table
+  // loading={defaultColumns && defaultColumns.length === 0}
+  // loading={true}
+  , (0, _extends2.default)({
+    loading: {
+      spinning: defaultColumns && defaultColumns.length === 0 || loading === true,
+      indicator: /*#__PURE__*/_react.default.createElement(_LoadingSpinner.default, null)
+    },
     dataSource: dataSource
     // className={styles.customTable}
     ,
@@ -843,19 +950,28 @@ const GridTable = props => {
       'table-none-column-select': selectionSettings?.mode === undefined && selectionSettings?.type !== 'multiple'
     }, styles.customTable),
     bordered: true,
-    virtual: virtual,
-    columns: resizableColumns,
+    virtual: virtual
+    // columns={resizableColumns as any}
+    ,
+    columns: tmpColumns
+    // scroll={{ y: 550 }}
+    ,
     rowKey: rowKey,
     rowHoverable: true,
     components: {
       header: {
         cell: ResizableTitle
       }
+    }
+    // scroll={scroll}
+    ,
+    size: "small",
+    scroll: scroll ? scroll : {
+      y: 500
     },
     onRow: (data, index) => {
       return {
         onDoubleClick: handleRowDoubleClick(data, index),
-        // onClick: handleRowClick(data),
         onClick: handleRowClick,
         onContextMenu: onContextMenu(data)
       };
@@ -865,6 +981,9 @@ const GridTable = props => {
       // columnWidth: selectionSettings?.mode === 'checkbox' || selectionSettings?.mode === 'radio' || selectionSettings?.type === 'multiple' ? 50 : 0.000001,
       columnWidth: !selectionSettings?.mode ? 0.0000001 : selectionSettings?.columnWidth ?? 50,
       onChange: onSelectChange,
+      // onChange: (selectedRowKeys, selectedRows, info, selectedRow) => {
+      //
+      // },
       // onSelect: (record, selected, selectedRows, nativeEvent)=> {
       //   // console.log(record, selected, selectedRows, nativeEvent)
       // },
@@ -879,31 +998,9 @@ const GridTable = props => {
     onScroll: () => {
       setMenuVisible(false);
     },
-    title: () => {
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Header"), toolbarItems && /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          display: 'flex',
-          justifyContent: 'space-between'
-        }
-      }, /*#__PURE__*/_react.default.createElement(_uiRc.Toolbar, {
-        style: {
-          width: '100%'
-        },
-        items: toolbarItems,
-        mode: 'responsive'
-        // mode={'scroll'}
-        ,
-        onClick: val => {
-          console.log(val);
-        }
-      }), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
-        columns: columns,
-        setColumns: setColumns
-      }), /*#__PURE__*/_react.default.createElement("div", null)));
-    },
-    summary: () => /*#__PURE__*/_react.default.createElement(_uiRc.Table.Summary, {
+    summary: () => /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary, {
       fixed: true
-    }, /*#__PURE__*/_react.default.createElement(_uiRc.Table.Summary.Row, null, (0, _useColumns.flatColumns)(tmpColumns).filter(col => col.hidden !== true).map((col, index) => {
+    }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Row, null, (0, _useColumns.flatColumns)(tmpColumns).filter(col => col.hidden !== true).map((col, index) => {
       const thousandSeparator = col.format?.thousandSeparator ? col.format?.thousandSeparator : format?.thousandSeparator;
       const decimalSeparator = col.format?.decimalSeparator ? col.format?.decimalSeparator : format?.decimalSeparator;
       const dec = col.format?.decimalScale || col.format?.decimalScale === 0 ? col.format?.decimalScale : format?.decimalScale;
@@ -919,18 +1016,48 @@ const GridTable = props => {
         decimalScale: dec,
         fixedDecimalScale: (col.format?.fixedDecimalScale ? col.format?.fixedDecimalScale : format?.fixedDecimalScale) ?? false
       };
-      return (
-        /*#__PURE__*/
-        // <Table.Summary.Cell index={index}>{col.summaryTemplate ? col.summaryTemplate(cellValue, (col.key || col.dataIndex) as string) : numericFormatter(cellValue, numericFormatProps)}</Table.Summary.Cell>
-        _react.default.createElement(_uiRc.Table.Summary.Cell, {
-          key: index,
-          index: index
-        }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps))
-      );
+      return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Cell, {
+        key: col.key,
+        index: index
+      }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps));
     }))),
+    pagination: pagination && pagination.onChange ? false : {
+      showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`,
+      ...pagination
+    },
     onFilter: val => {
       onFilter?.(convertFilters(val));
+    },
+    onChange: (paging, filters, sorter) => handleChange(sorter),
+    title: () => {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, title?.(dataSource)), (toolbarItems || showColumnChoose !== false) && /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'space-between'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+        style: {
+          width: '100%'
+        },
+        items: toolbarItems ?? [],
+        mode: 'responsive'
+        // mode={'scroll'}
+        ,
+        onClick: val => {
+          console.log(val);
+        }
+      }), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
+        columns: tmpColumns,
+        setColumns: setColumns
+      }), /*#__PURE__*/_react.default.createElement("div", null)));
     }
-  })));
+  }, rest)), pagination && pagination.onChange && /*#__PURE__*/_react.default.createElement(_pagination.default
+  // style={{padding: '0.75rem 1rem'}}
+  , (0, _extends2.default)({
+    showSizeChanger: true,
+    responsive: true,
+    size: 'small',
+    showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`
+  }, pagination))));
 };
-var _default = exports.default = GridTable;
+var _default = exports.default = TableGrid;