es-grid-template 1.3.1 → 1.3.2

package/es/grid-component/table/GridEdit.js

@@ -20,6 +20,8 @@ import Message from "../../Message/Message";
 import { Toolbar, ConfigProvider } from "rc-master-ui";
 import classnames from "classnames";
 import useMergedState from "rc-util/es/hooks/useMergedState";
+import { Plus, Trash2 } from "becoxy-icons";
+// import {ContextInfo, ContextMenuItem} from "../type";
 // import useLazyKVMap from "rc-master-ui/es/table/hooks/useLazyKVMap";
 
 dayjs.extend(customParseFormat);
@@ -82,6 +84,7 @@ const GridEdit = props => {
   }];
   const [form] = Form.useForm();
   const [editingKey, setEditingKey] = useState('');
+  const [isFilter, setIsFilter] = React.useState(false);
   const [selectedCells, setSelectedCells] = useState(new Set());
   const [pasteCells, setPasteCells] = useState(new Set());
   const [cellEditing, setCellEditing] = useState(null);
@@ -106,6 +109,33 @@ const GridEdit = props => {
   const rowsFocus = React.useMemo(() => {
     return [...new Set(Array.from(selectedCells).map(item => parseInt(item.split('-')[0])))] ?? [];
   }, [selectedCells]);
+  const contextMenuItems = React.useMemo(() => {
+    return [{
+      key: 'INSERT_BEFORE',
+      label: 'Thêm dòng bên trên',
+      icon: /*#__PURE__*/React.createElement(Plus, {
+        fontSize: 14
+      })
+    }, {
+      key: 'INSERT_AFTER',
+      label: 'Thêm dòng bên dưới',
+      icon: /*#__PURE__*/React.createElement(Plus, {
+        fontSize: 14
+      })
+    }, {
+      key: 'DELETE_CONTENT',
+      label: 'Xóa nội dung',
+      icon: /*#__PURE__*/React.createElement(Trash2, {
+        fontSize: 14
+      })
+    }, {
+      key: 'DELETE_ROWS',
+      label: 'Xóa dòng',
+      icon: /*#__PURE__*/React.createElement(Trash2, {
+        fontSize: 14
+      })
+    }];
+  }, []);
   const onTriggerExpand = React.useCallback(record => {
     const key = getRowKey(record, dataSource.indexOf(record));
     let newExpandedKeys;
@@ -175,9 +205,12 @@ const GridEdit = props => {
     const rs = [...newData.slice(0, insertAfter + 1), ...duplicatedItems, ...newData.slice(insertAfter + 1)];
     triggerChangeData?.(rs, 'DUPLICATE');
   };
-  const handleInsertBefore = item => {
+
+  // thêm n dòng bên trên
+  const handleInsertBefore = (item, n) => {
     const defaultRowValue = getDefaultValue(defaultValue);
-    const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid();
+    // const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid()
+
     const record = flattenData(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
     if (item.onClick) {
       item.onClick({
@@ -187,27 +220,55 @@ const GridEdit = props => {
       if (!record?.parentId) {
         // Cập nhật data mới
         const newData = [...dataSource];
-        const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
-        newData.splice(index, 0, {
+        const newRows = Array.from({
+          length: n
+        }).map(() => defaultRowValue ? isFilter ? {
+          ...defaultRowValue,
+          id: undefined,
+          rowId: newGuid(),
+          isFilterState: true
+        } : {
           ...defaultRowValue,
-          rowId,
-          parentId: null,
-          id: undefined
+          id: undefined,
+          rowId: newGuid()
+        } : isFilter ? {
+          id: undefined,
+          rowId: newGuid(),
+          isFilterState: true
+        } : {
+          id: undefined,
+          rowId: newGuid()
         });
+        const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
+        newData.splice(index, 0, ...newRows);
         triggerChangeData?.(newData, 'INSERT_BEFORE');
       } else {
         const newData = [...dataSource];
+        const newRows = Array.from({
+          length: n
+        }).map(() => defaultRowValue ? isFilter ? {
+          ...defaultRowValue,
+          id: undefined,
+          rowId: newGuid(),
+          isFilterState: true
+        } : {
+          ...defaultRowValue,
+          id: undefined,
+          rowId: newGuid()
+        } : isFilter ? {
+          id: undefined,
+          rowId: newGuid(),
+          isFilterState: true
+        } : {
+          id: undefined,
+          rowId: newGuid()
+        });
         const parent = findItemByKey(newData, rowKey, record.parentId);
 
         // Cập nhật childData mới
         const childData = parent?.children ? [...parent.children] : [];
         const index = childData.findIndex(obj => obj[rowKey] === record[rowKey]);
-        childData.splice(index, 0, {
-          ...defaultRowValue,
-          rowId,
-          parentId: record.parentId,
-          id: undefined
-        });
+        childData.splice(index, 0, ...newRows);
         const newRowData = {
           ...parent,
           children: childData
@@ -217,9 +278,13 @@ const GridEdit = props => {
       }
     }
   };
-  const handleInsertAfter = item => {
+
+  //thêm 1 dòng bên dưới
+  const handleInsertAfter = (item, n) => {
     const defaultRowValue = getDefaultValue(defaultValue);
-    const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid();
+
+    // const rowId = defaultRowValue && defaultRowValue.id ? defaultRowValue.id : newGuid()
+
     const record = flattenData(childrenColumnName, dataSource)[rowsFocus[rowsFocus.length - 1]];
 
     // const record = getRecordByKey()
@@ -232,25 +297,57 @@ const GridEdit = props => {
       if (!record?.parentId) {
         // Cập nhật data mới
         const newData = [...dataSource];
-        const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
-        newData.splice(index + 1, 0, {
+        const newRows = Array.from({
+          length: n
+        }).map(() => defaultRowValue ? isFilter ? {
+          ...defaultRowValue,
+          id: undefined,
+          rowId: newGuid(),
+          isFilterState: true
+        } : {
           ...defaultRowValue,
-          rowId,
-          parentId: null
+          id: undefined,
+          rowId: newGuid()
+        } : isFilter ? {
+          id: undefined,
+          rowId: newGuid(),
+          isFilterState: true
+        } : {
+          id: undefined,
+          rowId: newGuid()
         });
+        const index = newData.findIndex(obj => obj[rowKey] === record[rowKey]);
+
+        // newData.splice(index + 1, 0, { ...defaultRowValue, rowId, parentId: null })
+        newData.splice(index + 1, 0, ...newRows);
         triggerChangeData?.(newData, 'INSERT_AFTER');
       } else {
         const newData = [...dataSource];
+        const newRows = Array.from({
+          length: n
+        }).map(() => defaultRowValue ? isFilter ? {
+          ...defaultRowValue,
+          id: undefined,
+          rowId: newGuid(),
+          isFilterState: true
+        } : {
+          ...defaultRowValue,
+          id: undefined,
+          rowId: newGuid()
+        } : isFilter ? {
+          id: undefined,
+          rowId: newGuid(),
+          isFilterState: true
+        } : {
+          id: undefined,
+          rowId: newGuid()
+        });
         const parent = findItemByKey(newData, rowKey, record.parentId);
 
         // Cập nhật childData mới
         const childData = parent?.children ? [...parent.children] : [];
         const index = childData.findIndex(obj => obj[rowKey] === record[rowKey]);
-        childData.splice(index + 1, 0, {
-          ...defaultRowValue,
-          rowId,
-          parentId: record.parentId
-        });
+        childData.splice(index + 1, 0, ...newRows);
         const newRowData = {
           ...parent,
           children: childData
@@ -302,12 +399,49 @@ const GridEdit = props => {
       setInnerExpandedKeys(newExpandedKeys);
     }
   };
+  const handleDeleteRows = item => {
+    if (item.onClick) {
+      item.onClick({
+        toolbar: item
+      });
+    } else {
+      const newData = [...dataSource];
+      const indexesToDelete = [...rowsFocus];
+
+      // Sắp xếp giảm dần để xóa từ cuối lên đầu
+      indexesToDelete.sort((a, b) => b - a).forEach(index => {
+        newData.splice(index, 1);
+      });
+      triggerChangeData?.([...newData], 'DELETE_ROWS');
+    }
+  };
   const handleDeleteAll = () => {
     triggerChangeData?.([], 'INSERT_BEFORE');
   };
+  const handleDeleteContent = () => {
+    if (selectedCells.size > 0) {
+      const newData = [...dataSource];
+
+      // colIndex => field
+      const colIndexToField = flatColumns2(columns).map(col => col.field);
+
+      // Duyệt qua mỗi ô cần xóa
+      for (const cell of selectedCells) {
+        const [rowIndexStr, colIndexStr] = cell.split("-");
+        const rowIndex = Number(rowIndexStr);
+        const colIndex = Number(colIndexStr);
+        const field = colIndexToField[colIndex];
+        if (newData[rowIndex] && field && field in newData[rowIndex]) {
+          // @ts-ignore
+          newData[rowIndex][field] = '';
+        }
+      }
+      triggerChangeData?.([...newData], 'DELETE_CONTENT');
+    }
+  };
   const toolbarItemsBottom = useMemo(() => {
     if (!rowsFocus || rowsFocus.length === 0) {
-      return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'INSERT_CHILDREN').map(item => {
+      return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
         if (item.key === 'ADD') {
           return {
             ...item,
@@ -315,6 +449,7 @@ const GridEdit = props => {
               return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
                 className: classnames(`be-toolbar-item`, item?.className)
               }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+                overlayClassName: 'be-popup-container',
                 style: {
                   color: '#28c76f',
                   borderColor: '#28c76f'
@@ -364,6 +499,7 @@ const GridEdit = props => {
             return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
               className: classnames(`be-toolbar-item`, item?.className)
             }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+              overlayClassName: 'be-popup-container',
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
@@ -404,17 +540,25 @@ const GridEdit = props => {
         return {
           ...item,
           template: () => {
-            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'INSERT_BEFORE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
               className: classnames(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/React.createElement(Button, {
+            }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+              overlayClassName: 'be-popup-container',
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
               },
-              variant: 'outlined',
-              onClick: () => handleInsertBefore(item),
-              className: "d-flex toolbar-button"
-            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before')));
+              className: 'toolbar-button toolbar-dropdown-button',
+              menu: {
+                items: itemsAdd,
+                onClick: e => handleInsertBefore(item, Number(e.key))
+              }
+            }, /*#__PURE__*/React.createElement("span", {
+              style: {
+                color: '#28c76f'
+              },
+              onClick: () => handleInsertBefore(item, 1)
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before'))));
           }
         };
       }
@@ -422,17 +566,25 @@ const GridEdit = props => {
         return {
           ...item,
           template: () => {
-            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'INSERT_AFTER' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
               className: classnames(`be-toolbar-item`, item?.className)
-            }, /*#__PURE__*/React.createElement(Button, {
+            }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+              overlayClassName: 'be-popup-container',
               style: {
                 color: '#28c76f',
                 borderColor: '#28c76f'
               },
-              variant: 'outlined',
-              onClick: () => handleInsertAfter(item),
-              className: "d-flex toolbar-button"
-            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after')));
+              className: 'toolbar-button toolbar-dropdown-button',
+              menu: {
+                items: itemsAdd,
+                onClick: e => handleInsertAfter(item, Number(e.key))
+              }
+            }, /*#__PURE__*/React.createElement("span", {
+              style: {
+                color: '#28c76f'
+              },
+              onClick: () => handleInsertAfter(item, 1)
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after'))));
           }
         };
       }
@@ -472,6 +624,24 @@ const GridEdit = props => {
           }
         };
       }
+      if (item.key === 'DELETE_ROWS') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement("div", {
+              className: classnames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#eb4619',
+                borderColor: '#eb4619'
+              },
+              variant: 'outlined',
+              onClick: () => handleDeleteRows(item),
+              className: "d-flex toolbar-button"
+            }, t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`));
+          }
+        };
+      }
       return {
         ...item
       };
@@ -505,15 +675,17 @@ const GridEdit = props => {
 
       // const toolbarContainer = document.getElementsByClassName("ui-rc-toolbar");
       const itemContainer = document.querySelector(`#${id} .ui-rc-toolbar-selection-overflow-item`);
+      const itemHeader = document.querySelector(`#${id} .ui-rc-table-thead`);
       const isInsideContainer = element.closest(".be-popup-container") && container;
-      const isInsideToolbar = element.closest(`#${id} .ui-rc-toolbar-selection-overflow-item`) && itemContainer;
-      if (isInsideContainer || isInsideToolbar) {
-        // console.log('ooooooooooooo')
+      const isInsideToolbar = element.closest(`.ui-rc-toolbar-selection-overflow-item`) && itemContainer;
+      const isInsideHeader = itemHeader && itemHeader.contains(event.target);
+      if (isInsideContainer || isInsideToolbar || isInsideHeader) {
         return;
       }
 
       // if (ref.current && !ref.current.contains(event.target)) {
       // if (ref.current && tableId && !tableId.contains(event.target as Node)) {
+
       if (ref.current && tableBody && !tableBody.contains(event.target)) {
         setEditingKey('');
         isSelecting.current = false;
@@ -784,25 +956,15 @@ const GridEdit = props => {
     }
     setSelectedCells(newSelectedCells);
   };
-
-  // const handleClickColHeader = (column: ColumnTable, indexColumn: number) => {
-  //
-  //   const newSelectedCells = new Set();
-  //
-  //   for (let r = Math.min(dataSource.length, 0); r <= Math.max(dataSource.length - 1, 0); r++) {
-  //     for (let c = Math.min(indexColumn, indexColumn); c <= Math.max(indexColumn, indexColumn); c++) {
-  //       newSelectedCells.add(`${r}-${c}`)
-  //     }
-  //   }
-  //
-  //   // console.log('newSelectedCells', newSelectedCells)
-  //   // setSelectedCells(newSelectedCells)
-  //
-  //   setSelectedCells(new Set(newSelectedCells));
-  //   // forceUpdate();
-  //   setUpdateKey((prev) => prev + 1); // Cập nhật key để trigger re-render
-  // }
-
+  const handleClickColHeader = (column, indexColumn) => {
+    const newSelectedCells = new Set();
+    for (let r = Math.min(dataSource.length, 0); r <= Math.max(dataSource.length - 1, 0); r++) {
+      for (let c = Math.min(indexColumn, indexColumn); c <= Math.max(indexColumn, indexColumn); c++) {
+        newSelectedCells.add(`${r}-${c}`);
+      }
+    }
+    setSelectedCells(new Set(newSelectedCells));
+  };
   const handleMouseDownColIndex = (row, col, e) => {
     if (e.button === 2) {
       e.stopPropagation();
@@ -835,7 +997,7 @@ const GridEdit = props => {
     }
     const newSelectedCells = new Set();
     for (let r = Math.min(startRow, row); r <= Math.max(startRow, row); r++) {
-      for (let c = Math.min(columns.length, col) + 1; c <= Math.max(columns.length, col); c++) {
+      for (let c = Math.min(editAbleColumns(columns).length, col) + 1; c <= Math.max(editAbleColumns(columns).length, col); c++) {
         newSelectedCells.add(`${r}-${c}`);
       }
     }
@@ -1406,6 +1568,9 @@ const GridEdit = props => {
             if (event.key === 'ArrowUp' && (rowNumber ?? 0) > 0) {
               handleFocusCell((rowNumber ?? 0) - 1, colIndex, column, 'vertical', event);
             }
+            if (event.key === 'Delete') {
+              handleDeleteContent();
+            }
           },
           onPaste: event => {
             if (editingKey === '') {
@@ -1425,6 +1590,19 @@ const GridEdit = props => {
               handleCellClick(rowNumber, record, column);
             }
           },
+          onContextMenu: () => {
+            // isSelecting.current = true;
+            // startCell.current = { row: rowNumber, col: colIndex };
+
+            if (selectedCells.size === 0) {
+              setStartSelectedCell({
+                row: rowNumber,
+                col: colIndex
+              });
+              setSelectedCells(new Set([`${rowNumber}-${colIndex}`]));
+              setRowsSelected(new Set());
+            }
+          },
           onClick: () => {
             if (record[rowKey] !== editingKey && editingKey !== '') {
               setEditingKey('');
@@ -1449,6 +1627,28 @@ const GridEdit = props => {
           } : {}
         };
       },
+      onHeaderCell: () => {
+        return {
+          onClick: () => {
+            handleClickColHeader(column, colIndex);
+          },
+          onCopy: e => {
+            if (editingKey === '') {
+              handleCopy(e);
+              e.preventDefault();
+            }
+          },
+          onPaste: event => {
+            if (editingKey === '') {
+              handlePaste(dataSource[0], colIndex, 0, event);
+              event.preventDefault();
+            }
+          },
+          style: {
+            userSelect: 'none'
+          }
+        };
+      },
       render: (value, record, rowIndex) => {
         const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
         return /*#__PURE__*/React.createElement("div", {
@@ -1462,7 +1662,7 @@ const GridEdit = props => {
           onMouseUp: handleMouseUp
         }, /*#__PURE__*/React.createElement("div", {
           className: 'ui-rc_content'
-        }, renderContent(column, value, record, rowIndex, format)), selectedCells && selectedCells.size > 0 && getLastSelectCell(selectedCells).row === rowNumber && getLastSelectCell(selectedCells).col === colIndex && isEditable(column, record) && !isSelectDragging &&
+        }, renderContent(column, value, record, rowIndex, format)), selectedCells && selectedCells.size > 0 && getLastSelectCell(selectedCells).row === rowNumber && getLastSelectCell(selectedCells).col === colIndex && isEditable(column, record) && !isSelectDragging && rowIndex !== dataSource.length - 1 &&
         /*#__PURE__*/
         // showDraggingPoint &&
         React.createElement("div", {
@@ -1523,6 +1723,20 @@ const GridEdit = props => {
   const onSelectChange = keys => {
     setMergedSelectedKeys(keys);
   };
+  const contextMenuClick = args => {
+    if (args.item.key === 'INSERT_BEFORE') {
+      handleInsertAfter(args.item, 1);
+    }
+    if (args.item.key === 'INSERT_AFTER') {
+      handleInsertBefore(args.item, 1);
+    }
+    if (args.item.key === 'DELETE_ROWS') {
+      handleDeleteRows(args.item);
+    }
+    if (args.item.key === 'DELETE_CONTENT') {
+      handleDeleteContent();
+    }
+  };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     heightTable: height,
     style: {
@@ -1630,13 +1844,18 @@ const GridEdit = props => {
       }
     },
     triggerChangeColumns: triggerChangeColumns,
+    clickHeaderToSort: false,
     rowSelection: columns && columns.length === 0 ? undefined : {
       type: mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
       columnWidth: !mode ? 0.0000001 : columnWidth ?? 50,
       onChange: onSelectChange,
       selectedRowKeys: mergedSelectedKeys,
       preserveSelectedRowKeys: true
-    }
+    },
+    isFilter: isFilter,
+    setIsFilter: setIsFilter,
+    contextMenuItems: contextMenuItems,
+    contextMenuClick: contextMenuClick
   })))))), /*#__PURE__*/React.createElement(Toaster, {
     position: toast,
     toastOptions: {

package/es/grid-component/table/Group.d.ts

@@ -8,6 +8,7 @@ type Props<T> = GridTableProps<T> & {
     getRowKey: GetRowKey<T>;
     triggerGroupColumns?: (groupedColumns: string[]) => void;
     triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[]) => void;
+    triggerFilter?: (queries: any) => void;
 };
 declare const Group: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Group;

package/es/grid-component/table/Group.js

@@ -67,7 +67,7 @@ const Group = props => {
         gap: '10px',
         marginRight: 10
       }
-    }, /*#__PURE__*/React.createElement(ColumnsGroup, {
+    }, groupSetting?.showGroupIcon !== false && /*#__PURE__*/React.createElement(ColumnsGroup, {
       t: t
       // defaultGroupColumns={['name']}
       ,

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

@@ -18,7 +18,7 @@ export type ToolbarItem = Omit<RcToolbarItem, 'position' | 'align'> & {
     align?: ITextAlign;
     onClick?: (args: any) => void;
 };
-export type ContextMenuItem = ItemType & {};
+export type ContextMenuItem = ItemType;
 export type ITemplateColumn = {
     value: any;
     column: any;
@@ -218,6 +218,7 @@ export type IGroupSetting = {
     client?: boolean;
     onGroup?: (props: IOnGroup) => void;
     hiddenColumnGroup?: boolean;
+    showGroupIcon?: boolean;
     unClearableLevel?: 1 | 2 | 3 | undefined;
 };
 type IOnGroup = {

package/lib/grid-component/CheckboxFilter.js

@@ -88,6 +88,7 @@ const CheckboxFilter = props => {
 
   // const [searchValue, setSearchValue] = React.useState('');
 
+  console.log('options', options);
   const [openKeys, setOpenKeys] = React.useState([]);
 
   // clear search value after close filter dropdown
@@ -180,6 +181,9 @@ const CheckboxFilter = props => {
       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,

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import type { TableLocale } from "rc-master-ui/es/table/interface";
+type Props = {
+    options: any[];
+    filterSearch?: boolean;
+    open?: boolean;
+    tablePrefixCls?: string;
+    prefixCls?: string;
+    dropdownPrefixCls?: string;
+    filterMultiple: boolean;
+    showFilter?: boolean;
+    onSelect?: (value: any) => void;
+    selectedKeys: string[];
+    locale?: TableLocale;
+    filterMode?: 'menu' | 'tree';
+    searchValue: string;
+    setSearchValue: (value: any) => void;
+};
+declare const CheckboxFilter: (props: Props) => React.JSX.Element;
+export default CheckboxFilter;