es-grid-template 1.9.101 → 1.9.103

package/CHANGELOG.md

@@ -0,0 +1,34 @@
+# Changelog
+
+## 1.9.103 / 10-11-2026
+
+### Fixed
+- Fixed infinite jitter/oscillation at table bottom in `TableVirtuoso` when rows have wrapped text (`wrapMode: 'Both'`).
+- Removed hardcoded inline `height` on non-editable rows (`editAble={false}`) in `TableWrapper` and `TableBodyRow`, allowing dynamic row height expansion with natural `ResizeObserver` measurement.
+- Added `overscroll-behavior: none` and `overflow-anchor: none` to virtuoso scroller container to prevent scroll anchoring artifacts at bottom boundary.
+- Provided consistent `computeItemKey` and `100%` height style to `TableVirtuoso`.
+- Fixed filter operator reset logic in `TableHeadCell`: resetting filter now restores column's default operator instead of remaining empty.
+- Fixed filter dropdown state synchronization on open/close in `TableHeadCell`.
+
+### Added
+- Added multi-line text wrapping styles (`white-space: normal`, `word-break: break-word`, `line-height: 1.4`) for `*-grid-cell-text-wrap` across all table components.
+- Added `searchTextAsValue` support to `SelectTable` and `async-table-select`.
+- Added `i18n` translation fallback support for filter search inputs and column grouping labels.
+
+### Changed
+- Converted rigid cell/row height styles (`height: 36px/32px`) to `minHeight` in `group-component` and `table-component` with row remeasuring on virtual index change.
+
+## 1.9.95 / 06-11-2026
+
+### Added
+- Added opt-in `selectionSettings.pruneSelection` (default `false`) to keep selected rows within the current filtered data view.
+
+### Fixed
+- Preserved existing selection on sorting, grouping, expand/collapse and virtual scrolling when rows remain in the view.
+- Synchronized selection callbacks with current view rows, preserving original `children` data.
+- Fixed group selection with disabled child rows, including `getCheckboxProps` rules based on tree structure.
+- Kept existing selection during temporary loading and preserved legacy behavior when the option is disabled.
+
+## 0.0.1 /  20-02-2025
+
+add package

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/GridRefreshButton.css

@@ -1,9 +1,9 @@
-.ui-rc-grid-refresh-spin {
-  transform-origin: center;
-  transform-box: fill-box;
-  animation: ui-rc-grid-refresh-spin 0.8s linear infinite;
-}
-
-@keyframes ui-rc-grid-refresh-spin {
-  to { transform: rotate(360deg); }
-}
+.ui-rc-grid-refresh-spin {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: ui-rc-grid-refresh-spin 0.8s linear infinite;
+}
+
+@keyframes ui-rc-grid-refresh-spin {
+  to { transform: rotate(360deg); }
+}

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/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, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
-    onCellHeaderStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
+    onCellStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
+    onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
+    onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
     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/components/async-table-select/index.d.ts

@@ -9,4 +9,4 @@ export interface DebounceSelectProps<OptionType extends BaseOptionType = Default
     rowData?: any;
     searchTextAsValue?: boolean;
 }
-export declare function AsyncTableSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, columns, rowData, searchTextAsValue, ...props }: DebounceSelectProps<OptionType>): JSX.Element;
+export declare function AsyncTableSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, columns, rowData, searchTextAsValue, onChange, ...props }: DebounceSelectProps<OptionType>): JSX.Element;

