aio-table 10.0.0 → 11.0.1

package/index.css

@@ -182,7 +182,10 @@
     border: none;
     background: none;
 }
-
+.aio-table-toolbar-button .aio-input{
+    border:none;
+    background: none;
+}
 
 
 .aio-table-remove {

package/index.d.ts

@@ -25,8 +25,7 @@ export type I_table_column<T> = {
     jalali?: boolean;
     filterId?: string;
     search?: boolean;
-    id?: string;
-    _id?: string;
+    id: string;
     width?: any;
     minWidth?: any;
     excel?: string | boolean;
@@ -46,6 +45,7 @@ export type I_table_column<T> = {
     show?: boolean;
     pattern?: string;
     data?: any;
+    toggle?: boolean;
 };
 export type I_table<T> = {
     fa?: boolean;
@@ -99,7 +99,7 @@ export type I_table<T> = {
     gap?: [number, number];
     striped?: [string, string];
     columnOption?: {
-        [key in keyof I_table_column<any>]: (p: I_cellDetail<T>) => any;
+        [key in keyof I_table_column<any>]?: (p: I_cellDetail<any>) => any;
     };
     onChangeColumns?: (v: I_table_column<any>[]) => void;
 };

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 from "aio-input";
+import AIOInput, { AISelect } from "aio-input";
 import * as UT from 'aio-utils';
 import usePopup from "aio-popup";
 import AIODate from "aio-date";
@@ -21,10 +21,10 @@ const AIOTable = (props) => {
     const popup = usePopup();
     let [dom] = useState(createRef());
     let [searchValue, setSearchValue] = useState('');
-    const [columns, setColumns] = 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({});
@@ -42,12 +42,15 @@ const AIOTable = (props) => {
             }
             return cellDetails.column[key];
         }
-        const { columnOption = {} } = props;
-        const fn = columnOption[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];
     };
@@ -55,11 +58,10 @@ const AIOTable = (props) => {
     const getIconRef = useRef(new UT.GetSvg());
     const getIcon = getIconRef.current.getIcon;
     const DragColumns = UT.useDrag((dragIndex, dropIndex, reOrder) => {
-        const newColumns = reOrder(columns, dragIndex, dropIndex);
+        const newColumns = reOrder(props.columns || [], dragIndex, dropIndex);
         if (props.onChangeColumns) {
             props.onChangeColumns(newColumns);
         }
-        setColumns(newColumns);
     }, 'aio-table-title', 'aio-table-unit');
     const getGetValue = (sort, column) => {
         if (sort.getValue) {
@@ -86,10 +88,10 @@ const AIOTable = (props) => {
         let sorts = [];
         for (let i = 0; i < columns.length; i++) {
             const column = columns[i];
-            const { _id } = column;
             const cellDetail = tableHook.getCellDetail({ column });
+            const columnId = getColumnOption('id', cellDetail);
             const sortValue = getColumnOption('sort', cellDetail);
-            const sort = sortValue === true ? { sortId: _id } : sortValue;
+            const sort = sortValue === true ? { sortId: columnId } : sortValue;
             if (!sort) {
                 continue;
             }
@@ -107,14 +109,17 @@ const AIOTable = (props) => {
     });
     function getColumns() {
         let { columns = [] } = props;
-        let searchColumns = [], excelColumns = [], filterColumns = [];
-        let updatedColumns = columns.map((column) => {
+        let searchColumns = [], excelColumns = [], filterColumns = [], toggleColumns = [];
+        let updatedColumns = columns.map((column, i) => {
             const cellDetail = tableHook.getCellDetail({ column });
             const filterId = getColumnOption('filterId', cellDetail);
             const search = getColumnOption('search', cellDetail);
             const excel = getColumnOption('excel', cellDetail);
-            const id = getColumnOption('id', cellDetail) || 'aitc' + Math.round(Math.random() * 1000000);
-            column = Object.assign(Object.assign({}, column), { _id: id });
+            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);
             }
@@ -124,12 +129,18 @@ const AIOTable = (props) => {
             if (filterId) {
                 filterColumns.push(column);
             }
+            if (toggle) {
+                toggleColumns.push(column);
+            }
             return column;
         });
-        setColumns(updatedColumns);
+        if (props.onChangeColumns) {
+            props.onChangeColumns(updatedColumns);
+        }
         setSearchColumns(searchColumns);
         setExcelColumns(excelColumns);
         setFilterColumns(filterColumns);
+        setToggleColumns(toggleColumns);
         return updatedColumns;
     }
     useEffect(() => {
@@ -248,7 +259,7 @@ const AIOTable = (props) => {
     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, columns, excelColumns, filterColumns, tableHook, sortHook, ROWS,
+        rootProps: props, excelColumns, filterColumns, tableHook, sortHook, ROWS, toggleColumns,
         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 &&
@@ -297,10 +308,12 @@ const TableRows = () => {
     return _jsx("div", { className: 'aio-table-rows', style: { gap: gap[1] }, children: content });
 };
 const TableToolbar = () => {
-    let { add, exportToExcel, search, rootProps, excelColumns, getIcon, sortHook } = useProvider();
-    let { toolbarAttrs, toolbar, onAdd, onSearch, value } = rootProps;
+    let { add, exportToExcel, search, rootProps, excelColumns, toggleColumns, getIcon, sortHook, getColumnOption, tableHook } = useProvider();
+    let { toolbarAttrs, toolbar, onAdd, onSearch, value, onChangeColumns, columns } = 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) {
+    if (!onAdd && !toolbar && !onSearch && !sortHook.sorts.length && !excelColumns.length && !toggleColumns.length) {
         return null;
     }
     function getAddText() {
@@ -310,14 +323,34 @@ const TableToolbar = () => {
         }
         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 }), !!onSearch &&
-                _jsx("div", { className: 'aio-table-search', children: _jsx(AIOInput, { type: 'text', onChange: (value) => search(value), after: getIcon('mdiMagnify', 0.7) }) }), sortHook.renderSortButton(), !!excelColumns.length && _jsx("div", { className: 'aio-table-toolbar-button', onClick: () => exportToExcel(), children: getIcon('mdiFileExcel', 0.8) }), !!onAdd && _jsx("div", { className: 'aio-table-toolbar-button', onClick: () => add(), children: getAddText() })] })));
+                _jsx("div", { className: 'aio-table-search', children: _jsx(AIOInput, { type: 'text', onChange: (value) => search(value), after: getIcon('mdiMagnify', 0.7) }) }), sortHook.renderSortButton(), !!excelColumns.length && _jsx("div", { className: 'aio-table-toolbar-button', onClick: () => exportToExcel(), children: getIcon('mdiFileExcel', 0.8) }), !!toggleColumns.length &&
+                _jsx("div", { className: 'aio-table-toolbar-button', children: _jsx(AISelect, { text: getIcon('mdiEye', 0.8), hideTags: true, options: toggleColumns, 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', onClick: () => add(), children: getAddText() })] })));
 };
 const TableHeader = () => {
-    let { rootProps, columns } = useProvider();
-    let { headerAttrs, onRemove, gap = [0, 1] } = rootProps;
+    let { rootProps, getColumnOption, tableHook } = useProvider();
+    let { headerAttrs, onRemove, gap = [0, 1], columns = [] } = rootProps;
     headerAttrs = UT.AddToAttrs(headerAttrs, { className: 'aio-table-header', style: { gap: gap[0] } });
-    let Titles = columns.map((o, i) => _jsx(TableTitle, { column: o, isLast: i === columns.length - 1, colIndex: i }, o._id));
+    let Titles = columns.map((column, i) => {
+        const columnId = getColumnOption('id', tableHook.getCellDetail({ column }));
+        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] }));
 };
@@ -334,15 +367,17 @@ const TableRow = (props) => {
     const { rowDetail } = props;
     const { row, rowIndex } = rowDetail;
     const rowId = row._id;
-    let { remove, rootProps, columns, tableHook, getIcon, getColumnOption } = useProvider();
+    let { remove, rootProps, tableHook, getIcon, getColumnOption } = useProvider();
+    const { columns = [] } = rootProps;
     const isOdd = rowIndex % 2 === 0;
     function getCells() {
         return columns.map((column) => {
             if (!getColumnOption('show', tableHook.getCellDetail(Object.assign(Object.assign({}, rowDetail), { column })))) {
                 return null;
             }
-            const key = rowId + ' ' + column._id;
             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 key = rowId + ' ' + columnId;
             const value = getColumnOption('value', cellDetail);
             const cellValue = tableHook.getCellValue(cellDetail, value);
             return (_jsx(TableCell, { cellDetail: cellDetail, cellValue: cellValue, isOdd: isOdd }, key));
@@ -355,7 +390,7 @@ const TableCell = (props) => {
     let { cellDetail, cellValue, isOdd } = props;
     const { row, column } = cellDetail;
     const { tableHook, rootProps, getColumnOption } = useProvider();
-    const { columnOption = {} } = rootProps;
+    const { columnOption } = rootProps;
     const type = getColumnOption('type', cellDetail);
     if (type === 'number') {
         cellValue = UT.SplitNumber(cellValue);
@@ -364,7 +399,7 @@ const TableCell = (props) => {
     const after = getColumnOption('after', cellDetail);
     const subtext = getColumnOption('subtext', cellDetail);
     const rowId = row._id;
-    const colId = column._id;
+    const colId = getColumnOption('id', cellDetail);
     const getTemplateValue = () => {
         const { getValue = {} } = rootProps;
         if (typeof column.template === 'function') {
@@ -373,7 +408,7 @@ const TableCell = (props) => {
         if (typeof column.template === 'string' && getValue[column.template]) {
             return getValue[column.template](cellDetail);
         }
-        if (columnOption.template) {
+        if ((columnOption || {}).template) {
             return columnOption.template(cellDetail);
         }
         const pattern = getColumnOption('pattern', cellDetail);

package/package.json

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