aio-table 12.0.1 → 13.0.0

package/filter.css

@@ -0,0 +1,245 @@
+.aio-filter-modal-size>.aio-popup {
+    padding: 12px;
+    width: 100vw;
+    max-width: 772px;
+    max-height: 100vh;
+}
+
+.aio-filter-add-button {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    border: none;
+    background: none;
+    height: 24px;
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.aio-filter-icon-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 4px;
+    border: none;
+    cursor: pointer;
+}
+.aio-filter-remove-button{
+    background:none;
+    flex-shrink:0;
+}
+.aio-filter-button {
+    background: none;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    height: 30px;
+    border-radius: 4px;
+    color: #0069ff;
+    gap: 6px;
+    padding: 0 12px;
+    cursor: pointer;
+    position: relative;
+}
+
+.aio-filter-badge {
+    background: orange;
+    color: #fff;
+    min-width: 16px;
+    height: 12px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
+    position: absolute;
+    top: -6px;
+    right: -3px;
+}
+
+.aio-filter-modal .aio-popup-header {
+    height: 36px;
+}
+
+.aio-filter-body {
+    padding: 6px;
+    gap: 12px;
+    display: flex;
+    flex-direction: column;
+}
+.aio-filter-body-rtl{
+    direction:rtl;
+}
+
+.aio-filter-body .af-current-filters {
+    display: flex;
+    flex-direction: column;
+}
+.aio-filter-body .af-current-filters .aio-input{
+    min-height:36px;
+}
+
+.aio-filter-body .af-filter-collections {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    height: 100%;
+}
+
+.aio-filter-body .af-filter-collections .af-collection {
+    display: flex;
+    flex-direction: column;
+    background: #f8f8f8;
+    flex-shrink: 0;
+    border: 1px solid #f4f4f4;
+    border-radius: 6px;
+    position: relative;
+    color: #333;
+}
+
+.aio-filter-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.aio-filter-active-button {
+    background: #0069ff;
+    color: #fff;
+}
+
+.aio-filter-panel {
+    position: relative;
+    padding: 6px;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+}
+.aio-filter-panel button{
+    color:inherit;
+}
+
+.af-collections-empty {
+    font-size: 12px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.aio-filter-panel-header {
+    display: flex;
+    align-items: center;
+}
+
+.aio-filter-panel-label {
+    flex: 1;
+    font-weight: bold;
+    font-size: 12px;
+    margin-bottom:12px;
+}
+
+.aio-filter-row {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    padding:3px;
+    background:#f2f2f2;
+    border-radius:6px;
+    position: relative;
+    margin-bottom:6px;
+    overflow-x: hidden;
+}
+
+.aio-filter-row .aio-input {
+    flex: 1;
+    padding:0 12px;
+}
+.aio-filter-row .aio-input.aio-filter-operator-select{
+    flex:none;
+    width:108px;
+}
+
+.aio-filter-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+}
+
+
+.aio-filter-save-modal {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.aio-filter-save-modal-footer {
+    display: flex;
+    gap: 6px;
+}
+
+
+.aio-filter-backdrop {
+    background: rgba(0, 0, 0, 0.7);
+}
+
+
+
+
+.aio-filter-row .aio-input{
+    border:none;
+}
+
+/*******************************tags**************************************/
+/*************************************************************************/
+/*******************************saved filter******************************/
+.af-collection {
+    display: flex;
+    flex-direction: column;
+    background: #f8f8f8;
+    flex-shrink: 0;
+    border: 1px solid #f4f4f4;
+    border-radius: 6px;
+    position: relative;
+    color: #333;
+}
+
+.af-collection-header {
+    height: 36px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 0 12px;
+}
+
+.af-collection-remove {
+    position: absolute;
+    background: #fff;
+    width: 24px;
+    border: 1px solid #ddd;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100%;
+    top: -6px;
+    cursor:pointer;
+}
+
+.af-collection-body {
+    display: flex;
+    gap: 6px;
+    padding: 6px;
+}
+
+.af-collection-name {
+    flex: 1;
+    padding-inline-start: 16px;
+}
+/*************************************************************************/

package/index.css

@@ -1,3 +1,4 @@
+@import './filter.css';
 :root {
     --aio-table-color: #0069ff;
     --aio-table-transition: 0.3s;
@@ -91,6 +92,7 @@
 .aio-table-row {
     display: flex;
     min-width: fit-content;
+    height:40px;
 }
 .aio-table-cell {
     padding: 6px 12px;
@@ -181,22 +183,12 @@
     align-items: center;
     justify-content: center;
     width: 36px;
-    border: none;
-    background: none;
-}
-.aio-table-toolbar .aio-filter-icon-button{
-    border:none;
-    background: none;
-}
-.aio-table-toolbar-button .aio-input{
-    border:none;
-    background: none;
-    width:100%;
-    height:100%;
-    padding:0;
+    border: 1px solid #ddd;
+    background:#fff;
+    border-radius:100%;
+    width:36px;
+    padding:0 !important;
 }
-
-
 .aio-table-remove {
     border: none;
     width: 36px;
@@ -236,3 +228,22 @@
     min-height: 30px;
 }
 
+.aio-filter-inline-label{
+    flex:1;
+    padding:0 12px;
+    box-sizing: border-box;
+}
+.aio-filter-label{
+    top:0;
+    z-index:10;
+    padding:0 12px;
+    font-size:12px;
+    box-sizing: border-box;
+}
+.aio-filter-modal .aio-popup{
+    background:#ddd;
+    max-width: 772px !important;
+}
+.af-current-filters .aio-input{
+    min-width:168px;
+}

package/index.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import * as UT from 'aio-utils';
+import { I_AIOInput,I_formInput } from "aio-input";
 import "./index.css";
 type I_rowOption<T, R> = (p: I_rowDetail<T>) => R;
 type I_cellOption<T, R> = ((p: I_cellDetail<T>) => R) | string;
@@ -14,23 +14,11 @@ type I_cellDetail<T> = I_rowDetail<T> & {
     change: (newRow: T) => void;
     date: number[];
 };
-export type I_table_paging = UT.I_paging;
-export type I_table_sort<T> = UT.I_sort<T>;
-export type I_table_filter = UT.I_filter;
-export type I_table_filter_item = UT.I_filter_item;
-export type I_table_filter_saved_item = UT.I_filter_collection;
 export type I_table_column<T> = {
+    jalali?: boolean;
     title?: any;
     sort?: true | I_table_sort<T>;
-    jalali?: boolean;
-    filter?: {
-        operators?: UT.I_filter_operator[];
-        options?: {
-            text: string;
-            value: any;
-        }[];
-        type?: I_table_column<any>["type"];
-    };
+    filter?: boolean;
     search?: boolean;
     id: string;
     width?: any;
@@ -48,7 +36,12 @@ export type I_table_column<T> = {
     titleAttrs?: {
         [attrs: string]: any;
     };
-    type?: 'text' | 'number' | 'date';
+    type?: 'text' | 'number' | 'date' | 'select' | 'multiSelect' | 'checkbox';
+    filterInput?: I_AIOInput & {
+        type: I_table_column<any>["type"];
+        label?: string;
+    };
+    filterOperators?: ('less' | 'lessequal' | 'more' | 'moreequal' | 'equal' | 'notEqual' | 'contain' | 'notContain')[];
     show?: boolean;
     pattern?: string;
     data?: any;
@@ -102,7 +95,8 @@ export type I_table<T> = {
     style?: any;
     attrs?: any;
     placeholder?: ReactNode;
-    filter?: I_table_filter;
+    columnsFilter?: I_table_columns_filter;
+    formFilter?: I_table_form_filter;
     gap?: [number, number];
     striped?: [string, string];
     columnOption?: {
@@ -112,3 +106,77 @@ export type I_table<T> = {
 };
 declare const AIOTable: <T>(props: I_table<T>) => import("react/jsx-runtime").JSX.Element;
 export default AIOTable;
+export type I_table_sort<T> = {
+    active?: boolean;
+    dir?: 'dec' | 'inc';
+    title?: ReactNode;
+    sortId: string;
+    getValue?: (row: T) => any;
+};
+export declare const useSort: <T>(p: {
+    fa?: boolean;
+    sorts: I_table_sort<T>[];
+    rows: any[];
+    onChangeRows?: (rows: any) => void;
+    onChangeSort?: (sorts: I_table_sort<T>[]) => Promise<boolean | undefined>;
+}) => {
+    sorts: I_table_sort<T>[];
+    setSorts: import("react").Dispatch<import("react").SetStateAction<I_table_sort<T>[]>>;
+    renderSortButton: (attrs?: any, limitTo?: string) => import("react/jsx-runtime").JSX.Element;
+    getSortedRows: (rows: T[]) => T[];
+    changeSort: (sortId: string, changeObject: Partial<I_table_sort<T>>) => void;
+    changeSorts: (sorts: I_table_sort<T>[]) => Promise<void>;
+};
+export type I_table_paging = {
+    serverSide?: boolean;
+    number: number;
+    size: number;
+    length?: number;
+    sizes?: number[];
+};
+export type I_pagingHook<T> = {
+    render: () => ReactNode;
+    getPagedRows: (rows: T[]) => T[];
+    changePaging: (obj: Partial<I_table_paging>) => void;
+};
+export declare const usePaging: <T>(p: {
+    rows: T[];
+    paging?: I_table_paging;
+    onChange?: (newPaging: I_table_paging) => void;
+}) => I_pagingHook<T>;
+export type I_table_filter_saved = {
+    name: string;
+    data: any;
+};
+export type I_table_columns_filter = {
+    onChange?: (newFilters: I_table_columns_filter_item[]) => boolean;
+    getSavedItems?: () => Promise<{
+        name: string;
+        data: any;
+    }[]>;
+    setSavedItems?: (savedItems: {
+        name: string;
+        data: any;
+    }[]) => Promise<boolean>;
+    items?: I_table_columns_filter_item[];
+    after?: () => ReactNode;
+};
+export type I_table_form_filter = {
+    onChange?: (obj: any) => boolean;
+    getSavedItems?: () => Promise<{
+        name: string;
+        data: any;
+    }[]>;
+    setSavedItems?: (saved: {
+        name: string;
+        data: any;
+    }[]) => Promise<boolean>;
+    items?: I_formInput<any>[];
+    value?: any;
+};
+export type I_table_columns_filter_item = {
+    columnId: string;
+    value: any;
+    operator?: 'less' | 'lessequal' | 'more' | 'moreequal' | 'equal' | 'notEqual' | 'contain' | 'notContain';
+    id: string;
+};

package/index.js

@@ -9,7 +9,7 @@ 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 AIOInput, { AICheckbox, AIFormInput, AINumber, AIRadio, AISelect, AIText, AITime, SuggestionInput, useForm } from "aio-input";
 import * as UT from 'aio-utils';
 import usePopup from "aio-popup";
 import AIODate from "aio-date";
@@ -19,7 +19,7 @@ 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([]);
@@ -32,7 +32,7 @@ const AIOTable = (props) => {
     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 pagingHook = usePaging({ rows: props.value, paging: props.paging, onChange: props.onChangePaging });
     const getColumnOption = (key, cellDetails) => {
         if (key === 'id') {
             return cellDetails.column.id;
@@ -104,27 +104,13 @@ const AIOTable = (props) => {
         }
         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 = [];
@@ -225,7 +211,7 @@ const AIOTable = (props) => {
                 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) {
@@ -271,15 +257,22 @@ 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 context = {
-        rootProps: props, excelColumns, filterColumns, tableHook, sortHook, ROWS, toggleColumns, filterHook,
+        rootProps: props, excelColumns, filterColumns, tableHook, sortHook, ROWS, toggleColumns, pagingHook,
         getRowsIndexDic, add, remove, search, exportToExcel, DragColumns, getIcon, popup, getColumnOption
     };
-    return (_jsxs(Provider, { value: context, children: [_jsxs("div", Object.assign({}, attrs, { children: [_jsx(TableToolbar, {}), !!props.filter && 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 { formFilter, columnsFilter } = rootProps;
+    let [dom] = useState(createRef());
+    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 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()] })));
+};
 const TableRows = () => {
     let { ROWS, rootProps } = useProvider();
     let { rowOption = {}, rowsTemplate, placeholder = 'there is not any items' } = rootProps;
@@ -317,13 +310,13 @@ const TableRows = () => {
     const { gap = [0, 1] } = 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 = [] } = rootProps;
+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;
     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 && !rootProps.columnsFilter && !rootProps.formFilter) {
         return null;
     }
     function getAddText() {
@@ -338,21 +331,23 @@ const TableToolbar = () => {
         const column = columns.find((o) => o.id === columnId);
         return getColumnOption(key, tableHook.getCellDetail({ column }));
     };
-    return (_jsxs("div", Object.assign({}, toolbarAttrs, { children: [toolbar && _jsx("div", { className: 'aio-table-toolbar-content', children: typeof toolbar === 'function' ? toolbar() : toolbar }), !!rootProps.filter && filterHook.renderButton(), !!onSearch &&
-                _jsx("div", { className: 'aio-table-search', children: _jsx(AIOInput, { type: 'text', onChange: (value) => search(value), after: getIcon('mdiMagnify', 0.7) }) }), !!sortHook.sorts.length &&
-                _jsx("div", { className: 'aio-table-toolbar-button aio-table-sort-button', children: sortHook.renderSortButton() }), !!excelColumns.length && _jsx("div", { className: 'aio-table-toolbar-button aio-table-excel-button', onClick: () => exportToExcel(), children: getIcon('mdiFileExcel', 0.8) }), !!toggleColumns.length &&
-                _jsx("div", { className: 'aio-table-toolbar-button aio-table-toggle-button', children: _jsx(AISelect, { text: getIcon('mdiEye', 0.8), justify: true, hideTags: true, options: toggleColumns.map((o) => (Object.assign(Object.assign({}, o), { show: true }))), caret: false, option: {
-                            text: (column) => getColumnOptionWrapper(column.id, 'title'),
-                            checked: (column) => getColumnOptionWrapper(column.id, 'show'),
-                            onClick: (column) => {
-                                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));
-                            },
-                            close: () => false
-                        } }) }), !!onAdd && _jsx("div", { className: 'aio-table-toolbar-button aio-table-add-button', onClick: () => add(), children: getAddText() })] })));
+    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 &&
+                _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'),
+                        onClick: (column) => {
+                            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));
+                        },
+                        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();
@@ -509,7 +504,7 @@ const useTable = (getProps, getPaging, getColumnOption) => {
         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) : [];
+        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) => {
@@ -555,3 +550,668 @@ const useTable = (getProps, getPaging, getColumnOption) => {
     };
     return { getCellValue, getCellAttrs, getTitleAttrs, getRowAttrs, changeCell, getCellDetail };
 };
+export const useSort = (p) => {
+    let [sorts, setSorts] = useState(p.sorts);
+    const getIconRef = useRef(new UT.GetSvg().getIcon);
+    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) => {
+        let { dir = 'dec', sortId } = option;
+        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) }));
+    };
+    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: getIconRef.current('mdiSort', 0.7), onSwap: (newSorts) => changeSorts(newSorts) }, 'sortbutton'));
+    };
+    return { sorts, setSorts, renderSortButton, getSortedRows, changeSort, changeSorts };
+};
+export 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 { formFilter, columnsFilter } = rootProps;
+    const { value = {}, items = [], onChange = () => { } } = formFilter || {};
+    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 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()] }));
+    };
+    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 { renderButton, renderTags };
+};
+const FilterButton = ({ attrs }) => {
+    const { popup, trans } = useFilterContext();
+    const openModal = () => {
+        popup.addModal({
+            header: { title: trans('filters') },
+            position: 'fullscreen', body: _jsx(FilterModal, {}),
+            backdropAttrs: { className: 'aio-filter-modal aio-filter-modal-size' }
+        });
+    };
+    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 FilterColumnsTags = ({ filterItems, remove, wrap }) => {
+    const { filterDataHook } = useFilterContext();
+    const { filterColumns } = useProvider();
+    const getTags = () => {
+        var _a, _b, _c;
+        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') {
+                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;
+                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-filter-tags", children: getTags() }));
+};
+const FilterFormTags = () => {
+    const { form } = useFilterContext();
+    return (_jsx(_Fragment, { children: form.renderTags }));
+};
+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)] }));
+};
+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 FilterSaves = () => {
+    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: "af-filter-collections", children: saves.map((o) => _jsx(FilterSave, { item: o }, o.name)) }));
+};
+const FilterSave = ({ item }) => {
+    const { rootProps } = useProvider();
+    const { trans, filterDataHook, type } = 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 remove_layout = () => {
+        const attrs = { className: "af-collection-remove", 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')] }));
+    };
+    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 (_jsxs("div", { className: "af-collection", children: [header_layout(), " ", body_layout()] }));
+};
+const FilterModal = () => {
+    const { rootProps } = useProvider();
+    const { trans } = useFilterContext();
+    const { fa, columnsFilter, formFilter } = rootProps;
+    const { getSavedItems } = columnsFilter || formFilter || {};
+    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-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()] }));
+};
+const CurrentFilters = () => {
+    const { rootProps } = useProvider();
+    const { filterDataHook, trans, form, type } = useFilterContext();
+    const { columnsFilter, formFilter } = rootProps;
+    const canSave = (!!columnsFilter && !!columnsFilter.setSavedItems) || (!!formFilter && !!formFilter.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] }));
+};
+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 },
+            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 = () => {
+        if (!column) {
+            return null;
+        }
+        let { type = 'text' } = column;
+        if (type === 'select') {
+            return (_jsx(AISelect, Object.assign({}, column.filterInput, { value: value, onChange: (value) => changeValue(value), deSelect: true })));
+        }
+        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') {
+            return _jsx(TimeInput, Object.assign({}, column.filterInput, { filterItem: filterItem, onChange: (value) => changeValue(value), column: column }));
+        }
+    };
+    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, {}) })] }) }));
+};
+const TimeInput = ({ filterItem, onChange, column }) => {
+    var _a;
+    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();
+    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 useFilterData = (popup, trans) => {
+    const [activeName, setActiveName] = useState();
+    const { filterColumns, rootProps } = useProvider();
+    const { columnsFilter, formFilter } = 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 (formFilter) {
+            return {};
+        }
+    }
+    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 (res === false) {
+                return false;
+            }
+        }
+        setData(newData);
+        return true;
+    });
+    const changeSaves = (newSaves) => __awaiter(void 0, void 0, void 0, function* () {
+        const { setSavedItems } = columnsFilter || formFilter || {};
+        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-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-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* () { 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 fetchSaves = () => __awaiter(void 0, void 0, void 0, function* () {
+        const { getSavedItems } = columnsFilter || formFilter || {};
+        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', 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 };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "aio-table",
-    "version": "12.0.1",
+    "version": "13.0.0",
     "description": "all in one table. tree mode , simple mode , tree mode, gantt mode , groupby mode, freeze mode.",
     "main": "index.js",
     "types": "index.d.ts",
@@ -19,7 +19,9 @@
     "homepage": "https://github.com/mohammadFeiz/aio-table#readme",
     "dependencies": {
         "aio-input": "latest",
-        "aio-utils": "latest"
+        "aio-utils": "latest",
+        "aio-popup":"latest",
+        "aio-date":"latest"
     },
     "devDependencies": {
         "react-scripts": "latest"