aio-table 14.0.0 → 14.0.2

package/index.css

@@ -163,9 +163,9 @@
     background: #f8f8f8;
     z-index: 100;
     box-sizing: border-box;
-    min-height: 36px;
-    gap: 6px;
-    padding: 6px;
+    height:3em;
+    gap: 0.4em;
+    padding: 0.4em;
 }
 
 .aio-table-toolbar-content {
@@ -219,6 +219,7 @@
     flex: 1;
     height: 100%;
     box-sizing: border-box;
+    border:none;
 }
 
 .aio-table-search .aio-input {

package/index.d.ts

@@ -93,6 +93,13 @@ export type I_table_column<T> = {
     pattern?: string;
     affix?: string;
     prefix?: string;
+    cellAttrs?: (p: {
+        row: T;
+        column: I_table_column<T>;
+        value: any;
+        rowIndex: number;
+    }) => any;
+    titleAttrs?: (column: I_table_column<T>) => any;
 };
 export type I_table_filter_saved = {
     name: string;
@@ -125,25 +132,18 @@ export type I_table<T> = {
     columns?: I_table_column<T>[];
     excel?: string | ((value: any[]) => any[]);
     headerAttrs?: any;
-    onAdd?: () => Promise<T | undefined>;
-    onRemove?: (p: {
-        row: T;
-        rowIndex?: number;
-    }) => Promise<boolean>;
     onChangePaging?: (newPaging: I_table_paging) => void;
     onChangeSort?: (sorts: I_table_sort<T>[]) => Promise<boolean>;
-    onSwap?: true | ((newValue: T[], startRow: T, endRow: T) => void);
+    onSwap?: (newValue: T[], startRow: T, endRow: T) => void;
     onSearch?: true | ((searchValue: string) => void);
     paging?: I_table_paging;
     removeText?: string;
-    rowOption?: {
-        before?: I_rowOption<T, ReactNode>;
-        after?: I_rowOption<T, ReactNode>;
-        attrs?: I_rowOption<T, {
-            [attrs: string]: any;
-        }>;
-        template?: I_rowOption<T, ReactNode>;
-    };
+    rowAttrs?: I_rowOption<T, {
+        [attrs: string]: any;
+    }>;
+    rowBefore?: I_rowOption<T, ReactNode>;
+    rowAfter?: I_rowOption<T, ReactNode>;
+    rowTemplate?: I_rowOption<T, ReactNode>;
     rowsTemplate?: (rows: T[]) => ReactNode;
     toolbar?: ReactNode | (() => ReactNode);
     toolbarAttrs?: any;
@@ -196,8 +196,11 @@ export type I_table_sort<T> = {
     active?: boolean;
     dir?: 'dec' | 'inc';
     title?: ReactNode;
-    sortId: string;
-    getValue?: (row: T) => any;
+    sortId?: string;
+    getValue?: (row: T, dir: 'inc' | 'dec') => any;
+    isDate?: boolean;
+    columnId?: string;
+    order?: number;
 };
 export declare const useSort: <T>(p: {
     fa?: boolean;
@@ -212,8 +215,8 @@ export declare const useSort: <T>(p: {
     getSortedRows: (rows: T[]) => T[];
     changeSort: (sortId: string, changeObject: Partial<I_table_sort<T>>) => void;
     changeSorts: (sorts: I_table_sort<T>[]) => Promise<void>;
-    renderSortArrow: (option: I_table_sort<T> | false, inline?: boolean) => import("react/jsx-runtime").JSX.Element;
-    getSortByColumn: (column: I_table_column<T>) => I_table_sort<T> | false;
+    renderSortArrow: (option: false | I_table_sort<T>, inline?: boolean) => import("react/jsx-runtime").JSX.Element;
+    getSortByColumn: (column: I_table_column<T>) => false | I_table_sort<T>;
 };
 export type I_table_paging = {
     serverSide?: boolean;
@@ -227,4 +230,3 @@ export type I_pagingHook<T> = {
     getPagedRows: (rows: T[]) => T[];
     changePaging: (obj: Partial<I_table_paging>) => void;
 };
-export declare function sortRows<T>(rows: T[], sorts: I_table_sort<T>[]): T[];

package/index.js

@@ -57,7 +57,11 @@ const AIOTable = (props) => {
                 }
             }
         }
-        return Object.assign(Object.assign({}, column), col);
+        const res = Object.assign(Object.assign({}, column), col);
+        if (res.value === undefined) {
+            res.value = `row.${column.id}`;
+        }
+        return res;
     };
     const getColumns = () => {
         let { columns = [] } = props;
@@ -91,25 +95,6 @@ const AIOTable = (props) => {
             props.onChangeColumns(newColumns);
         }
     }, 'aio-table-title');
-    const getGetValue = (sort, column) => {
-        if (sort.getValue) {
-            return sort.getValue;
-        }
-        return (row) => {
-            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);
-                }
-                catch (_a) {
-                    return 0;
-                }
-            }
-            return cellValue;
-        };
-    };
     const getSorts = (columns) => {
         let sorts = [];
         for (let i = 0; i < columns.length; i++) {
@@ -120,11 +105,26 @@ const AIOTable = (props) => {
             if (!sort) {
                 continue;
             }
-            let { active = false, dir = 'dec', sortId } = sort;
-            let sortItem = { dir, title: sort.title || column.title, sortId, active, getValue: getGetValue(sort, column) };
+            const { type = 'text' } = column;
+            let { active = false, dir = 'dec', sortId, order = Infinity } = sort;
+            let sortItem = {
+                isDate: type === 'date' || type === 'jalaliDate',
+                sortId, active, dir, columnId,
+                title: sort.title || column.title, order,
+                getValue: (row, dir) => {
+                    if (sort.getValue) {
+                        return sort.getValue(row, dir);
+                    }
+                    const cellValue = tableHook.getCellValue({ row, column, rowIndex: 0 });
+                    if (column.type === 'number' && typeof cellValue !== 'number') {
+                        return dir === 'inc' ? Infinity : -Infinity;
+                    }
+                    return cellValue;
+                }
+            };
             sorts.push(sortItem);
         }
-        return sorts;
+        return UT.SortArray(sorts, [{ getValue: (o) => o.order, dir: 'inc' }]);
     };
     const sortHook = useSort({
         fa: props.fa,
@@ -141,28 +141,6 @@ const AIOTable = (props) => {
             pagingHook.changePaging(props.paging);
         }
     }, [JSON.stringify(props.paging)]);
-    function add() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!props.onAdd) {
-                return;
-            }
-            const res = yield props.onAdd();
-            if (res && props.onChange) {
-                props.onChange([res, ...props.value]);
-            }
-        });
-    }
-    function remove(row, index) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!props.onRemove) {
-                return;
-            }
-            const res = yield props.onRemove({ row, rowIndex: index });
-            if (res === true && props.onChange) {
-                props.onChange(props.value.filter((o) => o._id !== row._id));
-            }
-        });
-    }
     function exportToExcel() {
         let list = [];
         if (typeof props.excel === 'function') {
@@ -230,11 +208,11 @@ const AIOTable = (props) => {
             props.onSearch(searchValue);
         }
     }
-    let ROWS = getRows();
     const { columns, searchColumns, excelColumns, filterColumns, toggleColumns } = useMemo(() => getColumns(), [props.columns]);
+    let ROWS = getRows();
     const context = {
         rootProps: props, excelColumns, filterColumns, tableHook, sortHook, ROWS, toggleColumns, pagingHook,
-        add, remove, search, exportToExcel, DragColumns, popup, columns
+        search, exportToExcel, DragColumns, popup, columns
     };
     return (_jsxs(Provider, { value: context, children: [_jsx(AIOTableComponent, Object.assign({}, props)), popup.render()] }));
 };
