es-grid-template 0.0.7 → 0.0.8

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

@@ -1,49 +1,33 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { Fragment, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { Table } from "ui-rc";
 import { Resizable } from 'react-resizable';
 import { createStyles } from 'antd-style';
 import { NumericFormat, numericFormatter } from "react-numeric-component";
-// import {Button, DatePicker, Input, Space} from "antd"
 import { SearchOutlined } from '@ant-design/icons';
-import { Select, Toolbar, DatePicker, Input } from "ui-rc";
-// 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 { Select, DatePicker, Input, Table, Toolbar } from "rc-master-ui";
 import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import "./styles.scss";
-
-// import en from 'antd/es/date-picker/locale/en_US'
-
-// import vi from 'antd/es/date-picker/locale/vi_VN'
-
+import en from 'rc-master-ui/es/date-picker/locale/en_US';
+import vi from 'rc-master-ui/es/date-picker/locale/vi_VN';
 import moment from "moment";
 import CheckboxFilter from "./CheckboxFilter";
 import ContextMenu from "./ContextMenu";
-import { ColumnsChoose } from "./ColumnsChoose";
 import classNames from "classnames";
-// import type {PickerLocale} from "antd/es/date-picker/generatePicker";
-
-import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, getTypeFilter, getDatepickerFormat, isColor, isEmpty, numberOperator, sumDataByField, translateOption } from "./hooks";
-// import type {PickerLocale} from "ui-rc/dist/date-picker/generatePicker";
-
-import { Button } from "antd";
+import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, getTypeFilter, getDatepickerFormat, isColor, isEmpty, numberOperator, sumDataByField, translateOption, updateArrayByKey
+// updateArrayByKey
+} from "./hooks";
+import { Button, ConfigProvider } from "antd";
 import { flatColumns } from "./hooks/useColumns";
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import Pagination from "rc-master-ui/es/pagination";
+// import styled from "styled-components";
+import Space from "rc-master-ui/es/space";
+import { FilterFill } from "becoxy-icons";
+import ComponentSpinner from "./LoadingSpinner";
+import { ColumnsChoose } from "./ColumnsChoose";
+dayjs.extend(customParseFormat);
 const {
   RangePicker
 } = DatePicker;
