aio-table 13.0.0 → 14.0.1

package/index.js

@@ -8,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, createRef, Fragment, useContext, useEffect, useRef, useState } from "react";
-import AIOInput, { AICheckbox, AIFormInput, AINumber, AIRadio, AISelect, AIText, AITime, SuggestionInput, useForm } from "aio-input";
+import { createContext, createRef, Fragment, useContext, useEffect, useMemo, useRef, useState } from "react";
+import AIOInput, { AICheckbox, AIFormInput, AINumber, AIRadio, AISelect, AIText, AITime } from "aio-input";
 import * as UT from 'aio-utils';
 import usePopup from "aio-popup";
 import AIODate from "aio-date";
@@ -21,45 +21,74 @@ const AIOTable = (props) => {
     const popup = usePopup();
     const fileClass = new UT.FileClass();
     let [searchValue, setSearchValue] = useState('');
-    const [searchColumns, setSearchColumns] = useState([]);
-    const [excelColumns, setExcelColumns] = useState([]);
-    const [filterColumns, setFilterColumns] = useState([]);
-    const [toggleColumns, setToggleColumns] = useState([]);
-    const filterColumnsRef = useRef(filterColumns);
-    filterColumnsRef.current = filterColumns;
-    const rowsIndexDicRef = useRef({});
-    const setRowsIndexDic = (rowsIndexDic) => rowsIndexDicRef.current = rowsIndexDic;
-    const getRowsIndexDic = () => rowsIndexDicRef.current;
     const propsRef = useRef(props);
     propsRef.current = props;
     const pagingHook = usePaging({ rows: props.value, paging: props.paging, onChange: props.onChangePaging });
-    const getColumnOption = (key, cellDetails) => {
-        if (key === 'id') {
-            return cellDetails.column.id;
-        }
-        const columnValue = cellDetails.column[key];
-        if (columnValue !== undefined) {
-            const { getValue = {} } = props;
-            if (getValue[columnValue]) {
-                return getValue[columnValue](cellDetails);
+    // const getColumnOption: I_getColumnOption<any> = (key, cellDetails) => {
+    //     if (key === 'id') { return cellDetails.column.id }
+    //     const columnValue = cellDetails.column[key]
+    //     if (columnValue !== undefined) {
+    //         const { getValue = {} } = props
+    //         if (getValue[columnValue]) { return getValue[columnValue](cellDetails) }
+    //         return cellDetails.column[key]
+    //     }
+    //     const { columnOption } = props;
+    //     const fn = (columnOption || {})[key] || (() => { })
+    //     const res = fn(cellDetails);
+    //     if (res !== undefined) { return res }
+    //     if (key === 'value') {
+    //         return cellDetails.row[cellDetails.column.id]
+    //     }
+    //     const defaults: { [key in keyof I_table_column<any>]?: any } = { show: true, title: '', justify: false, titleAttrs: {} }
+    //     return defaults[key]
+    // }
+    const tableHook = useTable(() => propsRef.current, () => props.paging);
+    const getColumn = (col) => {
+        const { columnOption = {} } = props;
+        const column = Object.assign({}, col);
+        for (let prop in columnOption) {
+            if (prop !== 'value') {
+                const fn = columnOption[prop];
+                if (fn) {
+                    const res = fn({ column, row: undefined, rowIndex: 0 });
+                    if (res !== undefined) {
+                        column[prop] = res;
+                    }
+                }
             }
-            return cellDetails.column[key];
-        }
-        const { columnOption } = props;
-        const fn = (columnOption || {})[key] || (() => { });
-        const res = fn(cellDetails);
-        if (res !== undefined) {
-            return res;
         }
-        if (key === 'value') {
-            return cellDetails.row[cellDetails.column.id];
+        const res = Object.assign(Object.assign({}, column), col);
+        if (!res.value) {
+            res.value = `row.${column.id}`;
         }
-        const defaults = { show: true, title: '', justify: false, titleAttrs: {} };
-        return defaults[key];
+        return res;
+    };
+    const getColumns = () => {
+        let { columns = [] } = props;
+        let searchColumns = [], excelColumns = [], filterColumns = [], toggleColumns = [];
+        let updatedColumns = columns.map((col, i) => {
+            const column = getColumn(col);
+            const { filter, search, excel, toggle, id, show = true } = column;
+            if (id === undefined) {
+                console.error(`aio-table error => missing column id in props.columns[${i}]`);
+            }
+            const fixedColumn = Object.assign(Object.assign({}, column), { show });
+            if (search) {
+                searchColumns.push(fixedColumn);
+            }
+            if (excel) {
+                excelColumns.push(fixedColumn);
+            }
+            if (filter) {
+                filterColumns.push(fixedColumn);
+            }
+            if (toggle) {
+                toggleColumns.push(fixedColumn);
+            }
+            return fixedColumn;
+        });
+        return { columns: updatedColumns, searchColumns, excelColumns, filterColumns, toggleColumns };
     };
-    const tableHook = useTable(() => propsRef.current, () => props.paging, getColumnOption);
-    const getIconRef = useRef(new UT.GetSvg());
-    const getIcon = getIconRef.current.getIcon;
     const DragColumns = UT.useDrag((dragIndex, dropIndex, reOrder) => {
         const newColumns = reOrder(props.columns || [], dragIndex, dropIndex);
         if (props.onChangeColumns) {
@@ -71,11 +100,9 @@ const AIOTable = (props) => {
             return sort.getValue;
         }
         return (row) => {
-            const cellDetail = tableHook.getCellDetail({ column, row });
-            const type = getColumnOption('type', cellDetail) || 'text';
-            const value = getColumnOption('value', cellDetail);
-            const cellValue = tableHook.getCellValue(cellDetail, value);
-            if (type === 'date') {
+            const { type = 'text' } = column;
+            const cellValue = tableHook.getCellValue({ row, column, rowIndex: 0 });
+            if (type === 'date' || type === 'jalaliDate') {
                 const DATE = new AIODate();
                 try {
                     return DATE.getTime(cellValue);
@@ -91,15 +118,14 @@ const AIOTable = (props) => {
         let sorts = [];
         for (let i = 0; i < columns.length; i++) {
             const column = columns[i];
-            const cellDetail = tableHook.getCellDetail({ column });
-            const columnId = getColumnOption('id', cellDetail);
-            const sortValue = getColumnOption('sort', cellDetail);
+            const columnId = column.id;
+            const sortValue = column.sort;
             const sort = sortValue === true ? { sortId: columnId } : sortValue;
             if (!sort) {
                 continue;
             }
             let { active = false, dir = 'dec', sortId } = sort;
-            let sortItem = { dir, title: sort.title || getColumnOption('title', cellDetail), sortId, active, getValue: getGetValue(sort, column) };
+            let sortItem = { dir, title: sort.title || column.title, sortId, active, getValue: getGetValue(sort, column) };
             sorts.push(sortItem);
         }
         return sorts;
@@ -111,41 +137,7 @@ const AIOTable = (props) => {
         onChangeRows: props.onChange,
         onChangeSort: props.onChangeSort,
     });
-    function getColumns() {
-        let { columns = [] } = props;
-        let searchColumns = [], excelColumns = [], filterColumns = [], toggleColumns = [];
-        let updatedColumns = columns.map((column, i) => {
-            const cellDetail = tableHook.getCellDetail({ column });
-            const filter = getColumnOption('filter', cellDetail);
-            const search = getColumnOption('search', cellDetail);
-            const excel = getColumnOption('excel', cellDetail);
-            const toggle = getColumnOption('toggle', cellDetail);
-            const id = getColumnOption('id', cellDetail);
-            if (id === undefined) {
-                console.error(`aio-table error => missing column id in props.columns[${i}]`);
-            }
-            if (search) {
-                searchColumns.push(column);
-            }
-            if (excel) {
-                excelColumns.push(column);
-            }
-            if (filter) {
-                filterColumns.push(column);
-            }
-            if (toggle) {
-                toggleColumns.push(column);
-            }
-            return column;
-        });
-        setSearchColumns(searchColumns);
-        setExcelColumns(excelColumns);
-        setFilterColumns(filterColumns);
-        setToggleColumns(toggleColumns);
-        return updatedColumns;
-    }
     useEffect(() => {
-        const columns = getColumns();
         sortHook.setSorts(getSorts(columns));
     }, []);
     useEffect(() => {
@@ -153,28 +145,6 @@ const AIOTable = (props) => {
             pagingHook.changePaging(props.paging);
         }
     }, [JSON.stringify(props.paging)]);
-    function add() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!props.onAdd) {
-                return;
-            }
-            const res = yield props.onAdd();
-            if (res && props.onChange) {
-                props.onChange([res, ...props.value]);
-            }
-        });
-    }
-    function remove(row, index) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!props.onRemove) {
-                return;
-            }
-            const res = yield props.onRemove({ row, rowIndex: index });
-            if (res === true && props.onChange) {
-                props.onChange(props.value.filter((o) => o._id !== row._id));
-            }
-        });
-    }
     function exportToExcel() {
         let list = [];
         if (typeof props.excel === 'function') {
@@ -182,16 +152,12 @@ const AIOTable = (props) => {
         }
         else {
             for (let rowIndex = 0; rowIndex < props.value.length; rowIndex++) {
-                const isFirst = rowIndex === 0;
-                const isLast = rowIndex === props.value.length - 1;
                 let row = props.value[rowIndex], json = {};
                 for (let j = 0; j < excelColumns.length; j++) {
                     const column = excelColumns[j];
-                    const cellDetail = tableHook.getCellDetail({ row, rowIndex, isFirst, isLast, column });
-                    const excel = getColumnOption('excel', cellDetail);
+                    const { excel, title } = column;
                     let key = '';
                     if (excel === true) {
-                        const title = getColumnOption('title', cellDetail);
                         if (typeof title === 'string') {
                             key = title;
                         }
@@ -205,8 +171,7 @@ const AIOTable = (props) => {
                     else {
                         continue;
                     }
-                    const value = getColumnOption('value', cellDetail);
-                    json[key] = tableHook.getCellValue(cellDetail, value, '');
+                    json[key] = tableHook.getCellValue({ row, rowIndex, column });
                 }
                 list.push(json);
             }
@@ -220,15 +185,11 @@ const AIOTable = (props) => {
         if (!searchColumns.length || !searchValue) {
             return rows;
         }
-        const rowsIndexDic = getRowsIndexDic();
-        return UT.Search(rows, searchValue, (row) => {
-            const { isFirst, isLast, rowIndex } = rowsIndexDic[(row)._id];
+        return UT.Search(rows, searchValue, (row, rowIndex) => {
             let str = '';
             for (let i = 0; i < searchColumns.length; i++) {
                 let column = searchColumns[i];
-                const cellDetail = tableHook.getCellDetail({ row, rowIndex, isFirst, isLast, column });
-                const value = getColumnOption('value', cellDetail);
-                let cellValue = tableHook.getCellValue(cellDetail, value, '');
+                let cellValue = tableHook.getCellValue({ row, rowIndex, column });
                 if (cellValue) {
                     str += cellValue + ' ';
                 }
@@ -238,11 +199,6 @@ const AIOTable = (props) => {
     }
     function getRows() {
         const rows = props.value;
-        const rowsIndexDic = {};
-        for (let i = 0; i < props.value.length; i++) {
-            rowsIndexDic[props.value[i]._id] = { rowIndex: i, isFirst: i === 0, isLast: i === rows.length - 1 };
-        }
-        setRowsIndexDic(rowsIndexDic);
         let searchedRows = getSearchedRows(rows);
         let sortedRows = sortHook.getSortedRows(searchedRows);
         let pagedRows = pagingHook.getPagedRows(sortedRows);
@@ -256,50 +212,70 @@ const AIOTable = (props) => {
             props.onSearch(searchValue);
         }
     }
+    const { columns, searchColumns, excelColumns, filterColumns, toggleColumns } = useMemo(() => getColumns(), [props.columns]);
     let ROWS = getRows();
     const context = {
         rootProps: props, excelColumns, filterColumns, tableHook, sortHook, ROWS, toggleColumns, pagingHook,
-        getRowsIndexDic, add, remove, search, exportToExcel, DragColumns, getIcon, popup, getColumnOption
+        search, exportToExcel, DragColumns, popup, columns
     };
     return (_jsxs(Provider, { value: context, children: [_jsx(AIOTableComponent, Object.assign({}, props)), popup.render()] }));
 };
 export default AIOTable;
 const AIOTableComponent = (props) => {
     const { pagingHook, rootProps } = useProvider();
-    const { formFilter, columnsFilter } = rootProps;
+    const { filter } = rootProps;
     let [dom] = useState(createRef());
-    const { gap = [0, 1] } = props;
+    const { gap = [] } = props;
     let attrs = UT.AddToAttrs(props.attrs, { className: ['aio-table', props.className], style: Object.assign({ gap: gap[1] }, props.style), attrs: { ref: dom } });
     const filterHook = useFilter();
-    return (_jsxs("div", Object.assign({}, attrs, { children: [_jsx(TableToolbar, { filterHook: filterHook }), (!!formFilter || !!columnsFilter) && filterHook.renderTags(), _jsxs("div", { className: 'aio-table-unit aio-table-scroll', style: { gap: gap[1] }, children: [_jsx(TableHeader, {}), _jsx(TableRows, {})] }), pagingHook.render()] })));
+    return (_jsxs("div", Object.assign({}, attrs, { children: [_jsx(TableToolbar, { filterHook: filterHook }), !!filter && filterHook.renderTags(), _jsxs("div", { className: 'aio-table-unit aio-table-scroll', style: { gap: gap[1] }, children: [_jsx(TableHeader, {}), _jsx(TableRows, {})] }), pagingHook.render()] })));
 };
 const TableRows = () => {
     let { ROWS, rootProps } = useProvider();
-    let { rowOption = {}, rowsTemplate, placeholder = 'there is not any items' } = rootProps;
-    const { before: rowBefore = () => null, after: rowAfter = () => null, template: rowTemplate, } = rowOption;
+    let { rowBefore = () => null, rowAfter = () => null, rowTemplate, rowsTemplate, placeholder = 'there is not any items' } = rootProps;
     let rows = ROWS.pagedRows || [];
     let content;
     if (rowsTemplate) {
         content = rowsTemplate(rows);
     }
     else if (rows.length) {
-        content = rows.map((o, i) => {
-            let { id = 'ailr' + Math.round(Math.random() * 10000000) } = o;
-            o._id = o._id === undefined ? id : o._id;
-            const rowDetail = {
-                row: o, rowIndex: i,
-                isFirst: i === 0,
-                isLast: i === rows.length - 1
-            };
-            let Row;
-            if (rowTemplate) {
-                Row = rowTemplate(rowDetail);
-            }
-            else {
-                Row = _jsx(TableRow, { rowDetail: rowDetail }, o._id);
-            }
-            return (_jsxs(Fragment, { children: [rowBefore(rowDetail), Row, rowAfter(rowDetail)] }, o._id));
-        });
+        if (rootProps.onSwap) {
+            content = (_jsx(UT.DragAndDrop, { data: rows, getId: (o) => {
+                    let { id = 'ailr' + Math.round(Math.random() * 10000000) } = o;
+                    o._id = o._id === undefined ? id : o._id;
+                    return o._id;
+                }, getContent: (o, { index, id }) => {
+                    o._id = o._id === undefined ? id : o._id;
+                    const rowDetail = { row: o, rowIndex: index };
+                    let Row;
+                    if (rowTemplate) {
+                        Row = rowTemplate(rowDetail);
+                    }
+                    else {
+                        Row = _jsx(TableRow, { rowDetail: rowDetail }, o._id);
+                    }
+                    return (_jsxs(Fragment, { children: [rowBefore(rowDetail), Row, rowAfter(rowDetail)] }, o._id));
+                }, onChange: (newRows) => {
+                    if (rootProps.onChange) {
+                        rootProps.onChange(newRows);
+                    }
+                } }));
+        }
+        else {
+            content = rows.map((o, i) => {
+                let { id = 'ailr' + Math.round(Math.random() * 10000000) } = o;
+                o._id = o._id === undefined ? id : o._id;
+                const rowDetail = { row: o, rowIndex: i };
+                let Row;
+                if (rowTemplate) {
+                    Row = rowTemplate(rowDetail);
+                }
+                else {
+                    Row = _jsx(TableRow, { rowDetail: rowDetail }, o._id);
+                }
+                return (_jsxs(Fragment, { children: [rowBefore(rowDetail), Row, rowAfter(rowDetail)] }, o._id));
+            });
+        }
     }
     else if (placeholder) {
         content = _jsx("div", { style: { width: '100%', textAlign: 'center', padding: 12, boxSizing: 'border-box' }, children: placeholder });
@@ -307,253 +283,291 @@ const TableRows = () => {
     else {
         return null;
     }
-    const { gap = [0, 1] } = rootProps;
+    const { gap = [] } = rootProps;
     return _jsx("div", { className: 'aio-table-rows', style: { gap: gap[1] }, children: content });
 };
 const TableToolbar = ({ filterHook }) => {
-    let { add, exportToExcel, search, rootProps, excelColumns, toggleColumns, getIcon, sortHook, getColumnOption, tableHook } = useProvider();
-    let { toolbarAttrs, toolbar, onAdd, onSearch, value, onChangeColumns, columns = [], fa, formFilter, columnsFilter } = rootProps;
+    let { exportToExcel, search, rootProps, excelColumns, toggleColumns, sortHook, columns } = useProvider();
+    let { toolbarAttrs, toolbar, onSearch, value, onChangeColumns, fa, filter, inlineSort } = 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 && !rootProps.columnsFilter && !rootProps.formFilter) {
+    if (!toolbar && !onSearch && !sortHook.sorts.length && !excelColumns.length && !toggleColumns.length && !filter) {
         return null;
     }
     function getAddText() {
         let { addText } = rootProps;
         if (!rootProps.addText) {
-            return getIcon('mdiPlusThick', 0.8);
+            return new UT.GetSvg('em').getIcon('mdiPlusThick', 0.8);
         }
         return typeof addText === 'function' ? addText(value) : addText;
     }
-    const getColumnOptionWrapper = (columnId, key) => {
-        const columns = columnsRef.current || [];
-        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 }), (!!formFilter || !!columnsFilter) && filterHook.renderButton({ className: 'aio-table-toolbar-button' }), !!onSearch && _jsx(AIOInput, { type: 'text', className: 'aio-table-search', onChange: (value) => search(value), after: getIcon('mdiMagnify', 0.7) }), !!sortHook.sorts.length && sortHook.renderSortButton({ className: 'aio-table-toolbar-button aio-table-sort-button' }), !!excelColumns.length && _jsx("div", { className: 'aio-table-toolbar-button aio-table-excel-button', onClick: () => exportToExcel(), children: getIcon('mdiFileExcel', 0.8) }), !!toggleColumns.length &&
+    return (_jsxs("div", Object.assign({}, toolbarAttrs, { children: [toolbar && _jsx("div", { className: 'aio-table-toolbar-content', children: typeof toolbar === 'function' ? toolbar() : toolbar }), !!filter && filterHook.renderButton(), !!onSearch && _jsx(AIOInput, { type: 'text', className: 'aio-table-search', onChange: (value) => search(value), after: new UT.GetSvg('em').getIcon('mdiMagnify', 0.7) }), !!sortHook.sorts.length && !inlineSort && sortHook.renderSortButton({ className: 'aio-table-toolbar-button aio-table-sort-button' }), !!excelColumns.length && _jsx("div", { className: 'aio-table-toolbar-button aio-table-excel-button', onClick: () => exportToExcel(), children: new UT.GetSvg('em').getIcon('mdiFileExcel', 0.8) }), !!toggleColumns.length &&
                 _jsx(AISelect, { popover: {
                         header: { title: fa ? 'نمایش ستون ها' : 'Show Columns', onClose: false },
                         headerAttrs: { className: 'aio-table-dropdown-header' },
                         limitTo: '.aio-table'
-                    }, className: 'aio-table-toolbar-button aio-table-toggle-button', 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'),
+                    }, className: 'aio-table-toolbar-button aio-table-toggle-button', text: new UT.GetSvg('em').getIcon('mdiEye', 0.8), justify: true, hideTags: true, options: toggleColumns.map((o) => (Object.assign({}, o))), caret: false, option: {
+                        text: (column) => column.title,
+                        checked: (column) => !!column.show,
                         onClick: (column) => {
+                            console.log(toggleColumns);
                             if (!onChangeColumns) {
                                 return;
                             }
                             const columns = columnsRef.current || [];
-                            onChangeColumns(columns.map((o) => column.id === o.id ? Object.assign(Object.assign({}, o), { show: !getColumnOptionWrapper(o.id, 'show') }) : o));
+                            const newColumns = columns.map((o) => column.id === o.id ? Object.assign(Object.assign({}, o), { show: !o.show }) : o);
+                            onChangeColumns(newColumns);
                         },
+                        show: () => true,
+                        justify: () => false,
                         close: () => false
-                    } }), !!onAdd && _jsx("div", { className: 'aio-table-toolbar-button aio-table-add-button', onClick: () => add(), children: getAddText() })] })));
+                    } })] })));
 };
 const TableHeader = () => {
-    let { rootProps, getColumnOption, tableHook } = useProvider();
-    let { headerAttrs, onRemove, gap = [0, 1], columns = [] } = rootProps;
+    let { rootProps, columns } = useProvider();
+    let { headerAttrs, gap = [] } = rootProps;
     headerAttrs = UT.AddToAttrs(headerAttrs, { className: 'aio-table-header', style: { gap: gap[0] } });
     let Titles = columns.map((column, i) => {
-        const columnId = getColumnOption('id', tableHook.getCellDetail({ column }));
+        const columnId = column.id;
         return _jsx(TableTitle, { column: column, isLast: i === columns.length - 1, colIndex: i }, columnId);
     });
-    let RemoveTitle = !onRemove ? null : _jsx("div", { className: 'aio-table-remove-title' });
-    return _jsxs("div", Object.assign({}, headerAttrs, { children: [Titles, RemoveTitle] }));
+    return _jsx("div", Object.assign({}, headerAttrs, { children: Titles }));
 };
 const TableTitle = (p) => {
     const { column, colIndex } = p;
-    let { tableHook, DragColumns, getColumnOption } = useProvider();
-    const cellDetails = tableHook.getCellDetail({ column });
-    if (!getColumnOption('show', cellDetails)) {
+    let { tableHook, DragColumns, sortHook, rootProps } = useProvider();
+    const { show = true, title } = column;
+    if (!show) {
         return null;
     }
-    const title = getColumnOption('title', cellDetails);
     const attrs = Object.assign(Object.assign(Object.assign({}, tableHook.getTitleAttrs(column)), DragColumns.getDragAttrs(colIndex)), DragColumns.getDropAttrs(colIndex));
-    return _jsx("div", Object.assign({}, attrs, { children: title }));
+    return (_jsxs("div", Object.assign({}, attrs, { children: [title, !!rootProps.inlineSort && sortHook.renderSortArrow(sortHook.getSortByColumn(column), true)] })));
 };
 const TableRow = (props) => {
     const { rowDetail } = props;
     const { row, rowIndex } = rowDetail;
     const rowId = row._id;
-    let { remove, rootProps, tableHook, getIcon, getColumnOption } = useProvider();
-    const { columns = [] } = rootProps;
-    const isOdd = rowIndex % 2 === 0;
+    let { rootProps, tableHook, columns } = useProvider();
     function getCells() {
         return columns.map((column) => {
-            if (!getColumnOption('show', tableHook.getCellDetail(Object.assign(Object.assign({}, rowDetail), { column })))) {
+            const { show = true } = column;
+            if (!show) {
                 return null;
             }
-            const cellDetail = tableHook.getCellDetail(Object.assign(Object.assign({}, rowDetail), { column, change: (v) => tableHook.changeCell(tableHook.getCellDetail(Object.assign(Object.assign({}, rowDetail), { column })), v) }));
-            const columnId = getColumnOption('id', cellDetail);
+            const columnId = column.id;
             const key = rowId + ' ' + columnId;
-            const value = getColumnOption('value', cellDetail);
-            const cellValue = tableHook.getCellValue(cellDetail, value);
-            return (_jsx(TableCell, { cellDetail: cellDetail, cellValue: cellValue, isOdd: isOdd }, key));
+            return (_jsx(TableCell, { row: row, rowIndex: rowIndex, column: column }, key));
         });
     }
-    let { onRemove } = rootProps;
-    return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({}, tableHook.getRowAttrs(props.rowDetail, isOdd), { children: [getCells(), onRemove ? _jsx("button", { className: 'aio-table-remove', onClick: () => remove(row, rowIndex), children: getIcon('mdiClose', 0.8) }) : null] }), rowId) }));
+    return (_jsx("div", Object.assign({}, tableHook.getRowAttrs({ row, rowIndex }), { children: getCells() }), rowId));
 };
 const TableCell = (props) => {
-    let { cellDetail, cellValue, isOdd } = props;
-    const { row, column } = cellDetail;
-    const { tableHook, rootProps, getColumnOption } = useProvider();
-    const { columnOption } = rootProps;
-    const type = getColumnOption('type', cellDetail);
-    if (type === 'number') {
-        cellValue = UT.SplitNumber(cellValue);
+    var _a, _b;
+    let { row, column, rowIndex } = props;
+    const { tableHook } = useProvider();
+    const { type = 'text', id } = column;
+    let cellValue = tableHook.getCellValue({ row, rowIndex, column });
+    if (type === 'date') {
+        cellValue = new AIODate().toObject(cellValue);
+    }
+    else if (type === 'jalaliDate') {
+        cellValue = new AIODate().toObject(cellValue, true);
     }
-    const before = getColumnOption('before', cellDetail);
-    const after = getColumnOption('after', cellDetail);
-    const subtext = getColumnOption('subtext', cellDetail);
     const rowId = row._id;
-    const colId = getColumnOption('id', cellDetail);
+    const colId = id;
     const getTemplateValue = () => {
-        const { getValue = {} } = rootProps;
-        if (typeof column.template === 'function') {
-            return column.template(cellDetail);
-        }
-        if (typeof column.template === 'string' && getValue[column.template]) {
-            return getValue[column.template](cellDetail);
-        }
-        if ((columnOption || {}).template) {
-            return columnOption.template(cellDetail);
-        }
-        const pattern = getColumnOption('pattern', cellDetail);
-        if (pattern && cellValue) {
+        if (column.type === 'date') {
             try {
-                if (type === 'date') {
-                    return new AIODate().getDateByPattern(cellValue, pattern);
-                }
-                else {
-                    return pattern.replace('{value}', cellValue);
-                }
+                cellValue = new AIODate().toObject(cellValue);
             }
             catch (_a) { }
         }
+        else if (column.type === 'jalaliDate') {
+            try {
+                cellValue = new AIODate().toObject(cellValue, true);
+            }
+            catch (_b) { }
+        }
+        const cellTemplateValue = tableHook.getCellTemplateValue({ row, column, rowIndex, key: 'template' });
+        if (cellTemplateValue !== undefined) {
+            return cellTemplateValue;
+        }
+        return tableHook.getCellPatternValue({ row, column, rowIndex });
     };
     const templateValue = getTemplateValue();
-    const beforeValue = tableHook.getCellValue(cellDetail, before, undefined);
-    const afterValue = tableHook.getCellValue(cellDetail, after, undefined);
-    const subtextValue = tableHook.getCellValue(cellDetail, subtext, undefined);
+    const before = tableHook.getCellTemplateValue({ row, column, rowIndex, key: 'before' });
+    const after = tableHook.getCellTemplateValue({ row, column, rowIndex, key: 'after' });
+    const subtext = tableHook.getCellTemplateValue({ row, column, rowIndex, key: 'subtext' });
     let content;
+    if (column.template) {
+        content = tableHook.getCellTemplateValue({ row, column, rowIndex, key: 'template' });
+    }
+    else if (column.pattern) {
+        content = tableHook.getCellPatternValue({ row, column, rowIndex });
+    }
     if (templateValue !== undefined) {
         content = templateValue;
     }
+    else if (column.type === 'number') {
+        content = UT.SplitNumber(cellValue);
+    }
     else {
         content = cellValue;
     }
-    return (_jsx(Fragment, { children: _jsxs("div", Object.assign({}, tableHook.getCellAttrs(props.cellDetail, cellValue, isOdd, rootProps.striped), { children: [beforeValue !== undefined && _jsx("div", { className: "aio-table-cell-before", children: beforeValue }), _jsx("div", { className: `aio-table-cell-value${subtext !== undefined ? ' has-subtext' : ''}`, "data-subtext": subtextValue, children: content }), afterValue !== undefined && _jsx("div", { className: "aio-table-cell-after", children: afterValue })] })) }, rowId + ' ' + colId));
+    content = content !== undefined && content !== null && content !== '' ? _jsxs(_Fragment, { children: [(_a = column.prefix) !== null && _a !== void 0 ? _a : null, content, (_b = column.affix) !== null && _b !== void 0 ? _b : null] }) : content;
+    return (_jsx(Fragment, { children: _jsxs("div", Object.assign({}, tableHook.getCellAttrs({ row, column, rowIndex }), { children: [before !== undefined && _jsx("div", { className: "aio-table-cell-before", children: before }), _jsx("div", { className: `aio-table-cell-value${subtext !== undefined ? ' has-subtext' : ''}`, "data-subtext": subtext, children: content }), after !== undefined && _jsx("div", { className: "aio-table-cell-after", children: after })] })) }, rowId + ' ' + colId));
 };
-const useTable = (getProps, getPaging, getColumnOption) => {
-    const DragRows = UT.useDrag((dragIndex, dropIndex, reOrder) => {
-        const { onSwap, onChange, value: rows } = getProps();
-        const newRows = reOrder(rows, dragIndex, dropIndex);
-        const from = rows[dragIndex];
-        const to = rows[dropIndex];
-        if (typeof onSwap === 'function') {
-            onSwap(newRows, from, to);
-        }
-        else if (onChange) {
-            onChange(newRows);
-        }
-    }, 'aio-table-row');
-    const getCellValue = (cellDetail, cellValue, def) => {
-        const { getValue = {} } = getProps();
+const useTable = (getProps, getPaging) => {
+    const fixIndexByPaging = (rowIndex) => {
         const paging = getPaging();
         if (paging) {
             let { number, size } = paging;
-            cellDetail = Object.assign(Object.assign({}, cellDetail), { rowIndex: cellDetail.rowIndex + ((number - 1) * size) });
-        }
-        let type = typeof cellValue;
-        if (type === 'string') {
-            const { row } = cellDetail;
-            if (row) { }
-            let result = cellValue;
-            if (getValue[cellValue]) {
-                result = getValue[cellValue](cellDetail);
-            }
-            else if (cellValue.indexOf('row.') !== -1) {
+            return rowIndex + ((number - 1) * size);
+        }
+        return rowIndex;
+    };
+    const getCellValue = (p) => {
+        let { row, column, rowIndex } = p;
+        if (typeof column.value === 'string') {
+            let result = column.value;
+            if (result.indexOf('row.') !== -1) {
                 try {
-                    eval(`result = ${cellValue}`);
-                }
-                catch (_a) {
-                    result = '';
+                    eval(`result = ${result}`);
                 }
+                catch (_a) { }
             }
-            return result === undefined ? def : result;
+            return result;
         }
-        if (type === 'undefined') {
-            return def;
+        if (typeof column.value === 'function') {
+            return column.value({ row, rowIndex, column });
         }
-        if (type === 'function') {
-            return cellValue(cellDetail);
+        if (typeof column.value === 'undefined') {
+            const { columnOption } = getProps();
+            if (columnOption === null || columnOption === void 0 ? void 0 : columnOption.value) {
+                return columnOption.value({ row, column, rowIndex: fixIndexByPaging(rowIndex) });
+            }
         }
-        return cellValue === undefined ? def : cellValue;
     };
-    function changeCell(cellDetail, newRow) {
+    const getTemplateParam = (p) => {
+        const value = getCellValue(p);
+        let dateObject = { year: 0, month: 0, day: 0, hour: 0, minute: 0, second: 0 };
+        if (p.column.type === 'date') {
+            try {
+                dateObject = new AIODate().toObject(value);
+            }
+            catch (_a) { }
+        }
+        else if (p.column.type === 'jalaliDate') {
+            try {
+                dateObject = new AIODate().toObject(value, true);
+            }
+            catch (_b) { }
+        }
+        const rowIndex = fixIndexByPaging(p.rowIndex);
+        const change = (newRow) => changeCell(p.row, newRow);
+        return { value, dateObject, rowIndex, row: p.row, column: p.column, change };
+    };
+    const getCellTemplateValue = (p) => {
+        let { row, rowIndex, column, key } = p;
+        const { templates } = getProps();
+        if (!column[key]) {
+            return;
+        }
+        const templateParam = getTemplateParam({ row, column, rowIndex });
+        if (typeof column[key] === 'function') {
+            const fn = column[key];
+            return fn(templateParam);
+        }
+        if (typeof column[key] === 'string') {
+            if (templates && templates[column[key]]) {
+                const fn = templates[column[key]];
+                return fn(templateParam);
+            }
+            else {
+                return column[key];
+            }
+        }
+    };
+    const getCellPatternValue = (p) => {
+        let { row, rowIndex, column } = p;
+        const cellValue = getCellValue({ row, column, rowIndex });
+        const { pattern } = column;
+        if (pattern && cellValue !== undefined) {
+            try {
+                if (column.type === 'date') {
+                    return new AIODate().getDateByPattern(cellValue, pattern);
+                }
+                else if (column.type === 'jalaliDate') {
+                    return new AIODate().getDateByPattern(cellValue, pattern, true);
+                }
+                else {
+                    return pattern.replace('{value}', cellValue);
+                }
+            }
+            catch (_a) { }
+        }
+    };
+    function changeCell(row, newRow) {
         if (newRow) { }
         const { onChange, value: propsValue } = getProps();
         if (!onChange) {
             return;
         }
-        const rowId = cellDetail.row._id;
+        const rowId = row._id;
         onChange(propsValue.map((o) => o._id !== rowId ? o : newRow));
     }
-    function getCellDetail(v) {
-        const res = Object.assign({ column: {}, row: {}, rowIndex: 0, isFirst: false, isLast: false, date: [], change: () => { } }, v);
-        const value = getColumnOption('value', res);
-        const jalali = getColumnOption('jalali', res);
-        const date = res.column.type === 'date' ? new AIODate().toArray(getCellValue(res, value, jalali)) : [];
-        return Object.assign(Object.assign(Object.assign({}, res), { date }), v);
-    }
-    const getCellAttrs = (cellDetail, cellValue, isOdd, striped) => {
-        const { column } = cellDetail;
-        const attrs = getCellValue(cellDetail, column.attrs, {});
-        const justify = getColumnOption('justify', cellDetail);
-        const width = getColumnOption('width', cellDetail);
-        const minWidth = getColumnOption('minWidth', cellDetail);
+    const getCellAttrs = (p) => {
+        const { row, rowIndex, column } = p;
+        const { cellAttrs } = getProps();
+        const cellValue = getCellValue({ row, column, rowIndex });
+        const propsCellAttrs = cellAttrs ? cellAttrs({ row, rowIndex: fixIndexByPaging(rowIndex), column, value: cellValue }) : {};
+        const columnCellAttrs = column.cellAttrs ? column.cellAttrs({ row, rowIndex: fixIndexByPaging(rowIndex), column, value: cellValue }) : {};
+        const attrs = Object.assign(Object.assign({}, propsCellAttrs), columnCellAttrs);
+        const { justify, width, minWidth } = column;
         const className = `aio-table-cell` + (justify ? ` aio-table-cell-justify` : '');
         let isNumber = false;
         try {
-            if (!isNaN(+cellValue)) {
+            if (typeof cellValue === 'number' || column.type === 'number') {
+                isNumber = true;
+            }
+            else if (typeof cellValue === 'string' && !isNaN(+cellValue)) {
                 isNumber = true;
             }
         }
         catch (_a) { }
         const style = { width, minWidth, flex: width ? undefined : 1, direction: isNumber ? 'ltr' : undefined };
-        if (striped) {
-            style.background = isOdd ? striped[0] : striped[1];
-        }
-        return UT.AddToAttrs(attrs, { className: [className, isOdd ? 'aio-table-cell-odd' : 'aio-table-cell-even'], style, attrs: { title: typeof cellValue === 'string' ? cellValue : undefined } });
+        return UT.AddToAttrs(attrs, { className: [className, rowIndex % 2 === 0 ? 'aio-table-cell-odd' : 'aio-table-cell-even'], style, attrs: { title: typeof cellValue === 'string' ? cellValue : undefined } });
     };
     const getTitleAttrs = (column) => {
-        const cellDetail = getCellDetail({ column });
-        const attrs = getColumnOption('titleAttrs', cellDetail);
-        const justify = getColumnOption('justify', cellDetail);
-        const width = getColumnOption('width', cellDetail);
-        const minWidth = getColumnOption('minWidth', cellDetail);
+        const { justify, width, minWidth, title } = column;
+        const { titleAttrs } = getProps();
+        const propsTitleAttrs = titleAttrs ? titleAttrs(column) : {};
+        const columnTitleAttrs = column.titleAttrs ? column.titleAttrs(column) : {};
+        const attrs = Object.assign(Object.assign({}, propsTitleAttrs), columnTitleAttrs);
         const className = `aio-table-title` + (justify ? ` aio-table-title-justify` : '');
         const style = { width, minWidth, flex: width ? undefined : 1 };
-        const title = getColumnOption('title', cellDetail);
         return UT.AddToAttrs(attrs, { className, style, attrs: { title: typeof title === 'string' ? title : undefined } });
     };
-    const getRowAttrs = (rowDetail, isOdd) => {
-        const { rowOption = {}, onSwap, gap = [0, 1] } = getProps();
-        const { attrs: rowAttrs } = rowOption;
-        const attrs = rowAttrs ? rowAttrs(rowDetail) : {};
-        let obj = UT.AddToAttrs(attrs, { className: ['aio-table-row', isOdd ? 'aio-table-row-odd' : 'aio-table-row-even'], style: { gap: gap[0] } });
+    const getRowAttrs = (p) => {
+        const { row, rowIndex } = p;
+        const { onSwap, gap = [], rowAttrs } = getProps();
+        const attrs = rowAttrs ? rowAttrs({ row, rowIndex }) : {};
+        let obj = UT.AddToAttrs(attrs, { className: ['aio-table-row', rowIndex % 2 === 0 ? 'aio-table-row-odd' : 'aio-table-row-even'], style: { gap: gap[0] } });
         if (onSwap) {
-            obj = Object.assign(Object.assign(Object.assign({}, obj), DragRows.getDragAttrs(rowDetail.rowIndex)), DragRows.getDropAttrs(rowDetail.rowIndex));
+            obj = Object.assign({}, obj);
         }
         return obj;
     };
-    return { getCellValue, getCellAttrs, getTitleAttrs, getRowAttrs, changeCell, getCellDetail };
+    return { getCellValue, getCellTemplateValue, getCellPatternValue, getCellAttrs, getTitleAttrs, getRowAttrs, changeCell };
 };
 export const useSort = (p) => {
     let [sorts, setSorts] = useState(p.sorts);
-    const getIconRef = useRef(new UT.GetSvg().getIcon);
     const isInitSortExecutedRef = useRef(false);
+    const getActiveSorts = (sorts) => {
+        let activeSorts = (sorts || []).filter((sort) => sort.active !== false);
+        return activeSorts.map((o) => ({ getValue: o.getValue, dir: o.dir }));
+    };
     const getSortedRows = (rows) => {
         if (isInitSortExecutedRef.current) {
             return rows;
@@ -561,44 +575,17 @@ export const useSort = (p) => {
         if (p.onChangeSort) {
             return rows;
         }
-        let activeSorts = sorts.filter((sort) => sort.active !== false);
+        let activeSorts = getActiveSorts(sorts);
         if (!activeSorts.length || !rows.length) {
             return rows;
         }
         isInitSortExecutedRef.current = true;
-        let sortedRows = sortRows(rows, activeSorts);
+        let sortedRows = UT.SortArray(rows, activeSorts);
         if (p.onChangeRows) {
             p.onChangeRows(sortedRows);
         }
         return sortedRows;
     };
-    const sortRows = (rows, sorts) => {
-        if (!rows) {
-            return [];
-        }
-        if (!sorts || !sorts.length) {
-            return rows;
-        }
-        return rows.sort((a, b) => {
-            for (let i = 0; i < sorts.length; i++) {
-                let { dir, getValue } = sorts[i];
-                if (!getValue) {
-                    return 0;
-                }
-                let aValue = getValue(a), bValue = getValue(b);
-                if (aValue < bValue) {
-                    return -1 * (dir === 'dec' ? -1 : 1);
-                }
-                if (aValue > bValue) {
-                    return 1 * (dir === 'dec' ? -1 : 1);
-                }
-                if (i === sorts.length - 1) {
-                    return 0;
-                }
-            }
-            return 0;
-        });
-    };
     const changeSort = (sortId, changeObject) => {
         let newSorts = sorts.map((sort) => {
             if (sort.sortId === sortId) {
@@ -618,21 +605,56 @@ export const useSort = (p) => {
         }
         else {
             setSorts(sorts);
-            let activeSorts = sorts.filter((sort) => sort.active !== false);
+            const activeSorts = getActiveSorts(sorts);
             if (activeSorts.length && !!p.onChangeRows) {
-                p.onChangeRows(sortRows(p.rows, activeSorts));
+                p.onChangeRows(UT.SortArray(p.rows, activeSorts));
             }
         }
     });
-    const renderSortArrow = (option) => {
-        let { dir = 'dec', sortId } = option;
+    const renderSortArrow = (option, inline) => {
+        if (option === false) {
+            return null;
+        }
+        let { dir = 'dec', sortId, active } = option;
+        let path = dir === 'dec' ? 'mdiArrowDown' : 'mdiArrowUp';
+        if (inline && !active) {
+            path = 'mdiSortVariantOff';
+        }
         return (_jsx("div", { className: 'aio-sort-arrow', onClick: (e) => {
                 e.stopPropagation();
                 if (!sortId) {
                     return;
                 }
-                changeSort(sortId, { dir: dir === 'dec' ? 'inc' : 'dec' });
-            }, children: getIconRef.current(dir === 'dec' ? 'mdiArrowDown' : 'mdiArrowUp', 0.8) }));
+                let newActive = active, newDir = dir;
+                if (inline) {
+                    if (active) {
+                        if (dir === 'inc') {
+                            newDir = 'dec';
+                            newActive = true;
+                        }
+                        else {
+                            newActive = false;
+                        }
+                    }
+                    else {
+                        newDir = 'inc';
+                        newActive = true;
+                    }
+                }
+                else {
+                    newDir = dir === 'dec' ? 'inc' : 'dec';
+                }
+                changeSort(sortId, { dir: newDir, active: newActive });
+            }, children: new UT.GetSvg('em').getIcon(path, 0.8) }));
+    };
+    const getSortByColumn = (column) => {
+        const sort = column.sort;
+        if (!sort) {
+            return false;
+        }
+        const sortId = sort === true ? column.id : (sort.sortId === undefined ? column.id : sort.sortId);
+        const res = sorts.find((o) => o.sortId === sortId);
+        return res === undefined ? false : res;
     };
     const renderSortButton = (attrs, limitTo) => {
         if (!sorts.length) {
@@ -647,11 +669,11 @@ export const useSort = (p) => {
                 header: { title: p.fa ? 'مرتب سازی' : 'Sort', onClose: false },
                 headerAttrs: { className: 'aio-sort-header' },
                 limitTo: limitTo || '.aio-table'
-            }, attrs: Attrs, text: getIconRef.current('mdiSort', 0.7), onSwap: (newSorts) => changeSorts(newSorts) }, 'sortbutton'));
+            }, attrs: Attrs, text: new UT.GetSvg('em').getIcon('mdiSort', 0.7), onSwap: (newSorts) => changeSorts(newSorts) }, 'sortbutton'));
     };
-    return { sorts, setSorts, renderSortButton, getSortedRows, changeSort, changeSorts };
+    return { sorts, setSorts, renderSortButton, getSortedRows, changeSort, changeSorts, renderSortArrow, getSortByColumn };
 };
-export const usePaging = (p) => {
+const usePaging = (p) => {
     const timeoutRef = useRef(undefined);
     const startRef = useRef(undefined);
     const endRef = useRef(undefined);
@@ -754,8 +776,8 @@ const FilterContextProvider = (props) => _jsx(FilterContext.Provider, { value: p
 const useFilterContext = () => useContext(FilterContext);
 const useFilter = () => {
     const { rootProps } = useProvider();
-    const { formFilter, columnsFilter } = rootProps;
-    const { value = {}, items = [], onChange = () => { } } = formFilter || {};
+    const { filter } = rootProps;
+    const { onChange } = filter || {};
     const trans = (key) => {
         const { fa } = rootProps;
         const dic = {
@@ -788,39 +810,34 @@ const useFilter = () => {
     };
     const popup = usePopup({ rtl: !!rootProps.fa });
     const filterDataHook = useFilterData(popup, trans);
-    const type = columnsFilter ? 'columns' : 'form';
-    const form = useForm({
-        initData: value, onChange, getLayout: () => ({
-            v: items.map((o) => ({
-                input: Object.assign(Object.assign({}, o), { deSelect: true })
-            }))
-        })
-    });
     const renderButton = (attrs) => {
-        return (_jsxs(FilterContextProvider, { value: { trans, popup, filterDataHook, form, type }, children: [_jsx(FilterButton, { attrs: attrs }), popup.render()] }));
+        return (_jsxs(FilterContextProvider, { value: { trans, popup, filterDataHook, rootProps }, children: [_jsx(FilterButton, { attrs: attrs }), popup.render()] }));
     };
     const renderTags = () => {
-        return (_jsxs(FilterContextProvider, { value: { trans, popup, filterDataHook, form, type }, children: [type === 'columns' && _jsx(FilterColumnsTags, { filterItems: filterDataHook.getData(), remove: true }), type === 'form' && _jsx(FilterFormTags, {}), popup.render()] }));
+        return (_jsxs(FilterContextProvider, { value: { trans, popup, filterDataHook, rootProps }, children: [_jsx(FilterColumnsTags, { filterItems: filterDataHook.getData(), remove: true }), popup.render()] }));
     };
     return { renderButton, renderTags };
 };
 const FilterButton = ({ attrs }) => {
-    const { popup, trans } = useFilterContext();
+    const { popup, trans, rootProps } = useFilterContext();
+    const { filter = {} } = rootProps;
+    const { modalAttrs } = filter;
     const openModal = () => {
         popup.addModal({
             header: { title: trans('filters') },
             position: 'fullscreen', body: _jsx(FilterModal, {}),
-            backdropAttrs: { className: 'aio-filter-modal aio-filter-modal-size' }
+            backdropAttrs: { className: 'aio-table-filter-modal aio-table-filter-modal-size' },
+            modalAttrs
         });
     };
-    const Attrs = UT.AddToAttrs(attrs, { className: 'aio-filter-icon-button aio-filter-filter-button', attrs: { onClick: openModal } });
-    return (_jsx("button", Object.assign({}, Attrs, { children: new UT.GetSvg().getIcon('mdiFilter', 0.7) })));
+    const Attrs = UT.AddToAttrs(attrs, { className: 'aio-table-toolbar-button', attrs: { onClick: openModal } });
+    return (_jsx("button", Object.assign({}, Attrs, { children: new UT.GetSvg('em').getIcon('mdiFilter', 0.7) })));
 };
-const FilterColumnsTags = ({ filterItems, remove, wrap }) => {
+const FilterColumnsTags = ({ filterItems, remove }) => {
     const { filterDataHook } = useFilterContext();
     const { filterColumns } = useProvider();
     const getTags = () => {
-        var _a, _b, _c;
+        var _a, _b;
         const res = [];
         for (let i = 0; i < filterItems.length; i++) {
             const filterItem = filterItems[i];
@@ -846,9 +863,9 @@ const FilterColumnsTags = ({ filterItems, remove, wrap }) => {
                 const option = options.find((o) => o.value === value);
                 valuePresent = (option === null || option === void 0 ? void 0 : option.text) || '';
             }
-            else if (type === 'date') {
+            else if (type === 'date' || type === 'jalaliDate') {
                 const dateUnit = ((_b = column.filterInput) === null || _b === void 0 ? void 0 : _b.dateUnit) || { year: true, month: true, day: true };
-                const jalali = (_c = column.filterInput) === null || _c === void 0 ? void 0 : _c.jalali;
+                const jalali = column.type === 'jalaliDate';
                 if (dateUnit === 'month') {
                     valuePresent = new AIODate().getDateByPattern(value, '{year}/{month}', jalali);
                 }
@@ -875,88 +892,65 @@ const FilterColumnsTags = ({ filterItems, remove, wrap }) => {
     if (!filterItems.length) {
         return null;
     }
-    return (_jsx("div", { className: "aio-filter-tags", children: getTags() }));
-};
-const FilterFormTags = () => {
-    const { form } = useFilterContext();
-    return (_jsx(_Fragment, { children: form.renderTags }));
+    return (_jsx("div", { className: "aio-table-filter-tags", children: getTags() }));
 };
 const FilterTag = ({ filterItem, valuePresent, column, onRemove }) => {
     var _a;
     const { trans } = useFilterContext();
     const { operator } = filterItem;
-    return (_jsxs("div", { className: "aio-filter-tag", onClick: onRemove, children: [_jsx("div", { className: "aio-filter-tag-column", children: ((_a = column.filterInput) === null || _a === void 0 ? void 0 : _a.label) || column.title || '' }), !!operator && _jsx("div", { className: "aio-filter-tag-operator", children: trans(operator) }), _jsx("div", { className: "aio-filter-tag-value", children: valuePresent }), !!onRemove && new UT.GetSvg().getIcon('mdiClose', 0.6)] }));
+    return (_jsxs("div", { className: "aio-table-filter-tag", onClick: onRemove, children: [_jsx("div", { className: "aio-table-filter-tag-column", children: ((_a = column.filterInput) === null || _a === void 0 ? void 0 : _a.label) || column.title || '' }), !!operator && _jsx("div", { className: "aio-table-filter-tag-operator", children: trans(operator) }), _jsx("div", { className: "aio-table-filter-tag-value", children: valuePresent }), !!onRemove && new UT.GetSvg('em').getIcon('mdiClose', 0.6)] }));
 };
 const SaveConfirm = ({ onSubmit }) => {
     const { popup, filterDataHook, trans } = useFilterContext();
-    const [name, setName] = useState(filterDataHook.activeName || '');
-    const getOptions = (text) => __awaiter(void 0, void 0, void 0, function* () {
-        const filtered = filterDataHook.getSaves().filter((collection) => {
-            if (!collection.name) {
-                return false;
-            }
-            if (!text) {
-                return true;
-            }
-            return collection.name.indexOf(text) !== -1;
-        });
-        const res = filtered.map((collection) => ({ text: collection.name, value: collection.name }));
-        return res;
-    });
-    return (_jsxs("div", { className: "aio-filter-save-modal", children: [_jsx(AIFormInput, { label: trans('inter filter name'), input: (_jsx(SuggestionInput, { value: name, onChange: (newName) => setName(newName), getOptions: getOptions })) }), _jsxs("div", { className: "aio-filter-save-modal-footer", children: [_jsx("button", { className: "aio-filter-button aio-filter-active-button", disabled: !name, onClick: () => onSubmit(name), children: trans(name === filterDataHook.activeName ? 'edit' : 'save') }), _jsx("button", { className: "aio-filter-button", onClick: () => popup.removeModal(), children: trans('cansel') })] })] }));
+    const [name, setName] = useState('');
+    return (_jsxs("div", { className: "aio-table-filter-save-modal", children: [_jsx(AIFormInput, { label: trans('inter filter name'), input: (_jsx(AIText, { options: filterDataHook.getSaves(), option: { text: (o) => o.name, value: (o) => o.name, onClick: (o) => setName(o) }, onChange: (newName, option) => setName(option ? option.text : newName) })) }), _jsxs("div", { className: "aio-table-filter-save-modal-footer", children: [_jsx("button", { className: "aio-table-filter-button aio-table-filter-active-button", disabled: !name, onClick: () => onSubmit(name), children: trans(name === filterDataHook.activeName ? 'edit' : 'save') }), _jsx("button", { className: "aio-table-filter-button", onClick: () => popup.removeModal(), children: trans('cansel') })] })] }));
 };
-const FilterSaves = () => {
+const FilterSaveds = () => {
     const { trans, filterDataHook } = useFilterContext();
     const saves = filterDataHook.getSaves();
     if (!saves.length) {
-        return (_jsx("div", { className: "af-collections-empty", children: trans('saved empty') }));
+        return (_jsx("div", { className: "aio-table-saved-filters-empty", children: trans('saved empty') }));
     }
-    return (_jsx("div", { className: "af-filter-collections", children: saves.map((o) => _jsx(FilterSave, { item: o }, o.name)) }));
+    return (_jsx("div", { className: "aio-table-saved-filters", children: saves.map((o) => _jsx(FilterSaved, { item: o }, o.name)) }));
 };
-const FilterSave = ({ item }) => {
+const FilterSaved = ({ item }) => {
     const { rootProps } = useProvider();
-    const { trans, filterDataHook, type } = useFilterContext();
+    const { trans, filterDataHook } = useFilterContext();
     const { fa } = rootProps;
     if (!item.name) {
         return null;
     }
-    const header_layout = () => _jsxs("div", { className: "af-collection-header", children: [" ", name_layout(), " ", remove_layout(), " ", activate_layout()] });
-    const name_layout = () => _jsx("div", { className: "af-collection-name", children: item.name });
+    const header_layout = () => _jsxs("div", { className: "aio-table-saved-filter-header", children: [" ", name_layout(), " ", remove_layout(), " ", activate_layout()] });
+    const name_layout = () => _jsx("div", { className: "aio-table-saved-filter-name", children: item.name });
     const remove_layout = () => {
-        const attrs = { className: "af-collection-remove", onClick: () => filterDataHook.removeSave(item), style: { [fa ? 'right' : 'left']: -4 } };
+        const attrs = { className: "aio-table-filter-remove-button", onClick: () => filterDataHook.removeSave(item), style: { [fa ? 'right' : 'left']: -4 } };
         return (_jsx("div", Object.assign({}, attrs, { children: _jsx(FilterRemoveIcon, {}) })));
     };
     const activate_layout = () => {
-        return (_jsxs("div", { className: "aio-filter-add-button", onClick: () => filterDataHook.activeSave(item), children: [_jsx(FilterActiveIcon, {}), " ", trans('activate')] }));
+        return (_jsxs("div", { className: "aio-table-filter-button", onClick: () => filterDataHook.activeSave(item), children: [_jsx(FilterActiveIcon, {}), " ", trans('activate')] }));
     };
     const body_layout = () => {
-        if (type === 'columns') {
-            return _jsx("div", { className: "af-collection-body", children: _jsx(FilterColumnsTags, { filterItems: item.data.filter((o) => o.value !== undefined && o.value !== '') }) });
-        }
-        else {
-            return _jsx("div", { className: "af-collection-body", children: _jsx(FilterFormTags, {}) });
-        }
+        return _jsx("div", { className: "aio-table-saved-filter-body", children: _jsx(FilterColumnsTags, { filterItems: item.data.filter((o) => o.value !== undefined && o.value !== '') }) });
     };
-    return (_jsxs("div", { className: "af-collection", children: [header_layout(), " ", body_layout()] }));
+    return (_jsxs("div", { className: "aio-table-saved-filter", children: [header_layout(), " ", body_layout()] }));
 };
 const FilterModal = () => {
     const { rootProps } = useProvider();
     const { trans } = useFilterContext();
-    const { fa, columnsFilter, formFilter } = rootProps;
-    const { getSavedItems } = columnsFilter || formFilter || {};
+    const { fa, filter } = rootProps;
+    const { getSavedItems } = filter || {};
     const collections_layout = () => {
-        return (_jsxs("div", { className: "aio-filter-panel", children: [_jsx("div", { className: "aio-filter-panel-header", children: _jsx("div", { className: "aio-filter-panel-label", children: trans('saved filters') }) }), _jsx(FilterSaves, {})] }));
+        return (_jsxs("div", { className: "aio-table-filter-panel", children: [_jsx("div", { className: "aio-table-filter-panel-header", children: _jsx("div", { className: "aio-table-filter-panel-label", children: trans('saved filters') }) }), _jsx(FilterSaveds, {})] }));
     };
-    return (_jsxs("div", { className: `aio-filter-body aio-filter-body-${fa ? 'rtl' : 'ltr'}`, children: [_jsx(CurrentFilters, {}), !!(columnsFilter === null || columnsFilter === void 0 ? void 0 : columnsFilter.after) && columnsFilter.after(), !!getSavedItems && collections_layout()] }));
+    return (_jsxs("div", { className: `aio-table-filter-body aio-table-filter-body-${fa ? 'rtl' : 'ltr'}`, children: [_jsx(CurrentFilters, {}), !!getSavedItems && collections_layout()] }));
 };
 const CurrentFilters = () => {
     const { rootProps } = useProvider();
-    const { filterDataHook, trans, form, type } = useFilterContext();
-    const { columnsFilter, formFilter } = rootProps;
-    const canSave = (!!columnsFilter && !!columnsFilter.setSavedItems) || (!!formFilter && !!formFilter.setSavedItems);
+    const { filterDataHook, trans } = useFilterContext();
+    const { filter } = rootProps;
+    const canSave = (!!filter && !!filter.setSavedItems);
     const data = filterDataHook.getData();
-    return (_jsxs("div", { className: "aio-filter-panel", children: [_jsxs("div", { className: "aio-filter-panel-header", children: [_jsx("div", { className: "aio-filter-panel-label", children: trans('current filters') }), !!columnsFilter && _jsxs("button", { className: "aio-filter-add-button", onClick: filterDataHook.addColumnsFilterItem, children: [_jsx(FilterAddIcon, {}), " ", trans('add')] }), type === 'columns' && canSave && !!data.length && _jsxs("button", { className: "aio-filter-add-button", onClick: filterDataHook.save, children: [_jsx(FilterSaveIcon, {}), " ", trans('save')] }), type === 'form' && canSave && !form.errors.hasError() && _jsxs("button", { className: "aio-filter-add-button", onClick: filterDataHook.save, children: [_jsx(FilterSaveIcon, {}), " ", trans('save')] })] }), type === 'columns' &&
-                _jsx("div", { className: "af-current-filters", children: data.map((columnsFilterItem) => _jsx(CurrentFilter, { filterItem: columnsFilterItem }, columnsFilterItem.id)) }), !!formFilter && form.renderLayout] }));
+    return (_jsxs("div", { className: "aio-table-filter-panel", children: [_jsxs("div", { className: "aio-table-filter-panel-header", children: [_jsx("div", { className: "aio-table-filter-panel-label", children: trans('current filters') }), _jsxs("button", { className: "aio-table-filter-button", onClick: filterDataHook.addColumnsFilterItem, children: [_jsx(FilterAddIcon, {}), " ", trans('add')] }), !!canSave && !!data.length && _jsxs("button", { className: "aio-table-filter-button", onClick: filterDataHook.save, children: [_jsx(FilterSaveIcon, {}), " ", trans('save')] })] }), _jsx("div", { className: "aio-table-current-filters", children: data.map((columnsFilterItem) => _jsx(CurrentFilter, { filterItem: columnsFilterItem }, columnsFilterItem.id)) })] }));
 };
 const CurrentFilter = ({ filterItem }) => {
     const { operator, columnId, value } = filterItem;
@@ -978,6 +972,7 @@ const CurrentFilter = ({ filterItem }) => {
             text: { contain: true, notContain: true, equal: true, notEqual: true },
             number: { less: true, more: true, lessequal: true, moreequal: true, equal: true, notEqual: true },
             date: { less: true, more: true, lessequal: true, moreequal: true, equal: true, notEqual: true },
+            jalaliDate: { less: true, more: true, lessequal: true, moreequal: true, equal: true, notEqual: true },
             select: { equal: true, notEqual: true },
             multiSelect: { contain: true, notContain: true },
             checkbox: {}
@@ -995,12 +990,13 @@ const CurrentFilter = ({ filterItem }) => {
         filterDataHook.changeColumnsFilterItem({ filterItem: filterItem, key: 'value', value: newValue, column });
     };
     const getValueInput = () => {
+        var _a, _b;
         if (!column) {
             return null;
         }
-        let { type = 'text' } = column;
+        const type = ((_a = column.filterInput) === null || _a === void 0 ? void 0 : _a.type) || column.type || 'text';
         if (type === 'select') {
-            return (_jsx(AISelect, Object.assign({}, column.filterInput, { value: value, onChange: (value) => changeValue(value), deSelect: true })));
+            return (_jsx(AISelect, Object.assign({}, column.filterInput, { value: value, onChange: (value) => changeValue(value), deSelect: true, popover: Object.assign({ fitHorizontal: true }, (_b = column.filterInput) === null || _b === void 0 ? void 0 : _b.popover) })));
         }
         if (type === 'multiSelect') {
             return (_jsx(AIRadio, Object.assign({ multiple: true }, column.filterInput, { value: value, onChange: (value) => changeValue(value), deSelect: true })));
@@ -1014,16 +1010,15 @@ const CurrentFilter = ({ filterItem }) => {
         if (type === 'number') {
             return _jsx(AINumber, Object.assign({}, column.filterInput, { value: value, onChange: (value) => changeValue(value), deSelect: true, inputAttrs: { style: { letterSpacing: 4 } }, justify: true }));
         }
-        if (type === 'date') {
-            return _jsx(TimeInput, Object.assign({}, column.filterInput, { filterItem: filterItem, onChange: (value) => changeValue(value), column: column }));
+        if (type === 'date' || type === 'jalaliDate') {
+            return _jsx(TimeInput, Object.assign({}, column.filterInput, { filterItem: filterItem, onChange: (value) => changeValue(value), column: column, jalali: type === 'jalaliDate' }));
         }
     };
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "aio-filter-row", children: [!!column &&
-                    _jsx(AISelect, { options: filterColumns, value: columnId, option: { text: (column) => column.title, value: (column) => column.id }, onChange: (columnId) => filterDataHook.changeColumnsFilterItem({ filterItem: filterItem, key: 'columnId', value: columnId, column }), popover: { fitHorizontal: true } }), !!column && !!operators.length &&
-                    _jsx(AISelect, { className: 'aio-filter-operator-select', options: operators, value: operator, option: { text: (operator) => trans(operator), value: (operator) => operator }, onChange: (operator) => filterDataHook.changeColumnsFilterItem({ filterItem: filterItem, key: 'operator', value: operator, column }), popover: { fitHorizontal: true } }), getValueInput(), _jsx("div", { className: "aio-filter-icon-button aio-filter-remove-button", onClick: () => filterDataHook.removeFilterItem(filterItem), children: _jsx(FilterRemoveIcon, {}) })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "aio-table-filter-row", children: [!!column &&
+                    _jsx(AISelect, { className: 'msf', options: filterColumns.map((o) => ({ text: o.title, value: o.id })), value: columnId, onChange: (columnId) => filterDataHook.changeColumnsFilterItem({ filterItem: filterItem, key: 'columnId', value: columnId, column }), popover: { fitHorizontal: true } }), !!column && !!operators.length &&
+                    _jsx(AISelect, { className: 'aio-table-filter-operator-select', options: operators, value: operator, option: { text: (operator) => trans(operator), value: (operator) => operator }, onChange: (operator) => filterDataHook.changeColumnsFilterItem({ filterItem: filterItem, key: 'operator', value: operator, column }), popover: { fitHorizontal: true } }), getValueInput(), _jsx("div", { className: "aio-table-filter-remove-button", onClick: () => filterDataHook.removeFilterItem(filterItem), children: _jsx(FilterRemoveIcon, {}) })] }) }));
 };
-const TimeInput = ({ filterItem, onChange, column }) => {
-    var _a;
+const TimeInput = ({ filterItem, onChange, column, jalali }) => {
     const [unit] = useState(getUnit);
     function getUnit() {
         const { dateUnit = 'day' } = column.filterInput || {};
@@ -1040,42 +1035,40 @@ const TimeInput = ({ filterItem, onChange, column }) => {
         return res;
     }
     const DATE = new AIODate();
-    const jalali = column.jalali || ((_a = column.filterInput) === null || _a === void 0 ? void 0 : _a.jalali);
     return (_jsx(AITime, { jalali: jalali, timeUnit: unit, value: filterItem.value, deSelect: true, onChange: (value) => onChange(value ? DATE.getTime(value) : undefined) }));
 };
-const FilterSaveIcon = () => new UT.GetSvg().getIcon('mdiSaveContent', 0.8);
-const FilterRemoveIcon = () => new UT.GetSvg().getIcon('mdiClose', 0.6);
-const FilterActiveIcon = () => new UT.GetSvg().getIcon('mdiCheckBold', 0.6);
-const FilterAddIcon = () => new UT.GetSvg().getIcon('mdiPlusThick', 0.7);
+const FilterSaveIcon = () => new UT.GetSvg('em').getIcon('mdiSaveContent', 0.8);
+const FilterRemoveIcon = () => new UT.GetSvg('em').getIcon('mdiClose', 0.6);
+const FilterActiveIcon = () => new UT.GetSvg('em').getIcon('mdiCheckBold', 0.6);
+const FilterAddIcon = () => new UT.GetSvg('em').getIcon('mdiPlusThick', 0.7);
 const useFilterData = (popup, trans) => {
     const [activeName, setActiveName] = useState();
     const { filterColumns, rootProps } = useProvider();
-    const { columnsFilter, formFilter } = rootProps;
+    const { filter = {} } = rootProps;
     const [saves, setSaves] = useState([]);
     const savesRef = useRef(saves);
     savesRef.current = saves;
     const getSaves = () => savesRef.current;
     const [data, setData] = useState(getInitialData);
     function getInitialData() {
-        if (columnsFilter) {
-            return columnsFilter.items || [];
+        if (filter.cache) {
+            const storage = new UT.Storage(filter.cache);
+            const data = storage.load('columnsFilterData', filter.items || []);
+            if (filter.onChange) {
+                filter.onChange(data);
+            }
+            return data;
         }
-        if (formFilter) {
-            return {};
+        else {
+            return filter.items || [];
         }
     }
     const getData = () => dataRef.current;
     const dataRef = useRef(data);
     dataRef.current = data;
     const changeData = (newData) => __awaiter(void 0, void 0, void 0, function* () {
-        if (columnsFilter && columnsFilter.onChange) {
-            const res = yield columnsFilter.onChange(newData);
-            if (res === false) {
-                return false;
-            }
-        }
-        if (formFilter && formFilter.onChange) {
-            const res = yield formFilter.onChange(newData);
+        if (filter.onChange) {
+            const res = yield filter.onChange(newData);
             if (res === false) {
                 return false;
             }
@@ -1084,7 +1077,7 @@ const useFilterData = (popup, trans) => {
         return true;
     });
     const changeSaves = (newSaves) => __awaiter(void 0, void 0, void 0, function* () {
-        const { setSavedItems } = columnsFilter || formFilter || {};
+        const { setSavedItems } = filter;
         if (!setSavedItems) {
             return false;
         }
@@ -1118,7 +1111,7 @@ const useFilterData = (popup, trans) => {
                         popup.removeModal();
                     }
                 }) })),
-            backdropAttrs: { className: 'aio-filter-modal' }
+            backdropAttrs: { className: 'aio-table-filter-modal' }
         });
     };
     const removeSave = (saveItem) => {
@@ -1127,37 +1120,21 @@ const useFilterData = (popup, trans) => {
             text: trans('remove confirm'),
             submitText: trans('remove'),
             canselText: trans('cansel'),
-            backdropAttrs: { className: 'aio-filter-modal' },
-            submitAttrs: { className: 'aio-filter-button aio-filter-active-button' },
-            canselAttrs: { className: 'aio-filter-button' },
+            backdropAttrs: { className: 'aio-table-filter-modal' },
+            submitAttrs: { className: 'aio-table-filter-button aio-table-filter-active-button' },
+            canselAttrs: { className: 'aio-table-filter-button' },
             onSubmit: () => __awaiter(void 0, void 0, void 0, function* () { return yield changeSaves(savesRef.current.filter((o) => o.name !== saveItem.name)); })
         });
     };
-    const activeSave = (saveItem) => {
-        popup.addConfirm({
-            title: trans('activate saved filter'),
-            text: trans('activate confirm'),
-            submitText: trans('activate'),
-            canselText: trans('cansel'),
-            backdropAttrs: { className: 'aio-filter-modal' },
-            submitAttrs: { className: 'aio-filter-button aio-filter-active-button' },
-            canselAttrs: { className: 'aio-filter-button' },
-            onSubmit: () => __awaiter(void 0, void 0, void 0, function* () {
-                const { onChange } = columnsFilter || formFilter || {};
-                if (!onChange) {
-                    return false;
-                }
-                const res = yield changeData(saveItem.data);
-                if (res) {
-                    setActiveName(saveItem.name);
-                    popup.removeModal('savedItems');
-                }
-                return !!res;
-            })
-        });
-    };
+    const activeSave = (saveItem) => __awaiter(void 0, void 0, void 0, function* () {
+        const { onChange } = filter;
+        if (!onChange) {
+            return false;
+        }
+        changeData(saveItem.data);
+    });
     const fetchSaves = () => __awaiter(void 0, void 0, void 0, function* () {
-        const { getSavedItems } = columnsFilter || formFilter || {};
+        const { getSavedItems } = filter;
         if (!getSavedItems) {
             return;
         }
@@ -1175,7 +1152,7 @@ const useFilterData = (popup, trans) => {
             value = options[0].value;
         }
         const operatorDic = {
-            text: 'contain', number: 'equal', date: 'equal', select: 'equal', multiSelect: 'contain', checkbox: false
+            text: 'contain', number: 'equal', date: 'equal', jalaliDate: 'equal', select: 'equal', multiSelect: 'contain', checkbox: false
         };
         const operator = column ? (operatorDic[type] === false ? undefined : operatorDic[type]) : undefined;
         return { value, operator, columnId: column === null || column === void 0 ? void 0 : column.id, id: 'a' + UT.GetRandomNumber(10000000, 99999999) };