es-grid-template 1.3.1 → 1.3.2

package/lib/grid-component/CheckboxFilter2.js

@@ -0,0 +1,257 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _FilterSearch = _interopRequireDefault(require("./FilterSearch"));
+var _rcMasterUi = require("rc-master-ui");
+var _antd = require("antd");
+var _useFilter = require("rc-master-ui/es/table/hooks/useFilter");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import Tree from "rc-master-ui/es/tree";
+
+function searchValueMatched(searchValue, text) {
+  if (typeof text === 'string' || typeof text === 'number') {
+    return text?.toString().toLowerCase().includes(searchValue.trim().toLowerCase());
+  }
+  return false;
+}
+function renderFilterItems({
+  filters,
+  prefixCls,
+  filteredKeys,
+  filterMultiple,
+  searchValue,
+  filterSearch
+}) {
+  return filters.map((filter, index) => {
+    const key = String(filter.value);
+    if (filter.children) {
+      return {
+        key: key || index,
+        label: filter.text,
+        popupClassName: `${prefixCls}-dropdown-submenu`,
+        children: renderFilterItems({
+          filters: filter.children,
+          prefixCls,
+          filteredKeys,
+          filterMultiple,
+          searchValue,
+          filterSearch
+        })
+      };
+    }
+    const Component = filterMultiple ? _rcMasterUi.Checkbox : _rcMasterUi.Radio;
+    const item = {
+      key: filter.value !== undefined ? key : index,
+      label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Component, {
+        checked: filteredKeys.includes(key)
+      }), /*#__PURE__*/React.createElement("span", null, filter.text))
+    };
+    if (searchValue.trim()) {
+      if (typeof filterSearch === 'function') {
+        return filterSearch(searchValue, filter) ? item : null;
+      }
+      return searchValueMatched(searchValue, filter.text) ? item : null;
+    }
+    return item;
+  });
+}
+function hasSubMenu(filters) {
+  return filters.some(({
+    children
+  }) => children);
+}
+const CheckboxFilter = props => {
+  const {
+    // column,
+    filterSearch = true,
+    tablePrefixCls = 'ui-rc-table',
+    prefixCls = 'ui-rc-table-filter',
+    dropdownPrefixCls = 'ui-rc-dropdown',
+    filterMultiple,
+    selectedKeys,
+    locale,
+    options,
+    filterMode = 'tree',
+    // open,
+    searchValue,
+    showFilter,
+    setSearchValue,
+    onSelect
+  } = props;
+
+  // const [searchValue, setSearchValue] = React.useState('');
+
+  console.log('options', options);
+  const [openKeys, setOpenKeys] = React.useState([]);
+
+  // clear search value after close filter dropdown
+  // React.useEffect(() => {
+  //   // if (visible) {
+  //     setSearchValue('');
+  //   // }
+  // }, [open]);
+
+  const onOpenChange = keys => {
+    setOpenKeys(keys);
+  };
+  const items = renderFilterItems({
+    // filters: column.filters || [],
+    filters: options || [],
+    filterSearch,
+    prefixCls,
+    filteredKeys: selectedKeys ?? [],
+    filterMultiple,
+    searchValue
+  });
+  const dropdownMenuClass = (0, _classnames.default)({
+    // [`${dropdownPrefixCls}-menu-without-submenu`]: !hasSubMenu(column.filters || []),
+    [`${dropdownPrefixCls}-menu-without-submenu`]: !hasSubMenu(options || [])
+  });
+  const empty = /*#__PURE__*/React.createElement(_rcMasterUi.Empty, {
+    image: _rcMasterUi.Empty.PRESENTED_IMAGE_SIMPLE,
+    description: locale?.filterEmptyText,
+    imageStyle: {
+      height: 24
+    },
+    style: {
+      margin: 0,
+      padding: '16px 0'
+    }
+  });
+  const isEmpty = items.every(item => item === null);
+  const onSearch = e => {
+    const {
+      value
+    } = e.target;
+    setSearchValue(value);
+  };
+
+  // if ((column.filters || []).length === 0) {
+  //   return empty;
+  // }
+
+  const getTreeData = ({
+    filters
+  }) => (filters || []).map((filter, index) => {
+    const key = String(filter.value);
+    const item = {
+      title: filter.text,
+      key: filter.value !== undefined ? key : String(index)
+    };
+    if (filter.children) {
+      item.children = getTreeData({
+        filters: filter.children
+      });
+    }
+    return item;
+  });
+  const getFilterData = node => ({
+    ...node,
+    text: node.title,
+    value: node.key,
+    children: node.children?.map(item => getFilterData(item)) || []
+  });
+  const onCheckAll = e => {
+    if (e.target.checked) {
+      const allFilterKeys = (0, _useFilter.flattenKeys)(options).map(key => String(key));
+
+      // setFilteredKeysSync(allFilterKeys);
+      onSelect?.(allFilterKeys);
+    } else {
+      onSelect?.([]);
+      // setFilteredKeysSync([]);
+    }
+  };
+  const onCheck = (keys, {
+    node,
+    checked
+  }) => {
+    if (!filterMultiple) {
+      // onSelectKeys({ selectedKeys: checked && node.key ? [node.key] : [] });
+      onSelect?.(checked && node.key ? [node.key] : []);
+    } else {
+      // onSelectKeys({ selectedKeys: keys });
+      onSelect?.(keys);
+    }
+  };
+  console.log('getTreeData({ filters: options })', getTreeData({
+    filters: options
+  }));
+  if (filterMode === 'tree') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showFilter && /*#__PURE__*/React.createElement(_FilterSearch.default, {
+      filterSearch: filterSearch,
+      value: searchValue,
+      onChange: onSearch,
+      tablePrefixCls: tablePrefixCls,
+      locale: locale
+    }), /*#__PURE__*/React.createElement("div", {
+      className: `${tablePrefixCls}-filter-dropdown-tree`
+    }, filterMultiple && options.length > 0 ? /*#__PURE__*/React.createElement(_rcMasterUi.Checkbox
+    // checked={selectedKeys.length === flattenKeys(column.filters).length}
+    , {
+      checked: selectedKeys.length === (0, _useFilter.flattenKeys)(options).length
+      // indeterminate={
+      //   selectedKeys.length > 0 &&
+      //   selectedKeys.length < flattenKeys(column.filters).length
+      // }
+      ,
+
+      indeterminate: selectedKeys.length > 0 && selectedKeys.length < (0, _useFilter.flattenKeys)(options).length,
+      className: `${tablePrefixCls}-filter-dropdown-checkall`,
+      onChange: onCheckAll
+    }, locale?.filterCheckall) : /*#__PURE__*/React.createElement(_rcMasterUi.Empty, null), /*#__PURE__*/React.createElement(_antd.Tree, {
+      checkable: true,
+      selectable: false,
+      blockNode: true,
+      multiple: filterMultiple,
+      checkStrictly: !filterMultiple,
+      className: `${dropdownPrefixCls}-menu`,
+      onCheck: onCheck,
+      checkedKeys: selectedKeys,
+      selectedKeys: selectedKeys,
+      showIcon: false
+      // treeData={getTreeData({ filters: column.filters })}
+      ,
+      treeData: getTreeData({
+        filters: options
+      }),
+      autoExpandParent: true,
+      defaultExpandAll: true,
+      filterTreeNode: searchValue.trim() ? node => {
+        if (typeof filterSearch === 'function') {
+          // @ts-ignore
+          return filterSearch(searchValue, getFilterData(node));
+        }
+        return searchValueMatched(searchValue, node.title);
+      } : undefined
+    })));
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_FilterSearch.default, {
+    filterSearch: filterSearch,
+    value: searchValue,
+    onChange: onSearch,
+    tablePrefixCls: tablePrefixCls,
+    locale: locale
+  }), isEmpty ? empty : /*#__PURE__*/React.createElement(_rcMasterUi.Menu, {
+    selectable: true,
+    multiple: filterMultiple,
+    prefixCls: `${dropdownPrefixCls}-menu`,
+    className: dropdownMenuClass,
+    onSelect: onSelect,
+    onDeselect: onSelect,
+    selectedKeys: selectedKeys
+    // getPopupContainer={getPopupContainer}
+    ,
+    openKeys: openKeys,
+    onOpenChange: onOpenChange,
+    items: items
+  }));
+};
+var _default = exports.default = CheckboxFilter;