@@ -56,25 +40,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
@@ -83,7 +67,7 @@ const convertFilters = filters => {
     } else {
       result.push({
         key,
-        field: column.dataIndex,
+        field: column?.dataIndex,
         value: filteredKeys[0],
         predicate: 'and',
         operator
@@ -140,10 +124,13 @@ const useStyle = createStyles(({
     `
   };
 });
-const GridTable = props => {
+// type OnChange = NonNullable<TableProps<any>['onChange']>;
+
+const TableGrid = props => {
   const {
     columns: defaultColumns,
     dataSource,
+    title,
     format,
     virtual = true,
     t,
@@ -160,23 +147,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 : vi;
+  // 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 = useRef(null);
   const searchInput = useRef(null);
   const menuRef = useRef(null);
@@ -193,9 +184,11 @@ const GridTable = props => {
     viewportWidth,
     viewportHeight
   });
-  // const [filters, setFilters] = React.useState<any[]>([])
-
   const [selectedRowKeys, setSelectedRowKeys] = useState(defaultSelected);
+  const [dataSourceFilter, setDataSourceFilter] = useState(propDataSourceFilter ?? []);
+  React.useEffect(() => {
+    setDataSourceFilter(propDataSourceFilter ?? []);
+  }, [propDataSourceFilter]);
   const contextMenuItems = React.useMemo(() => {
     if (typeof contextMenuHidden === "function" && propContextMenuItems && selectedRowData) {
       const hiddenItems = contextMenuHidden({
@@ -213,15 +206,15 @@ const GridTable = props => {
   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 = getTypeFilter(column);
-    const dateFormat = getDatepickerFormat(column.type, column) ?? 'DD/MM/YYYY';
-    const dateRangeFormat = getDatepickerFormat(column.type, column) ?? 'DD/MM/YYYY';
+    const dateFormat = getDatepickerFormat(column?.typeFilter ?? column?.type, column) ?? 'DD/MM/YYYY';
+    const dateRangeFormat = 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.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -282,17 +275,16 @@ const GridTable = props => {
           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 ? moment(convertDayjsToDate(dateString, dateFormat)).format() : null;
             setSelectedKeys(newDateValue ? [newDateValue] : []);
           }
@@ -325,11 +317,136 @@ const GridTable = props => {
           // popupClassName={'adv-popup-container'}
           // getPopupContainer={() => menuRef.current}
         }))));
+      case 'Week':
+        const weekValue = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], dateFormat) : null;
+        return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: 'mb-1'
+        }, /*#__PURE__*/React.createElement(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 = !isEmpty(selectedKeys[0]) ? dayjs(selectedKeys[0], dateFormat) : null;
+        return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+          className: 'mb-1'
+        }, /*#__PURE__*/React.createElement(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.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
           className: 'mb-1'
-        }, /*#__PURE__*/React.createElement(Select, {
-          options: translateOption(numberOperator, t),
+        }, /*#__PURE__*/React.createElement(Select
+        // options={translateOption(numberOperator, t)}
+        , {
+          options: options,
           style: {
             width: '100%',
             marginBottom: 8
@@ -400,54 +517,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',
@@ -456,9 +536,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,
@@ -470,7 +606,7 @@ const GridTable = props => {
           className: 'mb-1'
         }, /*#__PURE__*/React.createElement(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),
@@ -478,12 +614,33 @@ const GridTable = props => {
         }))));
     }
   };
+  const onFilterCallback = (key, data) => {
+    // console.log(key, data)
+
+    const find = dataSourceFilter.find(it => it.key === key);
+    if (find) {
+      const newData = 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,
@@ -491,14 +648,13 @@ const GridTable = props => {
       searchValue,
       setSearchValue
     }) => {
-      // const typeFilter = getTypeFilter(columns as RcColumnType)
       return /*#__PURE__*/React.createElement("div", {
         style: {
           padding: 8,
           minWidth: 275
         },
         onKeyDown: e => e.stopPropagation()
-      }, (column.showOperator !== false || column.typeFilter !== 'DateRange' && column.typeFilter !== 'NumberRange') && /*#__PURE__*/React.createElement("div", {
+      }, (column?.showOperator !== false || column?.typeFilter !== 'DateRange' && column?.typeFilter !== 'NumberRange') && /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
       }, /*#__PURE__*/React.createElement(Select, {
         options: translateOption(numberOperator, t),
@@ -514,7 +670,7 @@ const GridTable = props => {
         style: {
           marginBottom: 8
         }
-      }, renderFilter(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue)), /*#__PURE__*/React.createElement("div", {
+      }, renderFilter(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue)), /*#__PURE__*/React.createElement(Space, {
         style: {
           justifyContent: 'end',
           width: '100%'
@@ -540,50 +696,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.createElement(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 = !isEmpty(value) ? dec || dec === 0 ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString() : '0';
         const numericFormatProps = {
           thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
           decimalSeparator: 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 !isEmpty(content) ? numericFormatter(content, numericFormatProps) : '';
       case 'date':
-        return value ? dayjs(value).format(column.format?.dateFormat ?? format?.dateFormat ?? 'DD/MM/YYYY') : '';
+        return value ? dayjs(value).format(column?.format?.dateFormat ?? format?.dateFormat ?? 'DD/MM/YYYY') : '';
       case 'time':
         return value ? value : '';
       case 'year':
         const year = value ? moment(value).format('yyyy') : '';
         return /*#__PURE__*/React.createElement(Fragment, null, year);
       case 'datetime':
-        return value ? moment(value).format(column.format?.datetimeFormat ?? format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
+        return value ? moment(value).format(column?.format?.datetimeFormat ?? format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
       case 'boolean':
         return value ? 'true' : 'false';
       case 'color':
@@ -610,117 +768,45 @@ const GridTable = props => {
         return value;
     }
   };
-  const addIsFilter = columns => {
-    return columns.map(column => {
+  const addFilter = React.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 = useMemo(() => {
-    // return addIsFilter(defaultColumns ?? [])
-    return addIsFilter(defaultColumns ? [Table.SELECTION_COLUMN, ...defaultColumns] : []);
-  }, [defaultColumns]);
-  const [columns, setColumns] = 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 = useMemo(() => {
-    return addResizeHandlers(columns);
-  }, [columns]);
-
-  // const handleReset = (clearFilters: () => void) => {
-  //   clearFilters()
-  // }
-
-  // const handleChangeOperator = (val: IFilterOperator) => {
-  //   setOperator(val)
-  // }
-
+  }, [getColumnSearchProps, renderContent]);
+  const tmpColumns = 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
 
@@ -818,7 +904,22 @@ const GridTable = props => {
       }
     }
   };
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ContextMenu, {
+  const handleChange = sorter => {
+    console.log('Various parameters', sorter);
+    // setFilteredInfo(filters);
+    // setSortedInfo(sorter as Sorts);
+  };
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ConfigProvider, {
+    theme: {
+      components: {
+        Table: {
+          rowHoverBg: '#eb461912',
+          rowSelectedBg: '#eb4619',
+          rowSelectedHoverBg: '#eb4619'
+        }
+      }
+    }
+  }, /*#__PURE__*/React.createElement(ContextMenu, {
     open: menuVisible,
     pos: position,
     setOpen: setMenuVisible,
@@ -826,7 +927,14 @@ const GridTable = props => {
     contextMenuItems: contextMenuItems,
     contextMenuClick: contextMenuClick,
     rowData: selectedRowData
-  }), /*#__PURE__*/React.createElement(Table, _extends({}, rest, {
+  }), /*#__PURE__*/React.createElement(Table
+  // loading={defaultColumns && defaultColumns.length === 0}
+  // loading={true}
+  , _extends({
+    loading: {
+      spinning: defaultColumns && defaultColumns.length === 0 || loading === true,
+      indicator: /*#__PURE__*/React.createElement(ComponentSpinner, null)
+    },
     dataSource: dataSource
     // className={styles.customTable}
     ,
@@ -834,19 +942,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)
       };
@@ -856,6 +973,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)
       // },
@@ -870,28 +990,6 @@ const GridTable = props => {
     onScroll: () => {
       setMenuVisible(false);
     },
-    title: () => {
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, "Header"), toolbarItems && /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: 'flex',
-          justifyContent: 'space-between'
-        }
-      }, /*#__PURE__*/React.createElement(Toolbar, {
-        style: {
-          width: '100%'
-        },
-        items: toolbarItems,
-        mode: 'responsive'
-        // mode={'scroll'}
-        ,
-        onClick: val => {
-          console.log(val);
-        }
-      }), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
-        columns: columns,
-        setColumns: setColumns
-      }), /*#__PURE__*/React.createElement("div", null)));
-    },
     summary: () => /*#__PURE__*/React.createElement(Table.Summary, {
       fixed: true
     }, /*#__PURE__*/React.createElement(Table.Summary.Row, null, flatColumns(tmpColumns).filter(col => col.hidden !== true).map((col, index) => {
@@ -910,18 +1008,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.createElement(Table.Summary.Cell, {
-          key: index,
-          index: index
-        }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : numericFormatter(cellValue, numericFormatProps))
-      );
+      return /*#__PURE__*/React.createElement(Table.Summary.Cell, {
+        key: col.key,
+        index: index
+      }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : 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.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, title?.(dataSource)), (toolbarItems || showColumnChoose !== false) && /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'space-between'
+        }
+      }, /*#__PURE__*/React.createElement(Toolbar, {
+        style: {
+          width: '100%'
+        },
+        items: toolbarItems ?? [],
+        mode: 'responsive'
+        // mode={'scroll'}
+        ,
+        onClick: val => {
+          console.log(val);
+        }
+      }), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
+        columns: tmpColumns,
+        setColumns: setColumns
+      }), /*#__PURE__*/React.createElement("div", null)));
     }
-  })));
+  }, rest)), pagination && pagination.onChange && /*#__PURE__*/React.createElement(Pagination
+  // style={{padding: '0.75rem 1rem'}}
+  , _extends({
+    showSizeChanger: true,
+    responsive: true,
+    size: 'small',
+    showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`
+  }, pagination))));
 };
-export default GridTable;
+export default TableGrid;