es-grid-template 1.9.0 → 1.9.10

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

@@ -2,9 +2,9 @@ import type { TablePipeline } from "./pipeline";
 import type { Dispatch, SetStateAction } from "react";
 import React from "react";
 import './base-table/styles.scss';
-import type { TableProps } from "../table-component";
 import type { BaseTable } from "./base-table/table";
 import type { VirtualEnum } from "./base-table/interfaces";
+import type { TableProps } from "../grid-component";
 declare const Grid: React.ForwardRefExoticComponent<Omit<TableProps, "useVirtual"> & {
     isFullScreen: boolean;
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;

package/es/ali-table/Grid.js

@@ -4,6 +4,7 @@ import { useLocale } from "rc-master-ui/es/locale";
 import React, { useContext } from "react";
 import { Tooltip } from "react-tooltip";
 import "./base-table/styles.scss";
+// import type { TableProps } from "../table-component"
 import { Toolbar } from 'rc-master-ui';
 import classNames from "classnames";
 import Pagination from "rc-master-ui/es/pagination";
@@ -50,7 +51,8 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     setVisibleKeys,
     footerDataSource,
     loading,
-    useVirtual
+    useVirtual,
+    useOuterBorder = true
 
     // onRowFooterStyles,
     // onRowHeaderStyles
@@ -143,12 +145,13 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     setVisibleKeys(nextVisibleKeys);
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: classNames(`${prefix}-grid ${tableClassNames}`, {
+    className: classNames(`${prefix}-grid`, {
+      [tableClassNames]: !!tableClassNames,
       [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
       [`${prefix}-grid-dark`]: theme?.theme === 'dark'
     }),
     style: {
-      height: height ?? 700,
+      maxHeight: height ?? 700,
       minHeight,
       display: 'flex',
       flexDirection: 'column'
@@ -228,7 +231,7 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
 
     // estimatedRowHeight={50}
     ,
-    useOuterBorder: true
+    useOuterBorder: useOuterBorder
     // style={{ height: 700, overflow: 'auto' }}
     ,
     style: minHeight ? {

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

@@ -1,5 +1,5 @@
 import React from "react";
 import './base-table/styles.scss';
-import type { TableProps } from "../table-component";
+import type { TableProps } from "../grid-component/type";
 declare const InternalTable: <RecordType extends object>(props: TableProps<RecordType>) => React.JSX.Element;
 export default InternalTable;

package/es/ali-table/InternalTable.js

@@ -5,7 +5,7 @@ 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, sortByType, sumFields } from "../table-component/hook/utils";
+import { addRowIdArray, filterDataByColumns, 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";
@@ -33,7 +33,9 @@ const InternalTable = props => {
     expandable,
     sortMultiple,
     onFilter,
+    defaultFilter,
     onSorter,
+    defaultSorter,
     footerDataSource,
     summary,
     useVirtual,
@@ -88,11 +90,12 @@ const InternalTable = props => {
     return isTreeArray(convertData);
   }, [convertData]);
   const mergedData = React.useMemo(() => {
-    if (sortState || filterState) {
-      return filterDataByColumns(convertData, filterState ?? [], sortState ?? [], [], ignoreAccents);
+    const shouldSkip = onFilter && onSorter;
+    if (shouldSkip) {
+      return convertData;
     }
-    return convertData;
-  }, [convertData, filterState, ignoreAccents, sortState]);
+    return filterDataByColumns(convertData, onFilter ? undefined : filterState ?? defaultFilter, onSorter ? undefined : sortState ?? defaultSorter, [], ignoreAccents);
+  }, [convertData, filterState, ignoreAccents, sortState, onFilter, onSorter, defaultFilter, defaultSorter]);
   const footerData = React.useMemo(() => {
     if (!summary) {
       return undefined;
@@ -110,6 +113,12 @@ const InternalTable = props => {
     return undefined;
   }, [expandable?.defaultExpandAllRows, convertData, isDataTree]);
   const [isFullScreen, setIsFullScreen] = React.useState(false);
+  const defaultFilterConvert = React.useMemo(() => {
+    if (defaultFilter) {
+      return revertConvertFilters(defaultFilter);
+    }
+    return undefined;
+  }, [defaultFilter]);
   const pipeline = useTablePipeline({
     components: fusion
   }).input({
@@ -158,7 +167,8 @@ const InternalTable = props => {
     clickArea: 'icon',
     stopClickEventPropagation: true,
     expandIconColumnIndex: expandable?.expandIconColumnIndex,
-    defaultOpenKeys: expandAllKeys ?? expandable?.defaultExpandedRowKeys
+    defaultOpenKeys: expandAllKeys ?? expandable?.defaultExpandedRowKeys,
+    isTreeArray: !!isDataTree
   })).use(features.columnCustom({
     id,
     t,
@@ -177,6 +187,8 @@ const InternalTable = props => {
     currentPage: pagination ? pagination?.currentPage : undefined,
     pageSize: pagination ? pagination?.pageSize : undefined,
     isDataTree,
+    defaultFilter: defaultFilterConvert,
+    defaultSorter,
     onFilter(val) {
       // const rs  = 
 
@@ -232,7 +244,11 @@ const InternalTable = props => {
     originColumns: columns,
     groupColumns: groupColumns,
     setVisibleKeys: setVisibleKeys,
-    footerDataSource: footerData
+    footerDataSource: footerData,
+    onFilter: onFilter,
+    onSorter: onSorter,
+    defaultFilter: defaultFilter,
+    defaultSorter: defaultSorter
   })), /*#__PURE__*/React.createElement(Modal, {
     open: isFullScreen,
     footer: null,
@@ -278,7 +294,11 @@ const InternalTable = props => {
     originColumns: columns,
     groupColumns: groupColumns,
     setVisibleKeys: setVisibleKeys,
-    footerDataSource: footerData
+    footerDataSource: footerData,
+    onFilter: onFilter,
+    onSorter: onSorter,
+    defaultFilter: defaultFilter,
+    defaultSorter: defaultSorter
   })))))));
 };
 export default InternalTable;

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

@@ -48,4 +48,4 @@ const outerBorderStyleMixin = css(["border-top:var(--cell-border-horizontal);bor
 export const StyledArtTableWrapper = styled.div.withConfig({
   displayName: "StyledArtTableWrapper",
   componentId: "es-grid-template__sc-ipj1ht-0"
-})(["--row-height:38px;--color:#333;--bgcolor:white;--hover-bgcolor:var(--hover-color,#f5f5f5);--highlight-bgcolor:#eee;--header-row-height:36px;--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;--cell-border:1px solid var(--border-color);--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;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;&.use-outer-border{", ";}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{display:none;}}.", "{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;}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}}.", ",.", "{overflow-x:auto;overflow-y:hidden;background:var(--bgcolor);}&.sticky-header .", "{position:sticky;top:0;z-index:", ";}&.sticky-footer .", "{position:sticky;bottom:0;z-index:", ";}.", "{tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 1px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}}}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);}tr:not(.no-highlight).highlight > td{background:var(--highlight-bgcolor);}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);}tr.first th{border-top:var(--header-cell-border-horizontal);}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);}td.first{border-left:var(--cell-border-vertical);}tr.first td{border-top:var(--cell-border-horizontal);}&.has-header tbody tr.first td{border-top:none;}&.has-footer tbody tr.last td{border-bottom:none;}.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:1px;visibility:hidden;}.", "{position:relative;.", "{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;}.", "{position:sticky;z-index:", ";transform:translateY(-50%);}}"], outerBorderStyleMixin, 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.tableBody, Classes.tableFooter, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.tableBody, 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);
+})(["--row-height:38px;--color:#333;--bgcolor:white;--hover-bgcolor:var(--hover-color,#f5f5f5);--highlight-bgcolor:#eee;--header-row-height:36px;--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;--cell-border:1px solid var(--border-color);--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;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;&.use-outer-border{", ";}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{display:none;}}.", "{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;}}}.", ",.", "{overflow-x:auto;overflow-y:hidden;background:var(--bgcolor);}&.sticky-header .", "{position:sticky;top:0;z-index:", ";}&.sticky-footer .", "{position:sticky;bottom:0;z-index:", ";}.", "{tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 1px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}}}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);}tr:not(.no-highlight).highlight > td{background:var(--highlight-bgcolor);}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);}tr.first th{border-top:var(--header-cell-border-horizontal);}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);}td.first{border-left:var(--cell-border-vertical);}tr.first td{border-top:var(--cell-border-horizontal);}&.has-header tbody tr.first td{border-top:none;}&.has-footer tbody tr.last td{border-bottom:none;}.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:1px;visibility:hidden;}.", "{position:relative;.", "{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;}.", "{position:sticky;z-index:", ";transform:translateY(-50%);}}"], outerBorderStyleMixin, 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.tableBody, Classes.tableFooter, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.tableBody, 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);

package/es/ali-table/common-views.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 export const InlineFlexCell = styled.div.withConfig({
   displayName: "InlineFlexCell",
   componentId: "es-grid-template__sc-1o0on5d-0"
-})(["display:inline-flex;align-items:center;"]);
+})(["display:flex;align-items:center;"]);
 export const ExpansionCell = styled(InlineFlexCell).withConfig({
   displayName: "ExpansionCell",
   componentId: "es-grid-template__sc-1o0on5d-1"

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

@@ -33,11 +33,12 @@ export const ColumnsChoose = props => {
   const defaultSelectedKeys = React.useMemo(() => {
     const colsVisiables = originColumns.filter(it => it.showInColumnChoose !== false && it.visible !== false);
     const colsKeys = colsVisiables.map(it => it.field);
-
-    // const aa = Object.keys(columnHidden)
-
     return colsKeys.filter(it => !columnsGroup?.includes(it));
   }, [columnsGroup, originColumns]);
+
+  // console.log('defaultSelectedKeys', defaultSelectedKeys)
+  // console.log('originColumns', originColumns)
+
   const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(defaultSelectedKeys && defaultSelectedKeys.length ? defaultSelectedKeys : undefined, {
     value: undefined
   });

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

@@ -1,7 +1,14 @@
 import type { TablePipeline } from '../pipeline';
 import type { ColumnResizeMode } from '../../base-table/table';
-import type { SortOrder } from '../../interfaces';
+import type { ArtColumn, SortOrder } from '../../interfaces';
 import type { FilterItem, IFormat, IWrapSettings, Sorter, SourceFilter } from '../../../grid-component/type';
+type FilterState = {
+    field: any;
+    key: any;
+    column: ArtColumn;
+    filteredKeys: any[];
+    operator: string | undefined;
+};
 export interface ColumnFeatureOptions {
     id: any;
     columns: any[];
@@ -39,7 +46,8 @@ export interface ColumnFeatureOptions {
     dataSourceFilter?: SourceFilter[];
     ignoreAccents?: boolean;
     onFilter?: (filterState: FilterItem[]) => void;
-    defaultSorts?: Sorter[];
+    defaultFilter?: FilterState[];
+    defaultSorter?: Sorter[];
     mode?: 'single' | 'multiple';
     keepDataSource?: boolean;
     orders?: SortOrder[];
@@ -49,3 +57,4 @@ export interface ColumnFeatureOptions {
     pageSize?: number;
 }
 export declare function columnCustom(opts: ColumnFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
+export {};

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

@@ -41,7 +41,10 @@ export function columnCustom(opts) {
     wrapSettings,
     // ignoreAccents,
     dataSource,
-    isDataTree
+    isDataTree,
+    defaultSorter,
+    defaultFilter
+
     // currentPage = 1,
     // pageSize
   } = opts;
@@ -52,7 +55,7 @@ export function columnCustom(opts) {
   } = opts;
   return function columnResizeFeature(pipeline) {
     const sizes = opts.sizes ?? pipeline.getStateAtKey(stateKeyResize) ?? opts.defaultSizes ?? [];
-    const filterState = pipeline.getStateAtKey(stateKeyFilter) ?? [];
+    const filterState = pipeline.getStateAtKey(stateKeyFilter) ?? defaultFilter ?? [];
     const visible = pipeline.getStateAtKey(stateKeyVisible) ?? '';
     const isOpenTooltip = pipeline.getStateAtKey(stateKeyTooltip) ?? false;
     const pageSize = opts?.pageSize ?? pipeline.getStateAtKey(stateKey)?.pageSize ?? pageSizeOptions[0];
@@ -67,7 +70,7 @@ export function columnCustom(opts) {
     // const fieldOriginal = fieldOriginalKey ? columns.find((it) => it.field === fieldOriginalKey) : undefined
 
     // const sorterStates = pipeline.getStateAtKey(stateKeySorter) ?? []
-    const sorterStates = pipeline.getStateAtKey(stateKeySorter) ?? opts.defaultSorts ?? [];
+    const sorterStates = pipeline.getStateAtKey(stateKeySorter) ?? defaultSorter ?? [];
     const activeSorts = sorterStates.filter(s => s.order !== 'none');
     const sorts = mode === 'multiple' ? activeSorts : activeSorts.slice(0, 1);
     const leafColumns = collectNodes(pipeline.getColumns(), 'leaf-only');
@@ -119,9 +122,10 @@ export function columnCustom(opts) {
     const onVisibleChange = (newVisible, info, column) => {
       if (info.source === 'trigger') {
         if (newVisible) {
-          const filterValue = filterColumnState.filteredKeys ?? [];
+          const defaultFilterOption = defaultFilter?.find(it => it.field === column.field);
+          const filterValue = filterColumnState.filteredKeys === null ? [] : filterColumnState.filteredKeys ?? defaultFilterOption?.filteredKeys ?? [];
           const operator = filterColumnState.operator;
-          const operatorValue = operator ?? getDefaultOperator(column);
+          const operatorValue = operator ?? defaultFilterOption?.operator ?? getDefaultOperator(column);
           pipeline.setStateAtKey(stateKeyColumnFilter, {
             operator: operatorValue,
             filteredKeys: filterValue,
@@ -193,8 +197,20 @@ export function columnCustom(opts) {
         // xóa column đang filter trong filterState
 
         const newFilterState = filterState.filter(it => it.field !== filterColumnState.field);
-        pipeline.setStateAtKey(stateKeyColumnFilter, {});
-        pipeline.setStateAtKey(stateKeyFilter, [...newFilterState]);
+        const currentFilter = {
+          field: filterColumnState.field,
+          key: filterColumnState.field,
+          column: filterColumnState.column,
+          filteredKeys: null,
+          operator: filterColumnState.operator ?? undefined
+        };
+        const rs = updateArrayByKey(filterState, currentFilter, 'field');
+        pipeline.setStateAtKey(stateKeyColumnFilter, {
+          ...currentFilter
+        });
+
+        // pipeline.setStateAtKey(stateKeyFilter, [...newFilterState])
+        pipeline.setStateAtKey(stateKeyFilter, rs);
         if (onFilter) {
           onFilter(convertFilters([...newFilterState]));
         } else {
@@ -242,7 +258,10 @@ export function columnCustom(opts) {
       const {
         order
       } = isSorted && sortMap.get(col.field);
-      const filtered = !!filterState.find(it => it.field === col.field);
+      const find = filterState.find(it => it.field === col.field);
+
+      // const filtered = !!filterState.find((it) => it.field === col.field)
+      const filtered = !!find && find.filteredKeys !== null;
       const getDropdownTrigger = () => {
         let iconFilter;
         if (typeof filterIcon === 'function') {

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

@@ -16,5 +16,6 @@ export interface TreeModeFeatureOptions {
     clickArea?: 'cell' | 'content' | 'icon';
     stopClickEventPropagation?: boolean;
     treeMetaKey?: string | symbol;
+    isTreeArray?: boolean;
 }
 export declare function treeMode(opts?: TreeModeFeatureOptions): (pipeline: TablePipeline) => TablePipeline;

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

@@ -10,6 +10,7 @@ export function treeMode(opts = {}) {
     const stateKey = 'treeMode';
     const ctx = pipeline.ctx;
     const expandIconColumnIndex = opts.expandIconColumnIndex ?? 0;
+    const isTreeArray = opts.isTreeArray;
     const primaryKey = pipeline.ensurePrimaryKey('treeMode');
     if (typeof primaryKey !== 'string') {
       throw new Error('treeMode Only strings are supported primaryKey');
@@ -94,6 +95,9 @@ export function treeMode(opts = {}) {
         if (record[treeMetaKey] == null) {
           return content;
         }
+        if (!isTreeArray) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null, content);
+        }
         const {
           rowKey,
           depth,
@@ -105,6 +109,7 @@ export function treeMode(opts = {}) {
           return /*#__PURE__*/React.createElement(InlineFlexCell, {
             className: "expansion-cell leaf"
           }, /*#__PURE__*/React.createElement("span", {
+            className: "expansion-content",
             style: {
               marginLeft: indent + iconWidth + iconGap
             }
@@ -131,7 +136,9 @@ export function treeMode(opts = {}) {
             marginRight: iconGap
           },
           onClick: clickArea === 'icon' ? onClick : undefined
-        }), content);
+        }), /*#__PURE__*/React.createElement("span", {
+          className: "expansion-content"
+        }, content));
       };
       const getCellProps = (value, record, rowIndex) => {
         const prevProps = internals.safeGetCellProps(firstCol, record, rowIndex);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import { always } from "../../utils/others";
 import { findItemByKey, updateArrayByKey } from "../../../table-component/hook/utils";
 import { mergeCellProps } from "../../utils";

package/es/ali-table/utils/convertColumnsChoose.d.ts

@@ -1,5 +1,5 @@
 import { TreeDataNode } from "antd";
-import type { ColumnTable } from "../../table-component";
+import { ColumnTable } from "../../grid-component";
 export declare function convertColumnsToTreeData(columns: ColumnTable[], groupColumns?: string[], t?: any): TreeDataNode[];
 export declare function filterColumnsByField(columns: ColumnTable[], fieldList: string[]): ColumnTable[];
 export declare function filterVisibleColumns(columns: ColumnTable[]): ColumnTable[];

package/es/ali-table/utils/convertColumnsChoose.js

@@ -1,3 +1,5 @@
+// import type { ColumnTable } from "../../table-component"
+
 export function convertColumnsToTreeData(columns, groupColumns, t) {
   if (!columns) {
     return [];

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { TableProps } from "../table-component";
+import type { TableProps } from "../grid-component";
 declare const TempTable: <RecordType extends object>(props: TableProps<RecordType>) => React.JSX.Element;
 export default TempTable;

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

@@ -219,6 +219,8 @@ export type ColumnTable<RecordType = AnyObject> = {
     /** Custom render method */
     /** Custom method to get cell props */
     getCellProps?: (value: any, row: any, rowIndex: number) => CellProps;
+    /** Props for the header cell */
+    headerCellProps?: CellProps;
     /** Custom method to get cell SpanRect */
     getSpanRect?: (value: any, row: any, rowIndex: number) => SpanRect;
 };
@@ -230,6 +232,7 @@ export type TableProps<RecordType = AnyObject> = {
         backgroundColor?: string;
         color?: string;
     };
+    useOuterBorder?: boolean;
     className?: string;
     title?: ReactNode | ((data: RecordType) => ReactNode);
     fullScreenTitle?: ReactNode | (() => ReactNode);

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

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

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

@@ -1,4 +1,2 @@
 import InternalTable from './InternalTable';
-import type { ColumnsTable, TableProps, ColumnTable, ContextMenuItem } from './../grid-component/type';
-export type { ColumnsTable, TableProps, ColumnTable, ContextMenuItem };
 export default InternalTable;

package/es/table-component/index.js

@@ -1,2 +1,6 @@
 import InternalTable from "./InternalTable";
+// import type { ColumnsTable, TableProps, ColumnTable, ContextMenuItem} from './../grid-component/type'
+
+// export type {ColumnsTable, TableProps, ColumnTable, ContextMenuItem}
+
 export default InternalTable;

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

@@ -2,9 +2,9 @@ import type { TablePipeline } from "./pipeline";
 import type { Dispatch, SetStateAction } from "react";
 import React from "react";
 import './base-table/styles.scss';
-import type { TableProps } from "../table-component";
 import type { BaseTable } from "./base-table/table";
 import type { VirtualEnum } from "./base-table/interfaces";
+import type { TableProps } from "../grid-component";
 declare const Grid: React.ForwardRefExoticComponent<Omit<TableProps, "useVirtual"> & {
     isFullScreen: boolean;
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;

package/lib/ali-table/Grid.js

@@ -22,6 +22,8 @@ var _useContext = require("./useContext");
 var _ColumnsChoose = require("./pipeline/features/ColumnsChoose");
 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 type { TableProps } from "../table-component"
+
 // const Grid = (props: GridProps) => {
 const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
@@ -59,7 +61,8 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     setVisibleKeys,
     footerDataSource,
     loading,
-    useVirtual
+    useVirtual,
+    useOuterBorder = true
 
     // onRowFooterStyles,
     // onRowHeaderStyles
@@ -152,12 +155,13 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     setVisibleKeys(nextVisibleKeys);
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(`${prefix}-grid ${tableClassNames}`, {
+    className: (0, _classnames.default)(`${prefix}-grid`, {
+      [tableClassNames]: !!tableClassNames,
       [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
       [`${prefix}-grid-dark`]: theme?.theme === 'dark'
     }),
     style: {
-      height: height ?? 700,
+      maxHeight: height ?? 700,
       minHeight,
       display: 'flex',
       flexDirection: 'column'
@@ -237,7 +241,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
 
     // estimatedRowHeight={50}
     ,
-    useOuterBorder: true
+    useOuterBorder: useOuterBorder
     // style={{ height: 700, overflow: 'auto' }}
     ,
     style: minHeight ? {

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

@@ -1,5 +1,5 @@
 import React from "react";
 import './base-table/styles.scss';
-import type { TableProps } from "../table-component";
+import type { TableProps } from "../grid-component/type";
 declare const InternalTable: <RecordType extends object>(props: TableProps<RecordType>) => React.JSX.Element;
 export default InternalTable;

package/lib/ali-table/InternalTable.js

@@ -42,7 +42,9 @@ const InternalTable = props => {
     expandable,
     sortMultiple,
     onFilter,
+    defaultFilter,
     onSorter,
+    defaultSorter,
     footerDataSource,
     summary,
     useVirtual,
@@ -97,11 +99,12 @@ const InternalTable = props => {
     return (0, _utils.isTreeArray)(convertData);
   }, [convertData]);
   const mergedData = _react.default.useMemo(() => {
-    if (sortState || filterState) {
-      return (0, _utils.filterDataByColumns)(convertData, filterState ?? [], sortState ?? [], [], ignoreAccents);
+    const shouldSkip = onFilter && onSorter;
+    if (shouldSkip) {
+      return convertData;
     }
-    return convertData;
-  }, [convertData, filterState, ignoreAccents, sortState]);
+    return (0, _utils.filterDataByColumns)(convertData, onFilter ? undefined : filterState ?? defaultFilter, onSorter ? undefined : sortState ?? defaultSorter, [], ignoreAccents);
+  }, [convertData, filterState, ignoreAccents, sortState, onFilter, onSorter, defaultFilter, defaultSorter]);
   const footerData = _react.default.useMemo(() => {
     if (!summary) {
       return undefined;
@@ -119,6 +122,12 @@ const InternalTable = props => {
     return undefined;
   }, [expandable?.defaultExpandAllRows, convertData, isDataTree]);
   const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
+  const defaultFilterConvert = _react.default.useMemo(() => {
+    if (defaultFilter) {
+      return (0, _utils.revertConvertFilters)(defaultFilter);
+    }
+    return undefined;
+  }, [defaultFilter]);
   const pipeline = (0, _pipeline.useTablePipeline)({
     components: fusion
   }).input({
@@ -167,7 +176,8 @@ const InternalTable = props => {
     clickArea: 'icon',
     stopClickEventPropagation: true,
     expandIconColumnIndex: expandable?.expandIconColumnIndex,
-    defaultOpenKeys: expandAllKeys ?? expandable?.defaultExpandedRowKeys
+    defaultOpenKeys: expandAllKeys ?? expandable?.defaultExpandedRowKeys,
+    isTreeArray: !!isDataTree
   })).use(_pipeline.features.columnCustom({
     id,
     t,
@@ -186,6 +196,8 @@ const InternalTable = props => {
     currentPage: pagination ? pagination?.currentPage : undefined,
     pageSize: pagination ? pagination?.pageSize : undefined,
     isDataTree,
+    defaultFilter: defaultFilterConvert,
+    defaultSorter,
     onFilter(val) {
       // const rs  = 
 
@@ -241,7 +253,11 @@ const InternalTable = props => {
     originColumns: columns,
     groupColumns: groupColumns,
     setVisibleKeys: setVisibleKeys,
-    footerDataSource: footerData
+    footerDataSource: footerData,
+    onFilter: onFilter,
+    onSorter: onSorter,
+    defaultFilter: defaultFilter,
+    defaultSorter: defaultSorter
   })), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
     open: isFullScreen,
     footer: null,
@@ -287,7 +303,11 @@ const InternalTable = props => {
     originColumns: columns,
     groupColumns: groupColumns,
     setVisibleKeys: setVisibleKeys,
-    footerDataSource: footerData
+    footerDataSource: footerData,
+    onFilter: onFilter,
+    onSorter: onSorter,
+    defaultFilter: defaultFilter,
+    defaultSorter: defaultSorter
   })))))));
 };
 var _default = exports.default = InternalTable;

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

@@ -56,4 +56,4 @@ const outerBorderStyleMixin = (0, _styledComponents.css)(["border-top:var(--cell
 const StyledArtTableWrapper = exports.StyledArtTableWrapper = _styledComponents.default.div.withConfig({
   displayName: "StyledArtTableWrapper",
   componentId: "es-grid-template__sc-ipj1ht-0"
-})(["--row-height:38px;--color:#333;--bgcolor:white;--hover-bgcolor:var(--hover-color,#f5f5f5);--highlight-bgcolor:#eee;--header-row-height:36px;--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;--cell-border:1px solid var(--border-color);--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;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;&.use-outer-border{", ";}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{display:none;}}.", "{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;}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}}.", ",.", "{overflow-x:auto;overflow-y:hidden;background:var(--bgcolor);}&.sticky-header .", "{position:sticky;top:0;z-index:", ";}&.sticky-footer .", "{position:sticky;bottom:0;z-index:", ";}.", "{tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 1px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}}}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);}tr:not(.no-highlight).highlight > td{background:var(--highlight-bgcolor);}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);}tr.first th{border-top:var(--header-cell-border-horizontal);}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);}td.first{border-left:var(--cell-border-vertical);}tr.first td{border-top:var(--cell-border-horizontal);}&.has-header tbody tr.first td{border-top:none;}&.has-footer tbody tr.last td{border-bottom:none;}.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:1px;visibility:hidden;}.", "{position:relative;.", "{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;}.", "{position:sticky;z-index:", ";transform:translateY(-50%);}}"], outerBorderStyleMixin, 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.tableBody, Classes.tableFooter, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.tableBody, 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);
+})(["--row-height:38px;--color:#333;--bgcolor:white;--hover-bgcolor:var(--hover-color,#f5f5f5);--highlight-bgcolor:#eee;--header-row-height:36px;--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;--cell-border:1px solid var(--border-color);--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;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;&.use-outer-border{", ";}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{display:none;}}.", "{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;}}}.", ",.", "{overflow-x:auto;overflow-y:hidden;background:var(--bgcolor);}&.sticky-header .", "{position:sticky;top:0;z-index:", ";}&.sticky-footer .", "{position:sticky;bottom:0;z-index:", ";}.", "{tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 1px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}}}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);}tr:not(.no-highlight).highlight > td{background:var(--highlight-bgcolor);}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);}tr.first th{border-top:var(--header-cell-border-horizontal);}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);}td.first{border-left:var(--cell-border-vertical);}tr.first td{border-top:var(--cell-border-horizontal);}&.has-header tbody tr.first td{border-top:none;}&.has-footer tbody tr.last td{border-bottom:none;}.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:1px;visibility:hidden;}.", "{position:relative;.", "{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;}.", "{position:sticky;z-index:", ";transform:translateY(-50%);}}"], outerBorderStyleMixin, 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.tableBody, Classes.tableFooter, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.tableBody, 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);

package/lib/ali-table/common-views.js

@@ -11,7 +11,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 const InlineFlexCell = exports.InlineFlexCell = _styledComponents.default.div.withConfig({
   displayName: "InlineFlexCell",
   componentId: "es-grid-template__sc-1o0on5d-0"
-})(["display:inline-flex;align-items:center;"]);
+})(["display:flex;align-items:center;"]);
 const ExpansionCell = exports.ExpansionCell = (0, _styledComponents.default)(InlineFlexCell).withConfig({
   displayName: "ExpansionCell",
   componentId: "es-grid-template__sc-1o0on5d-1"

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

@@ -42,11 +42,12 @@ const ColumnsChoose = props => {
   const defaultSelectedKeys = _react.default.useMemo(() => {
     const colsVisiables = originColumns.filter(it => it.showInColumnChoose !== false && it.visible !== false);
     const colsKeys = colsVisiables.map(it => it.field);
-
-    // const aa = Object.keys(columnHidden)
-
     return colsKeys.filter(it => !columnsGroup?.includes(it));
   }, [columnsGroup, originColumns]);
+
+  // console.log('defaultSelectedKeys', defaultSelectedKeys)
+  // console.log('originColumns', originColumns)
+
   const [mergedSelectedKeys, setMergedSelectedKeys] = (0, _useMergedState.default)(defaultSelectedKeys && defaultSelectedKeys.length ? defaultSelectedKeys : undefined, {
     value: undefined
   });

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

@@ -1,7 +1,14 @@
 import type { TablePipeline } from '../pipeline';
 import type { ColumnResizeMode } from '../../base-table/table';
-import type { SortOrder } from '../../interfaces';
+import type { ArtColumn, SortOrder } from '../../interfaces';
 import type { FilterItem, IFormat, IWrapSettings, Sorter, SourceFilter } from '../../../grid-component/type';
+type FilterState = {
+    field: any;
+    key: any;
+    column: ArtColumn;
+    filteredKeys: any[];
+    operator: string | undefined;
+};
 export interface ColumnFeatureOptions {
     id: any;
     columns: any[];
@@ -39,7 +46,8 @@ export interface ColumnFeatureOptions {
     dataSourceFilter?: SourceFilter[];
     ignoreAccents?: boolean;
     onFilter?: (filterState: FilterItem[]) => void;
-    defaultSorts?: Sorter[];
+    defaultFilter?: FilterState[];
+    defaultSorter?: Sorter[];
     mode?: 'single' | 'multiple';
     keepDataSource?: boolean;
     orders?: SortOrder[];
@@ -49,3 +57,4 @@ export interface ColumnFeatureOptions {
     pageSize?: number;
 }
 export declare function columnCustom(opts: ColumnFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
+export {};

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

@@ -48,7 +48,10 @@ function columnCustom(opts) {
     wrapSettings,
     // ignoreAccents,
     dataSource,
-    isDataTree
+    isDataTree,
+    defaultSorter,
+    defaultFilter
+
     // currentPage = 1,
     // pageSize
   } = opts;
@@ -59,7 +62,7 @@ function columnCustom(opts) {
   } = opts;
   return function columnResizeFeature(pipeline) {
     const sizes = opts.sizes ?? pipeline.getStateAtKey(stateKeyResize) ?? opts.defaultSizes ?? [];
-    const filterState = pipeline.getStateAtKey(stateKeyFilter) ?? [];
+    const filterState = pipeline.getStateAtKey(stateKeyFilter) ?? defaultFilter ?? [];
     const visible = pipeline.getStateAtKey(stateKeyVisible) ?? '';
     const isOpenTooltip = pipeline.getStateAtKey(stateKeyTooltip) ?? false;
     const pageSize = opts?.pageSize ?? pipeline.getStateAtKey(stateKey)?.pageSize ?? _hooks.pageSizeOptions[0];
@@ -74,7 +77,7 @@ function columnCustom(opts) {
     // const fieldOriginal = fieldOriginalKey ? columns.find((it) => it.field === fieldOriginalKey) : undefined
 
     // const sorterStates = pipeline.getStateAtKey(stateKeySorter) ?? []
-    const sorterStates = pipeline.getStateAtKey(stateKeySorter) ?? opts.defaultSorts ?? [];
+    const sorterStates = pipeline.getStateAtKey(stateKeySorter) ?? defaultSorter ?? [];
     const activeSorts = sorterStates.filter(s => s.order !== 'none');
     const sorts = mode === 'multiple' ? activeSorts : activeSorts.slice(0, 1);
     const leafColumns = (0, _utils.collectNodes)(pipeline.getColumns(), 'leaf-only');
@@ -126,9 +129,10 @@ function columnCustom(opts) {
     const onVisibleChange = (newVisible, info, column) => {
       if (info.source === 'trigger') {
         if (newVisible) {
-          const filterValue = filterColumnState.filteredKeys ?? [];
+          const defaultFilterOption = defaultFilter?.find(it => it.field === column.field);
+          const filterValue = filterColumnState.filteredKeys === null ? [] : filterColumnState.filteredKeys ?? defaultFilterOption?.filteredKeys ?? [];
           const operator = filterColumnState.operator;
-          const operatorValue = operator ?? (0, _utils2.getDefaultOperator)(column);
+          const operatorValue = operator ?? defaultFilterOption?.operator ?? (0, _utils2.getDefaultOperator)(column);
           pipeline.setStateAtKey(stateKeyColumnFilter, {
             operator: operatorValue,
             filteredKeys: filterValue,
@@ -200,8 +204,20 @@ function columnCustom(opts) {
         // xóa column đang filter trong filterState
 
         const newFilterState = filterState.filter(it => it.field !== filterColumnState.field);
-        pipeline.setStateAtKey(stateKeyColumnFilter, {});
-        pipeline.setStateAtKey(stateKeyFilter, [...newFilterState]);
+        const currentFilter = {
+          field: filterColumnState.field,
+          key: filterColumnState.field,
+          column: filterColumnState.column,
+          filteredKeys: null,
+          operator: filterColumnState.operator ?? undefined
+        };
+        const rs = (0, _hooks.updateArrayByKey)(filterState, currentFilter, 'field');
+        pipeline.setStateAtKey(stateKeyColumnFilter, {
+          ...currentFilter
+        });
+
+        // pipeline.setStateAtKey(stateKeyFilter, [...newFilterState])
+        pipeline.setStateAtKey(stateKeyFilter, rs);
         if (onFilter) {
           onFilter((0, _utils2.convertFilters)([...newFilterState]));
         } else {
@@ -249,7 +265,10 @@ function columnCustom(opts) {
       const {
         order
       } = isSorted && sortMap.get(col.field);
-      const filtered = !!filterState.find(it => it.field === col.field);
+      const find = filterState.find(it => it.field === col.field);
+
+      // const filtered = !!filterState.find((it) => it.field === col.field)
+      const filtered = !!find && find.filteredKeys !== null;
       const getDropdownTrigger = () => {
         let iconFilter;
         if (typeof filterIcon === 'function') {

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

@@ -16,5 +16,6 @@ export interface TreeModeFeatureOptions {
     clickArea?: 'cell' | 'content' | 'icon';
     stopClickEventPropagation?: boolean;
     treeMetaKey?: string | symbol;
+    isTreeArray?: boolean;
 }
 export declare function treeMode(opts?: TreeModeFeatureOptions): (pipeline: TablePipeline) => TablePipeline;

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

@@ -18,6 +18,7 @@ function treeMode(opts = {}) {
     const stateKey = 'treeMode';
     const ctx = pipeline.ctx;
     const expandIconColumnIndex = opts.expandIconColumnIndex ?? 0;
+    const isTreeArray = opts.isTreeArray;
     const primaryKey = pipeline.ensurePrimaryKey('treeMode');
     if (typeof primaryKey !== 'string') {
       throw new Error('treeMode Only strings are supported primaryKey');
@@ -102,6 +103,9 @@ function treeMode(opts = {}) {
         if (record[treeMetaKey] == null) {
           return content;
         }
+        if (!isTreeArray) {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, content);
+        }
         const {
           rowKey,
           depth,
@@ -113,6 +117,7 @@ function treeMode(opts = {}) {
           return /*#__PURE__*/_react.default.createElement(_commonViews.InlineFlexCell, {
             className: "expansion-cell leaf"
           }, /*#__PURE__*/_react.default.createElement("span", {
+            className: "expansion-content",
             style: {
               marginLeft: indent + iconWidth + iconGap
             }
@@ -139,7 +144,9 @@ function treeMode(opts = {}) {
             marginRight: iconGap
           },
           onClick: clickArea === 'icon' ? onClick : undefined
-        }), content);
+        }), /*#__PURE__*/_react.default.createElement("span", {
+          className: "expansion-content"
+        }, content));
       };
       const getCellProps = (value, record, rowIndex) => {
         const prevProps = _internals.internals.safeGetCellProps(firstCol, record, rowIndex);

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

@@ -1,5 +1,5 @@
 import { TreeDataNode } from "antd";
-import type { ColumnTable } from "../../table-component";
+import { ColumnTable } from "../../grid-component";
 export declare function convertColumnsToTreeData(columns: ColumnTable[], groupColumns?: string[], t?: any): TreeDataNode[];
 export declare function filterColumnsByField(columns: ColumnTable[], fieldList: string[]): ColumnTable[];
 export declare function filterVisibleColumns(columns: ColumnTable[]): ColumnTable[];

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

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.convertColumnsToTreeData = convertColumnsToTreeData;
 exports.filterColumnsByField = filterColumnsByField;
 exports.filterVisibleColumns = filterVisibleColumns;
+// import type { ColumnTable } from "../../table-component"
+
 function convertColumnsToTreeData(columns, groupColumns, t) {
   if (!columns) {
     return [];

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { TableProps } from "../table-component";
+import type { TableProps } from "../grid-component";
 declare const TempTable: <RecordType extends object>(props: TableProps<RecordType>) => React.JSX.Element;
 export default TempTable;

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

@@ -219,6 +219,8 @@ export type ColumnTable<RecordType = AnyObject> = {
     /** Custom render method */
     /** Custom method to get cell props */
     getCellProps?: (value: any, row: any, rowIndex: number) => CellProps;
+    /** Props for the header cell */
+    headerCellProps?: CellProps;
     /** Custom method to get cell SpanRect */
     getSpanRect?: (value: any, row: any, rowIndex: number) => SpanRect;
 };
@@ -230,6 +232,7 @@ export type TableProps<RecordType = AnyObject> = {
         backgroundColor?: string;
         color?: string;
     };
+    useOuterBorder?: boolean;
     className?: string;
     title?: ReactNode | ((data: RecordType) => ReactNode);
     fullScreenTitle?: ReactNode | (() => ReactNode);

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

@@ -214,6 +214,7 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     sumGroup?: boolean;
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
+    headerCellProps?: import("./../../grid-component/type").CellProps;
     getSpanRect?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").SpanRect;
 }[];
 export declare function sortColumnsByField<T extends ColumnTable>(columns: T[], priorityFields: string[]): T[];

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

@@ -1,4 +1,2 @@
 import InternalTable from './InternalTable';
-import type { ColumnsTable, TableProps, ColumnTable, ContextMenuItem } from './../grid-component/type';
-export type { ColumnsTable, TableProps, ColumnTable, ContextMenuItem };
 export default InternalTable;

package/lib/table-component/index.js

@@ -6,4 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _InternalTable = _interopRequireDefault(require("./InternalTable"));
+// import type { ColumnsTable, TableProps, ColumnTable, ContextMenuItem} from './../grid-component/type'
+// export type {ColumnsTable, TableProps, ColumnTable, ContextMenuItem}
 var _default = exports.default = _InternalTable.default;

package/package.json

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