es-grid-template 0.1.2-2 → 0.1.3-0

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
   }) => {
@@ -236,6 +245,7 @@ const InternalTable = props => {
       const transformedColumn = {
         ...col,
         dataIndex: col.field ?? col.dataIndex,
+        key: col.field ?? col.dataIndex ?? col.key,
         title: t ? t(col.headerText ?? col.title) : col.headerText ?? col.title,
         ellipsis: col.ellipsis !== false,
         align: col.textAlign ?? col.align,
@@ -247,7 +257,7 @@ const InternalTable = props => {
           children: transformColumns(col.children, currentPath)
         };
       }
-      if (col.dataIndex === 'index' || col.field === 'index' || col.dataIndex === '#' || col.dataIndex === '#') {
+      if (col.dataIndex === 'index' || col.field === 'index' || col.dataIndex === '#' || col.field === '#' || col.allowFiltering === false || col.field === 'command') {
         return {
           ...transformedColumn
         };
@@ -255,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,
@@ -271,7 +278,7 @@ const InternalTable = props => {
         })
       };
     });
-  }, [getColumnSearchProps]);
+  }, [getColumnSearchProps, sortMultiple, t]);
   const mergedColumns = React.useMemo(() => {
     return transformColumns(columns);
   }, [transformColumns, columns]);
