aio-table 12.0.2 → 14.0.0

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, { AISelect } 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";
@@ -19,47 +19,72 @@ const Provider = (p) => _jsx(Context.Provider, { value: p.value, children: p.chi
 const useProvider = () => useContext(Context);
 const AIOTable = (props) => {
     const popup = usePopup();
-    let [dom] = useState(createRef());
+    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 = UT.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);
-            }
-            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 = { show: true, title: '', justify: false, titleAttrs: {} };
-        return defaults[key];
-    };
-    const tableHook = useTable(() => propsRef.current, () => props.paging, getColumnOption);
-    const getIconRef = useRef(new UT.GetSvg());
-    const getIcon = getIconRef.current.getIcon;
+    const pagingHook = usePaging({ rows: props.value, paging: props.paging, onChange: props.onChangePaging });
+    // 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 Object.assign(Object.assign({}, column), col);
+    };
+    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 DragColumns = UT.useDrag((dragIndex, dropIndex, reOrder) => {
         const newColumns = reOrder(props.columns || [], dragIndex, dropIndex);
         if (props.onChangeColumns) {
@@ -71,11 +96,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,75 +114,26 @@ 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;
     };
-    const sortHook = UT.useSort({
+    const sortHook = useSort({
         fa: props.fa,
         sorts: [],
         rows: propsRef.current.value,
         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 = [];
-        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(() => {
@@ -196,16 +170,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;
                         }
@@ -219,13 +189,12 @@ 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);
             }
         }
-        UT.ExportToExcel(list, { promptText: typeof props.excel === 'string' ? props.excel : 'Inter Excel File Name' });
+        fileClass.ExportToExcel(list, { promptText: typeof props.excel === 'string' ? props.excel : 'Inter Excel File Name' });
     }
     function getSearchedRows(rows) {
         if (props.onSearch !== true) {
@@ -234,15 +203,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 + ' ';
                 }
@@ -252,11 +217,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);
@@ -271,15 +231,23 @@ const AIOTable = (props) => {
         }
     }
     let ROWS = getRows();
-    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 { columns, searchColumns, excelColumns, filterColumns, toggleColumns } = useMemo(() => getColumns(), [props.columns]);
     const context = {
-        rootProps: props, excelColumns, filterColumns, tableHook, sortHook, ROWS, toggleColumns, filterHook,
-        getRowsIndexDic, add, remove, search, exportToExcel, DragColumns, getIcon, popup, getColumnOption
+        rootProps: props, excelColumns, filterColumns, tableHook, sortHook, ROWS, toggleColumns, pagingHook,
+        add, remove, search, exportToExcel, DragColumns, popup, columns
     };
-    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()] }));
+    return (_jsxs(Provider, { value: context, children: [_jsx(AIOTableComponent, Object.assign({}, props)), popup.render()] }));
 };
 export default AIOTable;
+const AIOTableComponent = (props) => {
+    const { pagingHook, rootProps } = useProvider();
+    const { filter } = rootProps;
+    let [dom] = useState(createRef());
+    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 }), !!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;
@@ -293,11 +261,7 @@ const TableRows = () => {
         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
-            };
+            const rowDetail = { row: o, rowIndex: i };
             let Row;
             if (rowTemplate) {
                 Row = rowTemplate(rowDetail);
@@ -314,56 +278,53 @@ 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 = () => {
-    let { add, exportToExcel, search, rootProps, excelColumns, toggleColumns, getIcon, sortHook, getColumnOption, tableHook, filterHook } = useProvider();
-    let { toolbarAttrs, toolbar, onAdd, onSearch, value, onChangeColumns, columns = [], fa } = rootProps;
+const TableToolbar = ({ filterHook }) => {
+    let { add, exportToExcel, search, rootProps, excelColumns, toggleColumns, sortHook, columns } = useProvider();
+    let { toolbarAttrs, toolbar, onAdd, 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.filter) {
+    if (!onAdd && !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 }), !!rootProps.filter && 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 },
-                        setAttrs: (key) => { if (key === 'header') {
-                            return { className: 'aio-table-dropdown-header' };
-                        } },
+                        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, onRemove, 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' });
@@ -371,90 +332,91 @@ const TableHeader = () => {
 };
 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 { remove, 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(_Fragment, { children: _jsxs("div", Object.assign({}, tableHook.getRowAttrs({ row, rowIndex }), { children: [getCells(), onRemove ? _jsx("button", { className: 'aio-table-remove', onClick: () => remove(row, rowIndex), children: new UT.GetSvg('em').getIcon('mdiClose', 0.8) }) : null] }), 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);
-    }
-    const before = getColumnOption('before', cellDetail);
-    const after = getColumnOption('after', cellDetail);
-    const subtext = getColumnOption('subtext', cellDetail);
+    var _a, _b;
+    let { row, column, rowIndex } = props;
+    const { tableHook, rootProps } = useProvider();
+    const { templates } = rootProps;
+    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 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 useTable = (getProps, getPaging) => {
     const DragRows = UT.useDrag((dragIndex, dropIndex, reOrder) => {
         const { onSwap, onChange, value: rows } = getProps();
         const newRows = reOrder(rows, dragIndex, dropIndex);
@@ -467,95 +429,823 @@ const useTable = (getProps, getPaging, getColumnOption) => {
             onChange(newRows);
         }
     }, 'aio-table-row');
-    const getCellValue = (cellDetail, cellValue, def) => {
-        const { getValue = {} } = getProps();
+    const fixIndexByPaging = (rowIndex) => {
         const paging = getPaging();
         if (paging) {
             let { number, size } = paging;
-            cellDetail = Object.assign(Object.assign({}, cellDetail), { rowIndex: cellDetail.rowIndex + ((number - 1) * size) });
+            return 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;
+    };
+    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;
+        }
+        if (typeof column.value === 'function') {
+            return column.value({ row, rowIndex, column });
+        }
+        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) });
+            }
+        }
+    };
+    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);
             }