package/lib/grid-component/ContextMenu.js

@@ -93,6 +93,7 @@ const ContextMenu = props => {
     React.createElement(_antd.Dropdown, {
       placement: 'topRight',
       open: open,
+      overlayClassName: 'be-popup-container',
       overlayStyle: {
         left: `${pos.x}px`,
         top: `${pos.y}px`

package/lib/grid-component/InternalTable.js

@@ -68,7 +68,8 @@ const InternalTable = props => {
     dataSource,
     allowResizing,
     dataSourceFilter: propDataSourceFilter,
-    onFilterClick,
+    // onFilterClick,
+    // onFilter,
     editAble,
     rowKey: propRowKey,
     format,
@@ -97,8 +98,15 @@ const InternalTable = props => {
       ...local.lang
     }
   };
+
+  // const [filterStates, setFilterState] = React.useState<any>(null)
+  // const [isFilter, setIsFilter] = React.useState<boolean>(false);
+
   const mergerdData = _react.default.useMemo(() => {
+    // return filterDataByColumns2(addRowIdArray(dataSource), filterStates)
+    // return filterDataByColumns3(addRowIdArray(dataSource), filterStates)
     return (0, _hooks.addRowIdArray)(dataSource);
+    // return dataSource
   }, [dataSource]);
   const [columns, setColumns] = _react.default.useState([]);
   const tableRef = _react.default.useRef(null);
@@ -143,7 +151,8 @@ const InternalTable = props => {
     locale,
     t,
     rowKey,
-    dataSource: mergerdData,
+    // dataSource: mergerdData,
+    dataSource,
     buddhistLocale,
     dataSourceFilter: propDataSourceFilter,
     format,
@@ -211,7 +220,22 @@ const InternalTable = props => {
     // setData(newData)
     // setMergedData(newData)
     onDataChange?.(newData);
+    // onDataChange?.(removeFieldRecursive(newData, 'isFilterState'))
   };
+
+  // const triggerFilter = (queries: any) => {
+  //   console.log('queries', queries)
+  //   // console.log('data', dataSource)
+  //   setFilterState(queries)
+  //
+  //   if (queries && queries.length > 0) {
+  //     setIsFilter(true)
+  //   } else {
+  //     setIsFilter(false)
+  //   }
+  //
+  // }
+
   const triggerCommandClick = args => {
     const {
       id,
@@ -370,6 +394,7 @@ const InternalTable = props => {
     locale: locale,
     tableRef: tableRef,
     dataSource: mergerdData
+    // dataSource={dataSource}
     // components={components}
     ,
     components: {
@@ -395,6 +420,10 @@ const InternalTable = props => {
     groupAble: groupAble,
     groupColumns: groupColumns,
     commandClick: triggerCommandClick
+    // triggerFilter={triggerFilter}
+    // isFilter={isFilter}
+    // setIsFilter={setIsFilter}
+    // onScroll={onScroll}
   }));
 };
 var _default = exports.default = InternalTable;

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

@@ -5,12 +5,15 @@ import type { ColumnsTable, GetRowKey, GridTableProps } from "./type";
 type GridProps<T> = GridTableProps<T> & {
     triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
     triggerChangeData?: (newData: T[], type: string) => void;
+    triggerFilter?: (queries: any) => void;
     triggerGroupColumns?: (groupedColumns: string[]) => void;
     tableRef: any;
     bottomToolbar?: () => React.ReactElement;
     getRowKey: GetRowKey<T>;
     rowSelection?: any;
     groupToolbar?: () => React.ReactNode;
+    isFilter?: boolean;
+    setIsFilter?: React.Dispatch<React.SetStateAction<boolean>>;
 };
 declare const TableGrid: <RecordType extends object>(props: GridProps<RecordType>) => React.JSX.Element;
 export default TableGrid;

package/lib/grid-component/TableGrid.js

@@ -21,6 +21,7 @@ var _LoadingSpinner = _interopRequireDefault(require("./LoadingSpinner"));
 var _ColumnsChoose = require("./ColumnsChoose");
 var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
 var _AdvanceFilter = _interopRequireDefault(require("./AdvanceFilter"));
+var _reactTooltip = require("react-tooltip");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // import {ConfigProvider} from "antd";
@@ -48,6 +49,40 @@ const convertFilters = filters => {
         predicate: "and",
         operator: "lessthanorequal"
       });
+    } else if (column?.typeFilter === "NumberRange") {
+      if ((filteredKeys[0] || filteredKeys[0] === 0) && !filteredKeys[1]) {
+        result.push({
+          key,
+          field: column?.dataIndex,
+          value: filteredKeys[0],
+          predicate: "and",
+          operator: "greaterthanorequal"
+        });
+      }
+      if ((filteredKeys[1] || filteredKeys[1] === 0) && !filteredKeys[0]) {
+        result.push({
+          key,
+          field: column?.dataIndex,
+          value: filteredKeys[1],
+          predicate: "and",
+          operator: "lessthanorequal"
+        });
+      }
+      if ((filteredKeys[0] || filteredKeys[0] === 0) && (filteredKeys[1] || filteredKeys[1] === 0)) {
+        result.push({
+          key,
+          field: column?.dataIndex,
+          value: filteredKeys[0],
+          predicate: "and",
+          operator: "greaterthanorequal"
+        }, {
+          key,
+          field: column?.dataIndex,
+          value: filteredKeys[1],
+          predicate: "and",
+          operator: "lessthanorequal"
+        });
+      }
     } else if (column?.typeFilter === 'Checkbox') {
       filteredKeys.forEach(value => {
         result.push({
@@ -115,6 +150,7 @@ const TableGrid = props => {
     showColumnChoose,
     showAdvanceFilter,
     onFilter,
+    triggerFilter,
     selectionSettings,
     rowSelection,
     rowSelected,
@@ -136,6 +172,7 @@ const TableGrid = props => {
     groupColumns,
     groupToolbar,
     showEmptyText,
+    setIsFilter,
     ...rest
   } = props;
   const {
@@ -162,6 +199,7 @@ const TableGrid = props => {
     viewportWidth,
     viewportHeight
   });
+  const [filterStates, setFilterState] = _react.default.useState(null);
 
   // const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>(defaultSelected);
 
@@ -298,6 +336,18 @@ const TableGrid = props => {
   const handleChange = sorter => {
     onSorter?.(sorter);
   };
+  const handleOnFilter = queries => {
+    if (onFilter) {
+      onFilter?.(convertFilters(queries));
+    } else {
+      setFilterState(convertFilters(queries));
+      if (queries && queries.length > 0) {
+        setIsFilter?.(true);
+      } else {
+        setIsFilter?.(false);
+      }
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_ContextMenu.default, {
     open: menuVisible,
     pos: position,
@@ -309,7 +359,9 @@ const TableGrid = props => {
   }), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table, (0, _extends2.default)({
     ref: tableRef
   }, rest, {
+    tableLayout: 'fixed'
     // id={newGuid()}
+    ,
     locale: {
       ...locale,
       emptyText: showEmptyText !== false ? /*#__PURE__*/_react.default.createElement(_rcMasterUi.Empty, {
@@ -321,7 +373,8 @@ const TableGrid = props => {
       spinning: columns && columns.length === 0 || loading === true,
       indicator: /*#__PURE__*/_react.default.createElement(_LoadingSpinner.default, null)
     },
-    dataSource: columns && columns.length > 0 && loading !== true ? dataSource : []
+    dataSource: columns && columns.length > 0 && loading !== true ? (0, _hooks.filterDataByColumns3)(dataSource, filterStates) : []
+    // dataSource={columns && columns.length > 0 && loading !== true ? dataSource : []}
     // className={styles.customTable}
     ,
     className: (0, _classnames.default)(className, {
@@ -356,10 +409,13 @@ const TableGrid = props => {
       // checkStrictly: false,
 
       hideSelectAll: !type || type === 'single' || selectionSettings?.mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
-    },
-    onScroll: () => {
-      setMenuVisible(false);
-    },
+    }
+
+    // onScroll={() => {
+    //   setMenuVisible(false)
+    // }}
+    ,
+
     summary: () => {
       if (typeof summary === 'function') {
         return summary(dataSource);
@@ -398,7 +454,9 @@ const TableGrid = props => {
       ...pagination
     },
     onFilter: val => {
-      onFilter?.(convertFilters(val));
+      handleOnFilter(val);
+      // triggerFilter?.(convertFilters(val))
+      // onFilter?.(convertFilters(val))
     },
     onChange: (paging, filters, sorter) => handleChange(sorter),
     title: showToolbar === false ? undefined : () => {
@@ -460,6 +518,8 @@ const TableGrid = props => {
     // @ts-ignore
     ,
     showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), bottomToolbar?.());
+  }, pagination)), bottomToolbar?.(), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
+    id: "tooltip-header"
+  }));
 };
 var _default = exports.default = TableGrid;

package/lib/grid-component/hooks/columns/index.js

@@ -15,6 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _rcMasterUi = require("rc-master-ui");
 var _CheckboxFilter = _interopRequireDefault(require("../../CheckboxFilter"));
 var _useSelection = require("rc-master-ui/es/table/hooks/useSelection");
+var _numberRange = _interopRequireDefault(require("../../number-range"));
 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 {
@@ -144,11 +145,6 @@ const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, s
   const dateRangeFormat = (0, _utils.getDatepickerFormat)(column?.type, column) ?? 'DD/MM/YYYY';
   const find = dataSourceFilter?.find(it => it.key === column?.field);
   const options = find ? find.data : [];
-
-  // console.log('dataSourceFilter', dataSourceFilter)
-  // console.log('options', options)
-  // console.log('column', column)
-
   switch (type) {
     case 'Number':
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
@@ -168,39 +164,15 @@ const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, s
         }
       }))));
     case 'NumberRange':
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-        className: 'mb-1 d-flex flex-column gap-1'
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          marginBottom: 8
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_numberRange.default, {
+        t: t,
+        min: selectedKeys[0],
+        max: selectedKeys[1],
+        onChange: vals => {
+          console.log('NumberRange', vals);
+          setSelectedKeys(vals);
         }
-      }, /*#__PURE__*/_react.default.createElement(_reactNumericComponent.NumericFormat, {
-        value: selectedKeys[0]
-        // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
-        // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
-        ,
-        allowNegative: true,
-        customInput: _rcMasterUi.Input,
-        className: ' rounded-0 input-element form-control'
-        // onValueChange={(values: any) => {
-        //   onChangeValueFilter(type, values.floatValue, 'min')
-        // }}
-        ,
-        placeholder: t ? t('Min') : 'Min',
-        autoFocus: true
-      })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactNumericComponent.NumericFormat, {
-        value: selectedKeys[1]
-        // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
-        // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
-        ,
-        allowNegative: true,
-        customInput: _rcMasterUi.Input,
-        className: ' rounded-0 input-element form-control',
-        onValueChange: () => {
-          // onChangeValueFilter(type, values.floatValue, 'max')
-        },
-        placeholder: t ? t('Max') : 'Max'
-      })))));
+      })));
     case 'Date':
       const dateValue = selectedKeys[0] ? (0, _utils.convertDateToDayjs)(new Date(selectedKeys[0]), dateFormat) : null;
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
@@ -451,16 +423,13 @@ const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, s
     case 'Checkbox':
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
         className: 'mb-1'
-      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CheckboxFilter.default
-      // locale={{
-      //   filterTitle: 'Chọn tất cả',
-      //   filterCheckall: 'Chọn tất cả'
-      // }}
-      , {
+      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CheckboxFilter.default, {
         locale: locale,
         selectedKeys: selectedKeys,
-        onSelect: setSelectedKeys,
-        options: options,
+        onSelect: setSelectedKeys
+        // options={options}
+        ,
+        options: column.source ? column.source : options ?? [],
         filterMultiple: true,
         open: visible,
         searchValue: searchValue,