@@ -286,6 +293,7 @@ const InternalTable = props => {
   };
   const TableComponent = editAble ? GridEdit : Grid;
   return /*#__PURE__*/React.createElement(TableComponent, _extends({}, rest, {
+    t: t,
     tableRef: tableRef,
     dataSource: data,
     components: {

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,13 +108,16 @@ const TableGrid = props => {
     selectionSettings,
     rowSelection,
     rowSelected,
-    rowKey = 'id',
+    rowKey,
     pagination,
     scroll,
     onFilterClick,
     dataSourceFilter: propDataSourceFilter,
     loading,
     triggerChangeColumns,
+    summary,
+    getRowKey,
+    onSorter,
     ...rest
   } = props;
   const {
@@ -133,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({
@@ -158,6 +155,8 @@ const TableGrid = props => {
   //   },
   // );
 
+  // console.log('mergedSelectedKeys', mergedSelectedKeys)
+
   // Reset if rowSelection reset
 
   // React.useEffect(() => {
@@ -234,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) {
@@ -292,7 +290,7 @@ const TableGrid = props => {
     }
   };
   const handleChange = sorter => {
-    console.log('Various parameters', sorter);
+    onSorter?.(sorter);
     // setFilteredInfo(filters);
     // setSortedInfo(sorter as Sorts);
   };
@@ -357,29 +355,37 @@ const TableGrid = props => {
     onScroll: () => {
       setMenuVisible(false);
     },
-    summary: () => /*#__PURE__*/React.createElement(Table.Summary, {
-      fixed: true
-    }, /*#__PURE__*/React.createElement(Table.Summary.Row, null, flatColumns(columns).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;
-      const sumValue = col.type === 'number' ? sumDataByField(dataSource, col?.key) : 0;
-      const value = !isEmpty(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
-      const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
-      const numericFormatProps = {
-        thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
-        decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
-        allowNegative: (col.format?.allowNegative ? col.format?.allowNegative : format?.allowNegative) ?? false,
-        prefix: col.format?.prefix ? col.format?.prefix : format?.prefix,
-        suffix: col.format?.suffix ? col.format?.suffix : format?.suffix,
-        decimalScale: dec,
-        fixedDecimalScale: (col.format?.fixedDecimalScale ? col.format?.fixedDecimalScale : format?.fixedDecimalScale) ?? false
-      };
-      return /*#__PURE__*/React.createElement(Table.Summary.Cell, {
-        key: col.key,
-        index: index
-      }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : numericFormatter(cellValue, numericFormatProps));
-    }))),
+    summary: () => {
+      if (typeof summary === 'function') {
+        return summary(dataSource);
+      }
+      if (!summary) {
+        return undefined;
+      }
+      return /*#__PURE__*/React.createElement(Table.Summary, {
+        fixed: true
+      }, /*#__PURE__*/React.createElement(Table.Summary.Row, null, flatColumns(columns).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;
+        const sumValue = col.type === 'number' ? sumDataByField(dataSource, col?.key) : 0;
+        const value = !isEmpty(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
+        const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
+        const numericFormatProps = {
+          thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+          decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+          allowNegative: (col.format?.allowNegative ? col.format?.allowNegative : format?.allowNegative) ?? false,
+          prefix: col.format?.prefix ? col.format?.prefix : format?.prefix,
+          suffix: col.format?.suffix ? col.format?.suffix : format?.suffix,
+          decimalScale: dec,
+          fixedDecimalScale: (col.format?.fixedDecimalScale ? col.format?.fixedDecimalScale : format?.fixedDecimalScale) ?? false
+        };
+        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
@@ -401,12 +407,12 @@ const TableGrid = props => {
         items: toolbarItems ?? [],
         mode: 'responsive'
         // mode={'scroll'}
-        ,
-        onClick: val => {
-          console.log(val);
-        }
+        // onClick={(val: any) => {
+        //   console.log(val)
+        // }}
       }), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
         columns: columns,
+        t: t,
         triggerChangeColumns: triggerChangeColumns
       }), /*#__PURE__*/React.createElement("div", null)));
     }
@@ -415,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 {
@@ -106,6 +116,7 @@ $rowSelectedHoverBg: 'ui-rc' !default;
   .#{$prefix}-table-summary {
     .#{$prefix}-table-cell {
       background-color: #fafafa;
+      height: 32px;
     }
 
     > tr > td {

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

@@ -6,12 +6,14 @@ import Command from "../Command";
 import { renderContent } from "../hooks/useColumns";
 const Grid = props => {
   const {
+    t,
     columns,
     height,
     tableRef,
     components,
     style,
     format,
+    getRowKey,
     ...rest
   } = props;
   const transformColumns = React.useCallback(cols => {
@@ -31,7 +33,7 @@ const Grid = props => {
       const transformedColumn = {
         ...column,
         dataIndex: column.field ?? column.dataIndex,
-        title: column.headerText ?? column.title,
+        title: t ? t(column.headerText ?? column.title) : column.headerText ?? column.title,
         ellipsis: column.ellipsis !== false,
         align: column.textAlign ?? column.align,
         fixed: column.frozen ? column.frozen.toLowerCase() : column.fixed
@@ -63,7 +65,7 @@ const Grid = props => {
         render: (value, record, rowIndex) => renderContent(column, value, record, rowIndex, format)
       };
     });
-  }, []);
+  }, [format, t]);
   const mergedColumns = useMemo(() => transformColumns(columns ?? []), [transformColumns, columns]);
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     heightTable: height,
@@ -71,6 +73,7 @@ const Grid = props => {
       position: 'relative'
     }
   }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
+    t: t,
     tableRef: tableRef,
     components: {
       ...components
@@ -79,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;
@@ -118,8 +119,9 @@ export type ColumnsType<RecordType = AnyObject> = ColumnType<RecordType>[];
 export type ColumnsEditType<RecordType = AnyObject> = ColumnEditType<RecordType>[];
 export type ColumnTable<RecordType = AnyObject> = ColumnEditType<RecordType> | ColumnType<RecordType>;
 export type ColumnsTable<RecordType = AnyObject> = (ColumnType<RecordType> | ColumnEditType<RecordType>)[];
-export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource'> {
+export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary'> {
     editAble?: boolean;
+    sortMultiple?: boolean;
     dataSource: RecordType[];
     columns: ColumnsTable<RecordType>;
     height?: number;
@@ -159,6 +161,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
     loading?: boolean;
     allowResizing?: boolean;
     onDataChange?: (data: RecordType[]) => void;
+    summary?: boolean | ((data: readonly RecordType[]) => React.ReactNode);
 }
 export interface TableEditProps<RecordType = AnyObject> extends Omit<TableProps<RecordType>, 'columns'> {
     columns: ColumnsTable<RecordType>;
@@ -173,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
   }) => {
@@ -245,6 +254,7 @@ const InternalTable = props => {
       const transformedColumn = {
         ...col,
         dataIndex: col.field ?? col.dataIndex,
+        key: col.field ?? col.dataIndex ?? col.key,
         title: t ? t(col.headerText ?? col.title) : col.headerText ?? col.title,
         ellipsis: col.ellipsis !== false,
         align: col.textAlign ?? col.align,
@@ -256,7 +266,7 @@ const InternalTable = props => {
           children: transformColumns(col.children, currentPath)
         };
       }
-      if (col.dataIndex === 'index' || col.field === 'index' || col.dataIndex === '#' || col.dataIndex === '#') {
+      if (col.dataIndex === 'index' || col.field === 'index' || col.dataIndex === '#' || col.field === '#' || col.allowFiltering === false || col.field === 'command') {
         return {
           ...transformedColumn
         };
@@ -264,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,
@@ -280,7 +287,7 @@ const InternalTable = props => {
         })
       };
     });
-  }, [getColumnSearchProps]);
+  }, [getColumnSearchProps, sortMultiple, t]);
   const mergedColumns = _react.default.useMemo(() => {
     return transformColumns(columns);
   }, [transformColumns, columns]);