@@ -250,27 +228,50 @@ const AIOTableComponent = (props) => {
 };
 const TableRows = () => {
     let { ROWS, rootProps } = useProvider();
-    let { rowOption = {}, rowsTemplate, placeholder = 'there is not any items' } = rootProps;
-    const { before: rowBefore = () => null, after: rowAfter = () => null, template: rowTemplate, } = rowOption;
+    let { rowBefore = () => null, rowAfter = () => null, rowTemplate, rowsTemplate, placeholder = 'there is not any items' } = rootProps;
     let rows = ROWS.pagedRows || [];
     let content;
     if (rowsTemplate) {
         content = rowsTemplate(rows);
     }
     else if (rows.length) {
-        content = rows.map((o, i) => {
-            let { id = 'ailr' + Math.round(Math.random() * 10000000) } = o;
-            o._id = o._id === undefined ? id : o._id;
-            const rowDetail = { row: o, rowIndex: i };
-            let Row;
-            if (rowTemplate) {
-                Row = rowTemplate(rowDetail);
-            }
-            else {
-                Row = _jsx(TableRow, { rowDetail: rowDetail }, o._id);
-            }
-            return (_jsxs(Fragment, { children: [rowBefore(rowDetail), Row, rowAfter(rowDetail)] }, o._id));
-        });
+        if (rootProps.onSwap) {
+            content = (_jsx(UT.DragAndDrop, { data: rows, getId: (o) => {
+                    let { id = 'ailr' + Math.round(Math.random() * 10000000) } = o;
+                    o._id = o._id === undefined ? id : o._id;
+                    return o._id;
+                }, getContent: (o, { index, id }) => {
+                    o._id = o._id === undefined ? id : o._id;
+                    const rowDetail = { row: o, rowIndex: index };
+                    let Row;
+                    if (rowTemplate) {
+                        Row = rowTemplate(rowDetail);
+                    }
+                    else {
+                        Row = _jsx(TableRow, { rowDetail: rowDetail }, o._id);
+                    }
+                    return (_jsxs(Fragment, { children: [rowBefore(rowDetail), Row, rowAfter(rowDetail)] }, o._id));
+                }, onChange: (newRows) => {
+                    if (rootProps.onChange) {
+                        rootProps.onChange(newRows);
+                    }
+                } }));
+        }
+        else {
+            content = rows.map((o, i) => {
+                let { id = 'ailr' + Math.round(Math.random() * 10000000) } = o;
+                o._id = o._id === undefined ? id : o._id;
+                const rowDetail = { row: o, rowIndex: i };
+                let Row;
+                if (rowTemplate) {
+                    Row = rowTemplate(rowDetail);
+                }
+                else {
+                    Row = _jsx(TableRow, { rowDetail: rowDetail }, o._id);
+                }
+                return (_jsxs(Fragment, { children: [rowBefore(rowDetail), Row, rowAfter(rowDetail)] }, o._id));
+            });
+        }
     }
     else if (placeholder) {
         content = _jsx("div", { style: { width: '100%', textAlign: 'center', padding: 12, boxSizing: 'border-box' }, children: placeholder });
@@ -282,12 +283,12 @@ const TableRows = () => {
     return _jsx("div", { className: 'aio-table-rows', style: { gap: gap[1] }, children: content });
 };
 const TableToolbar = ({ filterHook }) => {
-    let { add, exportToExcel, search, rootProps, excelColumns, toggleColumns, sortHook, columns } = useProvider();
-    let { toolbarAttrs, toolbar, onAdd, onSearch, value, onChangeColumns, fa, filter, inlineSort } = rootProps;
+    let { exportToExcel, search, rootProps, excelColumns, toggleColumns, sortHook, columns } = useProvider();
+    let { toolbarAttrs, toolbar, onSearch, value, onChangeColumns, fa, filter, inlineSort } = rootProps;
     const columnsRef = useRef(columns);
     columnsRef.current = columns;
     toolbarAttrs = UT.AddToAttrs(toolbarAttrs, { className: 'aio-table-toolbar' });
-    if (!onAdd && !toolbar && !onSearch && !sortHook.sorts.length && !excelColumns.length && !toggleColumns.length && !filter) {
+    if (!toolbar && !onSearch && !sortHook.sorts.length && !excelColumns.length && !toggleColumns.length && !filter) {
         return null;
     }
     function getAddText() {
@@ -317,18 +318,17 @@ const TableToolbar = ({ filterHook }) => {
                         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, columns } = useProvider();
-    let { headerAttrs, onRemove, gap = [] } = rootProps;
+    let { headerAttrs, gap = [] } = rootProps;
     headerAttrs = UT.AddToAttrs(headerAttrs, { className: 'aio-table-header', style: { gap: gap[0] } });
     let Titles = columns.map((column, i) => {
         const columnId = column.id;
         return _jsx(TableTitle, { column: column, isLast: i === columns.length - 1, colIndex: i }, columnId);
     });
-    let RemoveTitle = !onRemove ? null : _jsx("div", { className: 'aio-table-remove-title' });
-    return _jsxs("div", Object.assign({}, headerAttrs, { children: [Titles, RemoveTitle] }));
+    return _jsx("div", Object.assign({}, headerAttrs, { children: Titles }));
 };
 const TableTitle = (p) => {
     const { column, colIndex } = p;
@@ -344,7 +344,7 @@ const TableRow = (props) => {
     const { rowDetail } = props;
     const { row, rowIndex } = rowDetail;
     const rowId = row._id;
-    let { remove, rootProps, tableHook, columns } = useProvider();
+    let { rootProps, tableHook, columns } = useProvider();
     function getCells() {
         return columns.map((column) => {
             const { show = true } = column;
@@ -356,14 +356,12 @@ const TableRow = (props) => {
             return (_jsx(TableCell, { row: row, rowIndex: rowIndex, column: column }, key));
         });
     }
-    let { onRemove } = rootProps;
-    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) }));
+    return (_jsx("div", Object.assign({}, tableHook.getRowAttrs({ row, rowIndex }), { children: getCells() }), rowId));
 };
 const TableCell = (props) => {
     var _a, _b;
     let { row, column, rowIndex } = props;
-    const { tableHook, rootProps } = useProvider();
-    const { templates } = rootProps;
+    const { tableHook } = useProvider();
     const { type = 'text', id } = column;
     let cellValue = tableHook.getCellValue({ row, rowIndex, column });
     if (type === 'date') {
@@ -417,18 +415,6 @@ const TableCell = (props) => {
     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) => {
-    const DragRows = UT.useDrag((dragIndex, dropIndex, reOrder) => {
-        const { onSwap, onChange, value: rows } = getProps();
-        const newRows = reOrder(rows, dragIndex, dropIndex);
-        const from = rows[dragIndex];
-        const to = rows[dropIndex];
-        if (typeof onSwap === 'function') {
-            onSwap(newRows, from, to);
-        }
-        else if (onChange) {
-            onChange(newRows);
-        }
-    }, 'aio-table-row');
     const fixIndexByPaging = (rowIndex) => {
         const paging = getPaging();
         if (paging) {
@@ -531,7 +517,9 @@ const useTable = (getProps, getPaging) => {
         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 propsCellAttrs = cellAttrs ? cellAttrs({ row, rowIndex: fixIndexByPaging(rowIndex), column, value: cellValue }) : {};
+        const columnCellAttrs = column.cellAttrs ? column.cellAttrs({ row, rowIndex: fixIndexByPaging(rowIndex), column, value: cellValue }) : {};
+        const attrs = Object.assign(Object.assign({}, propsCellAttrs), columnCellAttrs);
         const { justify, width, minWidth } = column;
         const className = `aio-table-cell` + (justify ? ` aio-table-cell-justify` : '');
         let isNumber = false;
@@ -550,19 +538,20 @@ const useTable = (getProps, getPaging) => {
     const getTitleAttrs = (column) => {
         const { justify, width, minWidth, title } = column;
         const { titleAttrs } = getProps();
-        const attrs = titleAttrs ? titleAttrs(column) : {};
+        const propsTitleAttrs = titleAttrs ? titleAttrs(column) : {};
+        const columnTitleAttrs = column.titleAttrs ? column.titleAttrs(column) : {};
+        const attrs = Object.assign(Object.assign({}, propsTitleAttrs), columnTitleAttrs);
         const className = `aio-table-title` + (justify ? ` aio-table-title-justify` : '');
         const style = { width, minWidth, flex: width ? undefined : 1 };
         return UT.AddToAttrs(attrs, { className, style, attrs: { title: typeof title === 'string' ? title : undefined } });
     };
     const getRowAttrs = (p) => {
         const { row, rowIndex } = p;
-        const { rowOption = {}, onSwap, gap = [] } = getProps();
-        const { attrs: rowAttrs } = rowOption;
+        const { onSwap, gap = [], rowAttrs } = getProps();
         const attrs = rowAttrs ? rowAttrs({ row, rowIndex }) : {};
         let obj = UT.AddToAttrs(attrs, { className: ['aio-table-row', rowIndex % 2 === 0 ? 'aio-table-row-odd' : 'aio-table-row-even'], style: { gap: gap[0] } });
         if (onSwap) {
-            obj = Object.assign(Object.assign(Object.assign({}, obj), DragRows.getDragAttrs(rowIndex)), DragRows.getDropAttrs(rowIndex));
+            obj = Object.assign({}, obj);
         }
         return obj;
     };
@@ -571,6 +560,10 @@ const useTable = (getProps, getPaging) => {
 export const useSort = (p) => {
     let [sorts, setSorts] = useState(p.sorts);
     const isInitSortExecutedRef = useRef(false);
+    const getActiveSorts = (sorts) => {
+        let activeSorts = (sorts || []).filter((sort) => sort.active !== false);
+        return activeSorts.map((o) => ({ getValue: o.getValue, dir: o.dir }));
+    };
     const getSortedRows = (rows) => {
         if (isInitSortExecutedRef.current) {
             return rows;
@@ -578,44 +571,17 @@ export const useSort = (p) => {
         if (p.onChangeSort) {
             return rows;
         }
-        let activeSorts = sorts.filter((sort) => sort.active !== false);
+        let activeSorts = getActiveSorts(sorts);
         if (!activeSorts.length || !rows.length) {
             return rows;
         }
         isInitSortExecutedRef.current = true;
-        let sortedRows = sortRows(rows, activeSorts);
+        let sortedRows = UT.SortArray(rows, activeSorts);
         if (p.onChangeRows) {
             p.onChangeRows(sortedRows);
         }
         return sortedRows;
     };
-    const sortRows = (rows, sorts) => {
-        if (!rows) {
-            return [];
-        }
-        if (!sorts || !sorts.length) {
-            return rows;
-        }
-        return rows.sort((a, b) => {
-            for (let i = 0; i < sorts.length; i++) {
-                let { dir, getValue } = sorts[i];
-                if (!getValue) {
-                    return 0;
-                }
-                let aValue = getValue(a), bValue = getValue(b);
-                if (aValue < bValue) {
-                    return -1 * (dir === 'dec' ? -1 : 1);
-                }
-                if (aValue > bValue) {
-                    return 1 * (dir === 'dec' ? -1 : 1);
-                }
-                if (i === sorts.length - 1) {
-                    return 0;
-                }
-            }
-            return 0;
-        });
-    };
     const changeSort = (sortId, changeObject) => {
         let newSorts = sorts.map((sort) => {
             if (sort.sortId === sortId) {
@@ -628,16 +594,16 @@ export const useSort = (p) => {
     };
     const changeSorts = (sorts) => __awaiter(void 0, void 0, void 0, function* () {
         if (p.onChangeSort) {
-            let res = yield p.onChangeSort(sorts);
+            let res = yield p.onChangeSort(sorts.filter((o) => !!o.active));
             if (res !== false) {
                 setSorts(sorts);
             }
         }
         else {
             setSorts(sorts);
-            let activeSorts = sorts.filter((sort) => sort.active !== false);
+            const activeSorts = getActiveSorts(sorts);
             if (activeSorts.length && !!p.onChangeRows) {
-                p.onChangeRows(sortRows(p.rows, activeSorts));
+                p.onChangeRows(UT.SortArray(p.rows, activeSorts));
             }
         }
     });
@@ -694,7 +660,7 @@ export const useSort = (p) => {
         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 })
+                onClick: (option) => changeSort(option.sortId || '', { active: !option.active })
             }, popover: {
                 header: { title: p.fa ? 'مرتب سازی' : 'Sort', onClose: false },
                 headerAttrs: { className: 'aio-sort-header' },
@@ -765,7 +731,7 @@ const usePaging = (p) => {
         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 } }));
+        return (_jsx(AISelect, { attrs: { className: 'aio-paging-button aio-paging-size' }, value: size, options: sizes, option: { text: (o) => o, value: (o) => o }, justify: true, onChange: (value) => changePaging({ size: value }), popover: { fitHorizontal: true } }));
     }
     const render = () => {
         const paging = getPaging(p.paging);
@@ -1222,30 +1188,3 @@ const useFilterData = (popup, trans) => {
     };
     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;
-    });
-}

package/package.json

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