es-grid-template 0.1.2 → 0.1.3

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

@@ -8,6 +8,7 @@ type Props = {
     prefixCls?: string;
     dropdownPrefixCls?: string;
     filterMultiple: boolean;
+    showFilter?: boolean;
     onSelect?: (value: any) => void;
     selectedKeys: string[];
     locale: TableLocale;

package/es/grid-component/CheckboxFilter.js

@@ -72,6 +72,7 @@ const CheckboxFilter = props => {
     filterMode = 'tree',
     // open,
     searchValue,
+    showFilter,
     setSearchValue,
     onSelect
   } = props;
@@ -173,7 +174,7 @@ const CheckboxFilter = props => {
     }
   };
   if (filterMode === 'tree') {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FilterSearch, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showFilter && /*#__PURE__*/React.createElement(FilterSearch, {
       filterSearch: filterSearch,
       value: searchValue,
       onChange: onSearch,
@@ -181,7 +182,7 @@ const CheckboxFilter = props => {
       locale: locale
     }), /*#__PURE__*/React.createElement("div", {
       className: `${tablePrefixCls}-filter-dropdown-tree`
-    }, filterMultiple ? /*#__PURE__*/React.createElement(Checkbox
+    }, filterMultiple && options.length > 0 ? /*#__PURE__*/React.createElement(Checkbox
     // checked={selectedKeys.length === flattenKeys(column.filters).length}
     , {
       checked: selectedKeys.length === flattenKeys(options).length
@@ -194,7 +195,7 @@ const CheckboxFilter = props => {
       indeterminate: selectedKeys.length > 0 && selectedKeys.length < flattenKeys(options).length,
       className: `${tablePrefixCls}-filter-dropdown-checkall`,
       onChange: onCheckAll
-    }, locale.filterCheckall) : null, /*#__PURE__*/React.createElement(Tree, {
+    }, locale.filterCheckall) : /*#__PURE__*/React.createElement(Empty, null), /*#__PURE__*/React.createElement(Tree, {
       checkable: true,
       selectable: false,
       blockNode: true,

package/es/grid-component/ColumnsChoose.js

@@ -14,8 +14,8 @@ const BoxAction = styled.div.withConfig({
 export const ColumnsChoose = props => {
   const {
     columns: propsColumns,
-    triggerChangeColumns
-    // t,
+    triggerChangeColumns,
+    t
   } = props;
 
   // const dataList: { key: React.Key; title: string }[] = [];
@@ -207,10 +207,10 @@ export const ColumnsChoose = props => {
     , {
       onClick: handleAccept
       // disabled={!columns.find((item) => item.visible !== false || item.visible)}
-    }, 'OK'), /*#__PURE__*/React.createElement(Button, {
+    }, t ? t('OK') : 'OK'), /*#__PURE__*/React.createElement(Button, {
       className: 'btn-action btn-action-cancel',
       onClick: handleCancel
-    }, 'Cancel'))),
+    }, t ? t('Cancel') : 'Cancel'))),
     trigger: "click",
     open: clicked,
     onOpenChange: handleClickChange,

package/es/grid-component/InternalTable.js

@@ -5,7 +5,7 @@ import { Button, Space } from "antd";
 import { SearchOutlined } from "@ant-design/icons";
 import { Resizable } from "react-resizable";
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { numberOperator, translateOption, updateArrayByKey } from "./hooks";
+import { booleanOperator, getTypeFilter, numberOperator, stringOperator, translateOption, updateArrayByKey } from "./hooks";
 import { FilterFill } from "becoxy-icons";
 import { renderFilter } from "./hooks/useColumns";
 import dayjs from "dayjs";
@@ -57,6 +57,7 @@ const InternalTable = props => {
     editAble,
     rowKey,
     onDataChange,
+    sortMultiple,
     ...rest
   } = props;
   const locale = lang && lang === 'en' ? en : vi;
@@ -114,23 +115,27 @@ const InternalTable = props => {
       setSelectedKeys,
       selectedKeys,
       confirm,
-      close,
+      // close,
       setOperatorKey,
       operatorKey,
       visible,
       searchValue,
       setSearchValue
     }) => {
+      const type = getTypeFilter(column);
+      // const operatorOptions  = !type || type === 'Text' ? stringOperator : numberOperator
+      // const operatorOptions  = type === 'Checkbox' || type === 'Dropdown' || type === 'DropTree' || ty
+      const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
       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),
+        options: translateOption(operatorOptions, t),
         style: {
           width: '100%',
           marginBottom: 8
@@ -161,13 +166,17 @@ const InternalTable = props => {
         style: {
           width: 90
         }
-      }, "Filter"), /*#__PURE__*/React.createElement(Button, {
+      }, t ? t('Filter') : 'Filter'), /*#__PURE__*/React.createElement(Button, {
         type: "link",
         size: "small",
         onClick: () => {
-          close();
+          // setSearchValue('')
+          setSelectedKeys([]);
+          confirm();
+          // handleSearch()
+          // close()
         }
-      }, "close")));
+      }, t ? t("Clear") : 'Clear')));
     },
     filterIcon: filtered => /*#__PURE__*/React.createElement(FilterFill, {
       fontSize: 12,
@@ -185,7 +194,7 @@ const InternalTable = props => {
         }
       }
     }
