aio-table 14.0.1 → 14.1.0

package/index.css

@@ -177,8 +177,8 @@
 }
 
 .aio-table-toolbar-button {
-    width:3em;
-    height: 3em;
+    width:2.6em;
+    height: 2.6em;
     display: flex;
     align-items: center;
     justify-content: center;

package/index.d.ts

@@ -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;

package/index.js

@@ -58,7 +58,7 @@ const AIOTable = (props) => {
             }
         }
         const res = Object.assign(Object.assign({}, column), col);
-        if (!res.value) {
+        if (res.value === undefined) {
             res.value = `row.${column.id}`;
         }
         return res;
@@ -95,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++) {
@@ -124,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,
@@ -348,7 +344,7 @@ const TableRow = (props) => {
     const { rowDetail } = props;
     const { row, rowIndex } = rowDetail;
     const rowId = row._id;
-    let { rootProps, tableHook, columns } = useProvider();
+    let { tableHook, columns } = useProvider();
     function getCells() {
         return columns.map((column) => {
             const { show = true } = column;
@@ -598,7 +594,7 @@ 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);
             }
@@ -664,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' },
@@ -735,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);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "aio-table",
-    "version": "14.0.1",
+    "version": "14.1.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",