aio-table 11.2.1 → 11.2.2

package/index.css

@@ -163,6 +163,8 @@
     z-index: 100;
     box-sizing: border-box;
     min-height: 36px;
+    gap: 6px;
+    padding: 6px;
 }
 
 .aio-table-toolbar-content {
@@ -174,17 +176,24 @@
 }
 
 .aio-table-toolbar-button {
-    height: 100%;
+    height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
-    min-width: 36px;
+    width: 36px;
     border: none;
     background: none;
 }
+.aio-table-toolbar .aio-filter-icon-button{
+    border:none;
+    background: none;
+}
 .aio-table-toolbar-button .aio-input{
     border:none;
     background: none;
+    width:100%;
+    height:100%;
+    padding:0;
 }
 
 

package/index.js

@@ -111,6 +111,20 @@ const AIOTable = (props) => {
         onChangeRows: props.onChange,
         onChangeSort: props.onChangeSort,
     });
+    const filterHook = UT.useFilter({
+        columns: filterColumns,
+        filter: props.filter || { onChange: () => { } },
+        fa: props.fa,
+        columnOption: {
+            text: (column) => getColumnOption('title', tableHook.getCellDetail({ column })),
+            id: (column) => getColumnOption('id', tableHook.getCellDetail({ column })),
+            type: (column) => getColumnOption('type', tableHook.getCellDetail({ column })) || 'text',
+            options: (column) => {
+                const filter = getColumnOption('filter', tableHook.getCellDetail({ column }));
+                return filter === null || filter === void 0 ? void 0 : filter.options;
+            }
+        }
+    });
     function getColumns() {
         let { columns = [] } = props;
         let searchColumns = [], excelColumns = [], filterColumns = [], toggleColumns = [];
@@ -260,19 +274,10 @@ const AIOTable = (props) => {
     const { gap = [0, 1] } = props;
     let attrs = UT.AddToAttrs(props.attrs, { className: ['aio-table', props.className], style: Object.assign({ gap: gap[1] }, props.style), attrs: { ref: dom } });
     const context = {
-        rootProps: props, excelColumns, filterColumns, tableHook, sortHook, ROWS, toggleColumns,
+        rootProps: props, excelColumns, filterColumns, tableHook, sortHook, ROWS, toggleColumns, filterHook,
         getRowsIndexDic, add, remove, search, exportToExcel, DragColumns, getIcon, popup, getColumnOption
     };
-    return (_jsxs(Provider, { value: context, children: [_jsxs("div", Object.assign({}, attrs, { children: [_jsx(TableToolbar, {}), !!props.filter &&
-                        _jsx(UT.Filterbar, { columns: filterColumns, filter: props.filter, fa: props.fa, columnOption: {
-                                text: (column) => getColumnOption('title', tableHook.getCellDetail({ column })),
-                                id: (column) => getColumnOption('id', tableHook.getCellDetail({ column })),
-                                type: (column) => getColumnOption('type', tableHook.getCellDetail({ column })) || 'text',
-                                options: (column) => {
-                                    const filter = getColumnOption('filter', tableHook.getCellDetail({ column }));
-                                    return filter === null || filter === void 0 ? void 0 : filter.options;
-                                },
-                            } }), _jsxs("div", { className: 'aio-table-unit aio-table-scroll', style: { gap: gap[1] }, children: [_jsx(TableHeader, {}), _jsx(TableRows, {})] }), pagingHook.render()] })), popup.render()] }));
+    return (_jsxs(Provider, { value: context, children: [_jsxs("div", Object.assign({}, attrs, { children: [_jsx(TableToolbar, {}), !!props.filter && filterHook.renderTags(), _jsxs("div", { className: 'aio-table-unit aio-table-scroll', style: { gap: gap[1] }, children: [_jsx(TableHeader, {}), _jsx(TableRows, {})] }), pagingHook.render()] })), popup.render()] }));
 };
 export default AIOTable;
 const TableRows = () => {
@@ -313,12 +318,12 @@ const TableRows = () => {
     return _jsx("div", { className: 'aio-table-rows', style: { gap: gap[1] }, children: content });
 };
 const TableToolbar = () => {
-    let { add, exportToExcel, search, rootProps, excelColumns, toggleColumns, getIcon, sortHook, getColumnOption, tableHook } = useProvider();
+    let { add, exportToExcel, search, rootProps, excelColumns, toggleColumns, getIcon, sortHook, getColumnOption, tableHook, filterHook } = useProvider();
     let { toolbarAttrs, toolbar, onAdd, onSearch, value, onChangeColumns, columns = [] } = rootProps;
     const columnsRef = useRef(columns);
     columnsRef.current = columns;
     toolbarAttrs = UT.AddToAttrs(toolbarAttrs, { className: 'aio-table-toolbar' });
-    if (!onAdd && !toolbar && !onSearch && !sortHook.sorts.length && !excelColumns.length && !toggleColumns.length) {
+    if (!onAdd && !toolbar && !onSearch && !sortHook.sorts.length && !excelColumns.length && !toggleColumns.length && !rootProps.filter) {
         return null;
     }
     function getAddText() {
@@ -333,9 +338,10 @@ const TableToolbar = () => {
         const column = columns.find((o) => o.id === columnId);
         return getColumnOption(key, tableHook.getCellDetail({ column }));
     };
-    return (_jsxs("div", Object.assign({}, toolbarAttrs, { children: [toolbar && _jsx("div", { className: 'aio-table-toolbar-content', children: typeof toolbar === 'function' ? toolbar() : toolbar }), !!onSearch &&
-                _jsx("div", { className: 'aio-table-search', children: _jsx(AIOInput, { type: 'text', onChange: (value) => search(value), after: getIcon('mdiMagnify', 0.7) }) }), sortHook.renderSortButton(), !!excelColumns.length && _jsx("div", { className: 'aio-table-toolbar-button aio-table-excel-button', onClick: () => exportToExcel(), children: getIcon('mdiFileExcel', 0.8) }), !!toggleColumns.length &&
-                _jsx("div", { className: 'aio-table-toolbar-button aio-table-toggle-button', children: _jsx(AISelect, { text: getIcon('mdiEye', 0.8), hideTags: true, options: toggleColumns.map((o) => (Object.assign(Object.assign({}, o), { show: true }))), caret: false, option: {
+    return (_jsxs("div", Object.assign({}, toolbarAttrs, { children: [toolbar && _jsx("div", { className: 'aio-table-toolbar-content', children: typeof toolbar === 'function' ? toolbar() : toolbar }), !!rootProps.filter && filterHook.renderButton(), !!onSearch &&
+                _jsx("div", { className: 'aio-table-search', children: _jsx(AIOInput, { type: 'text', onChange: (value) => search(value), after: getIcon('mdiMagnify', 0.7) }) }), !!sortHook.sorts.length &&
+                _jsx("div", { className: 'aio-table-toolbar-button aio-table-sort-button', children: sortHook.renderSortButton() }), !!excelColumns.length && _jsx("div", { className: 'aio-table-toolbar-button aio-table-excel-button', onClick: () => exportToExcel(), children: getIcon('mdiFileExcel', 0.8) }), !!toggleColumns.length &&
+                _jsx("div", { className: 'aio-table-toolbar-button aio-table-toggle-button', children: _jsx(AISelect, { text: getIcon('mdiEye', 0.8), justify: true, hideTags: true, options: toggleColumns.map((o) => (Object.assign(Object.assign({}, o), { show: true }))), caret: false, option: {
                             text: (column) => getColumnOptionWrapper(column.id, 'title'),
                             checked: (column) => getColumnOptionWrapper(column.id, 'show'),
                             onClick: (column) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "aio-table",
-    "version": "11.2.1",
+    "version": "11.2.2",
     "description": "all in one table. tree mode , simple mode , tree mode, gantt mode , groupby mode, freeze mode.",
     "main": "index.js",
     "types": "index.d.ts",