es-grid-template 1.9.102 → 1.9.104

package/es/ali-table/Grid.js

@@ -5,7 +5,7 @@ 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 Toolbar from "../grid-component/GridToolbar";
 import classNames from "classnames";
 import Pagination from "rc-master-ui/es/pagination";
 import { Maximize, Minimize } from "becoxy-icons";

package/es/ali-table/base-table/cell/EditCell.js

@@ -626,8 +626,9 @@ const EditCell = props => {
           } : filterOption,
           optionRender: column.editSelectSettings?.formatOptionLabel,
           fieldNames: {
-            value: keySelect,
-            label: inputKey ?? 'label'
+            ...fieldNames,
+            value: fieldNames?.value ?? keySelect,
+            label: fieldNames?.label ?? inputKey ?? 'label'
           },
           onBlur: event => {
             if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {

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

@@ -622,8 +622,9 @@ const HeaderEditCell = props => {
           } : filterOption,
           optionRender: column.editSelectSettings?.formatOptionLabel,
           fieldNames: {
-            value: keySelect,
-            label: inputKey ?? 'label'
+            ...fieldNames,
+            value: fieldNames?.value ?? keySelect,
+            label: fieldNames?.label ?? inputKey ?? 'label'
           },
           onBlur: event => {
             if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {

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

@@ -282,7 +282,7 @@ export const renderFilter = args => {
         }
         // placeholder={t ? t('Search') : `Search`}
         ,
-        placeholder: tableLocal?.search ?? `Search`
+        placeholder: t ? t('Search') : tableLocal?.search || 'Search'
 
         // value={selectedKeys[0]}
         ,

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { Toolbar } from 'rc-master-ui';
+export default function GridToolbar({ items, ...props }: React.ComponentProps<typeof Toolbar>): JSX.Element;

package/es/grid-component/GridToolbar.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { Toolbar } from 'rc-master-ui';
+export default function GridToolbar({
+  items,
+  ...props
+}) {
+  const visibleItems = items.filter(item => item.visible !== false);
+  const layoutKey = JSON.stringify(visibleItems.map(item => [item.key ?? item.value, item.align ?? 'left']));
+
+  // rc-master-ui leaves old alignment classes on reused items when the layout changes.
+  return /*#__PURE__*/React.createElement(Toolbar, _extends({}, props, {
+    key: layoutKey,
+    items: visibleItems
+  }));
+}

package/es/group-component/ColumnsGroup/ColumnsGroup.js

@@ -101,7 +101,7 @@ export const ColumnsGroup = props => {
       }
     }, /*#__PURE__*/React.createElement("p", {
       className: 'fw-bold'
-    }, "Nh\xF3m d\u1EEF li\u1EC7u theo c\u1ED9t"), /*#__PURE__*/React.createElement("div", {
+    }, t ? t('Group data by column') : 'Group data by column'), /*#__PURE__*/React.createElement("div", {
       className: 'mb-1',
       style: {
         marginBottom: '1rem'

package/es/group-component/TableContainerEdit.js

@@ -11,7 +11,8 @@ import Pagination from "rc-master-ui/es/pagination";
 import { numericFormatter, removeNumericFormat } from "react-numeric-component";
 import { TableContext } from "./useContext";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Dropdown, Toolbar, Modal, Typography } from "rc-master-ui";
+import { Dropdown, Modal, Typography } from "rc-master-ui";
+import Toolbar from "../grid-component/GridToolbar";
 import classNames from "classnames";
 import { Collapse2, Expand2, Maximize, Minimize } from "becoxy-icons";
 // import { ColumnsChoose } from "./ColumnsChoose";

package/es/group-component/body/EditableCell.js

@@ -622,8 +622,9 @@ const EditableCell = props => {
           } : filterOption,
           optionRender: column.editSelectSettings?.formatOptionLabel,
           fieldNames: {
-            value: keySelect,
-            label: inputKey ?? 'label'
+            ...fieldNames,
+            value: fieldNames?.value ?? keySelect,
+            label: fieldNames?.label ?? inputKey ?? 'label'
           },
           onBlur: event => {
             if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {

package/es/group-component/header/TableHeadCell.js

@@ -99,7 +99,9 @@ const TableHeadCell = props => {
     if (type) {
       header.column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
     } else {
+      const defaultOp = getDefaultOperator(originalColumn) ?? 'contains';
       header.column.setFilterValue(undefined);
+      header.column.setFilterOperator?.(defaultOp);
       setSelectedKeys([]);
     }
     setFilterChange(true);
@@ -154,9 +156,10 @@ const TableHeadCell = props => {
         column: column,
         selectedKeys,
         setSelectedKeys,
-        tableLocal: undefined
-        // selectedKeys: (header.column.getFilterValue() ?? []) as string[],
-        // setSelectedKeys: header.column.setFilterValue,
+        tableLocal: undefined,
+        t,
+        locale,
+        doFilter
       })), /*#__PURE__*/React.createElement(Space, {
         style: {
           justifyContent: 'end',
@@ -177,9 +180,8 @@ const TableHeadCell = props => {
         type: "link",
         size: "small",
         onClick: () => {
-          // header.column.setFilterValue([])
-          // header.column.setFilterOperator('')
-
+          const defaultOp = getDefaultOperator(originalColumn) ?? 'contains';
+          header.column.setFilterOperator?.(defaultOp);
           setSelectedKeys([]);
           doFilter(false);
         }

package/es/group-component/header/TableHeadCell2.js

@@ -100,7 +100,9 @@ const TableHeadCell2 = props => {
     if (type) {
       column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
     } else {
+      const defaultOp = getDefaultOperator(originalColumn) ?? 'contains';
       column.setFilterValue(undefined);
+      column.setFilterOperator?.(defaultOp);
       setSelectedKeys([]);
     }
     setFilterChange(true);
@@ -158,7 +160,9 @@ const TableHeadCell2 = props => {
         doFilter,
         format,
         dataSourceFilter,
-        tableLocal
+        tableLocal,
+        t,
+        locale
       })), /*#__PURE__*/React.createElement(Space, {
         style: {
           justifyContent: 'end',
@@ -179,9 +183,8 @@ const TableHeadCell2 = props => {
         type: "link",
         size: "small",
         onClick: () => {
-          // column.setFilterValue([])
-          // column.setFilterOperator('')
-
+          const defaultOp = getDefaultOperator(originalColumn) ?? 'contains';
+          column.setFilterOperator?.(defaultOp);
           setSelectedKeys([]);
           doFilter(false);
         }

package/es/group-component/header/renderFilter.js

@@ -272,7 +272,7 @@ export const renderFilter = args => {
         }
         // placeholder={t ? t('Search') : `Search`}
         ,
-        placeholder: tableLocal?.search ?? `Search`,
+        placeholder: t ? t('Search') : tableLocal?.search || 'Search',
         value: selectedKeys[0],
         onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : [])
         // onPressEnter={() => handleSearch(selectedKeys as string[], confirm)}

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

@@ -196,10 +196,10 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
         value: any;
         rowData: RecordType;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    onCellStyles?: Omit<CSSProperties, "right" | "left" | "width" | "display" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "width" | "display" | "minWidth" | "position">);
-    onCellHeaderStyles?: Omit<CSSProperties, "right" | "left" | "width" | "display" | "minWidth" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "width" | "display" | "minWidth" | "position">);
+    onCellStyles?: Omit<CSSProperties, "width" | "display" | "right" | "left" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "display" | "right" | "left" | "minWidth" | "position">);
+    onCellHeaderStyles?: Omit<CSSProperties, "width" | "display" | "right" | "left" | "minWidth" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "display" | "right" | "left" | "minWidth" | "position">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "right" | "left" | "width" | "display" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "width" | "display" | "minWidth" | "position">);
+    onCellFooterStyles?: Omit<CSSProperties, "width" | "display" | "right" | "left" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "display" | "right" | "left" | "minWidth" | "position">);
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
     headerCellProps?: import("./../../grid-component/type").CellProps;

package/es/table-component/TableContainerEdit.js

@@ -20,7 +20,7 @@ import Pagination from "rc-master-ui/es/pagination";
 import { numericFormatter, removeNumericFormat } from "react-numeric-component";
 import { TableContext } from "./useContext";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Toolbar } from "rc-master-ui";
+import Toolbar from "../grid-component/GridToolbar";
 import classNames from "classnames";
 import { Maximize, Minimize } from "becoxy-icons";
 import TableWrapper from "./table/TableWrapper";

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

@@ -625,8 +625,9 @@ const EditableCell = props => {
           } : filterOption,
           optionRender: column.editSelectSettings?.formatOptionLabel,
           fieldNames: {
-            value: keySelect,
-            label: inputKey ?? 'label'
+            ...fieldNames,
+            value: fieldNames?.value ?? keySelect,
+            label: fieldNames?.label ?? inputKey ?? 'label'
           },
           onBlur: event => {
             if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {

package/es/table-component/header/TableHeadCell.js

@@ -105,7 +105,9 @@ const TableHeadCell = props => {
       const filterValue = isEmptyOperator ? [''] : !originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys;
       header.column.setFilterValue(filterValue);
     } else {
+      const defaultOp = getDefaultOperator(originalColumn) ?? 'contains';
       header.column.setFilterValue(undefined);
+      header.column.setFilterOperator?.(defaultOp);
       setSelectedKeys([]);
     }
     setFilterChange(true);
@@ -164,7 +166,10 @@ const TableHeadCell = props => {
         column: column,
         selectedKeys,
         setSelectedKeys,
-        tableLocal: undefined
+        tableLocal: undefined,
+        t,
+        locale,
+        doFilter
       })), /*#__PURE__*/React.createElement(Space, {
         style: {
           justifyContent: 'end',
@@ -185,9 +190,8 @@ const TableHeadCell = props => {
         type: "link",
         size: "small",
         onClick: () => {
-          // header.column.setFilterValue([])
-          // header.column.setFilterOperator('')
-
+          const defaultOp = getDefaultOperator(originalColumn) ?? 'contains';
+          header.column.setFilterOperator?.(defaultOp);
           setSelectedKeys([]);
           doFilter(false);
         }

package/es/table-component/header/TableHeadCell2.js

@@ -135,11 +135,11 @@ const TableHeadCell2 = props => {
 
       // column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? (selectedKeys.length === 0 ? [''] : selectedKeys) : selectedKeys)
     } else {
-      if (fieldOriginal) {
-        fieldOriginal.setFilterValue(undefined);
-      } else {
-        column.setFilterValue(undefined);
-      }
+      const filterCol = fieldOriginal ?? column;
+      const defaultFilterOption = defaultFilter?.find(it => it.field === originalColumn.field);
+      const defaultOp = defaultFilterOption?.operator ?? getDefaultOperator(originalColumn) ?? 'contains';
+      filterCol.setFilterValue(undefined);
+      filterCol.setFilterOperator?.(defaultOp);
       setSelectedKeys([]);
     }
     setFilterChange(true);
@@ -231,9 +231,10 @@ const TableHeadCell2 = props => {
         type: "link",
         size: "small",
         onClick: () => {
-          // column.setFilterValue([])
-          // column.setFilterOperator('')
-
+          const filterCol = fieldOriginal ?? column;
+          const defaultFilterOption = defaultFilter?.find(it => it.field === originalColumn.field);
+          const defaultOp = defaultFilterOption?.operator ?? getDefaultOperator(originalColumn) ?? 'contains';
+          filterCol.setFilterOperator?.(defaultOp);
           setSelectedKeys([]);
           doFilter(false);
         }

package/es/table-component/header/renderFilter.js

@@ -314,7 +314,7 @@ export const renderFilter = args => {
         }
         // placeholder={t ? t('Search') : `Search`}
         ,
-        placeholder: tableLocal?.search ?? `Search`,
+        placeholder: t ? t('Search') : tableLocal?.search || 'Search',
         value: selectedKeys[0],
         onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : [])
         // onPressEnter={() => handleSearch(selectedKeys as string[], confirm)}

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

@@ -108,7 +108,7 @@ export const ColumnsGroup = props => {
       }
     }, /*#__PURE__*/React.createElement("p", {
       className: 'fw-bold'
-    }, "Nh\xF3m d\u1EEF li\u1EC7u theo c\u1ED9t"), /*#__PURE__*/React.createElement("div", {
+    }, t ? t('Group data by column') : 'Group data by column'), /*#__PURE__*/React.createElement("div", {
       className: 'mb-1',
       style: {
         marginBottom: '1rem'
@@ -225,6 +225,6 @@ export const ColumnsGroup = props => {
       cursor: 'pointer'
     },
     "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-content": t ? t('Group data') : 'Nhóm dữ liệu'
+    "data-tooltip-content": t ? t('Group data') : 'Group data'
   })));
 };

package/es/table-virtuoso/body/TableBodyRow.js

@@ -62,7 +62,9 @@ const TableBodyRow = ({
     onMouseLeave: handleMouseLeave,
     style: {
       ...rowStyles,
-      height: rowheight
+      ...(rowheight !== undefined && rowheight !== null ? {
+        height: rowheight
+      } : {})
     }
   }, getRowFocusHandlers(row.original, rowFocus), {
     onDoubleClick: e => {

package/es/table-virtuoso/header/TableHeadCell.js

@@ -101,7 +101,13 @@ const TableHeadCell = props => {
       header.column.setFilterValue(nextFilterValue);
       header.column.setFilterOperator?.(currentFilter.ope);
     } else {
+      const defaultOp = getDefaultOperator(column?.meta ?? {}) ?? 'contains';
       header.column.setFilterValue(undefined);
+      header.column.setFilterOperator?.(defaultOp);
+      setCurrentFilter(prev => ({
+        ...prev,
+        ope: defaultOp
+      }));
       setSelectedKeys([]);
     }
     setFilterChange(true);
@@ -120,6 +126,17 @@ const TableHeadCell = props => {
     // onOpenChange: onVisibleChange,
 
     destroyPopupOnHide: true,
+    onOpenChange: open => {
+      if (open) {
+        const currentOp = header.column.getFilterOperator() ?? getDefaultOperator(column?.meta ?? {});
+        const currentVal = header.column.getFilterValue() ?? [];
+        setCurrentFilter(prev => ({
+          ...prev,
+          ope: currentOp
+        }));
+        setSelectedKeys(['empty', 'notempty'].includes(currentOp) ? [] : currentVal);
+      }
+    },
     dropdownRender: () => {
       const type = getTypeFilter(originalColumn);
       const hideFilterInput = ['empty', 'notempty'].includes(currentFilter.ope);
@@ -164,7 +181,10 @@ const TableHeadCell = props => {
       }, renderFilter({
         column: column,
         selectedKeys,
-        setSelectedKeys
+        setSelectedKeys,
+        t,
+        locale,
+        doFilter
       })), /*#__PURE__*/React.createElement(Space, {
         style: {
           justifyContent: 'end',
@@ -183,6 +203,12 @@ const TableHeadCell = props => {
         type: "link",
         size: "small",
         onClick: () => {
+          const defaultOp = getDefaultOperator(column?.meta ?? {}) ?? 'contains';
+          setCurrentFilter(prev => ({
+            ...prev,
+            ope: defaultOp
+          }));
+          header.column.setFilterOperator?.(defaultOp);
           setSelectedKeys([]);
           doFilter(false);
         }

package/es/table-virtuoso/header/renderFilter.js

@@ -273,7 +273,7 @@ export const renderFilter = args => {
         classNames: {
           input: 'filter-input'
         },
-        placeholder: t ? t('Search') : `Search`,
+        placeholder: t ? t('Search') : 'Search',
         value: selectedKeys[0],
         onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : [])
         // onPressEnter={() => handleSearch(selectedKeys as string[], confirm)}

package/es/table-virtuoso/style.js

@@ -11,4 +11,4 @@ const colorDark = '#e6e4f3e6';
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-rs980s-0"
-})(["&.", "-grid{color:", ";font-size:12px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";.", "-grid-thead{&:has(.resizer.isResizing){.", "-grid-cell{touch-action:none;user-select:none;}}.", "-grid-cell{background-color:#ffffff;&:has(.resizer.isResizing){touch-action:none;user-select:none;}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}}}tbody{.", "-grid-row{font-weight:500;&.", "-grid-row-parent{.", "-grid-cell{font-weight:700;background-color:#f5f5f5;}}}}.", "-grid-tfoot{z-index:3 !important;.ui-rc-grid-footer-row{.ui-rc-grid-cell{border-top:1px solid ", ";border-bottom:1px solid ", ";font-weight:500;}}}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-fix-left-last{.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&::after{position:absolute;top:0;right:0;bottom:-1px;width:30px;transform:translateX(100%);transition:box-shadow 0.3s;content:'';pointer-events:none;box-shadow:inset 10px 0 8px -8px rgba(5,5,5,0.09);}}&.", "-grid-cell-fix-right-first{.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&::after{position:absolute;top:0;bottom:-1px;left:0;width:30px;transform:translateX(-100%);transition:box-shadow 0.3s;content:'';pointer-events:none;box-shadow:inset -10px 0 8px -8px rgba(5,5,5,0.09);}&::before{content:'';position:absolute;inset-block:0;inset-inline-start:-1px;border-inline-start:1px solid #e0e0e0;}}&.", "-grid-cell-ellipsis{.group-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}.class-content:has(*){background:lightblue;}.class-content:not(:has(*)){background:lightgreen;}&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-righ{text-align:right;justify-content:flex-end;}}.", "-grid-cell:not(:has(*)){&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{text-align:right;justify-content:flex-end;}&.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{z-index:3 !important;background-color:", ";font-weight:600;.", "-grid-cell{font-weight:inherit;color:", ";background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";}}tbody{background-color:", ";color:", ";.", "-grid-row{&.ui-rc-grid-row-selected{.", "-grid-cell{background-color:", ";}}}.", "-grid-cell{outline:none;background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-selected{background-color:", " !important;}&.disable{background-color:#f0f0f0;}&.cell-editable{user-select:none;&.cell-border-top{&::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-bottom{border-bottom:1px solid ", ";}&.cell-border-left{&::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-right{border-inline-end:1px solid ", ";}&.cell-paste-border-top{&::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px dashed #949494;pointer-events:none;z-index:1;}&.ui-rc-grid-cell-fix-left-last{&::after{left:-100%;}}&.ui-rc-grid-cell-fix-right-first{&::after{left:100%;}}}&.cell-paste-border-bottom{border-bottom:1px dashed #949494;}&.cell-paste-border-left{&::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px dashed #949494;pointer-events:none;z-index:1;}}&.cell-paste-border-right{border-inline-end:1px dashed #949494;}.dragging-point{width:6px;height:6px;position:absolute;cursor:crosshair;right:0px;bottom:0px;&.hidden{display:none;}.dot-point{position:absolute;width:6px;height:6px;border-radius:0px;background-color:", ";bottom:0;right:0;}}}&.cell-editing{padding:0;&:focus-visible{outline:none;}.ant-form-item,.ant-row.ant-form-item-row,.ant-col.ant-form-item-control,.ant-form-item-control-input,.ant-form-item-control-input-content,.ant-input{height:100% !important;&:focus-visible{outline:none;}}textarea.ant-input{line-height:1.8;height:36px !important;min-height:36px !important;}input.be-cell-editing,.ant-picker,.ui-rc-select-selector,.ui-rc-table-select-selector{padding-inline:7px;}.", "-checkbox-wrapper{.", "-checkbox{background-color:red;}.", "-checkbox-input{&:focus-visible{outline:none;}}}.ant-input,.ant-picker{border-radius:0;}.ant-color-picker-trigger{height:100%;border-radius:0;.ant-color-picker-color-block{height:100%;width:100%;}}.", "-table-select-single .", "-table-select-selector,.", "-select-single .", "-select-selector,.ui-rc-table-select-selector{border-radius:0 !important;}.", "-table-select-single:not(.", "-table-select-customize-input){.", "-table-select-selector{.", "-table-select-selection-search-input{height:auto;}}}}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, rowSelectedBg, props => props.$prefix, tableBorderColor, tableBorderColor, cellSelectedBg, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:12px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";[data-virtuoso-scroller='true']{overscroll-behavior:none;overflow-anchor:none;}.", "-grid-thead{&:has(.resizer.isResizing){.", "-grid-cell{touch-action:none;user-select:none;}}.", "-grid-cell{background-color:#ffffff;&:has(.resizer.isResizing){touch-action:none;user-select:none;}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}}}tbody{.", "-grid-row{font-weight:500;&.", "-grid-row-parent{.", "-grid-cell{font-weight:700;background-color:#f5f5f5;}}}}.", "-grid-tfoot{z-index:3 !important;.ui-rc-grid-footer-row{.ui-rc-grid-cell{border-top:1px solid ", ";border-bottom:1px solid ", ";font-weight:500;}}}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-fix-left-last{.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&::after{position:absolute;top:0;right:0;bottom:-1px;width:30px;transform:translateX(100%);transition:box-shadow 0.3s;content:'';pointer-events:none;box-shadow:inset 10px 0 8px -8px rgba(5,5,5,0.09);}}&.", "-grid-cell-fix-right-first{.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&::after{position:absolute;top:0;bottom:-1px;left:0;width:30px;transform:translateX(-100%);transition:box-shadow 0.3s;content:'';pointer-events:none;box-shadow:inset -10px 0 8px -8px rgba(5,5,5,0.09);}&::before{content:'';position:absolute;inset-block:0;inset-inline-start:-1px;border-inline-start:1px solid #e0e0e0;}}&.", "-grid-cell-ellipsis{.group-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}.class-content:has(*){background:lightblue;}.class-content:not(:has(*)){background:lightgreen;}&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-righ{text-align:right;justify-content:flex-end;}}.", "-grid-cell:not(:has(*)){&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{text-align:right;justify-content:flex-end;}&.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{z-index:3 !important;background-color:", ";font-weight:600;.", "-grid-cell{font-weight:inherit;color:", ";background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;line-height:1.4;}&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";}}tbody{background-color:", ";color:", ";.", "-grid-row{&.ui-rc-grid-row-selected{.", "-grid-cell{background-color:", ";}}}.", "-grid-cell{outline:none;background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;line-height:1.4;}&.ui-rc-grid-cell-selected{background-color:", " !important;}&.disable{background-color:#f0f0f0;}&.cell-editable{user-select:none;&.cell-border-top{&::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-bottom{border-bottom:1px solid ", ";}&.cell-border-left{&::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-right{border-inline-end:1px solid ", ";}&.cell-paste-border-top{&::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px dashed #949494;pointer-events:none;z-index:1;}&.ui-rc-grid-cell-fix-left-last{&::after{left:-100%;}}&.ui-rc-grid-cell-fix-right-first{&::after{left:100%;}}}&.cell-paste-border-bottom{border-bottom:1px dashed #949494;}&.cell-paste-border-left{&::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px dashed #949494;pointer-events:none;z-index:1;}}&.cell-paste-border-right{border-inline-end:1px dashed #949494;}.dragging-point{width:6px;height:6px;position:absolute;cursor:crosshair;right:0px;bottom:0px;&.hidden{display:none;}.dot-point{position:absolute;width:6px;height:6px;border-radius:0px;background-color:", ";bottom:0;right:0;}}}&.cell-editing{padding:0;&:focus-visible{outline:none;}.ant-form-item,.ant-row.ant-form-item-row,.ant-col.ant-form-item-control,.ant-form-item-control-input,.ant-form-item-control-input-content,.ant-input{height:100% !important;&:focus-visible{outline:none;}}textarea.ant-input{line-height:1.8;height:36px !important;min-height:36px !important;}input.be-cell-editing,.ant-picker,.ui-rc-select-selector,.ui-rc-table-select-selector{padding-inline:7px;}.", "-checkbox-wrapper{.", "-checkbox{background-color:red;}.", "-checkbox-input{&:focus-visible{outline:none;}}}.ant-input,.ant-picker{border-radius:0;}.ant-color-picker-trigger{height:100%;border-radius:0;.ant-color-picker-color-block{height:100%;width:100%;}}.", "-table-select-single .", "-table-select-selector,.", "-select-single .", "-select-selector,.ui-rc-table-select-selector{border-radius:0 !important;}.", "-table-select-single:not(.", "-table-select-customize-input){.", "-table-select-selector{.", "-table-select-selection-search-input{height:auto;}}}}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, rowSelectedBg, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, cellSelectedBg, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

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

@@ -133,9 +133,12 @@ const TableWrapper = props => {
   }, /*#__PURE__*/React.createElement(TableVirtuoso, _extends({
     ref: virtuosoRef,
     data: table.getRowModel().rows,
-    totalCount: rows.length
+    totalCount: rows.length,
+    computeItemKey: (_index, row) => row?.id ?? _index,
+    style: {
+      height: '100%'
+    }
   }, onVisibleRowsChange ? {
-    computeItemKey: (_index, row) => row.id,
     rangeChanged: ({
       startIndex,
       endIndex
@@ -189,7 +192,6 @@ const TableWrapper = props => {
           ...rest
         } = props;
         const index = props["data-index"];
-        const rowheight = props["data-known-size"];
         const row = rows[index];
         const isEditing = row.id === editingKey;
         const isRowEditable = rowEditable ? rowEditable(row.original) : true;
@@ -199,7 +201,7 @@ const TableWrapper = props => {
           scrollToRow: scrollToRow,
           table: table,
           commandClick: commandClick,
-          rowheight: editAble ? 37 : rowheight,
+          rowheight: editAble ? 37 : undefined,
           isEditing: isEditing,
           isRowEditable: isRowEditable,
           editAble: editAble,

package/lib/ali-table/Grid.js

@@ -11,7 +11,7 @@ var _locale = require("rc-master-ui/es/locale");
 var _react = _interopRequireWildcard(require("react"));
 var _reactTooltip = require("react-tooltip");
 require("./base-table/styles.scss");
-var _rcMasterUi = require("rc-master-ui");
+var _GridToolbar = _interopRequireDefault(require("../grid-component/GridToolbar"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _pagination = _interopRequireDefault(require("rc-master-ui/es/pagination"));
 var _becoxyIcons = require("becoxy-icons");
@@ -246,7 +246,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     className: (0, _classnames.default)('ui-rc-toolbar-bottom border-0', {
       'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
     })
-  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+  }, /*#__PURE__*/_react.default.createElement(_GridToolbar.default, {
     style: {
       width: '100%'
     },
@@ -276,7 +276,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       flex: 1,
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+  }, /*#__PURE__*/_react.default.createElement(_GridToolbar.default, {
     items: toolbarItemTopRight,
     mode: toolbarMode
   })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
@@ -394,7 +394,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     className: (0, _classnames.default)('ui-rc-toolbar-bottom', {
       'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
     })
-  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+  }, /*#__PURE__*/_react.default.createElement(_GridToolbar.default, {
     style: {
       width: '100%'
     },

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

@@ -633,8 +633,9 @@ const EditCell = props => {
           } : filterOption,
           optionRender: column.editSelectSettings?.formatOptionLabel,
           fieldNames: {
-            value: keySelect,
-            label: inputKey ?? 'label'
+            ...fieldNames,
+            value: fieldNames?.value ?? keySelect,
+            label: fieldNames?.label ?? inputKey ?? 'label'
           },
           onBlur: event => {
             if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {

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

@@ -629,8 +629,9 @@ const HeaderEditCell = props => {
           } : filterOption,
           optionRender: column.editSelectSettings?.formatOptionLabel,
           fieldNames: {
-            value: keySelect,
-            label: inputKey ?? 'label'
+            ...fieldNames,
+            value: fieldNames?.value ?? keySelect,
+            label: fieldNames?.label ?? inputKey ?? 'label'
           },
           onBlur: event => {
             if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {

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

@@ -291,7 +291,7 @@ const renderFilter = args => {
         }
         // placeholder={t ? t('Search') : `Search`}
         ,
-        placeholder: tableLocal?.search ?? `Search`
+        placeholder: t ? t('Search') : tableLocal?.search || 'Search'
 
         // value={selectedKeys[0]}
         ,

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { Toolbar } from 'rc-master-ui';
+export default function GridToolbar({ items, ...props }: React.ComponentProps<typeof Toolbar>): JSX.Element;

package/lib/grid-component/GridToolbar.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = GridToolbar;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _rcMasterUi = require("rc-master-ui");
+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; }
+function GridToolbar({
+  items,
+  ...props
+}) {
+  const visibleItems = items.filter(item => item.visible !== false);
+  const layoutKey = JSON.stringify(visibleItems.map(item => [item.key ?? item.value, item.align ?? 'left']));
+
+  // rc-master-ui leaves old alignment classes on reused items when the layout changes.
+  return /*#__PURE__*/React.createElement(_rcMasterUi.Toolbar, (0, _extends2.default)({}, props, {
+    key: layoutKey,
+    items: visibleItems
+  }));
+}

package/lib/group-component/ColumnsGroup/ColumnsGroup.js

@@ -110,7 +110,7 @@ const ColumnsGroup = props => {
       }
     }, /*#__PURE__*/_react.default.createElement("p", {
       className: 'fw-bold'
-    }, "Nh\xF3m d\u1EEF li\u1EC7u theo c\u1ED9t"), /*#__PURE__*/_react.default.createElement("div", {
+    }, t ? t('Group data by column') : 'Group data by column'), /*#__PURE__*/_react.default.createElement("div", {
       className: 'mb-1',
       style: {
         marginBottom: '1rem'

package/lib/group-component/TableContainerEdit.js

@@ -17,6 +17,7 @@ var _reactNumericComponent = require("react-numeric-component");
 var _useContext = require("./useContext");
 var _yup = require("@hookform/resolvers/yup");
 var _rcMasterUi = require("rc-master-ui");
+var _GridToolbar = _interopRequireDefault(require("../grid-component/GridToolbar"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _becoxyIcons = require("becoxy-icons");
 var _TableWrapper = _interopRequireDefault(require("./table/TableWrapper"));
@@ -2142,7 +2143,7 @@ const TableContainerEdit = props => {
       flex: 1,
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+  }, /*#__PURE__*/_react.default.createElement(_GridToolbar.default, {
     items: toolbarItemsTop ?? [],
     mode: 'scroll'
   })), /*#__PURE__*/_react.default.createElement("div", {
@@ -2165,7 +2166,7 @@ const TableContainerEdit = props => {
       flex: 1,
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+  }, /*#__PURE__*/_react.default.createElement(_GridToolbar.default, {
     items: toolbarItemTopRight,
     mode: 'responsive'
   })), /*#__PURE__*/_react.default.createElement(_GridRefreshButton.default, {
@@ -2303,7 +2304,7 @@ const TableContainerEdit = props => {
     //   borderRight: '1px solid #e0e0e0',
     //   borderLeft: '1px solid #e0e0e0'
     // }}
-  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+  }, /*#__PURE__*/_react.default.createElement(_GridToolbar.default, {
     style: {
       width: '100%'
     },

package/lib/group-component/body/EditableCell.js

@@ -629,8 +629,9 @@ const EditableCell = props => {
           } : filterOption,
           optionRender: column.editSelectSettings?.formatOptionLabel,
           fieldNames: {
-            value: keySelect,
-            label: inputKey ?? 'label'
+            ...fieldNames,
+            value: fieldNames?.value ?? keySelect,
+            label: fieldNames?.label ?? inputKey ?? 'label'
           },
           onBlur: event => {
             if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {

package/lib/group-component/header/TableHeadCell.js

@@ -108,7 +108,9 @@ const TableHeadCell = props => {
     if (type) {
       header.column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
     } else {
+      const defaultOp = (0, _utils.getDefaultOperator)(originalColumn) ?? 'contains';
       header.column.setFilterValue(undefined);
+      header.column.setFilterOperator?.(defaultOp);
       setSelectedKeys([]);
     }
     setFilterChange(true);
@@ -163,9 +165,10 @@ const TableHeadCell = props => {
         column: column,
         selectedKeys,
         setSelectedKeys,
-        tableLocal: undefined
-        // selectedKeys: (header.column.getFilterValue() ?? []) as string[],
-        // setSelectedKeys: header.column.setFilterValue,
+        tableLocal: undefined,
+        t,
+        locale,
+        doFilter
       })), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Space, {
         style: {
           justifyContent: 'end',
@@ -186,9 +189,8 @@ const TableHeadCell = props => {
         type: "link",
         size: "small",
         onClick: () => {
-          // header.column.setFilterValue([])
-          // header.column.setFilterOperator('')
-
+          const defaultOp = (0, _utils.getDefaultOperator)(originalColumn) ?? 'contains';
+          header.column.setFilterOperator?.(defaultOp);
           setSelectedKeys([]);
           doFilter(false);
         }

package/lib/group-component/header/TableHeadCell2.js

@@ -109,7 +109,9 @@ const TableHeadCell2 = props => {
     if (type) {
       column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
     } else {
+      const defaultOp = (0, _utils.getDefaultOperator)(originalColumn) ?? 'contains';
       column.setFilterValue(undefined);
+      column.setFilterOperator?.(defaultOp);
       setSelectedKeys([]);
     }
     setFilterChange(true);
@@ -167,7 +169,9 @@ const TableHeadCell2 = props => {
         doFilter,
         format,
         dataSourceFilter,
-        tableLocal
+        tableLocal,
+        t,
+        locale
       })), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Space, {
         style: {
           justifyContent: 'end',
@@ -188,9 +192,8 @@ const TableHeadCell2 = props => {
         type: "link",
         size: "small",
         onClick: () => {
-          // column.setFilterValue([])
-          // column.setFilterOperator('')
-
+          const defaultOp = (0, _utils.getDefaultOperator)(originalColumn) ?? 'contains';
+          column.setFilterOperator?.(defaultOp);
           setSelectedKeys([]);
           doFilter(false);
         }

package/lib/group-component/header/renderFilter.js

@@ -281,7 +281,7 @@ const renderFilter = args => {
         }
         // placeholder={t ? t('Search') : `Search`}
         ,
-        placeholder: tableLocal?.search ?? `Search`,
+        placeholder: t ? t('Search') : tableLocal?.search || 'Search',
         value: selectedKeys[0],
         onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : [])
         // onPressEnter={() => handleSearch(selectedKeys as string[], confirm)}

package/lib/table-component/TableContainerEdit.js

@@ -18,6 +18,7 @@ var _pagination = _interopRequireDefault(require("rc-master-ui/es/pagination"));
 var _reactNumericComponent = require("react-numeric-component");
 var _useContext = require("./useContext");
 var _yup = require("@hookform/resolvers/yup");
+var _GridToolbar = _interopRequireDefault(require("../grid-component/GridToolbar"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _becoxyIcons = require("becoxy-icons");
 var _TableWrapper = _interopRequireDefault(require("./table/TableWrapper"));
@@ -2148,7 +2149,7 @@ const TableContainerEdit = props => {
     className: (0, _classnames.default)('ui-rc-toolbar-bottom border-0', {
       'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
     })
-  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+  }, /*#__PURE__*/_react.default.createElement(_GridToolbar.default, {
     style: {
       width: '100%'
     },
@@ -2177,7 +2178,7 @@ const TableContainerEdit = props => {
       flex: 1,
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+  }, /*#__PURE__*/_react.default.createElement(_GridToolbar.default, {
     items: toolbarItemTopRight,
     mode: toolbarMode
   })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
@@ -2312,7 +2313,7 @@ const TableContainerEdit = props => {
     className: (0, _classnames.default)('ui-rc-toolbar-bottom', {
       'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
     })
-  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+  }, /*#__PURE__*/_react.default.createElement(_GridToolbar.default, {
     style: {
       width: '100%'
     },

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

@@ -632,8 +632,9 @@ const EditableCell = props => {
           } : filterOption,
           optionRender: column.editSelectSettings?.formatOptionLabel,
           fieldNames: {
-            value: keySelect,
-            label: inputKey ?? 'label'
+            ...fieldNames,
+            value: fieldNames?.value ?? keySelect,
+            label: fieldNames?.label ?? inputKey ?? 'label'
           },
           onBlur: event => {
             if (event.inputValue && column?.editSelectSettings?.searchTextAsValue && isMulti !== true) {

package/lib/table-component/header/TableHeadCell.js

@@ -113,7 +113,9 @@ const TableHeadCell = props => {
       const filterValue = isEmptyOperator ? [''] : !originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys;
       header.column.setFilterValue(filterValue);
     } else {
+      const defaultOp = (0, _utils.getDefaultOperator)(originalColumn) ?? 'contains';
       header.column.setFilterValue(undefined);
+      header.column.setFilterOperator?.(defaultOp);
       setSelectedKeys([]);
     }
     setFilterChange(true);
@@ -172,7 +174,10 @@ const TableHeadCell = props => {
         column: column,
         selectedKeys,
         setSelectedKeys,
-        tableLocal: undefined
+        tableLocal: undefined,
+        t,
+        locale,
+        doFilter
       })), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Space, {
         style: {
           justifyContent: 'end',
@@ -193,9 +198,8 @@ const TableHeadCell = props => {
         type: "link",
         size: "small",
         onClick: () => {
-          // header.column.setFilterValue([])
-          // header.column.setFilterOperator('')
-
+          const defaultOp = (0, _utils.getDefaultOperator)(originalColumn) ?? 'contains';
+          header.column.setFilterOperator?.(defaultOp);
           setSelectedKeys([]);
           doFilter(false);
         }

package/lib/table-component/header/TableHeadCell2.js

@@ -143,11 +143,11 @@ const TableHeadCell2 = props => {
 
       // column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? (selectedKeys.length === 0 ? [''] : selectedKeys) : selectedKeys)
     } else {
-      if (fieldOriginal) {
-        fieldOriginal.setFilterValue(undefined);
-      } else {
-        column.setFilterValue(undefined);
-      }
+      const filterCol = fieldOriginal ?? column;
+      const defaultFilterOption = defaultFilter?.find(it => it.field === originalColumn.field);
+      const defaultOp = defaultFilterOption?.operator ?? (0, _utils.getDefaultOperator)(originalColumn) ?? 'contains';
+      filterCol.setFilterValue(undefined);
+      filterCol.setFilterOperator?.(defaultOp);
       setSelectedKeys([]);
     }
     setFilterChange(true);
@@ -239,9 +239,10 @@ const TableHeadCell2 = props => {
         type: "link",
         size: "small",
         onClick: () => {
-          // column.setFilterValue([])
-          // column.setFilterOperator('')
-
+          const filterCol = fieldOriginal ?? column;
+          const defaultFilterOption = defaultFilter?.find(it => it.field === originalColumn.field);
+          const defaultOp = defaultFilterOption?.operator ?? (0, _utils.getDefaultOperator)(originalColumn) ?? 'contains';
+          filterCol.setFilterOperator?.(defaultOp);
           setSelectedKeys([]);
           doFilter(false);
         }

package/lib/table-component/header/renderFilter.js

@@ -323,7 +323,7 @@ const renderFilter = args => {
         }
         // placeholder={t ? t('Search') : `Search`}
         ,
-        placeholder: tableLocal?.search ?? `Search`,
+        placeholder: t ? t('Search') : tableLocal?.search || 'Search',
         value: selectedKeys[0],
         onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : [])
         // onPressEnter={() => handleSearch(selectedKeys as string[], confirm)}

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

@@ -117,7 +117,7 @@ const ColumnsGroup = props => {
       }
     }, /*#__PURE__*/_react.default.createElement("p", {
       className: 'fw-bold'
-    }, "Nh\xF3m d\u1EEF li\u1EC7u theo c\u1ED9t"), /*#__PURE__*/_react.default.createElement("div", {
+    }, t ? t('Group data by column') : 'Group data by column'), /*#__PURE__*/_react.default.createElement("div", {
       className: 'mb-1',
       style: {
         marginBottom: '1rem'
@@ -234,7 +234,7 @@ const ColumnsGroup = props => {
       cursor: 'pointer'
     },
     "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-content": t ? t('Group data') : 'Nhóm dữ liệu'
+    "data-tooltip-content": t ? t('Group data') : 'Group data'
   })));
 };
 exports.ColumnsGroup = ColumnsGroup;

package/lib/table-virtuoso/body/TableBodyRow.js

@@ -69,7 +69,9 @@ const TableBodyRow = ({
     onMouseLeave: handleMouseLeave,
     style: {
       ...rowStyles,
-      height: rowheight
+      ...(rowheight !== undefined && rowheight !== null ? {
+        height: rowheight
+      } : {})
     }
   }, (0, _rowFocus.getRowFocusHandlers)(row.original, rowFocus), {
     onDoubleClick: e => {

package/lib/table-virtuoso/header/TableHeadCell.js

@@ -109,7 +109,13 @@ const TableHeadCell = props => {
       header.column.setFilterValue(nextFilterValue);
       header.column.setFilterOperator?.(currentFilter.ope);
     } else {
+      const defaultOp = (0, _utils.getDefaultOperator)(column?.meta ?? {}) ?? 'contains';
       header.column.setFilterValue(undefined);
+      header.column.setFilterOperator?.(defaultOp);
+      setCurrentFilter(prev => ({
+        ...prev,
+        ope: defaultOp
+      }));
       setSelectedKeys([]);
     }
     setFilterChange(true);
@@ -128,6 +134,17 @@ const TableHeadCell = props => {
     // onOpenChange: onVisibleChange,
 
     destroyPopupOnHide: true,
+    onOpenChange: open => {
+      if (open) {
+        const currentOp = header.column.getFilterOperator() ?? (0, _utils.getDefaultOperator)(column?.meta ?? {});
+        const currentVal = header.column.getFilterValue() ?? [];
+        setCurrentFilter(prev => ({
+          ...prev,
+          ope: currentOp
+        }));
+        setSelectedKeys(['empty', 'notempty'].includes(currentOp) ? [] : currentVal);
+      }
+    },
     dropdownRender: () => {
       const type = (0, _utils.getTypeFilter)(originalColumn);
       const hideFilterInput = ['empty', 'notempty'].includes(currentFilter.ope);
@@ -172,7 +189,10 @@ const TableHeadCell = props => {
       }, (0, _renderFilter.renderFilter)({
         column: column,
         selectedKeys,
-        setSelectedKeys
+        setSelectedKeys,
+        t,
+        locale,
+        doFilter
       })), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Space, {
         style: {
           justifyContent: 'end',
@@ -191,6 +211,12 @@ const TableHeadCell = props => {
         type: "link",
         size: "small",
         onClick: () => {
+          const defaultOp = (0, _utils.getDefaultOperator)(column?.meta ?? {}) ?? 'contains';
+          setCurrentFilter(prev => ({
+            ...prev,
+            ope: defaultOp
+          }));
+          header.column.setFilterOperator?.(defaultOp);
           setSelectedKeys([]);
           doFilter(false);
         }

package/lib/table-virtuoso/header/renderFilter.js

@@ -282,7 +282,7 @@ const renderFilter = args => {
         classNames: {
           input: 'filter-input'
         },
-        placeholder: t ? t('Search') : `Search`,
+        placeholder: t ? t('Search') : 'Search',
         value: selectedKeys[0],
         onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : [])
         // onPressEnter={() => handleSearch(selectedKeys as string[], confirm)}

package/lib/table-virtuoso/style.js

@@ -18,4 +18,4 @@ const colorDark = '#e6e4f3e6';
 const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-rs980s-0"
-})(["&.", "-grid{color:", ";font-size:12px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";.", "-grid-thead{&:has(.resizer.isResizing){.", "-grid-cell{touch-action:none;user-select:none;}}.", "-grid-cell{background-color:#ffffff;&:has(.resizer.isResizing){touch-action:none;user-select:none;}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}}}tbody{.", "-grid-row{font-weight:500;&.", "-grid-row-parent{.", "-grid-cell{font-weight:700;background-color:#f5f5f5;}}}}.", "-grid-tfoot{z-index:3 !important;.ui-rc-grid-footer-row{.ui-rc-grid-cell{border-top:1px solid ", ";border-bottom:1px solid ", ";font-weight:500;}}}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-fix-left-last{.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&::after{position:absolute;top:0;right:0;bottom:-1px;width:30px;transform:translateX(100%);transition:box-shadow 0.3s;content:'';pointer-events:none;box-shadow:inset 10px 0 8px -8px rgba(5,5,5,0.09);}}&.", "-grid-cell-fix-right-first{.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&::after{position:absolute;top:0;bottom:-1px;left:0;width:30px;transform:translateX(-100%);transition:box-shadow 0.3s;content:'';pointer-events:none;box-shadow:inset -10px 0 8px -8px rgba(5,5,5,0.09);}&::before{content:'';position:absolute;inset-block:0;inset-inline-start:-1px;border-inline-start:1px solid #e0e0e0;}}&.", "-grid-cell-ellipsis{.group-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}.class-content:has(*){background:lightblue;}.class-content:not(:has(*)){background:lightgreen;}&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-righ{text-align:right;justify-content:flex-end;}}.", "-grid-cell:not(:has(*)){&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{text-align:right;justify-content:flex-end;}&.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{z-index:3 !important;background-color:", ";font-weight:600;.", "-grid-cell{font-weight:inherit;color:", ";background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";}}tbody{background-color:", ";color:", ";.", "-grid-row{&.ui-rc-grid-row-selected{.", "-grid-cell{background-color:", ";}}}.", "-grid-cell{outline:none;background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-selected{background-color:", " !important;}&.disable{background-color:#f0f0f0;}&.cell-editable{user-select:none;&.cell-border-top{&::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-bottom{border-bottom:1px solid ", ";}&.cell-border-left{&::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-right{border-inline-end:1px solid ", ";}&.cell-paste-border-top{&::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px dashed #949494;pointer-events:none;z-index:1;}&.ui-rc-grid-cell-fix-left-last{&::after{left:-100%;}}&.ui-rc-grid-cell-fix-right-first{&::after{left:100%;}}}&.cell-paste-border-bottom{border-bottom:1px dashed #949494;}&.cell-paste-border-left{&::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px dashed #949494;pointer-events:none;z-index:1;}}&.cell-paste-border-right{border-inline-end:1px dashed #949494;}.dragging-point{width:6px;height:6px;position:absolute;cursor:crosshair;right:0px;bottom:0px;&.hidden{display:none;}.dot-point{position:absolute;width:6px;height:6px;border-radius:0px;background-color:", ";bottom:0;right:0;}}}&.cell-editing{padding:0;&:focus-visible{outline:none;}.ant-form-item,.ant-row.ant-form-item-row,.ant-col.ant-form-item-control,.ant-form-item-control-input,.ant-form-item-control-input-content,.ant-input{height:100% !important;&:focus-visible{outline:none;}}textarea.ant-input{line-height:1.8;height:36px !important;min-height:36px !important;}input.be-cell-editing,.ant-picker,.ui-rc-select-selector,.ui-rc-table-select-selector{padding-inline:7px;}.", "-checkbox-wrapper{.", "-checkbox{background-color:red;}.", "-checkbox-input{&:focus-visible{outline:none;}}}.ant-input,.ant-picker{border-radius:0;}.ant-color-picker-trigger{height:100%;border-radius:0;.ant-color-picker-color-block{height:100%;width:100%;}}.", "-table-select-single .", "-table-select-selector,.", "-select-single .", "-select-selector,.ui-rc-table-select-selector{border-radius:0 !important;}.", "-table-select-single:not(.", "-table-select-customize-input){.", "-table-select-selector{.", "-table-select-selection-search-input{height:auto;}}}}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, rowSelectedBg, props => props.$prefix, tableBorderColor, tableBorderColor, cellSelectedBg, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:12px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";[data-virtuoso-scroller='true']{overscroll-behavior:none;overflow-anchor:none;}.", "-grid-thead{&:has(.resizer.isResizing){.", "-grid-cell{touch-action:none;user-select:none;}}.", "-grid-cell{background-color:#ffffff;&:has(.resizer.isResizing){touch-action:none;user-select:none;}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}}}tbody{.", "-grid-row{font-weight:500;&.", "-grid-row-parent{.", "-grid-cell{font-weight:700;background-color:#f5f5f5;}}}}.", "-grid-tfoot{z-index:3 !important;.ui-rc-grid-footer-row{.ui-rc-grid-cell{border-top:1px solid ", ";border-bottom:1px solid ", ";font-weight:500;}}}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-fix-left-last{.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&::after{position:absolute;top:0;right:0;bottom:-1px;width:30px;transform:translateX(100%);transition:box-shadow 0.3s;content:'';pointer-events:none;box-shadow:inset 10px 0 8px -8px rgba(5,5,5,0.09);}}&.", "-grid-cell-fix-right-first{.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&::after{position:absolute;top:0;bottom:-1px;left:0;width:30px;transform:translateX(-100%);transition:box-shadow 0.3s;content:'';pointer-events:none;box-shadow:inset -10px 0 8px -8px rgba(5,5,5,0.09);}&::before{content:'';position:absolute;inset-block:0;inset-inline-start:-1px;border-inline-start:1px solid #e0e0e0;}}&.", "-grid-cell-ellipsis{.group-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}.class-content:has(*){background:lightblue;}.class-content:not(:has(*)){background:lightgreen;}&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-righ{text-align:right;justify-content:flex-end;}}.", "-grid-cell:not(:has(*)){&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{text-align:right;justify-content:flex-end;}&.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{z-index:3 !important;background-color:", ";font-weight:600;.", "-grid-cell{font-weight:inherit;color:", ";background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;line-height:1.4;}&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";}}tbody{background-color:", ";color:", ";.", "-grid-row{&.ui-rc-grid-row-selected{.", "-grid-cell{background-color:", ";}}}.", "-grid-cell{outline:none;background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;line-height:1.4;}&.ui-rc-grid-cell-selected{background-color:", " !important;}&.disable{background-color:#f0f0f0;}&.cell-editable{user-select:none;&.cell-border-top{&::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-bottom{border-bottom:1px solid ", ";}&.cell-border-left{&::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-right{border-inline-end:1px solid ", ";}&.cell-paste-border-top{&::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px dashed #949494;pointer-events:none;z-index:1;}&.ui-rc-grid-cell-fix-left-last{&::after{left:-100%;}}&.ui-rc-grid-cell-fix-right-first{&::after{left:100%;}}}&.cell-paste-border-bottom{border-bottom:1px dashed #949494;}&.cell-paste-border-left{&::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px dashed #949494;pointer-events:none;z-index:1;}}&.cell-paste-border-right{border-inline-end:1px dashed #949494;}.dragging-point{width:6px;height:6px;position:absolute;cursor:crosshair;right:0px;bottom:0px;&.hidden{display:none;}.dot-point{position:absolute;width:6px;height:6px;border-radius:0px;background-color:", ";bottom:0;right:0;}}}&.cell-editing{padding:0;&:focus-visible{outline:none;}.ant-form-item,.ant-row.ant-form-item-row,.ant-col.ant-form-item-control,.ant-form-item-control-input,.ant-form-item-control-input-content,.ant-input{height:100% !important;&:focus-visible{outline:none;}}textarea.ant-input{line-height:1.8;height:36px !important;min-height:36px !important;}input.be-cell-editing,.ant-picker,.ui-rc-select-selector,.ui-rc-table-select-selector{padding-inline:7px;}.", "-checkbox-wrapper{.", "-checkbox{background-color:red;}.", "-checkbox-input{&:focus-visible{outline:none;}}}.ant-input,.ant-picker{border-radius:0;}.ant-color-picker-trigger{height:100%;border-radius:0;.ant-color-picker-color-block{height:100%;width:100%;}}.", "-table-select-single .", "-table-select-selector,.", "-select-single .", "-select-selector,.ui-rc-table-select-selector{border-radius:0 !important;}.", "-table-select-single:not(.", "-table-select-customize-input){.", "-table-select-selector{.", "-table-select-selection-search-input{height:auto;}}}}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, rowSelectedBg, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, cellSelectedBg, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

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

@@ -144,9 +144,12 @@ const TableWrapper = props => {
   }, /*#__PURE__*/_react.default.createElement(_reactVirtuoso.TableVirtuoso, (0, _extends2.default)({
     ref: virtuosoRef,
     data: table.getRowModel().rows,
-    totalCount: rows.length
+    totalCount: rows.length,
+    computeItemKey: (_index, row) => row?.id ?? _index,
+    style: {
+      height: '100%'
+    }
   }, onVisibleRowsChange ? {
-    computeItemKey: (_index, row) => row.id,
     rangeChanged: ({
       startIndex,
       endIndex
@@ -200,7 +203,6 @@ const TableWrapper = props => {
           ...rest
         } = props;
         const index = props["data-index"];
-        const rowheight = props["data-known-size"];
         const row = rows[index];
         const isEditing = row.id === editingKey;
         const isRowEditable = rowEditable ? rowEditable(row.original) : true;
@@ -210,7 +212,7 @@ const TableWrapper = props => {
           scrollToRow: scrollToRow,
           table: table,
           commandClick: commandClick,
-          rowheight: editAble ? 37 : rowheight,
+          rowheight: editAble ? 37 : undefined,
           isEditing: isEditing,
           isRowEditable: isRowEditable,
           editAble: editAble,

package/package.json

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