es-grid-template 1.9.0 → 1.9.11

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";
@@ -24,6 +25,7 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     title,
     showToolbar,
     toolbarItems,
+    toolbarMode,
     pagination,
     infiniteScroll,
     dataSource,
@@ -50,7 +52,8 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     setVisibleKeys,
     footerDataSource,
     loading,
-    useVirtual
+    useVirtual,
+    useOuterBorder = true
 
     // onRowFooterStyles,
     // onRowHeaderStyles
@@ -143,12 +146,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'
@@ -168,7 +172,7 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   }, /*#__PURE__*/React.createElement(Toolbar, {
     items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
-    mode: 'scroll'
+    mode: toolbarMode
   })), /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
@@ -228,7 +232,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,9 +33,6 @@ 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]);
   const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(defaultSelectedKeys && defaultSelectedKeys.length ? defaultSelectedKeys : 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);
@@ -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/es/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/es/table-component/TableContainer.js

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

package/es/table-component/TableContainerEdit.js

@@ -90,7 +90,9 @@ const TableContainerEdit = props => {
     onCellChange,
     onDataChange,
     defaultValue,
+    showToolbar,
     toolbarItems,
+    toolbarMode,
     mergedFilterKeys,
     setMergedFilterKeys,
     expanded,
@@ -98,7 +100,6 @@ const TableContainerEdit = props => {
     onBlur,
     fullScreen,
     pagination,
-    showToolbar,
     actionTemplate,
     showColumnChoose,
     height,
@@ -241,6 +242,8 @@ const TableContainerEdit = props => {
   const [isPasting, setIsPasting] = React.useState(false);
   // const [isFullScreen] = React.useState(false);
   const [tableHeight, settableHeight] = React.useState(0);
+  const [topToolbarHeight, setTopToolbarHeight] = React.useState(0);
+  const [bottomToolbarHeight, setBottomToolbarHeight] = React.useState(0);
 
   // const [isAddNewRow, setIsAddNewRow] = React.useState(false)
 
@@ -641,14 +644,48 @@ const TableContainerEdit = props => {
     }
   }, [columnSizingInfo]);
   React.useEffect(() => {
-    // const totalHeight = minHeight ?? height
     const totalHeight = 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.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.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,
@@ -1919,7 +1956,10 @@ const TableContainerEdit = props => {
     id: id
   }, (showToolbar !== false || fullScreen !== false || showColumnChoose || title) && /*#__PURE__*/React.createElement("div", {
     ref: topToolbarRef,
-    className: classNames(`${prefix}-grid-top-toolbar`, {})
+    className: classNames(`${prefix}-grid-top-toolbar`, {}),
+    style: {
+      transition: 'max-height 0.3s ease'
+    }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
@@ -1940,7 +1980,7 @@ const TableContainerEdit = props => {
       width: '100%'
     },
     items: toolbarItemsTop ?? [],
-    mode: 'scroll',
+    mode: toolbarMode,
     onClick: ({}) => {
       setEditingKey('');
     }
@@ -2081,7 +2121,10 @@ const TableContainerEdit = props => {
     fixedLeftColumns: fixedLeftColumns,
     fixedRightColumns: fixedRightColumns
   }))), /*#__PURE__*/React.createElement("div", {
-    ref: bottomToolbarRef
+    ref: bottomToolbarRef,
+    style: {
+      transition: 'max-height 0.3s ease'
+    }
   }, toolbarItemsBottom && toolbarItemsBottom.length > 0 && /*#__PURE__*/React.createElement("div", {
     className: classNames('ui-rc-toolbar-bottom', {
       'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
@@ -2091,7 +2134,9 @@ const TableContainerEdit = props => {
       width: '100%'
     },
     items: toolbarItemsBottom ?? [],
-    mode: 'scroll',
+    mode: toolbarMode
+    // mode={'scroll'}
+    ,
     onClick: ({}) => {
       setEditingKey('');
     }

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

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

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

@@ -293,7 +293,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.createElement(DndContext, {
     collisionDetection: closestCenter,

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

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

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>>;