-            return result === undefined ? def : result;
+            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;
         }
-        if (type === 'undefined') {
-            return def;
+        const templateParam = getTemplateParam({ row, column, rowIndex });
+        if (typeof column[key] === 'function') {
+            const fn = column[key];
+            return fn(templateParam);
         }
-        if (type === 'function') {
-            return cellValue(cellDetail);
+        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) { }
         }
-        return cellValue === undefined ? def : cellValue;
     };
-    function changeCell(cellDetail, newRow) {
+    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 attrs = cellAttrs ? cellAttrs({ row, rowIndex: fixIndexByPaging(rowIndex), column, value: cellValue }) : {};
+        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 attrs = titleAttrs ? titleAttrs(column) : {};
         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 getRowAttrs = (p) => {
+        const { row, rowIndex } = p;
+        const { rowOption = {}, onSwap, gap = [] } = 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 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(Object.assign(Object.assign({}, obj), DragRows.getDragAttrs(rowIndex)), DragRows.getDropAttrs(rowIndex));
         }
         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 isInitSortExecutedRef = useRef(false);
+    const getSortedRows = (rows) => {
+        if (isInitSortExecutedRef.current) {
+            return rows;
+        }
+        if (p.onChangeSort) {
+            return rows;
+        }
+        let activeSorts = sorts.filter((sort) => sort.active !== false);
+        if (!activeSorts.length || !rows.length) {
+            return rows;
+        }
+        isInitSortExecutedRef.current = true;
+        let sortedRows = sortRows(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) {
+                let newSort = Object.assign(Object.assign({}, sort), changeObject);
+                return newSort;
+            }
+            return sort;
+        });
+        changeSorts(newSorts);
+    };
+    const changeSorts = (sorts) => __awaiter(void 0, void 0, void 0, function* () {
+        if (p.onChangeSort) {
+            let res = yield p.onChangeSort(sorts);
+            if (res !== false) {
+                setSorts(sorts);
+            }
+        }
+        else {
+            setSorts(sorts);
+            let activeSorts = sorts.filter((sort) => sort.active !== false);
+            if (activeSorts.length && !!p.onChangeRows) {
+                p.onChangeRows(sortRows(p.rows, activeSorts));
+            }
+        }
+    });
+    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;
+                }
+                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) {
+            return null;
+        }
+        const Attrs = UT.AddToAttrs(attrs, { className: 'aio-sort-button' });
+        return (_jsx(AISelect, { caret: false, options: sorts, justify: true, option: {
+                text: (option) => option.title, checked: (option) => !!option.active, close: () => false, value: (option) => option.sortId,
+                after: (option) => renderSortArrow(option),
+                onClick: (option) => changeSort(option.sortId, { active: !option.active })
+            }, popover: {
+                header: { title: p.fa ? 'مرتب سازی' : 'Sort', onClose: false },
+                headerAttrs: { className: 'aio-sort-header' },
+                limitTo: limitTo || '.aio-table'
+            }, attrs: Attrs, text: new UT.GetSvg('em').getIcon('mdiSort', 0.7), onSwap: (newSorts) => changeSorts(newSorts) }, 'sortbutton'));
+    };
+    return { sorts, setSorts, renderSortButton, getSortedRows, changeSort, changeSorts, renderSortArrow, getSortByColumn };
+};
+const usePaging = (p) => {
+    const timeoutRef = useRef(undefined);
+    const startRef = useRef(undefined);
+    const endRef = useRef(undefined);
+    const pagesRef = useRef(undefined);
+    const getPaging = (paging) => {
+        return paging ? fix(paging) : undefined;
+    };
+    function fix(paging) {
+        if (typeof p.onChange !== 'function') {
+            alert('aio-table error => in type table you set paging but forget to set onChangePaging function prop to aio input');
+            return { number: 0, size: 0 };
+        }
+        let { number, size = 20, length = 0, sizes = [1, 5, 10, 15, 20, 30, 50, 70, 100], serverSide } = paging;
+        if (!serverSide) {
+            length = p.rows.length;
+        }
+        if (sizes.indexOf(size) === -1) {
+            size = sizes[0];
+        }
+        let pages = Math.ceil(length / size);
+        number = number > pages ? pages : number;
+        number = number < 1 ? 1 : number;
+        let start = number - 3, end = number + 3;
+        startRef.current = start;
+        endRef.current = end;
+        pagesRef.current = pages;
+        return Object.assign(Object.assign({}, paging), { length, number, size, sizes });
+    }
+    const changePaging = (obj) => {
+        const paging = getPaging(p.paging);
+        if (!paging) {
+            return;
+        }
+        let newPaging = fix(Object.assign(Object.assign({}, paging), obj));
+        if (p.onChange) {
+            if (newPaging.serverSide) {
+                clearTimeout(timeoutRef.current);
+                timeoutRef.current = setTimeout(() => {
+                    //be khatere fahme payine typescript majbooram dobare in shart ro bezanam
+                    if (p.onChange) {
+                        p.onChange(newPaging);
+                    }
+                }, 800);
+            }
+            else {
+                p.onChange(newPaging);
+            }
+        }
+    };
+    const getPagedRows = (rows) => {
+        const paging = getPaging(p.paging);
+        if (!paging || paging.serverSide) {
+            return rows;
+        }
+        const { size, number } = paging;
+        return rows.slice((number - 1) * size, number * size);
+    };
+    function changeSizeButton(sizes, size) {
+        if (!sizes.length) {
+            return null;
+        }
+        return (_jsx(AISelect, { attrs: { className: 'aio-paging-button aio-paging-size' }, value: size, options: sizes, option: { text: 'option', value: 'option' }, justify: true, onChange: (value) => changePaging({ size: value }), popover: { fitHorizontal: true } }));
+    }
+    const render = () => {
+        const paging = getPaging(p.paging);
+        if (!paging) {
+            return null;
+        }
+        if (!p.rows.length) {
+            return null;
+        }
+        let { number, size, sizes } = paging;
+        let buttons = [];
+        let isFirst = true;
+        for (let i = startRef.current; i <= endRef.current; i++) {
+            if (i < 1 || i > pagesRef.current) {
+                buttons.push(_jsx("button", { className: 'aio-paging-button aio-paging-button-hidden', children: i }, i));
+            }
+            else {
+                let index;
+                if (isFirst) {
+                    index = 1;
+                    isFirst = false;
+                }
+                else if (i === Math.min(endRef.current, pagesRef.current)) {
+                    index = pagesRef.current;
+                }
+                else {
+                    index = i;
+                }
+                buttons.push(_jsx("button", { className: 'aio-paging-button' + (index === number ? ' active' : ''), onClick: () => changePaging({ number: index }), children: index }, index));
+            }
+        }
+        return (_jsxs("div", { className: 'aio-paging', children: [buttons, changeSizeButton(sizes || [], size)] }));
+    };
+    return { render, getPagedRows, changePaging };
+};
+const FilterContext = createContext({});
+const FilterContextProvider = (props) => _jsx(FilterContext.Provider, { value: props.value, children: props.children });
+const useFilterContext = () => useContext(FilterContext);
+const useFilter = () => {
+    const { rootProps } = useProvider();
+    const { filter } = rootProps;
+    const { onChange } = filter || {};
+    const trans = (key) => {
+        const { fa } = rootProps;
+        const dic = {
+            'less': fa ? 'کوچک تر از' : 'less than',
+            'lessequal': fa ? 'کوچک تر مساوی' : 'equal or less than',
+            'more': fa ? 'بزرگتر از' : 'more than',
+            'moreequal': fa ? 'بزرگتر مساوی' : 'equal or more than',
+            'equal': fa ? 'برابر' : 'equal',
+            'notEqual': fa ? 'مخالف' : 'not equal',
+            'contain': fa ? 'شامل باشد' : 'contain',
+            'notContain': fa ? 'شامل نباشد' : 'not contain',
+            'add': fa ? 'افزودن' : 'Add',
+            'save': fa ? 'ذخیره' : 'Save',
+            'edit': fa ? 'ویرایش' : 'Edit',
+            'filters': fa ? 'افزودن فیلتر' : 'Add Filter',
+            'remove': fa ? 'حذف' : 'Remove',
+            'activate': fa ? 'اعمال' : 'Activate',
+            'saved filters': fa ? 'مجموعه فیلتر های ذخیره شده' : 'Saved Filters',
+            'current filters': fa ? 'فیلتر های جاری' : 'Current Filter',
+            'remove saved filter': fa ? 'حذف فیلتر ذخیره شده' : 'Remove saved filter',
+            'remove confirm': fa ? 'از حذف این آیتم اطمینان دارید؟' : 'are you sure to remove this item?',
+            'cansel': fa ? 'لغو' : 'Cansel',
+            'activate saved filter': fa ? 'اعمال فیلتر ذخیره شده' : 'activate saved filter',
+            'activate confirm': fa ? 'از فعالسازی این آیتم اطمینان دارید؟' : 'are you sure to activate this item?',
+            'saved empty': fa ? "مجموعه فیلتر ذخیره شده ای موجود نیست" : "There is not any saved filters",
+            'inter filter name': fa ? 'نام فیلتر را برای ذخیره وارد کنید' : 'please inter filter name',
+            'save filter': fa ? 'ذخیره فیلتر' : 'Save Filter'
+        };
+        return dic[key];
+    };
+    const popup = usePopup({ rtl: !!rootProps.fa });
+    const filterDataHook = useFilterData(popup, trans);
+    const renderButton = (attrs) => {
+        return (_jsxs(FilterContextProvider, { value: { trans, popup, filterDataHook, rootProps }, children: [_jsx(FilterButton, { attrs: attrs }), popup.render()] }));
+    };
+    const renderTags = () => {
+        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, rootProps } = useFilterContext();
+    const { filter = {} } = rootProps;
+    const { modalAttrs } = filter;
+    const openModal = () => {
+        popup.addModal({
+            header: { title: trans('filters') },
+            position: 'fullscreen', body: _jsx(FilterModal, {}),
+            backdropAttrs: { className: 'aio-table-filter-modal aio-table-filter-modal-size' },
+            modalAttrs
+        });
+    };
+    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 }) => {
+    const { filterDataHook } = useFilterContext();
+    const { filterColumns } = useProvider();
+    const getTags = () => {
+        var _a, _b;
+        const res = [];
+        for (let i = 0; i < filterItems.length; i++) {
+            const filterItem = filterItems[i];
+            const { columnId, value } = filterItem;
+            if (value === undefined || value === '' || !columnId) {
+                continue;
+            }
+            const column = filterColumns.find((o) => o.id === columnId);
+            if (!column) {
+                continue;
+            }
+            const { type = 'text' } = column;
+            let valuePresent = value;
+            const options = ((_a = column.filterInput) === null || _a === void 0 ? void 0 : _a.options) || [];
+            if (type === 'multiSelect') {
+                if (!value || !value.length) {
+                    continue;
+                }
+                const texts = options.filter((o) => value.indexOf(o.value) !== -1).map((o) => o.text);
+                valuePresent = texts.join(' | ');
+            }
+            else if (type === 'select') {
+                const option = options.find((o) => o.value === value);
+                valuePresent = (option === null || option === void 0 ? void 0 : option.text) || '';
+            }
+            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 = column.type === 'jalaliDate';
+                if (dateUnit === 'month') {
+                    valuePresent = new AIODate().getDateByPattern(value, '{year}/{month}', jalali);
+                }
+                else if (dateUnit === 'day') {
+                    valuePresent = new AIODate().getDateByPattern(value, '{year}/{month}/{day}', jalali);
+                }
+                else if (dateUnit === 'hour') {
+                    valuePresent = new AIODate().getDateByPattern(value, '{year}/{month}/{day} {hour}:00 }', jalali);
+                }
+                else if (dateUnit === 'minute') {
+                    valuePresent = new AIODate().getDateByPattern(value, '{year}/{month}/{day} {hour}:{minute}', jalali);
+                }
+            }
+            else if (type === 'number') {
+                valuePresent = UT.SplitNumber(valuePresent);
+            }
+            else if (type === 'checkbox') {
+                valuePresent = '';
+            }
+            res.push(_jsx(FilterTag, { column: column, filterItem: filterItem, valuePresent: valuePresent, onRemove: remove ? () => filterDataHook.removeFilterItem(filterItem) : undefined }, filterItem.id));
+        }
+        return res;
+    };
+    if (!filterItems.length) {
+        return null;
+    }
+    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-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('');
+    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 FilterSaveds = () => {
+    const { trans, filterDataHook } = useFilterContext();
+    const saves = filterDataHook.getSaves();
+    if (!saves.length) {
+        return (_jsx("div", { className: "aio-table-saved-filters-empty", children: trans('saved empty') }));
+    }
+    return (_jsx("div", { className: "aio-table-saved-filters", children: saves.map((o) => _jsx(FilterSaved, { item: o }, o.name)) }));
+};
+const FilterSaved = ({ item }) => {
+    const { rootProps } = useProvider();
+    const { trans, filterDataHook } = useFilterContext();
+    const { fa } = rootProps;
+    if (!item.name) {
+        return null;
+    }
+    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: "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-table-filter-button", onClick: () => filterDataHook.activeSave(item), children: [_jsx(FilterActiveIcon, {}), " ", trans('activate')] }));
+    };
+    const body_layout = () => {
+        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: "aio-table-saved-filter", children: [header_layout(), " ", body_layout()] }));
+};
+const FilterModal = () => {
+    const { rootProps } = useProvider();
+    const { trans } = useFilterContext();
+    const { fa, filter } = rootProps;
+    const { getSavedItems } = filter || {};
+    const collections_layout = () => {
+        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-table-filter-body aio-table-filter-body-${fa ? 'rtl' : 'ltr'}`, children: [_jsx(CurrentFilters, {}), !!getSavedItems && collections_layout()] }));
+};
+const CurrentFilters = () => {
+    const { rootProps } = useProvider();
+    const { filterDataHook, trans } = useFilterContext();
+    const { filter } = rootProps;
+    const canSave = (!!filter && !!filter.setSavedItems);
+    const data = filterDataHook.getData();
+    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;
+    const { filterDataHook, trans } = useFilterContext();
+    const { filterColumns } = useProvider();
+    const [column] = useState(getColumn);
+    const [operators, setOperators] = useState(getOperators);
+    function getColumn() { return filterColumns.find((o) => o.id === columnId); }
+    useEffect(() => {
+        setOperators(getOperators());
+    }, [JSON.stringify(filterItem.columnId)]);
+    function getOperators() {
+        if (!column) {
+            return [];
+        }
+        const res = [];
+        const operators = ['less', 'more', 'equal', 'notEqual', 'contain', 'notContain'];
+        const dic = {
+            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: {}
+        };
+        for (let i = 0; i < operators.length; i++) {
+            const o = operators[i];
+            if (!dic[column.type || 'text'][o]) {
+                continue;
+            }
+            res.push(operators[i]);
+        }
+        return res;
+    }
+    const changeValue = (newValue) => {
+        filterDataHook.changeColumnsFilterItem({ filterItem: filterItem, key: 'value', value: newValue, column });
+    };
+    const getValueInput = () => {
+        var _a, _b;
+        if (!column) {
+            return null;
+        }
+        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, 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 })));
+        }
+        if (type === 'text') {
+            return _jsx(AIText, Object.assign({}, column.filterInput, { value: value, onChange: (value) => changeValue(value), deSelect: true }));
+        }
+        if (type === 'checkbox') {
+            return _jsx(AICheckbox, Object.assign({}, column.filterInput, { value: value, onChange: (value) => changeValue(value), deSelect: true }));
+        }
+        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' || 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-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, jalali }) => {
+    const [unit] = useState(getUnit);
+    function getUnit() {
+        const { dateUnit = 'day' } = column.filterInput || {};
+        const res = { year: true, month: true };
+        if (dateUnit !== 'month') {
+            res.day = true;
+            if (dateUnit !== 'day') {
+                res.hour = true;
+                if (dateUnit !== 'hour') {
+                    res.minute = true;
+                }
+            }
+        }
+        return res;
+    }
+    const DATE = new AIODate();
+    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('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 { 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 (filter.cache) {
+            const storage = new UT.Storage(filter.cache);
+            const data = storage.load('columnsFilterData', filter.items || []);
+            if (filter.onChange) {
+                filter.onChange(data);
+            }
+            return data;
+        }
+        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 (filter.onChange) {
+            const res = yield filter.onChange(newData);
+            if (res === false) {
+                return false;
+            }
+        }
+        setData(newData);
+        return true;
+    });
+    const changeSaves = (newSaves) => __awaiter(void 0, void 0, void 0, function* () {
+        const { setSavedItems } = filter;
+        if (!setSavedItems) {
+            return false;
+        }
+        const res = yield setSavedItems(newSaves);
+        if (res === false) {
+            return false;
+        }
+        setSaves(newSaves);
+        return true;
+    });
+    const save = () => {
+        popup.addModal({
+            header: { title: trans('save filter') }, position: 'center',
+            body: (_jsx(SaveConfirm, { onSubmit: (name) => __awaiter(void 0, void 0, void 0, function* () {
+                    if (!name) {
+                        return;
+                    }
+                    const data = dataRef.current;
+                    const saves = savesRef.current;
+                    const newSave = { name, data };
+                    const isExist = !!saves.find((o) => o.name === name);
+                    let newSaves = [];
+                    if (isExist) {
+                        newSaves = saves.map((o) => o.name === name ? newSave : o);
+                    }
+                    else {
+                        newSaves = [...saves, newSave];
+                    }
+                    const res = yield changeSaves(newSaves);
+                    if (res) {
+                        popup.removeModal();
+                    }
+                }) })),
+            backdropAttrs: { className: 'aio-table-filter-modal' }
+        });
+    };
+    const removeSave = (saveItem) => {
+        popup.addConfirm({
+            title: trans('remove saved filter'),
+            text: trans('remove confirm'),
+            submitText: trans('remove'),
+            canselText: trans('cansel'),
+            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) => __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 } = filter;
+        if (!getSavedItems) {
+            return;
+        }
+        const saves = yield getSavedItems();
+        if (saves) {
+            setSaves(saves);
+        }
+    });
+    useEffect(() => { fetchSaves(); }, []);
+    const getDefaultFilter = (column) => {
+        const { type = 'text' } = column;
+        const { options } = (column === null || column === void 0 ? void 0 : column.filterInput) || {};
+        let value = '';
+        if (type === 'select' && !!options && !!options.length) {
+            value = options[0].value;
+        }
+        const operatorDic = {
+            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) };
+    };
+    const changeColumnsFilterItem = (p) => {
+        const { key, value, filterItem, column } = p;
+        const columnsFilterItems = dataRef.current;
+        let newFilterItem;
+        if (!!column && key === 'columnId') {
+            const defaultFilter = getDefaultFilter(column);
+            if (defaultFilter === false) {
+                return;
+            }
+            newFilterItem = Object.assign(Object.assign({}, defaultFilter), { [key]: value });
+        }
+        else {
+            newFilterItem = Object.assign(Object.assign({}, filterItem), { [key]: value });
+        }
+        const newFilterItems = columnsFilterItems.map((o) => o.id === filterItem.id ? newFilterItem : o);
+        changeData(newFilterItems);
+    };
+    const addColumnsFilterItem = () => {
+        const column = filterColumns[0];
+        if (!column) {
+            return;
+        }
+        const defaultFilter = getDefaultFilter(column);
+        if (defaultFilter === false) {
+            return;
+        }
+        const columnsFilterItems = dataRef.current;
+        changeData([...columnsFilterItems, defaultFilter]);
+    };
+    const removeFilterItem = (filterItem) => {
+        const columnsFilterItems = dataRef.current;
+        changeData(columnsFilterItems.filter((o) => !!o && (o.id !== filterItem.id)));
+    };
+    return { getSaves, getData, save, removeSave, removeFilterItem, changeColumnsFilterItem, activeName, activeSave, addColumnsFilterItem };
 };
+export function 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;
+    });
+}