es-grid-template 1.9.13 → 1.9.14

package/es/ali-table/Grid.js

@@ -53,7 +53,8 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     footerDataSource,
     loading,
     useVirtual,
-    useOuterBorder = true
+    useOuterBorder = true,
+    showHeader = true
 
     // onRowFooterStyles,
     // onRowHeaderStyles
@@ -218,6 +219,7 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, typeof title === 'function' ? title?.(dataSource) : title)), /*#__PURE__*/React.createElement(WebsiteBaseTable, _extends({
     ref: ref,
     id: id,
+    showHeader: showHeader,
     commandClick: commandClick,
     isLoading: loading,
     useVirtual: useVirtual,

package/es/ali-table/InternalTable.js

@@ -23,6 +23,7 @@ const InternalTable = props => {
     dataSource,
     allowFiltering,
     allowSortering,
+    allowResizing,
     groupAble,
     groupColumns,
     groupSetting,
@@ -193,6 +194,7 @@ const InternalTable = props => {
     disableUserSelectWhenResizing: true,
     allowFiltering,
     allowSortering,
+    allowResizing,
     tableLocal,
     locale,
     prefix,

package/es/ali-table/base-table/table.d.ts

@@ -60,7 +60,7 @@ export type BaseTableProps = {
     /** Custom inline styles */
     style?: CSSProperties & BaseTableCSSVariables;
     /** Whether the table has a header */
-    hasHeader?: boolean;
+    showHeader?: boolean;
     /** Whether table has a horizontal sticky scrollbar */
     hasStickyScroll?: boolean;
     /** Height of the sticky horizontal scrollbar */
@@ -128,7 +128,7 @@ interface BaseTableState {
 }
 export declare class BaseTable extends React.Component<BaseTableProps, BaseTableState> {
     static defaultProps: {
-        hasHeader: boolean;
+        showHeader: boolean;
         isStickyHeader: boolean;
         stickyTop: number;
         footerDataSource: any[];

package/es/ali-table/base-table/table.js

@@ -21,7 +21,7 @@ function warnEmptyContentIsDeprecated() {
 }
 export class BaseTable extends React.Component {
   static defaultProps = {
-    hasHeader: true,
+    showHeader: true,
     isStickyHeader: true,
     stickyTop: 0,
     footerDataSource: [],
@@ -106,13 +106,13 @@ export class BaseTable extends React.Component {
   renderTableHeader(info) {
     const {
       stickyTop,
-      hasHeader
+      showHeader
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
       className: cx(Classes.tableHeader, 'no-scrollbar'),
       style: {
         top: stickyTop === 0 ? undefined : stickyTop,
-        display: hasHeader ? undefined : 'none'
+        display: showHeader ? undefined : 'none'
       }
     }, /*#__PURE__*/React.createElement(TableHeader, {
       info: info
@@ -334,7 +334,7 @@ export class BaseTable extends React.Component {
       dataSource,
       className,
       style,
-      hasHeader,
+      showHeader,
       useOuterBorder,
       // isStickyHead,
       isStickyHeader,
@@ -347,7 +347,7 @@ export class BaseTable extends React.Component {
       'use-outer-border': useOuterBorder,
       empty: dataSource.length === 0,
       lock: info.hasLockColumn,
-      'has-header': hasHeader,
+      'has-header': showHeader,
       'sticky-header': isStickyHeader,
       'has-footer': footerDataSource && footerDataSource.length > 0,
       'sticky-footer': isStickyFooter

package/es/ali-table/pipeline/features/columnCustom.d.ts

@@ -38,6 +38,7 @@ export interface ColumnFeatureOptions {
     stopClickEventPropagation?: boolean;
     allowFiltering?: boolean;
     allowSortering?: boolean;
+    allowResizing?: boolean;
     locale?: any;
     tableLocal?: any;
     t?: any;

package/es/ali-table/pipeline/features/columnCustom.js

@@ -28,6 +28,7 @@ export function columnCustom(opts) {
   const maxSize = opts.maxSize ?? 1000;
   const allowFiltering = opts.allowFiltering !== false;
   const allowSortering = opts.allowSortering !== false;
+  const allowResizing = opts.allowResizing !== false;
   const {
     prefix,
     id,
@@ -396,7 +397,7 @@ export function columnCustom(opts) {
           ...col,
           lock: !!col.fixed,
           width: sizes[startIndex],
-          title: /*#__PURE__*/React.createElement(React.Fragment, null, col.headerTemplate ? /*#__PURE__*/React.createElement(React.Fragment, null, typeof col.headerTemplate === 'function' ? col.headerTemplate(col) : col.headerTemplate) : /*#__PURE__*/React.createElement(React.Fragment, null, prevTitle), /*#__PURE__*/React.createElement(Resizer, {
+          title: /*#__PURE__*/React.createElement(React.Fragment, null, col.headerTemplate ? /*#__PURE__*/React.createElement(React.Fragment, null, typeof col.headerTemplate === 'function' ? col.headerTemplate(col) : col.headerTemplate) : /*#__PURE__*/React.createElement(React.Fragment, null, prevTitle), allowResizing && /*#__PURE__*/React.createElement(Resizer, {
             width: col.width,
             columnKey: col.field,
             columnIndex: startIndex
@@ -436,7 +437,7 @@ export function columnCustom(opts) {
           ...col,
           lock: !!col.fixed,
           width: sizes[startIndex],
-          title: /*#__PURE__*/React.createElement(React.Fragment, null, col.headerTemplate ? /*#__PURE__*/React.createElement(React.Fragment, null, typeof col.headerTemplate === 'function' ? col.headerTemplate(col) : col.headerTemplate) : /*#__PURE__*/React.createElement(React.Fragment, null, prevTitle), /*#__PURE__*/React.createElement(Resizer, {
+          title: /*#__PURE__*/React.createElement(React.Fragment, null, col.headerTemplate ? /*#__PURE__*/React.createElement(React.Fragment, null, typeof col.headerTemplate === 'function' ? col.headerTemplate(col) : col.headerTemplate) : /*#__PURE__*/React.createElement(React.Fragment, null, prevTitle), allowResizing && /*#__PURE__*/React.createElement(Resizer, {
             width: col.width,
             columnKey: col.field,
             columnIndex: startIndex
@@ -517,7 +518,7 @@ export function columnCustom(opts) {
           className: classNames(`ui-rc-table-column-sorter-cancel toolbar-icon`, {
             active: true
           })
-        })), canFilter && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Dropdown, mergedDropdownProps)))), /*#__PURE__*/React.createElement(Resizer, {
+        })), canFilter && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Dropdown, mergedDropdownProps)))), allowResizing && /*#__PURE__*/React.createElement(Resizer, {
           width: col.width,
           columnKey: col.field,
           columnIndex: startIndex

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

@@ -233,6 +233,7 @@ export type TableProps<RecordType = AnyObject> = {
         color?: string;
     };
     useOuterBorder?: boolean;
+    showHeader?: boolean;
     className?: string;
     title?: ReactNode | ((data: RecordType) => ReactNode);
     fullScreenTitle?: ReactNode | (() => ReactNode);

package/es/group-component/hook/utils.d.ts

@@ -208,9 +208,9 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     ellipsis?: boolean;
     allowResizing?: boolean;
     allowSelection?: boolean | ((rowData: RecordType) => boolean);
-    onCellStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
-    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
-    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
+    onCellStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
+    onCellHeaderStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
+    onCellFooterStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
     sumGroup?: boolean;
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;

package/es/group-component/table/TableWrapper.d.ts

@@ -6,6 +6,7 @@ import type { Column } from "@tanstack/react-table";
 type Props<T> = {
     prefix: string;
     id: string;
+    showHeader?: boolean;
     tableContainerRef: React.RefObject<HTMLDivElement>;
     height: number;
     minHeight?: number;

package/es/group-component/table/TableWrapper.js

@@ -11,6 +11,7 @@ const TableWrapper = props => {
   const {
     id,
     prefix,
+    showHeader = true,
     tableContainerRef,
     height,
     minHeight,
@@ -209,7 +210,7 @@ const TableWrapper = props => {
       display: 'grid',
       minWidth: table.getTotalSize()
     }
-  }, /*#__PURE__*/React.createElement(TableHead, {
+  }, showHeader && /*#__PURE__*/React.createElement(TableHead, {
     tableContainerRef: tableContainerRef,
     table: table,
     columnVirtualizer: columnVirtualizer,

package/es/table-component/body/EditableCell.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from "react";
 import { DatePicker, TimePicker } from "rc-master-ui";
 import { Divider, Row, Col, Input, ColorPicker, Button } from "antd";
-import { checkDecimalSeparator, checkThousandSeparator, checkFieldKey, convertArrayWithIndent, convertDateToDayjs, convertLabelToTitle, getDatepickerFormat, isDisable, isEmpty, isNullOrUndefined, customWeekStartEndFormat, convertDayjsToDate, parseBooleanToValue, isColor, genPresets, getFormat } from "../hook/utils";
+import { checkDecimalSeparator, checkThousandSeparator, checkFieldKey, convertArrayWithIndent, convertDateToDayjs, convertLabelToTitle, getDatepickerFormat, isDisable, isEmpty, isNullOrUndefined, customWeekStartEndFormat, convertDayjsToDate, parseBooleanToValue, isColor, genPresets, getFormat, removeVietnameseTones } from "../hook/utils";
 import classNames from "classnames";
 import { NumericFormat } from "react-numeric-component";
 import dayjs from "dayjs";
@@ -79,6 +79,7 @@ const EditableCell = props => {
       fieldNames,
       toolbarItems,
       filterOption,
+      filterKey,
       inputKey,
       toolbarClick,
       loadOptions,
@@ -416,7 +417,14 @@ const EditableCell = props => {
               return /*#__PURE__*/React.createElement(React.Fragment, null, " ", menu);
             }
           },
-          filterOption: filterOption,
+          filterOption: filterKey ? (input, option) => {
+            const searchValue = removeVietnameseTones(input.toLowerCase() ?? '');
+            const filterValues = filterKey.some(k => {
+              const val = option?.[k];
+              return removeVietnameseTones((val ?? '').toString().toLowerCase()).includes(searchValue);
+            });
+            return filterValues;
+          } : filterOption,
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
             label: inputKey ?? 'label'
@@ -517,13 +525,21 @@ const EditableCell = props => {
           placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.selectPlaceholder,
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
-          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
-          optionFilterProp: "label",
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined
+          // optionFilterProp="label"
+          ,
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
-          filterOption: filterOption,
+          filterOption: filterKey ? (input, option) => {
+            const searchValue = removeVietnameseTones(input.toLowerCase() ?? '');
+            const filterValues = filterKey.some(k => {
+              const val = option?.[k];
+              return removeVietnameseTones((val ?? '').toString().toLowerCase()).includes(searchValue);
+            });
+            return filterValues;
+          } : filterOption,
           optionRender: column.editSelectSettings?.formatOptionLabel,
-          fieldNames: fieldNames ? fieldNames : {
+          fieldNames: {
             value: keySelect,
             label: inputKey ?? 'label'
           },
@@ -648,8 +664,9 @@ const EditableCell = props => {
           placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.selectPlaceholder,
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
-          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
-          optionFilterProp: "label",
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined
+          // optionFilterProp="label"
+          ,
           popupClassName: 'be-popup-container',
           loadOptions: loadOptions,
           status: isInvalid ? 'error' : undefined,
@@ -678,7 +695,14 @@ const EditableCell = props => {
             }
           },
           optionRender: column.editSelectSettings?.formatOptionLabel,
-          filterOption: filterOption,
+          filterOption: filterKey ? (input, option) => {
+            const searchValue = removeVietnameseTones(input.toLowerCase() ?? '');
+            const filterValues = filterKey.some(k => {
+              const val = option?.[k];
+              return removeVietnameseTones((val ?? '').toString().toLowerCase()).includes(searchValue);
+            });
+            return filterValues;
+          } : filterOption,
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
             label: inputKey ?? 'label'

package/es/table-component/table/TableWrapper.d.ts

@@ -10,6 +10,7 @@ type Props<T> = {
     height: number;
     minHeight?: number;
     table: Table<T>;
+    showHeader?: boolean;
     summary?: boolean;
     loading?: boolean;
     commandClick?: (args: Omit<CommandClick<T>, 'rows'>) => void;

package/es/table-component/table/TableWrapper.js

@@ -13,6 +13,7 @@ const TableWrapper = props => {
     id,
     prefix,
     tableContainerRef,
+    showHeader = true,
     height,
     minHeight,
     summary,
@@ -198,7 +199,7 @@ const TableWrapper = props => {
       display: 'grid',
       minWidth: table.getTotalSize()
     }
-  }, /*#__PURE__*/React.createElement(TableHead, {
+  }, showHeader && /*#__PURE__*/React.createElement(TableHead, {
     tableContainerRef: tableContainerRef,
     table: table,
     columnVirtualizer: columnVirtualizer,

package/lib/ali-table/Grid.js

@@ -63,7 +63,8 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     footerDataSource,
     loading,
     useVirtual,
-    useOuterBorder = true
+    useOuterBorder = true,
+    showHeader = true
 
     // onRowFooterStyles,
     // onRowHeaderStyles
@@ -228,6 +229,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   }, typeof title === 'function' ? title?.(dataSource) : title)), /*#__PURE__*/_react.default.createElement(_WebsiteBaseTable.WebsiteBaseTable, (0, _extends2.default)({
     ref: ref,
     id: id,
+    showHeader: showHeader,
     commandClick: commandClick,
     isLoading: loading,
     useVirtual: useVirtual,

package/lib/ali-table/InternalTable.js

@@ -30,6 +30,7 @@ const InternalTable = props => {
     dataSource,
     allowFiltering,
     allowSortering,
+    allowResizing,
     groupAble,
     groupColumns,
     groupSetting,
@@ -200,6 +201,7 @@ const InternalTable = props => {
     disableUserSelectWhenResizing: true,
     allowFiltering,
     allowSortering,
+    allowResizing,
     tableLocal,
     locale,
     prefix,

package/lib/ali-table/base-table/table.d.ts

@@ -60,7 +60,7 @@ export type BaseTableProps = {
     /** Custom inline styles */
     style?: CSSProperties & BaseTableCSSVariables;
     /** Whether the table has a header */
-    hasHeader?: boolean;
+    showHeader?: boolean;
     /** Whether table has a horizontal sticky scrollbar */
     hasStickyScroll?: boolean;
     /** Height of the sticky horizontal scrollbar */
@@ -128,7 +128,7 @@ interface BaseTableState {
 }
 export declare class BaseTable extends React.Component<BaseTableProps, BaseTableState> {
     static defaultProps: {
-        hasHeader: boolean;
+        showHeader: boolean;
         isStickyHeader: boolean;
         stickyTop: number;
         footerDataSource: any[];

package/lib/ali-table/base-table/table.js

@@ -30,7 +30,7 @@ function warnEmptyContentIsDeprecated() {
 }
 class BaseTable extends _react.default.Component {
   static defaultProps = {
-    hasHeader: true,
+    showHeader: true,
     isStickyHeader: true,
     stickyTop: 0,
     footerDataSource: [],
@@ -115,13 +115,13 @@ class BaseTable extends _react.default.Component {
   renderTableHeader(info) {
     const {
       stickyTop,
-      hasHeader
+      showHeader
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)(_styles.Classes.tableHeader, 'no-scrollbar'),
       style: {
         top: stickyTop === 0 ? undefined : stickyTop,
-        display: hasHeader ? undefined : 'none'
+        display: showHeader ? undefined : 'none'
       }
     }, /*#__PURE__*/_react.default.createElement(_header.default, {
       info: info
@@ -343,7 +343,7 @@ class BaseTable extends _react.default.Component {
       dataSource,
       className,
       style,
-      hasHeader,
+      showHeader,
       useOuterBorder,
       // isStickyHead,
       isStickyHeader,
@@ -356,7 +356,7 @@ class BaseTable extends _react.default.Component {
       'use-outer-border': useOuterBorder,
       empty: dataSource.length === 0,
       lock: info.hasLockColumn,
-      'has-header': hasHeader,
+      'has-header': showHeader,
       'sticky-header': isStickyHeader,
       'has-footer': footerDataSource && footerDataSource.length > 0,
       'sticky-footer': isStickyFooter

package/lib/ali-table/pipeline/features/columnCustom.d.ts

@@ -38,6 +38,7 @@ export interface ColumnFeatureOptions {
     stopClickEventPropagation?: boolean;
     allowFiltering?: boolean;
     allowSortering?: boolean;
+    allowResizing?: boolean;
     locale?: any;
     tableLocal?: any;
     t?: any;

package/lib/ali-table/pipeline/features/columnCustom.js

@@ -35,6 +35,7 @@ function columnCustom(opts) {
   const maxSize = opts.maxSize ?? 1000;
   const allowFiltering = opts.allowFiltering !== false;
   const allowSortering = opts.allowSortering !== false;
+  const allowResizing = opts.allowResizing !== false;
   const {
     prefix,
     id,
@@ -403,7 +404,7 @@ function columnCustom(opts) {
           ...col,
           lock: !!col.fixed,
           width: sizes[startIndex],
-          title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, col.headerTemplate ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof col.headerTemplate === 'function' ? col.headerTemplate(col) : col.headerTemplate) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, prevTitle), /*#__PURE__*/_react.default.createElement(_ColumnResizer.default, {
+          title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, col.headerTemplate ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof col.headerTemplate === 'function' ? col.headerTemplate(col) : col.headerTemplate) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, prevTitle), allowResizing && /*#__PURE__*/_react.default.createElement(_ColumnResizer.default, {
             width: col.width,
             columnKey: col.field,
             columnIndex: startIndex
@@ -443,7 +444,7 @@ function columnCustom(opts) {
           ...col,
           lock: !!col.fixed,
           width: sizes[startIndex],
-          title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, col.headerTemplate ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof col.headerTemplate === 'function' ? col.headerTemplate(col) : col.headerTemplate) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, prevTitle), /*#__PURE__*/_react.default.createElement(_ColumnResizer.default, {
+          title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, col.headerTemplate ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof col.headerTemplate === 'function' ? col.headerTemplate(col) : col.headerTemplate) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, prevTitle), allowResizing && /*#__PURE__*/_react.default.createElement(_ColumnResizer.default, {
             width: col.width,
             columnKey: col.field,
             columnIndex: startIndex
@@ -524,7 +525,7 @@ function columnCustom(opts) {
           className: (0, _classnames.default)(`ui-rc-table-column-sorter-cancel toolbar-icon`, {
             active: true
           })
-        })), canFilter && /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Dropdown, mergedDropdownProps)))), /*#__PURE__*/_react.default.createElement(_ColumnResizer.default, {
+        })), canFilter && /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Dropdown, mergedDropdownProps)))), allowResizing && /*#__PURE__*/_react.default.createElement(_ColumnResizer.default, {
           width: col.width,
           columnKey: col.field,
           columnIndex: startIndex

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

@@ -233,6 +233,7 @@ export type TableProps<RecordType = AnyObject> = {
         color?: string;
     };
     useOuterBorder?: boolean;
+    showHeader?: boolean;
     className?: string;
     title?: ReactNode | ((data: RecordType) => ReactNode);
     fullScreenTitle?: ReactNode | (() => ReactNode);

package/lib/group-component/table/TableWrapper.d.ts

@@ -6,6 +6,7 @@ import type { Column } from "@tanstack/react-table";
 type Props<T> = {
     prefix: string;
     id: string;
+    showHeader?: boolean;
     tableContainerRef: React.RefObject<HTMLDivElement>;
     height: number;
     minHeight?: number;

package/lib/group-component/table/TableWrapper.js

@@ -20,6 +20,7 @@ const TableWrapper = props => {
   const {
     id,
     prefix,
+    showHeader = true,
     tableContainerRef,
     height,
     minHeight,
@@ -218,7 +219,7 @@ const TableWrapper = props => {
       display: 'grid',
       minWidth: table.getTotalSize()
     }
-  }, /*#__PURE__*/_react.default.createElement(_TableHead.default, {
+  }, showHeader && /*#__PURE__*/_react.default.createElement(_TableHead.default, {
     tableContainerRef: tableContainerRef,
     table: table,
     columnVirtualizer: columnVirtualizer,

package/lib/table-component/body/EditableCell.js

@@ -87,6 +87,7 @@ const EditableCell = props => {
       fieldNames,
       toolbarItems,
       filterOption,
+      filterKey,
       inputKey,
       toolbarClick,
       loadOptions,
@@ -424,7 +425,14 @@ const EditableCell = props => {
               return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", menu);
             }
           },
-          filterOption: filterOption,
+          filterOption: filterKey ? (input, option) => {
+            const searchValue = (0, _utils.removeVietnameseTones)(input.toLowerCase() ?? '');
+            const filterValues = filterKey.some(k => {
+              const val = option?.[k];
+              return (0, _utils.removeVietnameseTones)((val ?? '').toString().toLowerCase()).includes(searchValue);
+            });
+            return filterValues;
+          } : filterOption,
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
             label: inputKey ?? 'label'
@@ -525,13 +533,21 @@ const EditableCell = props => {
           placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.selectPlaceholder,
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
-          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
-          optionFilterProp: "label",
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined
+          // optionFilterProp="label"
+          ,
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
-          filterOption: filterOption,
+          filterOption: filterKey ? (input, option) => {
+            const searchValue = (0, _utils.removeVietnameseTones)(input.toLowerCase() ?? '');
+            const filterValues = filterKey.some(k => {
+              const val = option?.[k];
+              return (0, _utils.removeVietnameseTones)((val ?? '').toString().toLowerCase()).includes(searchValue);
+            });
+            return filterValues;
+          } : filterOption,
           optionRender: column.editSelectSettings?.formatOptionLabel,
-          fieldNames: fieldNames ? fieldNames : {
+          fieldNames: {
             value: keySelect,
             label: inputKey ?? 'label'
           },
@@ -656,8 +672,9 @@ const EditableCell = props => {
           placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.selectPlaceholder,
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
-          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
-          optionFilterProp: "label",
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined
+          // optionFilterProp="label"
+          ,
           popupClassName: 'be-popup-container',
           loadOptions: loadOptions,
           status: isInvalid ? 'error' : undefined,
@@ -686,7 +703,14 @@ const EditableCell = props => {
             }
           },
           optionRender: column.editSelectSettings?.formatOptionLabel,
-          filterOption: filterOption,
+          filterOption: filterKey ? (input, option) => {
+            const searchValue = (0, _utils.removeVietnameseTones)(input.toLowerCase() ?? '');
+            const filterValues = filterKey.some(k => {
+              const val = option?.[k];
+              return (0, _utils.removeVietnameseTones)((val ?? '').toString().toLowerCase()).includes(searchValue);
+            });
+            return filterValues;
+          } : filterOption,
           fieldNames: fieldNames ? fieldNames : {
             value: keySelect,
             label: inputKey ?? 'label'

package/lib/table-component/table/TableWrapper.d.ts

@@ -10,6 +10,7 @@ type Props<T> = {
     height: number;
     minHeight?: number;
     table: Table<T>;
+    showHeader?: boolean;
     summary?: boolean;
     loading?: boolean;
     commandClick?: (args: Omit<CommandClick<T>, 'rows'>) => void;

package/lib/table-component/table/TableWrapper.js

@@ -22,6 +22,7 @@ const TableWrapper = props => {
     id,
     prefix,
     tableContainerRef,
+    showHeader = true,
     height,
     minHeight,
     summary,
@@ -207,7 +208,7 @@ const TableWrapper = props => {
       display: 'grid',
       minWidth: table.getTotalSize()
     }
-  }, /*#__PURE__*/_react.default.createElement(_TableHead.default, {
+  }, showHeader && /*#__PURE__*/_react.default.createElement(_TableHead.default, {
     tableContainerRef: tableContainerRef,
     table: table,
     columnVirtualizer: columnVirtualizer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.13",
+  "version": "1.9.14",
   "description": "es-grid-template",
   "keywords": [
     "react",