-  }), [onFilterCallback, onFilterClick, renderFilter, t]);
+  }), [buddhistLocale, dataSourceFilter, onFilterCallback, onFilterClick, t]);
   const handleResize = indexPath => (e, {
     size
   }) => {
@@ -248,7 +257,7 @@ const InternalTable = props => {
           children: transformColumns(col.children, currentPath)
         };
       }
-      if (col.dataIndex === 'index' || col.field === 'index' || col.dataIndex === '#' || col.field === '#' || col.allowFiltering === false) {
+      if (col.dataIndex === 'index' || col.field === 'index' || col.dataIndex === '#' || col.field === '#' || col.allowFiltering === false || col.field === 'command') {
         return {
           ...transformedColumn
         };
@@ -256,15 +265,12 @@ const InternalTable = props => {
       return {
         ...getColumnSearchProps(col),
         ...transformedColumn,
-        // dataIndex: col.field ?? col.dataIndex,
-        // key: col.field ?? col.dataIndex ?? col.key,
-        // title: col.headerText ?? col.title,
-        // ellipsis: col.ellipsis !== false,
-        // align: col.textAlign ?? col.align,
-        // fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed,
-        onFilter: (value, record) => {
-          // @ts-ignore
-          return record[col.field ?? col.dataIndex];
+        onFilter: value => {
+          return value;
+        },
+        sorter: {
+          compare: a => a,
+          multiple: sortMultiple ? index : undefined
         },
         onHeaderCell: () => ({
           width: col.width,
@@ -272,7 +278,7 @@ const InternalTable = props => {
         })
       };
     });
-  }, [getColumnSearchProps]);
+  }, [getColumnSearchProps, sortMultiple, t]);
   const mergedColumns = React.useMemo(() => {
     return transformColumns(columns);
   }, [transformColumns, columns]);

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

@@ -6,6 +6,7 @@ type GridProps<T> = GridTableProps<T> & {
     triggerChangeColumns?: () => void;
     triggerChangeData?: () => void;
     tableRef: any;
+    getRowKey: any;
 };
 declare const TableGrid: <RecordType extends object>(props: GridProps<RecordType>) => React.JSX.Element;
 export default TableGrid;

package/es/grid-component/TableGrid.js

