es-grid-template 1.8.81 → 1.8.82

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

@@ -130,7 +130,7 @@ export type ColumnTemplate<RecordType> = {
 export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
 export type ColumnTable<RecordType = AnyObject> = {
     field: string;
-    fieldOrigin?: string;
+    fieldOriginal?: string;
     width?: number;
     maxWidth?: number;
     minWidth?: number;

package/es/group-component/TableContainer.js

@@ -286,6 +286,7 @@ const TableContainer = props => {
     "data-tooltip-content": tableLocal?.fullScreen || 'Full screen',
     className: "toolbar-icon"
   })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
+    table: table,
     id: id,
     tableLocal: tableLocal,
     columnHidden: columnHidden,

package/es/group-component/TableContainerEdit.js

@@ -1931,6 +1931,7 @@ const TableContainerEdit = props => {
     "data-tooltip-id": `${id}-tooltip-content`,
     "data-tooltip-content": tableLocal?.fullScreen || 'Full screen'
   })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
+    table: table,
     id: id,
     tableLocal: tableLocal,
     columns: columns,

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

@@ -159,7 +159,7 @@ export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType
 export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordType>[], fixedFields: string[]) => {
     fixed: string;
     field: string;
-    fieldOrigin?: string;
+    fieldOriginal?: string;
     width?: number;
     maxWidth?: number;
     minWidth?: number;

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

@@ -1,8 +1,9 @@
 import React from "react";
 import type { ColumnsTable, ColumnTable, GridTableLocale, Locale } from "./../grid-component/type";
-import type { ColumnDef } from "@tanstack/react-table";
+import type { ColumnDef, Table } from "@tanstack/react-table";
 export type IColumnsChoose<RecordType> = {
     id: string;
+    table: Table<RecordType>;
     columns: ColumnDef<RecordType>[];
     originColumns: ColumnTable[];
     columnsGroup?: string[];

package/es/table-component/ColumnsChoose.js

@@ -4,11 +4,15 @@ import styled from "styled-components";
 import { Button, Input, Popover } from "antd";
 import Tree from "rc-master-ui/es/tree";
 import SearchOutlined from "@ant-design/icons/SearchOutlined";
-import { convertColumnsToTreeData, getVisibleColumnKeys1, updateColumns1 } from "./hook/utils";
+import { convertColumnsToTreeData, updateColumns1 } from "./hook/utils";
 import { Settings } from "becoxy-icons";
+const CustomStyle = styled.div.withConfig({
+  displayName: "CustomStyle",
+  componentId: "es-grid-template__sc-jfujqh-0"
+})([".columns-choose-tree{.ui-rc-tree-treenode{.ui-rc-tree-checkbox{align-self:flex-start;margin-top:5px !important;}}}"]);
 const BoxAction = styled.div.withConfig({
   displayName: "BoxAction",
-  componentId: "es-grid-template__sc-jfujqh-0"
+  componentId: "es-grid-template__sc-jfujqh-1"
 })(["border-top:1px solid #c4c4c4;padding-top:.75rem;display:flex;justify-content:end;gap:10px;.btn-action{background:none !important;border:none !important;&.btn-action-submit{color:#df4318;&:disabled{background-color:#f0f0f0 !important;}&:hover{color:#df4318 !important;}}&:hover{background-color:#f0f0f0 !important;}}"]);
 export const ColumnsChoose = props => {
   const {
@@ -19,18 +23,21 @@ export const ColumnsChoose = props => {
     // triggerChangeKeys,
     t,
     id,
+    table,
     columnsGroup,
     locale,
     tableLocal
   } = props;
+  const isClickRef = React.useRef(false);
   const treeColumns = React.useMemo(() => {
     return convertColumnsToTreeData(propsColumns, columnsGroup);
   }, [propsColumns, columnsGroup]);
   const defaultSelectedKeys = React.useMemo(() => {
-    const defaultColumns = originColumns.filter(it => it.field && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
+    const colsVisiables = table.getVisibleFlatColumns().filter(it => it.columnDef?.meta?.showInColumnChoose !== false);
+    const colsKeys = colsVisiables.map(it => it.id);
     const aa = Object.keys(columnHidden);
-    return getVisibleColumnKeys1(defaultColumns).filter(it => !aa.includes(it));
-  }, [columnHidden, columnsGroup, originColumns]);
+    return colsKeys.filter(it => !aa.includes(it) && !columnsGroup?.includes(it));
+  }, [columnHidden, columnsGroup, table]);
   const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(defaultSelectedKeys && defaultSelectedKeys.length ? defaultSelectedKeys : undefined, {
     value: undefined
   });
@@ -113,11 +120,15 @@ export const ColumnsChoose = props => {
   const onCheck = keys => {
     // setSelectedKeys(keys)
     // setIsManualUpdate(true)
+
+    isClickRef.current = true;
     setMergedSelectedKeys(keys);
   };
   const handleAccept = () => {
-    const rs1 = updateColumns1(originColumns, mergedSelectedKeys ?? []);
-    triggerChangeColumns?.(rs1, mergedSelectedKeys ?? [], 'columnChoose');
+    if (isClickRef.current) {
+      const rs1 = updateColumns1(originColumns, mergedSelectedKeys ?? []);
+      triggerChangeColumns?.(rs1, mergedSelectedKeys ?? [], 'columnChoose');
+    }
     hide();
   };
   const handleCancel = () => {
@@ -126,7 +137,7 @@ export const ColumnsChoose = props => {
   };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Popover, {
     placement: 'bottomLeft',
-    content: /*#__PURE__*/React.createElement("div", {
+    content: /*#__PURE__*/React.createElement(CustomStyle, {
       style: {
         minWidth: 250,
         maxWidth: 320
@@ -139,6 +150,7 @@ export const ColumnsChoose = props => {
       prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
       onChange: onChange
     }), /*#__PURE__*/React.createElement(Tree, {
+      className: "columns-choose-tree",
       onExpand: onExpand
       // expandedKeys={expandedKeys}
       ,
@@ -173,7 +185,7 @@ export const ColumnsChoose = props => {
       multiple: true
       // checkedKeys={selectedKeys}
       ,
-      checkedKeys: mergedSelectedKeys || defaultSelectedKeys
+      checkedKeys: mergedSelectedKeys ?? defaultSelectedKeys
 
       // defaultCheckedKeys={selectedKeys}
       ,

package/es/table-component/InternalTable.js

@@ -151,6 +151,7 @@ const InternalTable = props => {
     if (type === 'cellClick') {
       setColumns(cols);
     } else {
+      setColumns(cols);
       const aa = flatColumns2(columns).map(it => it.field);
       const rsss = getDiffent2Array(aa, keys);
       setColumnsHiddenKeys(rsss);

package/es/table-component/TableContainer.js

@@ -254,6 +254,7 @@ const TableContainer = props => {
     "data-tooltip-content": locale?.table?.fullScreen || tableLocal?.fullScreen || 'Full screen'
   })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
     id: id,
+    table: table,
     locale: locale,
     tableLocal: tableLocal,
     columnHidden: columnHidden,

package/es/table-component/TableContainerEdit.js

@@ -1672,6 +1672,7 @@ const TableContainerEdit = props => {
     "data-tooltip-id": `${id}-tooltip-content`,
     "data-tooltip-content": locale?.table?.fullScreen || tableLocal?.fullScreen || 'Full screen'
   })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
+    table: table,
     columns: columns,
     originColumns: propsColumns,
     t: t,

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

@@ -41,6 +41,7 @@ const TableHeadCell2 = props => {
     rowKey
   } = useContext(TableContext);
   const [tableLocal] = useLocale('Table');
+  const visibleCols = table.getVisibleFlatColumns();
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
   const {
     showExpandAll
@@ -54,8 +55,10 @@ const TableHeadCell2 = props => {
     filterIcon
   } = column.columnDef.meta ?? {};
   const originalColumn = column.columnDef.meta ?? {};
+  const fieldOriginalKey = originalColumn?.fieldOriginal;
+  const fieldOriginal = fieldOriginalKey ? visibleCols.find(it => it.id === fieldOriginalKey) : undefined;
   const cellStyles = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
-  const filtered = (column.getFilterValue() ?? []).length > 0;
+  const filtered = ((fieldOriginal ? fieldOriginal.getFilterValue() : column.getFilterValue()) ?? []).length > 0;
   const cellContent = flexRender(column.columnDef.header, header.getContext());
   const html = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent));
   const hasValue = html.trim().length > 0;
@@ -96,9 +99,14 @@ const TableHeadCell2 = props => {
     if (info.source === 'trigger') {
       if (newVisible) {
         const filterValue = column.getFilterValue() ?? [];
+        const filterValueOrigin = fieldOriginal ? fieldOriginal.getFilterValue() ?? [] : undefined;
         const operatorValue = column.getFilterOperator() ?? getDefaultOperator(column.columnDef?.meta ?? {});
-        setSelectedKeys(filterValue);
-        column.setFilterOperator?.(operatorValue);
+        setSelectedKeys(filterValueOrigin ?? filterValue);
+        if (fieldOriginal) {
+          fieldOriginal.setFilterOperator?.(operatorValue);
+        } else {
+          column.setFilterOperator?.(operatorValue);
+        }
         setTimeout(() => {
           const inputFilter = document.querySelector('.filter-input');
           if (inputFilter) {
@@ -111,9 +119,19 @@ const TableHeadCell2 = props => {
   };
   const doFilter = type => {
     if (type) {
-      column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
+      if (fieldOriginal) {
+        fieldOriginal.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
+      } else {
+        column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
+      }
+
+      // column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? (selectedKeys.length === 0 ? [''] : selectedKeys) : selectedKeys)
     } else {
-      column.setFilterValue(undefined);
+      if (fieldOriginal) {
+        fieldOriginal.setFilterValue(undefined);
+      } else {
+        column.setFilterValue(undefined);
+      }
       setSelectedKeys([]);
     }
     setFilterChange(true);
@@ -166,6 +184,7 @@ const TableHeadCell2 = props => {
         }
       }, renderFilter({
         t,
+        // column: fieldOriginal ? fieldOriginal.columnDef : column.columnDef,
         column: column.columnDef,
         selectedKeys,
         setSelectedKeys,

package/es/table-component/hook/utils.js

@@ -1922,7 +1922,9 @@ export function convertColumnsToTreeData(columns, groupColumns) {
     // Điều kiện filter:
     // - Nếu meta.showInColumnChoose = false => loại bỏ
     // - Nếu không nằm trong groupColumns và không phải column group => loại bỏ
+    // if (meta.showInColumnChoose === false || col.id === "selection_column") return false
     if (meta.showInColumnChoose === false) return false;
+    // if (inGroup && !('columns' in col && Array.isArray((col as any).columns))) {
     if (inGroup && !('columns' in col && Array.isArray(col.columns))) {
       return false;
     }

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

@@ -212,6 +212,7 @@ const TableContainer = props => {
     "data-tooltip-id": `${id}-tooltip-content`,
     "data-tooltip-content": t ? t('Full screen') : 'Full screen'
   })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
+    table: table,
     id: id,
     tableLocal: tableLocal,
     columnHidden: columnHidden,

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

@@ -130,7 +130,7 @@ export type ColumnTemplate<RecordType> = {
 export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
 export type ColumnTable<RecordType = AnyObject> = {
     field: string;
-    fieldOrigin?: string;
+    fieldOriginal?: string;
     width?: number;
     maxWidth?: number;
     minWidth?: number;

package/lib/group-component/TableContainer.js

@@ -294,6 +294,7 @@ const TableContainer = props => {
     "data-tooltip-content": tableLocal?.fullScreen || 'Full screen',
     className: "toolbar-icon"
   })), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
+    table: table,
     id: id,
     tableLocal: tableLocal,
     columnHidden: columnHidden,

package/lib/group-component/TableContainerEdit.js

@@ -1939,6 +1939,7 @@ const TableContainerEdit = props => {
     "data-tooltip-id": `${id}-tooltip-content`,
     "data-tooltip-content": tableLocal?.fullScreen || 'Full screen'
   })), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
+    table: table,
     id: id,
     tableLocal: tableLocal,
     columns: columns,

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

@@ -159,7 +159,7 @@ export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType
 export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordType>[], fixedFields: string[]) => {
     fixed: string;
     field: string;
-    fieldOrigin?: string;
+    fieldOriginal?: string;
     width?: number;
     maxWidth?: number;
     minWidth?: number;

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

@@ -1,8 +1,9 @@
 import React from "react";
 import type { ColumnsTable, ColumnTable, GridTableLocale, Locale } from "./../grid-component/type";
-import type { ColumnDef } from "@tanstack/react-table";
+import type { ColumnDef, Table } from "@tanstack/react-table";
 export type IColumnsChoose<RecordType> = {
     id: string;
+    table: Table<RecordType>;
     columns: ColumnDef<RecordType>[];
     originColumns: ColumnTable[];
     columnsGroup?: string[];

package/lib/table-component/ColumnsChoose.js

@@ -15,9 +15,13 @@ var _utils = require("./hook/utils");
 var _becoxyIcons = require("becoxy-icons");
 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; }
+const CustomStyle = _styledComponents.default.div.withConfig({
+  displayName: "CustomStyle",
+  componentId: "es-grid-template__sc-jfujqh-0"
+})([".columns-choose-tree{.ui-rc-tree-treenode{.ui-rc-tree-checkbox{align-self:flex-start;margin-top:5px !important;}}}"]);
 const BoxAction = _styledComponents.default.div.withConfig({
   displayName: "BoxAction",
-  componentId: "es-grid-template__sc-jfujqh-0"
+  componentId: "es-grid-template__sc-jfujqh-1"
 })(["border-top:1px solid #c4c4c4;padding-top:.75rem;display:flex;justify-content:end;gap:10px;.btn-action{background:none !important;border:none !important;&.btn-action-submit{color:#df4318;&:disabled{background-color:#f0f0f0 !important;}&:hover{color:#df4318 !important;}}&:hover{background-color:#f0f0f0 !important;}}"]);
 const ColumnsChoose = props => {
   const {
@@ -28,18 +32,21 @@ const ColumnsChoose = props => {
     // triggerChangeKeys,
     t,
     id,
+    table,
     columnsGroup,
     locale,
     tableLocal
   } = props;
+  const isClickRef = _react.default.useRef(false);
   const treeColumns = _react.default.useMemo(() => {
     return (0, _utils.convertColumnsToTreeData)(propsColumns, columnsGroup);
   }, [propsColumns, columnsGroup]);
   const defaultSelectedKeys = _react.default.useMemo(() => {
-    const defaultColumns = originColumns.filter(it => it.field && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
+    const colsVisiables = table.getVisibleFlatColumns().filter(it => it.columnDef?.meta?.showInColumnChoose !== false);
+    const colsKeys = colsVisiables.map(it => it.id);
     const aa = Object.keys(columnHidden);
-    return (0, _utils.getVisibleColumnKeys1)(defaultColumns).filter(it => !aa.includes(it));
-  }, [columnHidden, columnsGroup, originColumns]);
+    return colsKeys.filter(it => !aa.includes(it) && !columnsGroup?.includes(it));
+  }, [columnHidden, columnsGroup, table]);
   const [mergedSelectedKeys, setMergedSelectedKeys] = (0, _useMergedState.default)(defaultSelectedKeys && defaultSelectedKeys.length ? defaultSelectedKeys : undefined, {
     value: undefined
   });
@@ -122,11 +129,15 @@ const ColumnsChoose = props => {
   const onCheck = keys => {
     // setSelectedKeys(keys)
     // setIsManualUpdate(true)
+
+    isClickRef.current = true;
     setMergedSelectedKeys(keys);
   };
   const handleAccept = () => {
-    const rs1 = (0, _utils.updateColumns1)(originColumns, mergedSelectedKeys ?? []);
-    triggerChangeColumns?.(rs1, mergedSelectedKeys ?? [], 'columnChoose');
+    if (isClickRef.current) {
+      const rs1 = (0, _utils.updateColumns1)(originColumns, mergedSelectedKeys ?? []);
+      triggerChangeColumns?.(rs1, mergedSelectedKeys ?? [], 'columnChoose');
+    }
     hide();
   };
   const handleCancel = () => {
@@ -135,7 +146,7 @@ const ColumnsChoose = props => {
   };
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Popover, {
     placement: 'bottomLeft',
-    content: /*#__PURE__*/_react.default.createElement("div", {
+    content: /*#__PURE__*/_react.default.createElement(CustomStyle, {
       style: {
         minWidth: 250,
         maxWidth: 320
@@ -148,6 +159,7 @@ const ColumnsChoose = props => {
       prefix: /*#__PURE__*/_react.default.createElement(_SearchOutlined.default, null),
       onChange: onChange
     }), /*#__PURE__*/_react.default.createElement(_tree.default, {
+      className: "columns-choose-tree",
       onExpand: onExpand
       // expandedKeys={expandedKeys}
       ,
@@ -182,7 +194,7 @@ const ColumnsChoose = props => {
       multiple: true
       // checkedKeys={selectedKeys}
       ,
-      checkedKeys: mergedSelectedKeys || defaultSelectedKeys
+      checkedKeys: mergedSelectedKeys ?? defaultSelectedKeys
 
       // defaultCheckedKeys={selectedKeys}
       ,

package/lib/table-component/InternalTable.js

@@ -160,6 +160,7 @@ const InternalTable = props => {
     if (type === 'cellClick') {
       setColumns(cols);
     } else {
+      setColumns(cols);
       const aa = (0, _utils.flatColumns2)(columns).map(it => it.field);
       const rsss = (0, _utils.getDiffent2Array)(aa, keys);
       setColumnsHiddenKeys(rsss);

package/lib/table-component/TableContainer.js

@@ -261,6 +261,7 @@ const TableContainer = props => {
     "data-tooltip-content": locale?.table?.fullScreen || tableLocal?.fullScreen || 'Full screen'
   })), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
     id: id,
+    table: table,
     locale: locale,
     tableLocal: tableLocal,
     columnHidden: columnHidden,

package/lib/table-component/TableContainerEdit.js

@@ -1679,6 +1679,7 @@ const TableContainerEdit = props => {
     "data-tooltip-id": `${id}-tooltip-content`,
     "data-tooltip-content": locale?.table?.fullScreen || tableLocal?.fullScreen || 'Full screen'
   })), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
+    table: table,
     columns: columns,
     originColumns: propsColumns,
     t: t,

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

@@ -50,6 +50,7 @@ const TableHeadCell2 = props => {
     rowKey
   } = (0, _react.useContext)(_useContext.TableContext);
   const [tableLocal] = (0, _locale.useLocale)('Table');
+  const visibleCols = table.getVisibleFlatColumns();
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
   const {
     showExpandAll
@@ -63,8 +64,10 @@ const TableHeadCell2 = props => {
     filterIcon
   } = column.columnDef.meta ?? {};
   const originalColumn = column.columnDef.meta ?? {};
+  const fieldOriginalKey = originalColumn?.fieldOriginal;
+  const fieldOriginal = fieldOriginalKey ? visibleCols.find(it => it.id === fieldOriginalKey) : undefined;
   const cellStyles = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
-  const filtered = (column.getFilterValue() ?? []).length > 0;
+  const filtered = ((fieldOriginal ? fieldOriginal.getFilterValue() : column.getFilterValue()) ?? []).length > 0;
   const cellContent = (0, _reactTable.flexRender)(column.columnDef.header, header.getContext());
   const html = _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cellContent));
   const hasValue = html.trim().length > 0;
@@ -105,9 +108,14 @@ const TableHeadCell2 = props => {
     if (info.source === 'trigger') {
       if (newVisible) {
         const filterValue = column.getFilterValue() ?? [];
+        const filterValueOrigin = fieldOriginal ? fieldOriginal.getFilterValue() ?? [] : undefined;
         const operatorValue = column.getFilterOperator() ?? (0, _utils.getDefaultOperator)(column.columnDef?.meta ?? {});
-        setSelectedKeys(filterValue);
-        column.setFilterOperator?.(operatorValue);
+        setSelectedKeys(filterValueOrigin ?? filterValue);
+        if (fieldOriginal) {
+          fieldOriginal.setFilterOperator?.(operatorValue);
+        } else {
+          column.setFilterOperator?.(operatorValue);
+        }
         setTimeout(() => {
           const inputFilter = document.querySelector('.filter-input');
           if (inputFilter) {
@@ -120,9 +128,19 @@ const TableHeadCell2 = props => {
   };
   const doFilter = type => {
     if (type) {
-      column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
+      if (fieldOriginal) {
+        fieldOriginal.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
+      } else {
+        column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
+      }
+
+      // column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? (selectedKeys.length === 0 ? [''] : selectedKeys) : selectedKeys)
     } else {
-      column.setFilterValue(undefined);
+      if (fieldOriginal) {
+        fieldOriginal.setFilterValue(undefined);
+      } else {
+        column.setFilterValue(undefined);
+      }
       setSelectedKeys([]);
     }
     setFilterChange(true);
@@ -175,6 +193,7 @@ const TableHeadCell2 = props => {
         }
       }, (0, _renderFilter.renderFilter)({
         t,
+        // column: fieldOriginal ? fieldOriginal.columnDef : column.columnDef,
         column: column.columnDef,
         selectedKeys,
         setSelectedKeys,

package/lib/table-component/hook/utils.js

@@ -2041,7 +2041,9 @@ function convertColumnsToTreeData(columns, groupColumns) {
     // Điều kiện filter:
     // - Nếu meta.showInColumnChoose = false => loại bỏ
     // - Nếu không nằm trong groupColumns và không phải column group => loại bỏ
+    // if (meta.showInColumnChoose === false || col.id === "selection_column") return false
     if (meta.showInColumnChoose === false) return false;
+    // if (inGroup && !('columns' in col && Array.isArray((col as any).columns))) {
     if (inGroup && !('columns' in col && Array.isArray(col.columns))) {
       return false;
     }

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

@@ -220,6 +220,7 @@ const TableContainer = props => {
     "data-tooltip-id": `${id}-tooltip-content`,
     "data-tooltip-content": t ? t('Full screen') : 'Full screen'
   })), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
+    table: table,
     id: id,
     tableLocal: tableLocal,
     columnHidden: columnHidden,

package/package.json

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