package/es/table-component/components/async-table-select/index.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import debounce from 'lodash/debounce';
 import { TableSelect } from "rc-master-ui";
 export function AsyncTableSelect({
@@ -9,11 +9,42 @@ export function AsyncTableSelect({
   columns,
   rowData,
   searchTextAsValue,
+  onChange,
   ...props
 }) {
   const [options, setOptions] = useState(defaultOptions ?? []);
+  const selectRef = useRef(null);
   const searchText = useRef('');
-  const allowSearchText = searchTextAsValue && !props.mode && props.selectMode !== 'checkbox';
+  const allowSearchText = searchTextAsValue && !props.disabled && !props.mode && props.selectMode !== 'checkbox';
+  const popupClass = `es-grid-select-table-popup-${useId().replace(/:/g, '')}`;
+  const popupClassName = allowSearchText ? [props.popupClassName || props.dropdownClassName, popupClass].filter(Boolean).join(' ') : props.popupClassName;
+  const commitSearchText = useCallback(() => {
+    const value = searchText.current;
+    searchText.current = '';
+    if (allowSearchText && value) {
+      onChange?.(value, {
+        value,
+        label: value,
+        searchTextAsValue: true
+      });
+    }
+  }, [allowSearchText, onChange]);
+  useEffect(() => {
+    const element = selectRef.current?.nativeElement;
+    if (!allowSearchText || !element) return;
+
+    // The grid can unmount the editor on mousedown before the browser dispatches blur.
+    const commitOnOutsideMouseDown = event => {
+      if (!searchText.current) return;
+      const path = event.composedPath();
+      const isInsidePopup = path.some(node => node instanceof Element && node.classList.contains(popupClass));
+      if (path.includes(element) || isInsidePopup) return;
+      commitSearchText();
+    };
+    const ownerDocument = element.ownerDocument;
+    ownerDocument.addEventListener('mousedown', commitOnOutsideMouseDown, true);
+    return () => ownerDocument.removeEventListener('mousedown', commitOnOutsideMouseDown, true);
+  }, [allowSearchText, commitSearchText, popupClass]);
   const debounceFetcher = useMemo(() => {
     const fetchOptions = value => {
       if (value.trim().length === 0) {
@@ -34,6 +65,8 @@ export function AsyncTableSelect({
     setOptions(defaultOptions ?? []);
   }, [defaultOptions]);
   return /*#__PURE__*/React.createElement(TableSelect, _extends({}, props, {
+    ref: selectRef,
+    popupClassName: popupClassName,
     filterOption: loadOptions ? false : props?.filterOption,
     onSearch: value => {
       searchText.current = value;
@@ -41,22 +74,14 @@ export function AsyncTableSelect({
     },
     onChange: (value, option) => {
       searchText.current = '';
-      props.onChange?.(value, option);
+      onChange?.(value, option);
     },
     onSelect: () => {
       searchText.current = '';
       setOptions(defaultOptions ?? []);
     },
     onBlur: event => {
-      const value = searchText.current;
-      searchText.current = '';
-      if (allowSearchText && value) {
-        props.onChange?.(value, {
-          value,
-          label: value,
-          searchTextAsValue: true
-        });
-      }
+      commitSearchText();
       props.onBlur?.(event);
     },
     onInputKeyDown: event => {

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/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/GridRefreshButton.css

@@ -1,9 +1,9 @@
-.ui-rc-grid-refresh-spin {
-  transform-origin: center;
-  transform-box: fill-box;
-  animation: ui-rc-grid-refresh-spin 0.8s linear infinite;
-}
-
-@keyframes ui-rc-grid-refresh-spin {
-  to { transform: rotate(360deg); }
-}
+.ui-rc-grid-refresh-spin {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: ui-rc-grid-refresh-spin 0.8s linear infinite;
+}
+
+@keyframes ui-rc-grid-refresh-spin {
+  to { transform: rotate(360deg); }
+}

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/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/components/async-table-select/index.d.ts

@@ -9,4 +9,4 @@ export interface DebounceSelectProps<OptionType extends BaseOptionType = Default
     rowData?: any;
     searchTextAsValue?: boolean;
 }
-export declare function AsyncTableSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, columns, rowData, searchTextAsValue, ...props }: DebounceSelectProps<OptionType>): JSX.Element;
+export declare function AsyncTableSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, columns, rowData, searchTextAsValue, onChange, ...props }: DebounceSelectProps<OptionType>): JSX.Element;

package/lib/table-component/components/async-table-select/index.js

@@ -18,11 +18,42 @@ function AsyncTableSelect({
   columns,
   rowData,
   searchTextAsValue,
+  onChange,
   ...props
 }) {
   const [options, setOptions] = (0, _react.useState)(defaultOptions ?? []);
+  const selectRef = (0, _react.useRef)(null);
   const searchText = (0, _react.useRef)('');
-  const allowSearchText = searchTextAsValue && !props.mode && props.selectMode !== 'checkbox';
+  const allowSearchText = searchTextAsValue && !props.disabled && !props.mode && props.selectMode !== 'checkbox';
+  const popupClass = `es-grid-select-table-popup-${(0, _react.useId)().replace(/:/g, '')}`;
+  const popupClassName = allowSearchText ? [props.popupClassName || props.dropdownClassName, popupClass].filter(Boolean).join(' ') : props.popupClassName;
+  const commitSearchText = (0, _react.useCallback)(() => {
+    const value = searchText.current;
+    searchText.current = '';
+    if (allowSearchText && value) {
+      onChange?.(value, {
+        value,
+        label: value,
+        searchTextAsValue: true
+      });
+    }
+  }, [allowSearchText, onChange]);
+  (0, _react.useEffect)(() => {
+    const element = selectRef.current?.nativeElement;
+    if (!allowSearchText || !element) return;
+
+    // The grid can unmount the editor on mousedown before the browser dispatches blur.
+    const commitOnOutsideMouseDown = event => {
+      if (!searchText.current) return;
+      const path = event.composedPath();
+      const isInsidePopup = path.some(node => node instanceof Element && node.classList.contains(popupClass));
+      if (path.includes(element) || isInsidePopup) return;
+      commitSearchText();
+    };
+    const ownerDocument = element.ownerDocument;
+    ownerDocument.addEventListener('mousedown', commitOnOutsideMouseDown, true);
+    return () => ownerDocument.removeEventListener('mousedown', commitOnOutsideMouseDown, true);
+  }, [allowSearchText, commitSearchText, popupClass]);
   const debounceFetcher = (0, _react.useMemo)(() => {
     const fetchOptions = value => {
       if (value.trim().length === 0) {
@@ -43,6 +74,8 @@ function AsyncTableSelect({
     setOptions(defaultOptions ?? []);
   }, [defaultOptions]);
   return /*#__PURE__*/_react.default.createElement(_rcMasterUi.TableSelect, (0, _extends2.default)({}, props, {
+    ref: selectRef,
+    popupClassName: popupClassName,
     filterOption: loadOptions ? false : props?.filterOption,
     onSearch: value => {
       searchText.current = value;
@@ -50,22 +83,14 @@ function AsyncTableSelect({
     },
     onChange: (value, option) => {
       searchText.current = '';
-      props.onChange?.(value, option);
+      onChange?.(value, option);
     },
     onSelect: () => {
       searchText.current = '';
       setOptions(defaultOptions ?? []);
     },
     onBlur: event => {
-      const value = searchText.current;
-      searchText.current = '';
-      if (allowSearchText && value) {
-        props.onChange?.(value, {
-          value,
-          label: value,
-          searchTextAsValue: true
-        });
-      }
+      commitSearchText();
       props.onBlur?.(event);
     },
     onInputKeyDown: event => {

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.101",
+  "version": "1.9.103",
   "description": "es-grid-template",
   "keywords": [
     "react",