es-grid-template 1.9.71 → 1.9.73

package/lib/ali-table/InternalTable.js

@@ -126,11 +126,22 @@ const InternalTable = props => {
       document.removeEventListener('resize', handleWindowResize);
     };
   }, []);
-  const [visibleKeys, setVisibleKeys] = _react.default.useState(undefined);
+
+  // const [visibleKeys, setVisibleKeys] = React.useState(undefined)
+
   const [filterState, setFilterState] = _react.default.useState(undefined);
   const [sortState, setSortState] = _react.default.useState(undefined);
-  const columns = _react.default.useMemo(() => {
-    return (0, _utility.sortByType)(propColumns, rowDnd);
+  const [columns, setColumns] = _react.default.useState([]);
+
+  // const columns = React.useMemo(() => {
+
+  //   return sortByType(propColumns, rowDnd)
+
+  // }, [propColumns, rowDnd])
+
+  _react.default.useEffect(() => {
+    const abc = (0, _utility.sortByType)(propColumns, rowDnd);
+    setColumns(abc);
   }, [propColumns, rowDnd]);
   const convertData = _react.default.useMemo(() => {
     if (groupAble && groupSetting && groupSetting.client !== false) {
@@ -139,8 +150,8 @@ const InternalTable = props => {
     return (0, _utils.addRowIdArray)(dataSource);
   }, [dataSource, groupAble, groupColumns, groupSetting]);
   const isDataTree = _react.default.useMemo(() => {
-    return (0, _utils.isTreeArray)(dataSource);
-  }, [dataSource]);
+    return (0, _utils.isTreeArray)(convertData);
+  }, [convertData]);
   const mergedData = _react.default.useMemo(() => {
     const shouldSkip = onFilter && onSorter;
     if (shouldSkip) {
@@ -177,7 +188,11 @@ const InternalTable = props => {
     return undefined;
   }, [defaultFilter]);
   const columnVisibility = _react.default.useMemo(() => {
-    return (0, _utils.getVisibleFields)(columns);
+    const visibleCols = (0, _utils.getVisibleFields)(columns);
+
+    // const rs = groupAble && groupColumns && groupColumns.length > 0 ? getOnlyInA(visibleCols, groupColumns) : visibleCols
+
+    return visibleCols;
   }, [columns]);
   const dataIds = _react.default.useMemo(() => convertData.map(it => it.rowId), [convertData]);
   const isAddAble = _react.default.useMemo(() => {
@@ -487,9 +502,12 @@ const InternalTable = props => {
   }).primaryKey(rowKey)
   // .mapDataSource((dta) => collectNodes(dta, 'pre'))
   // .snapshot('flat')
-  .use(_pipeline.features.hiddenColumns({
+  .use(_pipeline.features.paginationFeature({
+    pagination
+  })).use(_pipeline.features.hiddenColumns({
     columns,
-    visibleKeys: visibleKeys ?? columnVisibility
+    visibleKeys: columnVisibility,
+    groupColumns: groupAble ? groupColumns : undefined
   })).use(_pipeline.features.treeSelect({
     tree: mergedData,
     value: selectionSettings?.selectedRowKeys,
@@ -528,12 +546,15 @@ const InternalTable = props => {
     stopClickEventPropagation: true,
     expandIconColumnIndex: expandable?.expandIconColumnIndex,
     defaultOpenKeys: expandAllKeys ?? expandable?.defaultExpandedRowKeys,
-    isTreeArray: !!isDataTree
+    isTreeArray: !!isDataTree,
+    iconGap: 6,
+    iconIndent: 0
   })).use(_pipeline.features.columnCustom({
     tableRef,
     id: tableId,
     t,
     columns,
+    groupColumns,
     mode: sortMultiple !== false ? 'multiple' : 'single',
     dataSource: convertData,
     rowIndexMap,
@@ -552,6 +573,7 @@ const InternalTable = props => {
     isDataTree,
     defaultFilter: defaultFilterConvert,
     defaultSorter,
+    format,
     onFilter(val) {
       // const rs  = 
 
@@ -588,10 +610,12 @@ const InternalTable = props => {
     onCellClick,
     handleAddMulti,
     handleCellChangeAndAddRow
-  })).use(_pipeline.features.paginationFeature({
-    pagination
   }));
 
+  // .use(features.paginationFeature({
+  //   pagination
+  // }))
+
   // const editingCell = pipeline.getStateAtKey(stateKeyIsEditing)
 
   // const onResizeEnd = (args: any[]) => {
@@ -1357,84 +1381,6 @@ const InternalTable = props => {
       handlePasted(rowsPasted);
     }
   }, [handlePasted, onCellPaste?.maxRowsPaste, startCell]);
-
-  // const handleDeleteContent = () => {
-
-  //   if (startCell && endCell) {
-
-  //     const tmpData = flattenArray([...convertData])
-
-  //     const rs = tmpData.map((row, index: number) => {
-
-  //       if (!rangeState?.rowRange.includes(row.rowId)) {
-  //         return row
-  //       }
-
-  //       const updatedRow = { ...row }
-
-  //       for (const colId of rangeState.colRange) {
-
-  //         const column = leafColumns.find((it) => it.field === colId)
-  //         const columnIndex = leafColumns.findIndex((it) => it.field === colId)
-
-  //         if (isEditable(column as any, row)) {
-
-  //           let newValue: any = ''
-
-  //           if (column.type === 'number') {
-  //             newValue = 0
-  //           }
-
-  //           if (column.type === 'boolean' || column.type === 'checkbox') {
-  //             newValue = false
-  //           }
-
-  //           const editType = getEditType(column as any, row)
-
-  //           if (column.type === 'date' ||
-  //             column.type === 'datetime' ||
-  //             column.type === 'time' ||
-  //             column.type === 'month' ||
-  //             column.type === 'week' ||
-  //             column.type === 'year' ||
-  //             column.type === 'quarter' ||
-  //             editType === 'asyncSelect' ||
-  //             editType === 'select' ||
-  //             editType === 'treeSelect' ||
-  //             editType === 'selectTable'
-  //           ) {
-  //             newValue = undefined
-  //           }
-
-  //           updatedRow[colId] = newValue
-
-  //           handleCellChange({
-  //             key: row[rowKey] as any,
-  //             field: column.field ?? column.dataIndex as any,
-  //             record: updatedRow,
-  //             prevState: row[column.field],
-  //             newState: newValue,
-  //             option: '',
-  //             indexCol: columnIndex,
-  //             indexRow: index,
-  //             type: 'blur'
-  //           }
-  //           )
-
-  //         }
-  //       }
-
-  //       return updatedRow;
-  //     })
-
-  //     const newData = unFlattenData(rs)
-
-  //     triggerChangeData?.([...newData], { type: 'DELETE_CONTENT' })
-
-  //   }
-
-  // }
-
   _react.default.useEffect(() => {
     const handlePaste = e => {
       if (startCell && !isEditing) {
@@ -2039,8 +1985,9 @@ const InternalTable = props => {
     originData: convertData,
     dataSource: mergedData,
     originColumns: columns,
-    groupColumns: groupColumns,
-    setVisibleKeys: setVisibleKeys,
+    groupColumns: groupColumns
+    // setVisibleKeys={setVisibleKeys}
+    ,
     footerDataSource: footerData,
     onFilter: onFilter,
     onSorter: onSorter,
@@ -2048,10 +1995,12 @@ const InternalTable = props => {
     defaultSorter: defaultSorter,
     dataRowIds: dataIds,
     columns: columns,
+    setColumns: setColumns,
     editAble: editAble,
     toolbarItemTopRight: toolbarItemTopRight,
     toolbarItemsTop: toolbarItemsTop,
-    toolbarItemsBottom: toolbarItemsBottom
+    toolbarItemsBottom: toolbarItemsBottom,
+    isDataTree: isDataTree
   })), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Modal, {
     open: isFullScreen,
     footer: null,
@@ -2096,11 +2045,13 @@ const InternalTable = props => {
     ,
 
     columns: columns,
+    setColumns: setColumns,
     dataSource: dataSource,
     originData: convertData,
     originColumns: columns,
-    groupColumns: groupColumns,
-    setVisibleKeys: setVisibleKeys,
+    groupColumns: groupColumns
+    // setVisibleKeys={setVisibleKeys}
+    ,
     footerDataSource: footerData,
     onFilter: onFilter,
     onSorter: onSorter,

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

@@ -1244,7 +1244,10 @@ const HeaderEditCell = props => {
     }
   };
   return /*#__PURE__*/_react.default.createElement("form", {
-    onSubmit: handleSubmit(onSubmit)
+    onSubmit: handleSubmit(onSubmit),
+    style: {
+      height: '100%'
+    }
   }, /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
     name: dataIndex,
     control: control,

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

@@ -295,21 +295,29 @@ const renderFilter = args => {
 
         // value={selectedKeys[0]}
         ,
-        defaultValue: selectedKeys[0]
+        defaultValue: selectedKeys[0] ?? ''
 
-        // onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
+        // onChange={(e) => {
+        //   if (selectedKeys[0] === e.target.value) {
+
+        //   } else {
+        //     setSelectedKeys(e.target.value ? [e.target.value] : [])
+        //   }
+
+        // }}
         ,
+
         onBlur: e => {
           if (selectedKeys[0] === e.target.value) {} else {
-            setSelectedKeys(e.target.value ? [e.target.value.trim()] : []);
+            setSelectedKeys(e.target.value ? [e.target.value] : []);
           }
         }
 
         // onPressEnter={() => handleSearch(selectedKeys as string[], confirm)}
         ,
         onPressEnter: () => doFilter?.(true),
-        allowClear: true
-        // autoFocus={true}
+        allowClear: true,
+        autoFocus: true
       }))));
   }
 };

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

@@ -14,6 +14,9 @@ export declare const Classes: {
     readonly tableFooter: "ui-rc-grid-table-footer";
     /** Table row */
     readonly tableRow: "ui-rc-grid-table-row";
+    readonly tableRowParent: "ui-rc-grid-row-parent";
+    readonly tableRowOdd: "ui-rc-grid-row-odd";
+    readonly tableRowEven: "ui-rc-grid-row-even";
     /** Table header row */
     readonly tableHeaderRow: "ui-rc-grid-table-header-row";
     /** Cell */
@@ -45,6 +48,9 @@ export declare const Classes: {
 export type BaseTableCSSVariables = Partial<{
     /** Table row height */
     '--row-height': string;
+    '--row-odd-bgcolor': string;
+    '--row-even-bgcolor': string;
+    '--row-parent-bgcolor': string;
     /** Table font color */
     '--color': string;
     /** Table hover font color */

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

@@ -28,6 +28,9 @@ const Classes = exports.Classes = {
   tableFooter: `${prefix}table-footer`,
   /** Table row */
   tableRow: `${prefix}table-row`,
+  tableRowParent: `${prefix}row-parent`,
+  tableRowOdd: `${prefix}row-odd`,
+  tableRowEven: `${prefix}row-even`,
   /** Table header row */
   tableHeaderRow: `${prefix}table-header-row`,
   /** Cell */
@@ -68,11 +71,11 @@ const outerBorderStyleMixin = (0, _styledComponents.css)(["border-top:var(--cell
 const StyleTableContainer = exports.StyleTableContainer = _styledComponents.default.div.withConfig({
   displayName: "StyleTableContainer",
   componentId: "es-grid-template__sc-ipj1ht-0"
-})(["--row-height:34px;--color:#333;--bgcolor:white;--body-hover-bgcolor:#f5f5f5;--body-hover-color:#333;--hover-bgcolor:var(--body-hover-bgcolor);--hover-color:var(--body-hover-color);--highlight-bgcolor:#eee;--header-row-height:34px;--header-color:#000000de;--header-bgcolor:#ffffff;--header-hover-bgcolor:#ddd;--header-highlight-bgcolor:#e4e8ed;--cell-padding:7px 8px;--font-size:13px;--line-height:1.28571;--lock-shadow:rgba(152,152,152,0.5) 0 0 6px 2px;--border-color:#dfe3e8;--border-color-select:#eb4619;--cell-border:1px solid var(--border-color);--cell-border-select:1px solid var(--border-color-select);--cell-border-horizontal:var(--cell-border);--cell-border-vertical:var(--cell-border);--header-cell-border:1px solid var(--border-color);--header-cell-border-horizontal:var(--header-cell-border);--header-cell-border-vertical:var(--header-cell-border);--footer-bgcolor:#fafafa;&.", "{--bgcolor:#343e59;--footer-bgcolor:#2e3342;--header-bgcolor:#343e59;--hover-bgcolor:#232b43;--header-hover-bgcolor:#606164;--highlight-bgcolor:#eff2f5;--header-highlight-bgcolor:#191a1b;--hover-color:#dadde1;--color:#dadde1;--header-color:#dadde1;--lock-shadow:rgb(37 37 37 / 0.5) 0 0 6px 2px;--border-color:#4f5266;background-color:var(--bgcolor);}&.use-outer-border{", ";}&.", "{.", "{border-left:0;border-right:0;td,th{border-right:0;}td.first,th.first{border-left:0;}td.last,th.last{}thead tr.first th,tbody tr.first td{}tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),0px 0 0 0 var(--border-color);}}}&.has-footer tfoot tr.last td{}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{}}}&.", "{&.use-outer-border{border-bottom:var(--header-cell-border);}.", "{border-top:0;td,th{border-bottom:0;border-top:0;}td.lock-left{box-shadow:none;}td.first,th.first{}td.last,th.last{}thead tr.first th,tbody tr.first td{}&.has-footer tfoot tr td{border-bottom:0;border-top:0;}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{}}}&.", "{.", "{border:0;td,th{border-right:0;border-bottom:0;}td.lock-left{box-shadow:none;}td,th{border:0;}td.last,th.last{}thead tr.first th,tbody tr.first td{}&.has-footer tfoot tr td{border-bottom:0;border-top:0;}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{border-top:0;border:0;}}}.", "{padding:8px;}&.ui-rc-grid .ui-rc-pagination{background-color:var(--bgcolor);color:var(--color);padding:10px;background-color:var(--bgcolor);.ui-rc-pagination-prev{.anticon.anticon-left{color:var(--color);}}.ui-rc-pagination-disabled{.anticon.anticon-left{color:#7d7a7a;}}.ui-rc-pagination-next{.anticon.anticon-right{color:var(--color);}&.ui-rc-pagination-disabled{.anticon.anticon-right{color:#7d7a7a;}}}}&.auto-height{.ui-rc-grid-bottom{border-top:0;}}.ui-rc-grid-bottom{border-top:var(--cell-border-horizontal);}.ui-rc-toolbar-bottom{.be-toolbar-item{.ui-rc-btn{font-size:12px;line-height:1.5}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}&.", "{&.ui-rc-grid{.ui-rc-toolbar-bottom{background-color:var(--footer-bgcolor);color:#ffffff;}}.ui-rc-grid-top-toolbar{border-color:var(--border-color);color:#ffffff;}.ui-rc-toolbar{.ui-rc-toolbar-selection-item{background-color:var(--footer-bgcolor);color:#ffffff;}}}"], Classes.tableThemeDark, outerBorderStyleMixin, Classes.gridHorizontal, Classes.tableWrapper, Classes.tableTop, Classes.gridVertical, Classes.tableWrapper, Classes.tableTop, Classes.gridNone, Classes.tableWrapper, Classes.tableTop, Classes.tableTop, Classes.tableThemeDark);
+})(["--row-height:34px;--color:#333;--bgcolor:white;--row-parent-bgcolor:#f5f5f5;--row-odd-bgcolor:#f9f8fd;--row-even-bgcolor:#ffffff;--body-hover-bgcolor:#f5f5f5;--body-hover-color:#333;--hover-bgcolor:var(--body-hover-bgcolor);--hover-color:var(--body-hover-color);--highlight-bgcolor:#eee;--header-row-height:34px;--header-color:#000000de;--header-bgcolor:#ffffff;--header-hover-bgcolor:#ddd;--header-highlight-bgcolor:#e4e8ed;--cell-padding:7px 8px;--font-size:13px;--line-height:1.28571;--lock-shadow:rgba(152,152,152,0.5) 0 0 6px 2px;--border-color:#dfe3e8;--border-color-select:#eb4619;--cell-border:1px solid var(--border-color);--cell-border-select:1px solid var(--border-color-select);--cell-border-horizontal:var(--cell-border);--cell-border-vertical:var(--cell-border);--header-cell-border:1px solid var(--border-color);--header-cell-border-horizontal:var(--header-cell-border);--header-cell-border-vertical:var(--header-cell-border);--footer-bgcolor:#fafafa;&.", "{--bgcolor:#343e59;--footer-bgcolor:#2e3342;--header-bgcolor:#343e59;--hover-bgcolor:#232b43;--header-hover-bgcolor:#606164;--highlight-bgcolor:#eff2f5;--header-highlight-bgcolor:#191a1b;--hover-color:#dadde1;--color:#dadde1;--header-color:#dadde1;--lock-shadow:rgb(37 37 37 / 0.5) 0 0 6px 2px;--border-color:#4f5266;background-color:var(--bgcolor);}&.use-outer-border{", ";}&.", "{.", "{border-left:0;border-right:0;td,th{border-right:0;}td.first,th.first{border-left:0;}td.last,th.last{}thead tr.first th,tbody tr.first td{}tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),0px 0 0 0 var(--border-color);}}}&.has-footer tfoot tr.last td{}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{}}}&.", "{&.use-outer-border{border-bottom:var(--header-cell-border);}.", "{border-top:0;td,th{border-bottom:0;border-top:0;}td.lock-left{box-shadow:none;}td.first,th.first{}td.last,th.last{}thead tr.first th,tbody tr.first td{}&.has-footer tfoot tr td{border-bottom:0;border-top:0;}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{}}}&.", "{.", "{border:0;td,th{border-right:0;border-bottom:0;}td.lock-left{box-shadow:none;}td,th{border:0;}td.last,th.last{}thead tr.first th,tbody tr.first td{}&.has-footer tfoot tr td{border-bottom:0;border-top:0;}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{border-top:0;border:0;}}}.", "{padding:8px;}&.ui-rc-grid .ui-rc-pagination{background-color:var(--bgcolor);color:var(--color);padding:10px;background-color:var(--bgcolor);.ui-rc-pagination-prev{.anticon.anticon-left{color:var(--color);}}.ui-rc-pagination-disabled{.anticon.anticon-left{color:#7d7a7a;}}.ui-rc-pagination-next{.anticon.anticon-right{color:var(--color);}&.ui-rc-pagination-disabled{.anticon.anticon-right{color:#7d7a7a;}}}}&.auto-height{.ui-rc-grid-bottom{border-top:0;}}.ui-rc-grid-bottom{border-top:var(--cell-border-horizontal);}.ui-rc-toolbar-bottom{.be-toolbar-item{.ui-rc-btn{font-size:12px;line-height:1.5}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}&.", "{&.ui-rc-grid{.ui-rc-toolbar-bottom{background-color:var(--footer-bgcolor);color:#ffffff;}}.ui-rc-grid-top-toolbar{border-color:var(--border-color);color:#ffffff;}.ui-rc-toolbar{.ui-rc-toolbar-selection-item{background-color:var(--footer-bgcolor);color:#ffffff;}}}"], Classes.tableThemeDark, outerBorderStyleMixin, Classes.gridHorizontal, Classes.tableWrapper, Classes.tableTop, Classes.gridVertical, Classes.tableWrapper, Classes.tableTop, Classes.gridNone, Classes.tableWrapper, Classes.tableTop, Classes.tableTop, Classes.tableThemeDark);
 const StyledArtTableWrapper = exports.StyledArtTableWrapper = _styledComponents.default.div.withConfig({
   displayName: "StyledArtTableWrapper",
   componentId: "es-grid-template__sc-ipj1ht-1"
-})(["box-sizing:border-box;*{box-sizing:border-box;}cursor:default;color:var(--color);font-size:var(--font-size);line-height:var(--line-height);position:relative;overflow-anchor:none;&::-webkit-scrollbar{}&::-webkit-scrollbar-track{}&::-webkit-scrollbar-thumb{}&::-webkit-scrollbar-thumb:hover{}&.dark{&::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);}&::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.5);}}&.", "{border-left:var(--cell-border-vertical);border-right:var(--cell-border-vertical);border-top:var(--cell-border-vertical);border-bottom:0;&.has-footer{border-bottom:0;.", "{td{}}}&.has-vertical-scroll{border-bottom:var(--cell-border-vertical);th.first{border-left:0;}td.first{border-left:0;}&.has-footer{border-bottom:var(--cell-border-vertical);}.", "{tr.last{td{border-bottom:0;}}}.", "{tr.last{td{border-bottom:0;}}}+ .ui-rc-grid-bottom{border-top:0;}&:not(.has-footer){+ .ui-rc-grid-bottom{border-top:var(--cell-border-vertical);}}}&:not(.has-vertical-scroll){border-left:0;border-right:0;}&:not(.has-header){border-top:0;}}&.use-outer-border{}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{}}.", "{overflow-x:auto;overflow-y:hidden;background:var(--header-bgcolor);.ui-rc-table-column-title{flex:1;min-width:0;text-align:start;}.", "{font-weight:500;.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}.", "{width:100%;white-space:normal;word-break:break-word;}.", "{text-align:center;}.", "{text-align:right;}}}.", "{.", "{&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;.expansion-cell{.expansion-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}.", "{background:var(--footer-bgcolor);}}.", ",.", "{overflow-x:auto;overflow-y:hidden;}&.sticky-header .", "{position:sticky;top:0;z-index:", ";}&.sticky-footer .", "{position:sticky;bottom:0;z-index:", ";}.", "{tr{td.cell-edit{&.lock-left,&.lock-right{}}td.first{&.lock-left{border-bottom-width:1px;}}}tr.ui-rc-grid-table-row{td.cell-edit.cell-border-bottom{}}}table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;display:table;margin:0;padding:0;}tr:not(.no-hover):hover > td{background:var(--hover-bgcolor);color:var(--hover-color);}tr:not(.no-highlight).highlight > td{}th{font-weight:normal;text-align:left;padding:var(--cell-padding);height:var(--header-row-height);color:var(--header-color);background:var(--header-bgcolor);border:none;border-right:var(--header-cell-border-vertical);border-bottom:var(--header-cell-border-horizontal);&.", "{background-color:#fcf5f2;}&.cell-border-bottom{border-bottom:var(--cell-border-select);}&.cell-border-right{border-right:var(--cell-border-select);}&.cell-border-left{position:relative;}&.cell-border-top{position:relative;}&.cell-border-left::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:var(--cell-border-select);pointer-events:none;z-index:1;}&.cell-border-top::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:var(--cell-border-select);pointer-events:none;z-index:1;}textarea.ui-rc-input{line-height:1.8;max-height:calc(var(--header-row-height) - 1px) !important;min-height:calc(var(--header-row-height) - 1px) !important;}}tr.first th{}th.first{border-left:var(--header-cell-border-vertical);}td{padding:var(--cell-padding);background:var(--bgcolor);height:var(--row-height);border:none;border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);outline:none;&.cell-edit{user-select:none;&:has(.dragging-point){position:relative;}.dragging-point{width:6px;height:6px;position:absolute;cursor:crosshair;right:0px;bottom:0px;&.hidden{display:none;}.dot-point{position:absolute;width:6px;height:6px;border-radius:0px;background-color:var(--border-color-select);bottom:0;right:0;}}&.disable{background-color:#f0f0f0;}}&.cell-editing{padding:0;&:focus-visible{outline:none;}.ant-form-item,.ant-row.ant-form-item-row,.ant-col.ant-form-item-control,.ant-form-item-control-input,.ant-form-item-control-input-content,.ui-rc-input{height:100% !important;&:focus-visible{outline:none;}}.ui-rc-color-picker-trigger{width:100%;border-radius:0;.ui-rc-color-picker-color-block{width:100%;}}textarea.ui-rc-input{line-height:1.8;height:100%;max-height:calc(var(--row-height) - 1px) !important;min-height:calc(var(--row-height) - 1px) !important;}input.be-cell-editing,.ant-picker,.ui-rc-picker,.ui-rc-select-selector,.ui-rc-table-select-selector{padding-inline:7px;}.#{$prefix}-checkbox-wrapper{.#{$prefix}-checkbox{background-color:red;}.#{$prefix}-checkbox-input{&:focus-visible{outline:none;}}}.ant-input,.ant-picker,.ui-rc-picker{border-radius:0;}.ant-color-picker-trigger{height:100%;border-radius:0;.ant-color-picker-color-block{height:100%;width:100%;}}.#{$prefix}-table-select-single .#{$prefix}-table-select-selector,.#{$prefix}-select-single .#{$prefix}-select-selector,.ui-rc-table-select-selector{border-radius:0 !important;}.#{$prefix}-table-select-single:not( .#{$prefix}-table-select-customize-input ){.#{$prefix}-table-select-selector{.#{$prefix}-table-select-selection-search-input{height:auto;}}}}.abccccc{box-shadow:0 -1px 0 0 var(--border-color),0 1px 0 0 var(--border-color),-1px 0 0 0 var(--border-color),1px 0 0 0 var(--border-color);}&.", "{background-color:#fcf5f2;}&.cell-border-bottom{border-bottom:var(--cell-border-select);}&.cell-border-right{border-right:var(--cell-border-select);}&.cell-border-left{position:relative;}&.cell-border-top{position:relative;}&.cell-border-left::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:var(--cell-border-select);pointer-events:none;z-index:1;}&.cell-border-top::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:var(--cell-border-select);pointer-events:none;z-index:1;}&.cell-paste-border-top{position:relative;&::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px dashed #949494;pointer-events:none;z-index:1;}&.ui-rc-grid-cell-fix-left-last{&::after{left:-100%;}}&.ui-rc-grid-cell-fix-right-first{&::after{left:100%;}}}&.cell-paste-border-bottom{border-bottom:1px dashed #949494;}&.cell-paste-border-left{position:relative;&::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px dashed #949494;pointer-events:none;z-index:1;}}&.cell-paste-border-right{border-inline-end:1px dashed #949494;}}td.first{border-left:var(--cell-border-vertical);}tr.first td{border-top:var(--cell-border-horizontal);}tr td.last,tr th.last{border-right:var(--cell-border-horizontal);}&.has-header tbody tr.first td{border-top:none;}&.has-footer tbody tr.last td{border-bottom:none;}&.has-footer tfoot tr > td{background:var(--footer-bgcolor);color:var(--footer-color);}&.has-footer tfoot tr:not(.no-hover):hover > td{background:var(--footer-bgcolor);}.lock-left,.lock-right{z-index:", ";}.resize-handle{width:6px;height:100%;position:absolute;top:0;right:0;cursor:col-resize;background-color:transparent;border-right:2px solid transparent;}.", "{position:absolute;top:0;bottom:0;z-index:", ";pointer-events:none;overflow:hidden;.", "{height:100%;}.", "{margin-right:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-right:var(--cell-border-vertical);}}.", "{margin-left:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-left:var(--cell-border-vertical);}}}.", "{pointer-events:none;color:#99a3b3;font-size:12px;text-align:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);.empty-image{width:50px;height:50px;}.empty-tips{margin-top:16px;line-height:1.5;}}.", "{overflow:auto;position:sticky;bottom:0;z-index:", ";margin-top:-17px;}.ui-rc-grid-loading-wrapper{}.ui-rc-grid-table{}.art-loading-content-wrapper{height:100%;}.", "{height:1px;visibility:hidden;}.", "{position:relative;height:100%;.", "{position:absolute;inset:0;pointer-events:none;}.", "{position:sticky;z-index:", ";transform:translateY(-50%);}}"], Classes.tableWrapper, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Classes.tableHeaderCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableBody, Classes.tableCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.tableBody, Classes.cellSelected, Classes.cellSelected, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator);
+})(["box-sizing:border-box;*{box-sizing:border-box;}cursor:default;color:var(--color);font-size:var(--font-size);line-height:var(--line-height);position:relative;overflow-anchor:none;&::-webkit-scrollbar{}&::-webkit-scrollbar-track{}&::-webkit-scrollbar-thumb{}&::-webkit-scrollbar-thumb:hover{}&.dark{&::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);}&::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.5);}}&.", "{border-left:var(--cell-border-vertical);border-right:var(--cell-border-vertical);border-top:var(--cell-border-vertical);border-bottom:0;&.has-footer{border-bottom:0;.", "{td{}}}&.has-vertical-scroll{border-bottom:var(--cell-border-vertical);th.first{border-left:0;}td.first{border-left:0;}&.has-footer{border-bottom:var(--cell-border-vertical);}.", "{tr.last{td{border-bottom:0;}}}.", "{tr.last{td{border-bottom:0;}}}+ .ui-rc-grid-bottom{border-top:0;}&:not(.has-footer){+ .ui-rc-grid-bottom{border-top:var(--cell-border-vertical);}}}&:not(.has-vertical-scroll){border-left:0;border-right:0;}&:not(.has-header){border-top:0;}}&.use-outer-border{}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{}}.", "{overflow-x:auto;overflow-y:hidden;background:var(--header-bgcolor);.ui-rc-table-column-title{flex:1;min-width:0;text-align:start;}.", "{font-weight:500;.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}.", "{width:100%;white-space:normal;word-break:break-word;}.", "{text-align:center;}.", "{text-align:right;}}}.", "{.", "{td{background:var(--row-odd-bgcolor);}}.", "{td{background:var(--row-even-bgcolor);}}.", "{td{background:var(--row-parent-bgcolor);font-weight:500;}}.", "{&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;.expansion-cell{.expansion-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}}.", "{background:var(--footer-bgcolor);}.", ",.", "{overflow-x:auto;overflow-y:hidden;}&.sticky-header .", "{position:sticky;top:0;z-index:", ";}&.sticky-footer .", "{position:sticky;bottom:0;z-index:", ";}.", "{tr{td.cell-edit{&.lock-left,&.lock-right{}}td.first{&.lock-left{border-bottom-width:1px;}}}tr.ui-rc-grid-table-row{td.cell-edit.cell-border-bottom{}}}table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;display:table;margin:0;padding:0;}tr:not(.no-hover):hover > td{background:var(--hover-bgcolor);color:var(--hover-color);}tr:not(.no-highlight).highlight > td{}th{font-weight:normal;text-align:left;padding:var(--cell-padding);height:var(--header-row-height);color:var(--header-color);background:var(--header-bgcolor);border:none;border-right:var(--header-cell-border-vertical);border-bottom:var(--header-cell-border-horizontal);&.", "{background-color:#fcf5f2;}&.cell-border-bottom{border-bottom:var(--cell-border-select);}&.cell-border-right{border-right:var(--cell-border-select);}&.cell-border-left{position:relative;}&.cell-border-top{position:relative;}&.cell-border-left::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:var(--cell-border-select);pointer-events:none;z-index:1;}&.cell-border-top::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:var(--cell-border-select);pointer-events:none;z-index:1;}&.cell-editing{padding:0;&:focus-visible{outline:none;}.ant-form-item,.ant-row.ant-form-item-row,.ant-col.ant-form-item-control,.ant-form-item-control-input,.ant-form-item-control-input-content,.ui-rc-input{height:100% !important;&:focus-visible{outline:none;}}.ui-rc-color-picker-trigger{width:100%;border-radius:0;.ui-rc-color-picker-color-block{width:100%;}}textarea.ui-rc-input{line-height:1.8;height:100%;max-height:calc(var(--row-height) - 1px) !important;min-height:calc(var(--row-height) - 1px) !important;}input.be-cell-editing,.ant-picker,.ui-rc-picker,.ui-rc-select-selector,.ui-rc-table-select-selector{padding-inline:7px;}.#{$prefix}-checkbox-wrapper{.#{$prefix}-checkbox{background-color:red;}.#{$prefix}-checkbox-input{&:focus-visible{outline:none;}}}.ant-input,.ant-picker,.ui-rc-picker{border-radius:0;}.ant-color-picker-trigger{height:100%;border-radius:0;.ant-color-picker-color-block{height:100%;width:100%;}}.#{$prefix}-table-select-single .#{$prefix}-table-select-selector,.#{$prefix}-select-single .#{$prefix}-select-selector,.ui-rc-table-select-selector{border-radius:0 !important;}.#{$prefix}-table-select-single:not( .#{$prefix}-table-select-customize-input ){.#{$prefix}-table-select-selector{.#{$prefix}-table-select-selection-search-input{height:auto;}}}}textarea.ui-rc-input{line-height:1.8;max-height:calc(var(--header-row-height) - 1px) !important;min-height:calc(var(--header-row-height) - 1px) !important;}}tr.first th{}th.first{border-left:var(--header-cell-border-vertical);}td{padding:var(--cell-padding);background:var(--bgcolor);height:var(--row-height);border:none;border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);outline:none;&.cell-edit{user-select:none;&:has(.dragging-point){position:relative;}.dragging-point{width:6px;height:6px;position:absolute;cursor:crosshair;right:0px;bottom:0px;&.hidden{display:none;}.dot-point{position:absolute;width:6px;height:6px;border-radius:0px;background-color:var(--border-color-select);bottom:0;right:0;}}&.disable{background-color:#f0f0f0;}}&.cell-editing{padding:0;&:focus-visible{outline:none;}.ant-form-item,.ant-row.ant-form-item-row,.ant-col.ant-form-item-control,.ant-form-item-control-input,.ant-form-item-control-input-content,.ui-rc-input{height:100% !important;&:focus-visible{outline:none;}}.ui-rc-color-picker-trigger{width:100%;border-radius:0;.ui-rc-color-picker-color-block{width:100%;}}textarea.ui-rc-input{line-height:1.8;height:100%;max-height:calc(var(--row-height) - 1px) !important;min-height:calc(var(--row-height) - 1px) !important;}input.be-cell-editing,.ant-picker,.ui-rc-picker,.ui-rc-select-selector,.ui-rc-table-select-selector{padding-inline:7px;}.#{$prefix}-checkbox-wrapper{.#{$prefix}-checkbox{background-color:red;}.#{$prefix}-checkbox-input{&:focus-visible{outline:none;}}}.ant-input,.ant-picker,.ui-rc-picker{border-radius:0;}.ant-color-picker-trigger{height:100%;border-radius:0;.ant-color-picker-color-block{height:100%;width:100%;}}.#{$prefix}-table-select-single .#{$prefix}-table-select-selector,.#{$prefix}-select-single .#{$prefix}-select-selector,.ui-rc-table-select-selector{border-radius:0 !important;}.#{$prefix}-table-select-single:not( .#{$prefix}-table-select-customize-input ){.#{$prefix}-table-select-selector{.#{$prefix}-table-select-selection-search-input{height:auto;}}}}.abccccc{box-shadow:0 -1px 0 0 var(--border-color),0 1px 0 0 var(--border-color),-1px 0 0 0 var(--border-color),1px 0 0 0 var(--border-color);}&.", "{background-color:#fcf5f2;}&.cell-border-bottom{border-bottom:var(--cell-border-select);}&.cell-border-right{border-right:var(--cell-border-select);}&.cell-border-left{position:relative;}&.cell-border-top{position:relative;}&.cell-border-left::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:var(--cell-border-select);pointer-events:none;z-index:1;}&.cell-border-top::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:var(--cell-border-select);pointer-events:none;z-index:1;}&.cell-paste-border-top{position:relative;&::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px dashed #949494;pointer-events:none;z-index:1;}&.ui-rc-grid-cell-fix-left-last{&::after{left:-100%;}}&.ui-rc-grid-cell-fix-right-first{&::after{left:100%;}}}&.cell-paste-border-bottom{border-bottom:1px dashed #949494;}&.cell-paste-border-left{position:relative;&::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px dashed #949494;pointer-events:none;z-index:1;}}&.cell-paste-border-right{border-inline-end:1px dashed #949494;}}td.first{border-left:var(--cell-border-vertical);}tr.first td{border-top:var(--cell-border-horizontal);}tr td.last,tr th.last{border-right:var(--cell-border-horizontal);}&.has-header tbody tr.first td{border-top:none;}&.has-footer tbody tr.last td{border-bottom:none;}&.has-footer tfoot tr > td{background:var(--footer-bgcolor);color:var(--footer-color);}&.has-footer tfoot tr:not(.no-hover):hover > td{background:var(--footer-bgcolor);}.lock-left,.lock-right{z-index:", ";}.resize-handle{width:6px;height:100%;position:absolute;top:0;right:0;cursor:col-resize;background-color:transparent;border-right:2px solid transparent;}.", "{position:absolute;top:0;bottom:0;z-index:", ";pointer-events:none;overflow:hidden;.", "{height:100%;}.", "{margin-right:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-right:var(--cell-border-vertical);}}.", "{margin-left:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-left:var(--cell-border-vertical);}}}.", "{pointer-events:none;color:#99a3b3;font-size:12px;text-align:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);.empty-image{width:50px;height:50px;}.empty-tips{margin-top:16px;line-height:1.5;}}.", "{overflow:auto;position:sticky;bottom:0;z-index:", ";margin-top:-17px;}.ui-rc-grid-loading-wrapper{}.ui-rc-grid-table{}.art-loading-content-wrapper{height:100%;}.", "{height:1px;visibility:hidden;}.", "{position:relative;height:100%;.", "{position:absolute;inset:0;pointer-events:none;}.", "{position:sticky;z-index:", ";transform:translateY(-50%);}}"], Classes.tableWrapper, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Classes.tableHeaderCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableBody, Classes.tableRowOdd, Classes.tableRowEven, Classes.tableRowParent, Classes.tableCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.tableBody, Classes.cellSelected, Classes.cellSelected, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator);
 
 // type StyleTableContainerProps = {
 

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

@@ -12,6 +12,7 @@ type FilterState = {
 export interface ColumnFeatureOptions {
     id: any;
     columns: any[];
+    groupColumns?: any[];
     isDataTree?: boolean;
     dataSource: any[];
     rowIndexMap: any;

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

@@ -202,8 +202,14 @@ function columnCustom(opts) {
       if (info.source === 'trigger') {
         if (newVisible) {
           const defaultFilterOption = defaultFilter?.find(it => it.field === column.field);
-          const filterValue = filterColumnState.filteredKeys === null ? [] : filterColumnState.filteredKeys ?? defaultFilterOption?.filteredKeys ?? [];
-          const operator = filterColumnState.operator;
+
+          // Tìm trong filterState
+
+          const abc = filterState.find(it => it.field === column.field);
+
+          // const filterValue = filterColumnState.filteredKeys === null ? [] : (filterColumnState.filteredKeys ?? (defaultFilterOption?.filteredKeys ?? [])) as string[]
+          const filterValue = abc && abc.filteredKeys === null ? [] : abc?.filteredKeys ?? defaultFilterOption?.filteredKeys ?? [];
+          const operator = abc?.operator;
           const operatorValue = operator ?? defaultFilterOption?.operator ?? (0, _utils2.getDefaultOperator)(column);
           pipeline.setStateAtKey(_constants.stateKeyColumnFilter, {
             operator: operatorValue,
@@ -223,7 +229,7 @@ function columnCustom(opts) {
             if (inputFilter) {
               inputFilter.focus();
             }
-          }, 100);
+          }, 20);
         } else {}
         triggerVisible(newVisible, column.field);
       }
@@ -284,9 +290,11 @@ function columnCustom(opts) {
           operator: filterColumnState.operator ?? undefined
         };
         const rs = (0, _hooks.updateArrayByKey)(filterState, currentFilter, 'field');
-        pipeline.setStateAtKey(_constants.stateKeyColumnFilter, {
-          ...currentFilter
-        });
+
+        // pipeline.setStateAtKey(stateKeyColumnFilter, {
+        //   ...currentFilter
+        // })
+
         pipeline.setStateAtKey(_constants.stateKeyFilter, rs);
         if (onFilter) {
           onFilter((0, _utils2.convertFilters)([...newFilterState]));
@@ -1267,7 +1275,7 @@ function columnCustom(opts) {
       const prevGetCellProps = col?.getCellProps;
       const headerCustomTooltip = col?.headerTooltip ?? (t ? t(col?.headerText) : col?.headerText);
       const htmlTooltip = headerCustomTooltip;
-      const headerEditType = col.headerEditType;
+      const headerEditType = col.headerEditType ?? col.editType;
       const headerRowIndex = params.path.findIndex(it => it.field === col.field);
       const headerRowId = `header-field-${headerRowIndex}`;
 
@@ -1277,6 +1285,7 @@ function columnCustom(opts) {
         [col.field]: headerData?.[col.field] ?? ''
       };
       const headerValue = headerData?.[col.field] ?? '';
+      const headerContent = (0, _useColumns.renderValueCell)(col, headerValue, {}, -1, startIndex, format, false);
       const cellHeaderEditing = isEditing.editing && headerRowId === focusedCell.rowId && col.field === focusedCell.colId;
       const isCellSelect = headerRowId === focusedCell.rowId && startCell?.colId === col.field;
       const aa = (0, _utils3.getColumnsAtLevel)(originCols, headerRowIndex);
@@ -1288,23 +1297,7 @@ function columnCustom(opts) {
         ...col,
         lock: !!col.fixed,
         width: sizes[startIndex],
-        title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-          className: "ui-rc-grid-filter-column d-flex",
-          style: {
-            justifyContent: 'space-between',
-            alignItems: 'center'
-          }
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "ui-rc-table-column-title",
-          style: {}
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: (0, _classnames.default)(`${prefix}-grid-cell`, {
-            [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
-            [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header'),
-            [`${prefix}-grid-cell-text-center`]: (col?.headerTextAlign ?? col?.textAlign) === 'center',
-            [`${prefix}-grid-cell-text-right`]: (col?.headerTextAlign ?? col.textAlign) === 'right'
-          })
-        }, headerEditAble && col.headerEditEnable && cellHeaderEditing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_HeaderEditCell.default, {
+        title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, headerEditAble && col.headerEditEnable && cellHeaderEditing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_HeaderEditCell.default, {
           column: col,
           editType: headerEditType ?? 'text',
           record: headerRecord,
@@ -1328,7 +1321,23 @@ function columnCustom(opts) {
           startCell: startCell,
           handleSubmit: handleSubmit,
           onSubmit: onSubmit
-        })) : headerEditAble && col.headerEditEnable ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, headerValue) : 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))), !col.headerEditEnable && (!_hooks.nonActionColumn.includes(col.field) && !col?.children || col?.children && col?.children.length < 1) && /*#__PURE__*/_react.default.createElement("span", {
+        })) : /*#__PURE__*/_react.default.createElement("div", {
+          className: "ui-rc-grid-filter-column d-flex",
+          style: {
+            justifyContent: 'space-between',
+            alignItems: 'center'
+          }
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "ui-rc-table-column-title",
+          style: {}
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _classnames.default)(`${prefix}-grid-cell`, {
+            [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
+            [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header'),
+            [`${prefix}-grid-cell-text-center`]: (col?.headerTextAlign ?? col?.textAlign) === 'center',
+            [`${prefix}-grid-cell-text-right`]: (col?.headerTextAlign ?? col.textAlign) === 'right'
+          })
+        }, headerEditAble && col.headerEditEnable ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, headerContent) : 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))), (!_hooks.nonActionColumn.includes(col.field) && !col?.children || col?.children && col?.children.length < 1) && /*#__PURE__*/_react.default.createElement("span", {
           className: "ui-rc-header-trigger d-flex gap-50"
         }, canSort && /*#__PURE__*/_react.default.createElement("div", {
           style: {
@@ -1398,6 +1407,7 @@ function columnCustom(opts) {
           className: (0, _classnames.default)('', {
             [`header-cell-editable`]: col.headerEditEnable,
             [`${prefix}-grid-cell-selected`]: !cellHeaderEditing && isCellSelect,
+            'cell-editing': cellHeaderEditing,
             'cell-border-top': !cellHeaderEditing && isCellSelect,
             'cell-border-bottom': !cellHeaderEditing && isCellSelect,
             'cell-border-right': !cellHeaderEditing && isCellSelect,
@@ -1501,6 +1511,9 @@ function columnCustom(opts) {
         }),
         getCellProps(value, record, rowIndex) {
           const prevCellProps = prevGetCellProps?.(value, record, rowIndex);
+
+          // console.log('record', record)
+
           const fomatedValue = ['color', 'checkbox', 'field'].includes(col.type ?? '') ? '' : (0, _useColumns.renderValueCell)(col, value, record, rowIndex, 0, format, false);
           const tooltipContent = isOpenTooltip === false ? '' : col?.tooltipDescription ? typeof col.tooltipDescription === 'function' ? col.tooltipDescription({
             value,

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

@@ -1,6 +1,7 @@
 import type { TablePipeline } from '../pipeline';
 export interface HiddenColumnsOptions {
     columns: any[];
+    groupColumns?: any[];
     visibleKeys?: any[];
 }
 export declare function hiddenColumns(opts: HiddenColumnsOptions): (pipeline: TablePipeline) => TablePipeline;

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

@@ -4,19 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.hiddenColumns = hiddenColumns;
+var _constants = require("../../utils/constants");
 var _convertColumnsChoose = require("../../utils/convertColumnsChoose");
+var _utility = require("../../utils/utility");
 // const stateKey = 'pagination'
 
 function hiddenColumns(opts) {
   return function visibleClumns(pipeline) {
     const {
       columns,
-      visibleKeys
+      visibleKeys,
+      groupColumns
     } = opts;
-    pipeline.columns(processDataSource(columns, visibleKeys));
+    const abc = pipeline.getStateAtKey(_constants.stateKeyVisibleKeys) ?? visibleKeys ?? [];
+    const group = pipeline.getStateAtKey(_constants.stateKeyGroupKeys) ?? groupColumns ?? [];
+    const rs = (0, _utility.getOnlyInA)(abc, group);
+    pipeline.columns(processDataSource(columns, rs));
     return pipeline;
     function processDataSource(cols, keys) {
-      if (!keys) {
+      if (!keys || keys && keys.length === 0) {
         return cols;
       }
       return (0, _convertColumnsChoose.filterColumnsByField)(cols, keys ?? []);

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

@@ -226,7 +226,7 @@ function treeSelect(opts) {
           return {
             style: {
               // cursor: 'not-allowed',
-              padding: 0
+              paddingBlock: 0
             }
           };
         }
@@ -237,14 +237,14 @@ function treeSelect(opts) {
           return {
             style: {
               cursor: 'not-allowed',
-              padding: 0
+              paddingBlock: 0
             }
           };
         }
         return (0, _utils2.mergeCellProps)(prevCellProps, {
           style: {
             cursor: 'pointer',
-            padding: 0
+            paddingBlock: 0
           },
           onClick(e) {
             if (opts.stopClickEventPropagation) {

package/lib/ali-table/utils/constants.d.ts

@@ -1,10 +1,12 @@
 export declare const stateKeyResize = "columnResize";
 export declare const stateKeyFilter = "columnsFilter";
+export declare const stateKeyColumnFilter = "columnFilter";
 export declare const stateKeySorter = "columnsSorter";
 export declare const stateKeyVisible = "visible";
 export declare const stateKeyTooltip = "tooltip";
 export declare const stateKeyPagination = "pagination";
-export declare const stateKeyColumnFilter = "columnFilter";
+export declare const stateKeyVisibleKeys = "columnVisibleKeys";
+export declare const stateKeyGroupKeys = "columnGroupKeys";
 export declare const stateKeyFocusedCell = "focusedCell";
 export declare const stateKeyIsEditing = "isEditing";
 export declare const stateKeyStartPasteCell = "startPasteCell";

package/lib/ali-table/utils/constants.js

@@ -3,14 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.stateKeyVisible = exports.stateKeyTypePaste = exports.stateKeyTooltip = exports.stateKeyStartPasteCell = exports.stateKeyStartCell = exports.stateKeySorter = exports.stateKeyResize = exports.stateKeyPagination = exports.stateKeyIsSelecting = exports.stateKeyIsPasting = exports.stateKeyIsEditing = exports.stateKeyFocusedCell = exports.stateKeyFilter = exports.stateKeyEndPasteCell = exports.stateKeyEndCell = exports.stateKeyEditCellSettings = exports.stateKeyColumnFilter = void 0;
+exports.stateKeyVisibleKeys = exports.stateKeyVisible = exports.stateKeyTypePaste = exports.stateKeyTooltip = exports.stateKeyStartPasteCell = exports.stateKeyStartCell = exports.stateKeySorter = exports.stateKeyResize = exports.stateKeyPagination = exports.stateKeyIsSelecting = exports.stateKeyIsPasting = exports.stateKeyIsEditing = exports.stateKeyGroupKeys = exports.stateKeyFocusedCell = exports.stateKeyFilter = exports.stateKeyEndPasteCell = exports.stateKeyEndCell = exports.stateKeyEditCellSettings = exports.stateKeyColumnFilter = void 0;
 const stateKeyResize = exports.stateKeyResize = 'columnResize';
-const stateKeyFilter = exports.stateKeyFilter = 'columnsFilter';
+const stateKeyFilter = exports.stateKeyFilter = 'columnsFilter'; // array all state
+const stateKeyColumnFilter = exports.stateKeyColumnFilter = 'columnFilter'; // current column filter state
+
 const stateKeySorter = exports.stateKeySorter = 'columnsSorter';
 const stateKeyVisible = exports.stateKeyVisible = 'visible';
 const stateKeyTooltip = exports.stateKeyTooltip = 'tooltip';
 const stateKeyPagination = exports.stateKeyPagination = 'pagination';
-const stateKeyColumnFilter = exports.stateKeyColumnFilter = 'columnFilter';
+const stateKeyVisibleKeys = exports.stateKeyVisibleKeys = 'columnVisibleKeys';
+const stateKeyGroupKeys = exports.stateKeyGroupKeys = 'columnGroupKeys';
 
 // Key for Edit
 

package/lib/ali-table/utils/utility.d.ts

@@ -24,4 +24,5 @@ export declare function updateOrInsert<T extends Row>(dataArray: T[], dataFilter
 export declare function filterVisibleColumns<T extends ColumnTable>(columns: T[]): T[];
 export declare const sortByType: (arr: ColumnTable[], rowDnd?: RowDnd) => ColumnTable[];
 export declare function getVisibleColumnFields<T extends ColumnTable>(columns: T[]): string[];
+export declare const getOnlyInA: (a: string[], b: string[]) => string[];
 export {};