es-grid-template 1.9.12 → 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

@@ -5,13 +5,17 @@ import { useLocale } from "rc-master-ui/es/locale";
 import { faker } from "@faker-js/faker";
 import React from "react";
 import "./base-table/styles.scss";
-import { addRowIdArray, filterDataByColumns, groupArrayByColumns, isTreeArray, revertConvertFilters, sortByType, sumFields } from "../table-component/hook/utils";
+import { addRowIdArray, filterDataByColumns,
+// getInvisibleColumns, 
+getVisibleFields, groupArrayByColumns, isTreeArray, revertConvertFilters, sortByType, sumFields } from "../table-component/hook/utils";
 import { CustomProvider, ConfigProvider } from 'rc-master-ui';
 import { Modal } from 'antd';
 import { getLocale, getLocales } from "../locale/useLocale";
 import { TableContext } from "./useContext";
 import Grid from "./Grid";
 import { getParentKeysLarge, getRowsByKeysKeepTreeOrder } from "./utils/selected";
+// import { getInvisibleColumns } from "../group-component/hook/utils"
+
 const InternalTable = props => {
   const {
     t,
@@ -19,6 +23,7 @@ const InternalTable = props => {
     dataSource,
     allowFiltering,
     allowSortering,
+    allowResizing,
     groupAble,
     groupColumns,
     groupSetting,
@@ -119,6 +124,14 @@ const InternalTable = props => {
     }
     return undefined;
   }, [defaultFilter]);
+
+  // const columnInVisibility = React.useMemo(() => {
+  //   return getInvisibleColumns(columns)
+  // }, [columns])
+
+  const columnVisibility = React.useMemo(() => {
+    return getVisibleFields(columns);
+  }, [columns]);
   const pipeline = useTablePipeline({
     components: fusion
   }).input({
@@ -129,7 +142,9 @@ const InternalTable = props => {
   // .snapshot('flat')
   .use(features.hiddenColumns({
     columns,
-    visibleKeys
+    visibleKeys: visibleKeys ?? columnVisibility
+    // visibleKeys: ['name']
+    // visibleKeys
   })).use(features.treeSelect({
     tree: mergedData,
     value: selectionSettings?.selectedRowKeys,
@@ -179,6 +194,7 @@ const InternalTable = props => {
     disableUserSelectWhenResizing: true,
     allowFiltering,
     allowSortering,
+    allowResizing,
     tableLocal,
     locale,
     prefix,

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

@@ -179,7 +179,9 @@ export default function TableHeader({
   const leftFlatCount = flat.left.length;
   const rightFlatCount = flat.right.length;
   const thead = headerRenderInfo.leveled.map((wrappedCols, level) => {
-    const headerCells = wrappedCols.map(wrapped => {
+    const headerCells = [];
+    let currentColIndex = 0;
+    for (const wrapped of wrappedCols) {
       if (wrapped.type === 'normal') {
         const {
           colIndex,
@@ -187,42 +189,43 @@ export default function TableHeader({
           isLeaf,
           col
         } = wrapped;
+        if (currentColIndex > colIndex) continue;
         const headerCellProps = col.headerCellProps ?? {};
+        const actualColSpan = headerCellProps.colSpan ?? colSpan;
         const positionStyle = {};
         if (colIndex < leftFlatCount) {
           positionStyle.position = 'sticky';
           positionStyle.left = stickyLeftMap.get(colIndex);
         } else if (colIndex >= fullFlatCount - rightFlatCount) {
           positionStyle.position = 'sticky';
-          positionStyle.right = stickyRightMap.get(colIndex + colSpan - 1);
+          positionStyle.right = stickyRightMap.get(colIndex + actualColSpan - 1);
         }
-        return /*#__PURE__*/React.createElement("th", _extends({
+        headerCells.push( /*#__PURE__*/React.createElement("th", _extends({
           key: colIndex
         }, headerCellProps, {
           className: cx(Classes.tableHeaderCell, headerCellProps.className, {
             first: colIndex === 0,
-            last: colIndex + colSpan === fullFlatCount,
+            last: colIndex + actualColSpan === fullFlatCount,
             'lock-left': colIndex < leftFlatCount,
             'lock-right': colIndex >= fullFlatCount - rightFlatCount
           }),
-          colSpan: colSpan,
+          colSpan: actualColSpan,
           rowSpan: isLeaf ? rowCount - level : undefined,
           style: {
             textAlign: col.textAlign,
             ...headerCellProps.style,
             ...positionStyle
           }
-        }), col.title ?? col.headerText);
+        }), col.title ?? col.headerText));
+        currentColIndex = colIndex + actualColSpan;
       } else {
         if (wrapped.width > 0) {
-          return /*#__PURE__*/React.createElement("th", {
+          headerCells.push( /*#__PURE__*/React.createElement("th", {
             key: wrapped.blankSide
-          });
-        } else {
-          return null;
+          }));
         }
       }
-    });
+    }
     return /*#__PURE__*/React.createElement("tr", {
       key: level,
       className: cx(Classes.tableHeaderRow, {

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/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/hook/utils.d.ts

@@ -128,6 +128,7 @@ export declare function getHiddenParentKeys(columns: any[], parentKeys?: string[
 export declare function getHiddenParentKeys1(columns: ColumnTable[], parentKeys?: string[]): string[];
 export declare const getVisibleColumnKeys: (columns: any[]) => string[];
 export declare const getVisibleColumnKeys1: (columns: any[]) => string[];
+export declare function getVisibleFields(columns: ColumnTable[]): string[];
 export declare function isObjEqual(obj1: any, obj2: any): boolean;
 export declare const sortByType: <T>(arr: ColumnTable<T>[]) => ColumnTable<T>[];
 export declare function convertColumnsToTreeData<T>(columns: ColumnDef<T, any>[], groupColumns?: string[]): TreeDataNode[];

package/es/table-component/hook/utils.js

@@ -1953,6 +1953,24 @@ export const getVisibleColumnKeys1 = columns => {
   const allParentKeys = getHiddenParentKeys1(columns);
   return allKeys.filter(item => !allParentKeys.includes(item));
 };
+export function getVisibleFields(columns) {
+  const result = [];
+  function traverse(nodes) {
+    for (const node of nodes) {
+      // nếu visible không phải false thì lấy field
+      if (node.visible !== false) {
+        result.push(node.field);
+      }
+
+      // nếu có children thì duyệt tiếp
+      if (node.children?.length) {
+        traverse(node.children);
+      }
+    }
+  }
+  traverse(columns);
+  return result;
+}
 export function isObjEqual(obj1, obj2) {
   // Trường hợp tham chiếu bằng nhau
   if (obj1 === obj2) return true;

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

@@ -21,6 +21,8 @@ var _Grid = _interopRequireDefault(require("./Grid"));
 var _selected = require("./utils/selected");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import { getInvisibleColumns } from "../group-component/hook/utils"
+
 const InternalTable = props => {
   const {
     t,
@@ -28,6 +30,7 @@ const InternalTable = props => {
     dataSource,
     allowFiltering,
     allowSortering,
+    allowResizing,
     groupAble,
     groupColumns,
     groupSetting,
@@ -128,6 +131,14 @@ const InternalTable = props => {
     }
     return undefined;
   }, [defaultFilter]);
+
+  // const columnInVisibility = React.useMemo(() => {
+  //   return getInvisibleColumns(columns)
+  // }, [columns])
+
+  const columnVisibility = _react.default.useMemo(() => {
+    return (0, _utils.getVisibleFields)(columns);
+  }, [columns]);
   const pipeline = (0, _pipeline.useTablePipeline)({
     components: fusion
   }).input({
@@ -138,7 +149,9 @@ const InternalTable = props => {
   // .snapshot('flat')
   .use(_pipeline.features.hiddenColumns({
     columns,
-    visibleKeys
+    visibleKeys: visibleKeys ?? columnVisibility
+    // visibleKeys: ['name']
+    // visibleKeys
   })).use(_pipeline.features.treeSelect({
     tree: mergedData,
     value: selectionSettings?.selectedRowKeys,
@@ -188,6 +201,7 @@ const InternalTable = props => {
     disableUserSelectWhenResizing: true,
     allowFiltering,
     allowSortering,
+    allowResizing,
     tableLocal,
     locale,
     prefix,

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

@@ -186,7 +186,9 @@ function TableHeader({
   const leftFlatCount = flat.left.length;
   const rightFlatCount = flat.right.length;
   const thead = headerRenderInfo.leveled.map((wrappedCols, level) => {
-    const headerCells = wrappedCols.map(wrapped => {
+    const headerCells = [];
+    let currentColIndex = 0;
+    for (const wrapped of wrappedCols) {
       if (wrapped.type === 'normal') {
         const {
           colIndex,
@@ -194,42 +196,43 @@ function TableHeader({
           isLeaf,
           col
         } = wrapped;
+        if (currentColIndex > colIndex) continue;
         const headerCellProps = col.headerCellProps ?? {};
+        const actualColSpan = headerCellProps.colSpan ?? colSpan;
         const positionStyle = {};
         if (colIndex < leftFlatCount) {
           positionStyle.position = 'sticky';
           positionStyle.left = stickyLeftMap.get(colIndex);
         } else if (colIndex >= fullFlatCount - rightFlatCount) {
           positionStyle.position = 'sticky';
-          positionStyle.right = stickyRightMap.get(colIndex + colSpan - 1);
+          positionStyle.right = stickyRightMap.get(colIndex + actualColSpan - 1);
         }
-        return /*#__PURE__*/_react.default.createElement("th", (0, _extends2.default)({
+        headerCells.push( /*#__PURE__*/_react.default.createElement("th", (0, _extends2.default)({
           key: colIndex
         }, headerCellProps, {
           className: (0, _classnames.default)(_styles.Classes.tableHeaderCell, headerCellProps.className, {
             first: colIndex === 0,
-            last: colIndex + colSpan === fullFlatCount,
+            last: colIndex + actualColSpan === fullFlatCount,
             'lock-left': colIndex < leftFlatCount,
             'lock-right': colIndex >= fullFlatCount - rightFlatCount
           }),
-          colSpan: colSpan,
+          colSpan: actualColSpan,
           rowSpan: isLeaf ? rowCount - level : undefined,
           style: {
             textAlign: col.textAlign,
             ...headerCellProps.style,
             ...positionStyle
           }
-        }), col.title ?? col.headerText);
+        }), col.title ?? col.headerText));
+        currentColIndex = colIndex + actualColSpan;
       } else {
         if (wrapped.width > 0) {
-          return /*#__PURE__*/_react.default.createElement("th", {
+          headerCells.push( /*#__PURE__*/_react.default.createElement("th", {
             key: wrapped.blankSide
-          });
-        } else {
-          return null;
+          }));
         }
       }
-    });
+    }
     return /*#__PURE__*/_react.default.createElement("tr", {
       key: level,
       className: (0, _classnames.default)(_styles.Classes.tableHeaderRow, {

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/hook/utils.d.ts

@@ -128,6 +128,7 @@ export declare function getHiddenParentKeys(columns: any[], parentKeys?: string[
 export declare function getHiddenParentKeys1(columns: ColumnTable[], parentKeys?: string[]): string[];
 export declare const getVisibleColumnKeys: (columns: any[]) => string[];
 export declare const getVisibleColumnKeys1: (columns: any[]) => string[];
+export declare function getVisibleFields(columns: ColumnTable[]): string[];
 export declare function isObjEqual(obj1: any, obj2: any): boolean;
 export declare const sortByType: <T>(arr: ColumnTable<T>[]) => ColumnTable<T>[];
 export declare function convertColumnsToTreeData<T>(columns: ColumnDef<T, any>[], groupColumns?: string[]): TreeDataNode[];

package/lib/table-component/hook/utils.js

@@ -40,6 +40,7 @@ exports.getInvisibleColumns = getInvisibleColumns;
 exports.getNewItemsOnly = exports.getLastSelectCell = void 0;
 exports.getRowIdsBetween = getRowIdsBetween;
 exports.getVisibleColumnKeys1 = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTableHeight = exports.getSelectedCellMatrix = void 0;
+exports.getVisibleFields = getVisibleFields;
 exports.groupArrayByColumns = groupArrayByColumns;
 exports.isColor = void 0;
 exports.isDateString = isDateString;
@@ -62,8 +63,7 @@ exports.sumSize = void 0;
 exports.toggleRowAndChildren = toggleRowAndChildren;
 exports.updateArrayByKey = exports.unFlattenData = void 0;
 exports.updateColumnWidthsRecursive = updateColumnWidthsRecursive;
-exports.updateColumns1 = void 0;
-exports.updateColumnsByGroup = void 0;
+exports.updateColumnsByGroup = exports.updateColumns1 = void 0;
 exports.updateOrInsert = updateOrInsert;
 exports.updateWidthsByOther = updateWidthsByOther;
 var _uuid = require("uuid");
@@ -2074,6 +2074,24 @@ const getVisibleColumnKeys1 = columns => {
   return allKeys.filter(item => !allParentKeys.includes(item));
 };
 exports.getVisibleColumnKeys1 = getVisibleColumnKeys1;
+function getVisibleFields(columns) {
+  const result = [];
+  function traverse(nodes) {
+    for (const node of nodes) {
+      // nếu visible không phải false thì lấy field
+      if (node.visible !== false) {
+        result.push(node.field);
+      }
+
+      // nếu có children thì duyệt tiếp
+      if (node.children?.length) {
+        traverse(node.children);
+      }
+    }
+  }
+  traverse(columns);
+  return result;
+}
 function isObjEqual(obj1, obj2) {
   // Trường hợp tham chiếu bằng nhau
   if (obj1 === obj2) return true;

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.12",
+  "version": "1.9.14",
   "description": "es-grid-template",
   "keywords": [
     "react",