@@ -108,7 +108,7 @@ const TableGrid = props => {
     selectionSettings,
     rowSelection,
     rowSelected,
-    rowKey = 'id',
+    rowKey,
     pagination,
     scroll,
     onFilterClick,
@@ -116,6 +116,8 @@ const TableGrid = props => {
     loading,
     triggerChangeColumns,
     summary,
+    getRowKey,
+    onSorter,
     ...rest
   } = props;
   const {
@@ -134,12 +136,6 @@ const TableGrid = props => {
   const menuRef = useRef(null);
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;
-
-  // const defaultSelected = useMemo(() => {
-  //   return defaultSelectedRowKeys ?? []
-  //
-  // }, [defaultSelectedRowKeys])
-
   const [menuVisible, setMenuVisible] = React.useState(false);
   const [selectedRowData, setSelectedRowData] = React.useState(null);
   const [position, setPosition] = React.useState({
@@ -159,6 +155,8 @@ const TableGrid = props => {
   //   },
   // );
 
+  // console.log('mergedSelectedKeys', mergedSelectedKeys)
+
   // Reset if rowSelection reset
 
   // React.useEffect(() => {
@@ -235,11 +233,10 @@ const TableGrid = props => {
     }
   };
   const handleRowClick = () => () => {
-    // console.log(data)
-    // console.log(index)
-
     // const key = getRowKey(record, index);
 
+    // const keySet = new Set(derivedSelectedKeySet);
+
     // console.log('key', key)
 
     if (checkboxOnly !== true) {
@@ -293,7 +290,7 @@ const TableGrid = props => {
     }
   };
   const handleChange = sorter => {
-    console.log('Various parameters', sorter);
+    onSorter?.(sorter);
     // setFilteredInfo(filters);
     // setSortedInfo(sorter as Sorts);
   };
@@ -415,6 +412,7 @@ const TableGrid = props => {
         // }}
       }), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
         columns: columns,
+        t: t,
         triggerChangeColumns: triggerChangeColumns
       }), /*#__PURE__*/React.createElement("div", null)));
     }
