es-grid-template 1.9.0 → 1.9.11

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 {
@@ -33,6 +35,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     title,
     showToolbar,
     toolbarItems,
+    toolbarMode,
     pagination,
     infiniteScroll,
     dataSource,
@@ -59,7 +62,8 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     setVisibleKeys,
     footerDataSource,
     loading,
-    useVirtual
+    useVirtual,
+    useOuterBorder = true
 
     // onRowFooterStyles,
     // onRowHeaderStyles
@@ -152,12 +156,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'
@@ -177,7 +182,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     }
   }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
     items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
-    mode: 'scroll'
+    mode: toolbarMode
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',
@@ -237,7 +242,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,9 +42,6 @@ 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]);
   const [mergedSelectedKeys, setMergedSelectedKeys] = (0, _useMergedState.default)(defaultSelectedKeys && defaultSelectedKeys.length ? defaultSelectedKeys : 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);
@@ -256,6 +259,7 @@ export type TableProps<RecordType = AnyObject> = {
     /** Toolbar */
     showToolbar?: boolean;
     toolbarItems?: ToolbarItem[];
+    toolbarMode?: 'scroll';
     showColumnChoose?: boolean;
     onChooseColumns?: (props: IOnChooseColumns) => void;
     fullScreen?: boolean;

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/TableContainer.js

@@ -46,6 +46,7 @@ const TableContainer = props => {
     minHeight,
     showToolbar,
     toolbarItems,
+    toolbarMode,
     actionTemplate,
     pagination,
     fullScreen,
@@ -228,8 +229,10 @@ const TableContainer = props => {
       overflow: 'hidden'
     }
   }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
-    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
-    mode: 'scroll'
+    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom')
+    // mode={'scroll'}
+    ,
+    mode: toolbarMode
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',

package/lib/table-component/TableContainerEdit.js

@@ -97,7 +97,9 @@ const TableContainerEdit = props => {
     onCellChange,
     onDataChange,
     defaultValue,
+    showToolbar,
     toolbarItems,
+    toolbarMode,
     mergedFilterKeys,
     setMergedFilterKeys,
     expanded,
@@ -105,7 +107,6 @@ const TableContainerEdit = props => {
     onBlur,
     fullScreen,
     pagination,
-    showToolbar,
     actionTemplate,
     showColumnChoose,
     height,
@@ -248,6 +249,8 @@ const TableContainerEdit = props => {
   const [isPasting, setIsPasting] = _react.default.useState(false);
   // const [isFullScreen] = React.useState(false);
   const [tableHeight, settableHeight] = _react.default.useState(0);
+  const [topToolbarHeight, setTopToolbarHeight] = _react.default.useState(0);
+  const [bottomToolbarHeight, setBottomToolbarHeight] = _react.default.useState(0);
 
   // const [isAddNewRow, setIsAddNewRow] = React.useState(false)
 
@@ -648,14 +651,48 @@ const TableContainerEdit = props => {
     }
   }, [columnSizingInfo]);
   _react.default.useEffect(() => {
-    // const totalHeight = minHeight ?? height
     const totalHeight = (0, _utils.getTableHeight)(height, minHeight);
     if (totalHeight) {
-      const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0;
-      const bottomHeight = bottomToolbarRef.current ? bottomToolbarRef.current.offsetHeight : 0;
-      settableHeight(totalHeight - topHeight - bottomHeight);
+      // const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0
+      // const bottomHeight = bottomToolbarRef.current ? bottomToolbarRef.current.offsetHeight : 0
+
+      // settableHeight(totalHeight - topHeight - bottomHeight)
+      settableHeight(totalHeight - topToolbarHeight - bottomToolbarHeight);
     }
-  }, [id, height, editAble, minHeight, toolbarItems]);
+  }, [height, minHeight, topToolbarHeight, bottomToolbarHeight]);
+  // }, [height, minHeight])
+
+  _react.default.useEffect(() => {
+    if (!topToolbarRef.current) return;
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      // const { top, bottom } = entry.contentRect;
+      const {
+        clientHeight
+      } = entry.target;
+      setTopToolbarHeight(clientHeight);
+    });
+    observer.observe(topToolbarRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  _react.default.useEffect(() => {
+    if (!bottomToolbarRef.current) return;
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      // const { top, bottom } = entry.contentRect;
+      const {
+        clientHeight
+      } = entry.target;
+      // setBottomToolbarHeight(top + bottom)
+      setBottomToolbarHeight(clientHeight);
+    });
+    observer.observe(bottomToolbarRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
   const {
     control,
     handleSubmit,
@@ -1926,7 +1963,10 @@ const TableContainerEdit = props => {
     id: id
   }, (showToolbar !== false || fullScreen !== false || showColumnChoose || title) && /*#__PURE__*/_react.default.createElement("div", {
     ref: topToolbarRef,
-    className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
+    className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {}),
+    style: {
+      transition: 'max-height 0.3s ease'
+    }
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',
@@ -1947,7 +1987,7 @@ const TableContainerEdit = props => {
       width: '100%'
     },
     items: toolbarItemsTop ?? [],
-    mode: 'scroll',
+    mode: toolbarMode,
     onClick: ({}) => {
       setEditingKey('');
     }
@@ -2088,7 +2128,10 @@ const TableContainerEdit = props => {
     fixedLeftColumns: fixedLeftColumns,
     fixedRightColumns: fixedRightColumns
   }))), /*#__PURE__*/_react.default.createElement("div", {
-    ref: bottomToolbarRef
+    ref: bottomToolbarRef,
+    style: {
+      transition: 'max-height 0.3s ease'
+    }
   }, toolbarItemsBottom && toolbarItemsBottom.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('ui-rc-toolbar-bottom', {
       'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
@@ -2098,7 +2141,9 @@ const TableContainerEdit = props => {
       width: '100%'
     },
     items: toolbarItemsBottom ?? [],
-    mode: 'scroll',
+    mode: toolbarMode
+    // mode={'scroll'}
+    ,
     onClick: ({}) => {
       setEditingKey('');
     }

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

@@ -1103,7 +1103,7 @@ const TableBodyCellEdit = props => {
   };
   const cellValue = cell.getValue();
   const rowIndex = cell.row.index;
-  const fomatedValue = (0, _useColumns.renderValueCell)(columnMeta, cellValue, record, rowIndex, colIndex, format, false);
+  const fomatedValue = (0, _useColumns.renderValueCell)(columnMeta, cellValue, record, rowIndex, colIndex, format, true);
   return /*#__PURE__*/_react.default.createElement("div", {
     key: cell.id,
     ref: el => {

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/lib/table-component/table/Grid.js

@@ -298,7 +298,9 @@ const Grid = props => {
     style: {
       minHeight: minHeight ?? undefined,
       maxHeight: height ?? undefined,
-      backgroundColor: theme?.backgroundColor ?? undefined
+      backgroundColor: theme?.backgroundColor ?? undefined,
+      transition: 'max-height 0.3s ease',
+      overflow: 'hidden'
     }
   }, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
     collisionDetection: _core.closestCenter,

package/lib/table-virtuoso/table/TableContainer.js

@@ -46,6 +46,7 @@ const TableContainer = props => {
     setFilterChange,
     height,
     minHeight,
+    toolbarMode,
     showToolbar,
     toolbarItems,
     actionTemplate,
@@ -189,7 +190,7 @@ const TableContainer = props => {
     }
   }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
     items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
-    mode: 'scroll'
+    mode: toolbarMode
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.0",
+  "version": "1.9.11",
   "description": "es-grid-template",
   "keywords": [
     "react",
@@ -66,7 +66,7 @@
     "rc-checkbox": "^3.5.0",
     "rc-dropdown": "^4.2.1",
     "rc-field-form": "^2.6.0",
-    "rc-master-ui": "1.1.52",
+    "rc-master-ui": "1.1.53",
     "rc-select": "^14.16.3",
     "rc-tooltip": "^6.3.0",
     "rc-tree": "^5.10.1",