aio-table 11.0.0 → 11.0.2

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

@@ -45,6 +45,7 @@ export type I_table_column<T> = {
     show?: boolean;
     pattern?: string;
     data?: any;
+    toggle?: boolean;
 };
 export type I_table<T> = {
     fa?: boolean;

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";
@@ -24,6 +24,7 @@ const AIOTable = (props) => {
     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({});
@@ -33,6 +34,9 @@ const AIOTable = (props) => {
     propsRef.current = props;
     const pagingHook = UT.usePaging({ rows: props.value, paging: props.paging, onChange: props.onChangePaging });
     const getColumnOption = (key, cellDetails) => {
+        if (key === 'id') {
+            return cellDetails.column.id;
+        }
         const columnValue = cellDetails.column[key];
         if (columnValue !== undefined) {
             const { getValue = {} } = props;
@@ -61,7 +65,7 @@ const AIOTable = (props) => {
         if (props.onChangeColumns) {
             props.onChangeColumns(newColumns);
         }
-    }, 'aio-table-title', 'aio-table-unit');
+    }, 'aio-table-title');
     const getGetValue = (sort, column) => {
         if (sort.getValue) {
             return sort.getValue;
@@ -108,12 +112,13 @@ const AIOTable = (props) => {
     });
     function getColumns() {
         let { columns = [] } = props;
-        let searchColumns = [], excelColumns = [], filterColumns = [];
+        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 toggle = getColumnOption('toggle', cellDetail);
             const id = getColumnOption('id', cellDetail);
             if (id === undefined) {
                 console.error(`aio-table error => missing column id in props.columns[${i}]`);
@@ -127,6 +132,9 @@ const AIOTable = (props) => {
             if (filterId) {
                 filterColumns.push(column);
             }
+            if (toggle) {
+                toggleColumns.push(column);
+            }
             return column;
         });
         if (props.onChangeColumns) {
@@ -135,6 +143,7 @@ const AIOTable = (props) => {
         setSearchColumns(searchColumns);
         setExcelColumns(excelColumns);
         setFilterColumns(filterColumns);
+        setToggleColumns(toggleColumns);
         return updatedColumns;
     }
     useEffect(() => {
@@ -253,7 +262,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, 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 &&
@@ -302,10 +311,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() {
@@ -315,8 +326,25 @@ 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 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), 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 aio-table-add-button', onClick: () => add(), children: getAddText() })] })));
 };
 const TableHeader = () => {
     let { rootProps, getColumnOption, tableHook } = useProvider();
@@ -414,7 +442,7 @@ const useTable = (getProps, getPaging, getColumnOption) => {
         else if (onChange) {
             onChange(newRows);
         }
-    }, 'aio-table-row', 'aio-table-rows');
+    }, 'aio-table-row');
     const getCellValue = (cellDetail, cellValue, def) => {
         const { getValue = {} } = getProps();
         const paging = getPaging();

package/package.json

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