@@ -423,8 +421,10 @@ const TableGrid = props => {
   , _extends({
     showSizeChanger: true,
     responsive: true,
-    size: 'small',
-    showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`
+    size: 'small'
+    // @ts-ignore
+    ,
+    showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
   }, pagination))));
 };
 export default TableGrid;

package/es/grid-component/hooks/constant.js

@@ -10,29 +10,29 @@ export const numberOperator = [{
   key: '>'
 }, {
   value: 'greaterthanorequal',
-  label: 'Greater Than or Equal',
+  label: 'Greater than or equal',
   key: '>='
 }, {
   value: 'lessthan',
-  label: 'Less Than',
+  label: 'Less than',
   key: '<'
 }, {
   value: 'lessthanorequal',
-  label: 'Less Than Or Equal',
+  label: 'Less than or equal',
   key: '<='
 }, {
   value: 'notequal',
-  label: 'Not Equal',
+  label: 'Not equal',
   key: '!='
 }];
 export const stringOperator = [{
   value: 'startswith',
   key: '_=',
-  label: 'Starts With'
+  label: 'Starts with'
 }, {
   value: 'endswith',
   key: '|=',
-  label: 'Ends With'
+  label: 'Ends with'
 }, {
   value: 'contains',
   key: '~=',
@@ -44,7 +44,7 @@ export const stringOperator = [{
 }, {
   value: 'notequal',
   key: '!=',
-  label: 'Not Equal'
+  label: 'Not equal'
 }];
 export const dateOperator = [{
   value: 'equal',
@@ -53,15 +53,15 @@ export const dateOperator = [{
 }, {
   value: 'notequal',
   key: '!=',
-  label: 'Not Equal'
+  label: 'Not equal'
 }, {
   value: 'greaterthan',
   key: '>',
-  label: 'Greater Than'
+  label: 'Greater than'
 }, {
   value: 'lessthan',
   key: '<',
-  label: 'Less Than'
+  label: 'Less than'
 }];
 export const dateTimeOperator = [{
   value: 'equal',
@@ -70,15 +70,15 @@ export const dateTimeOperator = [{
 }, {
   value: 'notequal',
   key: '!=',
-  label: 'Not Equal'
+  label: 'Not equal'
 }, {
   value: 'greaterthan',
   key: '>',
-  label: 'Greater Than'
+  label: 'Greater than'
 }, {
   value: 'lessthan',
   key: '<',
-  label: 'Less Than'
+  label: 'Less than'
 }];
 export const booleanOperator = [{
   value: 'equal',
@@ -87,7 +87,7 @@ export const booleanOperator = [{
 }, {
   value: 'notequal',
   key: '!=',
-  label: 'Not Equal'
+  label: 'Not equal'
 }];
 export const translateOption = (options, t) => {
   if (!t) {

package/es/grid-component/hooks/useColumns/index.js

@@ -96,8 +96,8 @@ export const renderContent = (column, value, record, index, format) => {
 export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale) => {
   const type = getTypeFilter(column);
   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 dateRangeFormat = 'DD/MM/YYYY';
+  const find = dataSourceFilter?.find(it => it.key === (column?.field || column.dataIndex));
   const options = find ? find.data : [];
   switch (type) {
     case 'Number':
@@ -182,7 +182,8 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
         format: {
           format: dateRangeFormat,
           type: 'mask'
-        }
+        },
+        locale: buddhistLocale
         // defaultValue={dateRangeValue}
         ,
         value: dateRangeValue,
@@ -401,9 +402,12 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
           filterTitle: 'Chọn tất cả',
           filterCheckall: 'Chọn tất cả'
         },
+        showFilter: column.showFilterSearch,
         selectedKeys: selectedKeys,
         onSelect: setSelectedKeys,
-        options: options,
+        options: options
+        // options={[]}
+        ,
         filterMultiple: true,
         open: visible,
         searchValue: searchValue,

package/es/grid-component/styles.scss

@@ -83,6 +83,16 @@ $rowSelectedHoverBg: 'ui-rc' !default;
 
       }
     }
+    .ui-rc-table-placeholder {
+      .ui-rc-table-cell {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+        .ui-rc-table-expanded-row-fixed {
+          margin-top: 0 !important;
+          margin-bottom: 0 !important;
+        }
+      }
+    }
   }
 
   .#{$prefix}-table-thead {

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

@@ -3,6 +3,7 @@ import type { GridTableProps } from "../type";
 type Props<T> = GridTableProps<T> & {
     setColumns?: any;
     tableRef: any;
+    getRowKey: any;
 };
 declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Grid;

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

@@ -13,6 +13,7 @@ const Grid = props => {
     components,
     style,
     format,
+    getRowKey,
     ...rest
   } = props;
   const transformColumns = React.useCallback(cols => {
@@ -81,7 +82,8 @@ const Grid = props => {
     style: {
       ...style,
       minHeight: height
-    }
+    },
+    getRowKey: getRowKey
   }))));
 };
 export default Grid;

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

@@ -783,7 +783,8 @@ const GridEdit = props => {
       ...style,
       minHeight: height
     },
-    rowHoverable: false
+    rowHoverable: false,
+    getRowKey: getRowKey
   }))))), /*#__PURE__*/React.createElement(Toaster, {
     position: toast,
     toastOptions: {

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

@@ -91,6 +91,7 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
     placeholder?: string;
     showInColumnChoose?: boolean;
     typeFilter?: TypeFilter;
+    showFilterSearch?: boolean;
     headerText?: string;
     textAlign?: ITextAlign;
     frozen?: Frozen;
@@ -120,6 +121,7 @@ export type ColumnTable<RecordType = AnyObject> = ColumnEditType<RecordType> | C
 export type ColumnsTable<RecordType = AnyObject> = (ColumnType<RecordType> | ColumnEditType<RecordType>)[];
 export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary'> {
     editAble?: boolean;
+    sortMultiple?: boolean;
     dataSource: RecordType[];
     columns: ColumnsTable<RecordType>;
     height?: number;
@@ -174,7 +176,7 @@ export interface CommandItem {
     title: string;
     color?: 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
     tooltip?: string;
-    icon?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
+    icon?: any;
     template?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
     client?: boolean;
     confirmDialog?: boolean;

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

@@ -8,6 +8,7 @@ type Props = {
     prefixCls?: string;
     dropdownPrefixCls?: string;
     filterMultiple: boolean;
+    showFilter?: boolean;
     onSelect?: (value: any) => void;
     selectedKeys: string[];
     locale: TableLocale;

package/lib/grid-component/CheckboxFilter.js

@@ -81,6 +81,7 @@ const CheckboxFilter = props => {
     filterMode = 'tree',
     // open,
     searchValue,
+    showFilter,
     setSearchValue,
     onSelect
   } = props;
@@ -182,7 +183,7 @@ const CheckboxFilter = props => {
     }
   };
   if (filterMode === 'tree') {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_FilterSearch.default, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showFilter && /*#__PURE__*/React.createElement(_FilterSearch.default, {
       filterSearch: filterSearch,
       value: searchValue,
       onChange: onSearch,
@@ -190,7 +191,7 @@ const CheckboxFilter = props => {
       locale: locale
     }), /*#__PURE__*/React.createElement("div", {
       className: `${tablePrefixCls}-filter-dropdown-tree`
-    }, filterMultiple ? /*#__PURE__*/React.createElement(_rcMasterUi.Checkbox
+    }, filterMultiple && options.length > 0 ? /*#__PURE__*/React.createElement(_rcMasterUi.Checkbox
     // checked={selectedKeys.length === flattenKeys(column.filters).length}
     , {
       checked: selectedKeys.length === (0, _useFilter.flattenKeys)(options).length
@@ -203,7 +204,7 @@ const CheckboxFilter = props => {
       indeterminate: selectedKeys.length > 0 && selectedKeys.length < (0, _useFilter.flattenKeys)(options).length,
       className: `${tablePrefixCls}-filter-dropdown-checkall`,
       onChange: onCheckAll
-    }, locale.filterCheckall) : null, /*#__PURE__*/React.createElement(_antd.Tree, {
+    }, locale.filterCheckall) : /*#__PURE__*/React.createElement(_rcMasterUi.Empty, null), /*#__PURE__*/React.createElement(_antd.Tree, {
       checkable: true,
       selectable: false,
       blockNode: true,

package/lib/grid-component/ColumnsChoose.js

@@ -23,8 +23,8 @@ const BoxAction = _styledComponents.default.div.withConfig({
 const ColumnsChoose = props => {
   const {
     columns: propsColumns,
-    triggerChangeColumns
-    // t,
+    triggerChangeColumns,
+    t
   } = props;
 
   // const dataList: { key: React.Key; title: string }[] = [];
@@ -216,10 +216,10 @@ const ColumnsChoose = props => {
     , {
       onClick: handleAccept
       // disabled={!columns.find((item) => item.visible !== false || item.visible)}
-    }, 'OK'), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    }, t ? t('OK') : 'OK'), /*#__PURE__*/_react.default.createElement(_antd.Button, {
       className: 'btn-action btn-action-cancel',
       onClick: handleCancel
-    }, 'Cancel'))),
+    }, t ? t('Cancel') : 'Cancel'))),
     trigger: "click",
     open: clicked,
     onOpenChange: handleClickChange,

package/lib/grid-component/InternalTable.js

@@ -66,6 +66,7 @@ const InternalTable = props => {
     editAble,
     rowKey,
     onDataChange,
+    sortMultiple,
     ...rest
   } = props;
   const locale = lang && lang === 'en' ? _en_US.default : _vi_VN.default;
@@ -123,23 +124,27 @@ const InternalTable = props => {
       setSelectedKeys,
       selectedKeys,
       confirm,
-      close,
+      // close,
       setOperatorKey,
       operatorKey,
       visible,
       searchValue,
       setSearchValue
     }) => {
+      const type = (0, _hooks.getTypeFilter)(column);
+      // const operatorOptions  = !type || type === 'Text' ? stringOperator : numberOperator
+      // const operatorOptions  = type === 'Checkbox' || type === 'Dropdown' || type === 'DropTree' || ty
+      const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? _hooks.booleanOperator : !type || type === 'Text' ? _hooks.stringOperator : _hooks.numberOperator;
       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(_rcMasterUi.Select, {
-        options: (0, _hooks.translateOption)(_hooks.numberOperator, t),
+        options: (0, _hooks.translateOption)(operatorOptions, t),
         style: {
           width: '100%',
           marginBottom: 8
@@ -170,13 +175,17 @@ const InternalTable = props => {
         style: {
           width: 90
         }
-      }, "Filter"), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+      }, t ? t('Filter') : 'Filter'), /*#__PURE__*/_react.default.createElement(_antd.Button, {
         type: "link",
         size: "small",
         onClick: () => {
-          close();
+          // setSearchValue('')
+          setSelectedKeys([]);
+          confirm();
+          // handleSearch()
+          // close()
         }
-      }, "close")));
+      }, t ? t("Clear") : 'Clear')));
     },
     filterIcon: filtered => /*#__PURE__*/_react.default.createElement(_becoxyIcons.FilterFill, {
       fontSize: 12,
@@ -194,7 +203,7 @@ const InternalTable = props => {
         }
       }
     }
-  }), [onFilterCallback, onFilterClick, _useColumns.renderFilter, t]);
+  }), [buddhistLocale, dataSourceFilter, onFilterCallback, onFilterClick, t]);
   const handleResize = indexPath => (e, {
     size
   }) => {
@@ -257,7 +266,7 @@ const InternalTable = props => {
           children: transformColumns(col.children, currentPath)
         };
       }
-      if (col.dataIndex === 'index' || col.field === 'index' || col.dataIndex === '#' || col.field === '#' || col.allowFiltering === false) {
+      if (col.dataIndex === 'index' || col.field === 'index' || col.dataIndex === '#' || col.field === '#' || col.allowFiltering === false || col.field === 'command') {
         return {
           ...transformedColumn
         };
@@ -265,15 +274,12 @@ const InternalTable = props => {
       return {
         ...getColumnSearchProps(col),
         ...transformedColumn,
-        // dataIndex: col.field ?? col.dataIndex,
-        // key: col.field ?? col.dataIndex ?? col.key,
-        // title: col.headerText ?? col.title,
-        // ellipsis: col.ellipsis !== false,
-        // align: col.textAlign ?? col.align,
-        // fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed,
-        onFilter: (value, record) => {
-          // @ts-ignore
-          return record[col.field ?? col.dataIndex];
+        onFilter: value => {
+          return value;
+        },
+        sorter: {
+          compare: a => a,
+          multiple: sortMultiple ? index : undefined
         },
         onHeaderCell: () => ({
           width: col.width,
@@ -281,7 +287,7 @@ const InternalTable = props => {
         })
       };
     });
-  }, [getColumnSearchProps]);
+  }, [getColumnSearchProps, sortMultiple, t]);
   const mergedColumns = _react.default.useMemo(() => {
     return transformColumns(columns);
   }, [transformColumns, columns]);

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

@@ -6,6 +6,7 @@ type GridProps<T> = GridTableProps<T> & {
     triggerChangeColumns?: () => void;
     triggerChangeData?: () => void;
     tableRef: any;
+    getRowKey: any;
 };
 declare const TableGrid: <RecordType extends object>(props: GridProps<RecordType>) => React.JSX.Element;
 export default TableGrid;

package/lib/grid-component/TableGrid.js

@@ -115,7 +115,7 @@ const TableGrid = props => {
     selectionSettings,
     rowSelection,
     rowSelected,
-    rowKey = 'id',
+    rowKey,
     pagination,
     scroll,
     onFilterClick,
@@ -123,6 +123,8 @@ const TableGrid = props => {
     loading,
     triggerChangeColumns,
     summary,
+    getRowKey,
+    onSorter,
     ...rest
   } = props;
   const {
@@ -141,12 +143,6 @@ const TableGrid = props => {
   const menuRef = (0, _react.useRef)(null);
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;
-
-  // const defaultSelected = useMemo(() => {
-  //   return defaultSelectedRowKeys ?? []
-  //
-  // }, [defaultSelectedRowKeys])
-
   const [menuVisible, setMenuVisible] = _react.default.useState(false);
   const [selectedRowData, setSelectedRowData] = _react.default.useState(null);
   const [position, setPosition] = _react.default.useState({
@@ -166,6 +162,8 @@ const TableGrid = props => {
   //   },
   // );
 
+  // console.log('mergedSelectedKeys', mergedSelectedKeys)
+
   // Reset if rowSelection reset
 
   // React.useEffect(() => {
@@ -242,11 +240,10 @@ const TableGrid = props => {
     }
   };
   const handleRowClick = () => () => {
-    // console.log(data)
-    // console.log(index)
-
     // const key = getRowKey(record, index);
 
+    // const keySet = new Set(derivedSelectedKeySet);
+
     // console.log('key', key)
 
     if (checkboxOnly !== true) {
@@ -300,7 +297,7 @@ const TableGrid = props => {
     }
   };
   const handleChange = sorter => {
-    console.log('Various parameters', sorter);
+    onSorter?.(sorter);
     // setFilteredInfo(filters);
     // setSortedInfo(sorter as Sorts);
   };
@@ -422,6 +419,7 @@ const TableGrid = props => {
         // }}
       }), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
         columns: columns,
+        t: t,
         triggerChangeColumns: triggerChangeColumns
       }), /*#__PURE__*/_react.default.createElement("div", null)));
     }
@@ -430,8 +428,10 @@ const TableGrid = props => {
   , (0, _extends2.default)({
     showSizeChanger: true,
     responsive: true,
-    size: 'small',
-    showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`
+    size: 'small'
+    // @ts-ignore
+    ,
+    showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
   }, pagination))));
 };
 var _default = exports.default = TableGrid;