@@ -295,6 +302,7 @@ const InternalTable = props => {
   };
   const TableComponent = editAble ? _GridEdit.default : _Grid.default;
   return /*#__PURE__*/_react.default.createElement(TableComponent, (0, _extends2.default)({}, rest, {
+    t: t,
     tableRef: tableRef,
     dataSource: data,
     components: {

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,13 +115,16 @@ const TableGrid = props => {
     selectionSettings,
     rowSelection,
     rowSelected,
-    rowKey = 'id',
+    rowKey,
     pagination,
     scroll,
     onFilterClick,
     dataSourceFilter: propDataSourceFilter,
     loading,
     triggerChangeColumns,
+    summary,
+    getRowKey,
+    onSorter,
     ...rest
   } = props;
   const {
@@ -140,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({
@@ -165,6 +162,8 @@ const TableGrid = props => {
   //   },
   // );
 
+  // console.log('mergedSelectedKeys', mergedSelectedKeys)
+
   // Reset if rowSelection reset
 
   // React.useEffect(() => {
@@ -241,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) {
@@ -299,7 +297,7 @@ const TableGrid = props => {
     }
   };
   const handleChange = sorter => {
-    console.log('Various parameters', sorter);
+    onSorter?.(sorter);
     // setFilteredInfo(filters);
     // setSortedInfo(sorter as Sorts);
   };
@@ -364,29 +362,37 @@ const TableGrid = props => {
     onScroll: () => {
       setMenuVisible(false);
     },
-    summary: () => /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary, {
-      fixed: true
-    }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Row, null, (0, _useColumns.flatColumns)(columns).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;
-      const sumValue = col.type === 'number' ? (0, _hooks.sumDataByField)(dataSource, col?.key) : 0;
-      const value = !(0, _hooks.isEmpty)(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
-      const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
-      const numericFormatProps = {
-        thousandSeparator: (0, _hooks.checkThousandSeparator)(thousandSeparator, decimalSeparator),
-        decimalSeparator: (0, _hooks.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
-        allowNegative: (col.format?.allowNegative ? col.format?.allowNegative : format?.allowNegative) ?? false,
-        prefix: col.format?.prefix ? col.format?.prefix : format?.prefix,
-        suffix: col.format?.suffix ? col.format?.suffix : format?.suffix,
-        decimalScale: dec,
-        fixedDecimalScale: (col.format?.fixedDecimalScale ? col.format?.fixedDecimalScale : format?.fixedDecimalScale) ?? false
-      };
-      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));
-    }))),
+    summary: () => {
+      if (typeof summary === 'function') {
+        return summary(dataSource);
+      }
+      if (!summary) {
+        return undefined;
+      }
+      return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary, {
+        fixed: true
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Row, null, (0, _useColumns.flatColumns)(columns).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;
+        const sumValue = col.type === 'number' ? (0, _hooks.sumDataByField)(dataSource, col?.key) : 0;
+        const value = !(0, _hooks.isEmpty)(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
+        const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
+        const numericFormatProps = {
+          thousandSeparator: (0, _hooks.checkThousandSeparator)(thousandSeparator, decimalSeparator),
+          decimalSeparator: (0, _hooks.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
+          allowNegative: (col.format?.allowNegative ? col.format?.allowNegative : format?.allowNegative) ?? false,
+          prefix: col.format?.prefix ? col.format?.prefix : format?.prefix,
+          suffix: col.format?.suffix ? col.format?.suffix : format?.suffix,
+          decimalScale: dec,
+          fixedDecimalScale: (col.format?.fixedDecimalScale ? col.format?.fixedDecimalScale : format?.fixedDecimalScale) ?? false
+        };
+        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
@@ -408,12 +414,12 @@ const TableGrid = props => {
         items: toolbarItems ?? [],
         mode: 'responsive'
         // mode={'scroll'}
-        ,
-        onClick: val => {
-          console.log(val);
-        }
+        // onClick={(val: any) => {
+        //   console.log(val)
+        // }}
       }), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
         columns: columns,
+        t: t,
         triggerChangeColumns: triggerChangeColumns
       }), /*#__PURE__*/_react.default.createElement("div", null)));
     }
@@ -422,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 {
@@ -106,6 +116,7 @@ $rowSelectedHoverBg: 'ui-rc' !default;
   .#{$prefix}-table-summary {
     .#{$prefix}-table-cell {
       background-color: #fafafa;
+      height: 32px;
     }
 
     > tr > td {

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

@@ -15,12 +15,14 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 const Grid = props => {
   const {
+    t,
     columns,
     height,
     tableRef,
     components,
     style,
     format,
+    getRowKey,
     ...rest
   } = props;
   const transformColumns = _react.default.useCallback(cols => {
@@ -40,7 +42,7 @@ const Grid = props => {
       const transformedColumn = {
         ...column,
         dataIndex: column.field ?? column.dataIndex,
-        title: column.headerText ?? column.title,
+        title: t ? t(column.headerText ?? column.title) : column.headerText ?? column.title,
         ellipsis: column.ellipsis !== false,
         align: column.textAlign ?? column.align,
         fixed: column.frozen ? column.frozen.toLowerCase() : column.fixed
@@ -72,7 +74,7 @@ const Grid = props => {
         render: (value, record, rowIndex) => (0, _useColumns.renderContent)(column, value, record, rowIndex, format)
       };
     });
-  }, []);
+  }, [format, t]);
   const mergedColumns = (0, _react.useMemo)(() => transformColumns(columns ?? []), [transformColumns, columns]);
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_GridStyle.GridStyle, {
     heightTable: height,
@@ -80,6 +82,7 @@ const Grid = props => {
       position: 'relative'
     }
   }, /*#__PURE__*/_react.default.createElement(_TableGrid.default, (0, _extends2.default)({}, rest, {
+    t: t,
     tableRef: tableRef,
     components: {
       ...components
@@ -88,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;
@@ -118,8 +119,9 @@ export type ColumnsType<RecordType = AnyObject> = ColumnType<RecordType>[];
 export type ColumnsEditType<RecordType = AnyObject> = ColumnEditType<RecordType>[];
 export type ColumnTable<RecordType = AnyObject> = ColumnEditType<RecordType> | ColumnType<RecordType>;
 export type ColumnsTable<RecordType = AnyObject> = (ColumnType<RecordType> | ColumnEditType<RecordType>)[];
-export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource'> {
+export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary'> {
     editAble?: boolean;
+    sortMultiple?: boolean;
     dataSource: RecordType[];
     columns: ColumnsTable<RecordType>;
     height?: number;
@@ -159,6 +161,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
     loading?: boolean;
     allowResizing?: boolean;
     onDataChange?: (data: RecordType[]) => void;
+    summary?: boolean | ((data: readonly RecordType[]) => React.ReactNode);
 }
 export interface TableEditProps<RecordType = AnyObject> extends Omit<TableProps<RecordType>, 'columns'> {
     columns: ColumnsTable<RecordType>;
@@ -173,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,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "0.1.2-2",
+  "version": "0.1.3-0",
   "description": "es-grid-template",
   "keywords": [
     "react",
@@ -59,7 +59,7 @@
     "rc-checkbox": "^3.5.0",
     "rc-dropdown": "^4.2.1",
     "rc-field-form": "^2.6.0",
-    "rc-master-ui": "^1.1.8",
+    "rc-master-ui": "^1.1.10-0",
     "rc-select": "^14.16.3",
     "rc-tooltip": "^6.3.0",
     "rc-tree": "^5.10.1",