package/lib/grid-component/hooks/constant.js

@@ -16,29 +16,29 @@ const numberOperator = exports.numberOperator = [{
   key: '>'
 }, {
   value: 'greaterthanorequal',
-  label: 'Greater Than or Equal',
+  label: 'Greater than or equal',
   key: '>='
 }, {
   value: 'lessthan',
-  label: 'Less Than',
+  label: 'Less than',
   key: '<'
 }, {
   value: 'lessthanorequal',
-  label: 'Less Than Or Equal',
+  label: 'Less than or equal',
   key: '<='
 }, {
   value: 'notequal',
-  label: 'Not Equal',
+  label: 'Not equal',
   key: '!='
 }];
 const stringOperator = exports.stringOperator = [{
   value: 'startswith',
   key: '_=',
-  label: 'Starts With'
+  label: 'Starts with'
 }, {
   value: 'endswith',
   key: '|=',
-  label: 'Ends With'
+  label: 'Ends with'
 }, {
   value: 'contains',
   key: '~=',
@@ -50,7 +50,7 @@ const stringOperator = exports.stringOperator = [{
 }, {
   value: 'notequal',
   key: '!=',
-  label: 'Not Equal'
+  label: 'Not equal'
 }];
 const dateOperator = exports.dateOperator = [{
   value: 'equal',
@@ -59,15 +59,15 @@ const dateOperator = exports.dateOperator = [{
 }, {
   value: 'notequal',
   key: '!=',
-  label: 'Not Equal'
+  label: 'Not equal'
 }, {
   value: 'greaterthan',
   key: '>',
-  label: 'Greater Than'
+  label: 'Greater than'
 }, {
   value: 'lessthan',
   key: '<',
-  label: 'Less Than'
+  label: 'Less than'
 }];
 const dateTimeOperator = exports.dateTimeOperator = [{
   value: 'equal',
@@ -76,15 +76,15 @@ const dateTimeOperator = exports.dateTimeOperator = [{
 }, {
   value: 'notequal',
   key: '!=',
-  label: 'Not Equal'
+  label: 'Not equal'
 }, {
   value: 'greaterthan',
   key: '>',
-  label: 'Greater Than'
+  label: 'Greater than'
 }, {
   value: 'lessthan',
   key: '<',
-  label: 'Less Than'
+  label: 'Less than'
 }];
 const booleanOperator = exports.booleanOperator = [{
   value: 'equal',
@@ -93,7 +93,7 @@ const booleanOperator = exports.booleanOperator = [{
 }, {
   value: 'notequal',
   key: '!=',
-  label: 'Not Equal'
+  label: 'Not equal'
 }];
 const translateOption = (options, t) => {
   if (!t) {

package/lib/grid-component/hooks/useColumns/index.js

@@ -108,8 +108,8 @@ exports.renderContent = renderContent;
 const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale) => {
   const type = (0, _utils.getTypeFilter)(column);
   const dateFormat = (0, _utils.getDatepickerFormat)(column?.typeFilter ?? column?.type, column) ?? 'DD/MM/YYYY';
-  const dateRangeFormat = (0, _utils.getDatepickerFormat)(column?.type, column) ?? 'DD/MM/YYYY';
-  const find = dataSourceFilter?.find(it => it.key === column?.key);
+  const dateRangeFormat = 'DD/MM/YYYY';
+  const find = dataSourceFilter?.find(it => it.key === (column?.field || column.dataIndex));
   const options = find ? find.data : [];
   switch (type) {
     case 'Number':
@@ -194,7 +194,8 @@ const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, s
         format: {
           format: dateRangeFormat,
           type: 'mask'
-        }
+        },
+        locale: buddhistLocale
         // defaultValue={dateRangeValue}
         ,
         value: dateRangeValue,
@@ -413,9 +414,12 @@ const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, s
           filterTitle: 'Chọn tất cả',
           filterCheckall: 'Chọn tất cả'
         },
+        showFilter: column.showFilterSearch,
         selectedKeys: selectedKeys,
         onSelect: setSelectedKeys,
-        options: options,
+        options: options
+        // options={[]}
+        ,
         filterMultiple: true,
         open: visible,
         searchValue: searchValue,

package/lib/grid-component/styles.scss

@@ -83,6 +83,16 @@ $rowSelectedHoverBg: 'ui-rc' !default;
 
       }
     }
+    .ui-rc-table-placeholder {
+      .ui-rc-table-cell {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+        .ui-rc-table-expanded-row-fixed {
+          margin-top: 0 !important;
+          margin-bottom: 0 !important;
+        }
+      }
+    }
   }
 
   .#{$prefix}-table-thead {

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

@@ -3,6 +3,7 @@ import type { GridTableProps } from "../type";
 type Props<T> = GridTableProps<T> & {
     setColumns?: any;
     tableRef: any;
+    getRowKey: any;
 };
 declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Grid;

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

@@ -22,6 +22,7 @@ const Grid = props => {
     components,
     style,
     format,
+    getRowKey,
     ...rest
   } = props;
   const transformColumns = _react.default.useCallback(cols => {
@@ -90,7 +91,8 @@ const Grid = props => {
     style: {
       ...style,
       minHeight: height
-    }
+    },
+    getRowKey: getRowKey
   }))));
 };
 var _default = exports.default = Grid;

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

@@ -792,7 +792,8 @@ const GridEdit = props => {
       ...style,
       minHeight: height
     },
-    rowHoverable: false
+    rowHoverable: false,
+    getRowKey: getRowKey
   }))))), /*#__PURE__*/_react.default.createElement(_reactHotToast.Toaster, {
     position: toast,
     toastOptions: {

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

@@ -91,6 +91,7 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
     placeholder?: string;
     showInColumnChoose?: boolean;
     typeFilter?: TypeFilter;
+    showFilterSearch?: boolean;
     headerText?: string;
     textAlign?: ITextAlign;
     frozen?: Frozen;
@@ -120,6 +121,7 @@ export type ColumnTable<RecordType = AnyObject> = ColumnEditType<RecordType> | C
 export type ColumnsTable<RecordType = AnyObject> = (ColumnType<RecordType> | ColumnEditType<RecordType>)[];
 export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary'> {
     editAble?: boolean;
+    sortMultiple?: boolean;
     dataSource: RecordType[];
     columns: ColumnsTable<RecordType>;
     height?: number;
@@ -174,7 +176,7 @@ export interface CommandItem {
     title: string;
     color?: 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
     tooltip?: string;
-    icon?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
+    icon?: any;
     template?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
     client?: boolean;
     confirmDialog?: boolean;

package/package.json

@@ -1,102 +1,102 @@
-{
-  "name": "es-grid-template",
-  "version": "0.1.2",
-  "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.8",
-    "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": "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"
+  }
+}