aio-table 9.2.1 → 9.3.1

package/index.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import { I_filter, I_filter_item, I_filter_saved_item, I_paging, I_sort } from "aio-component-utils";
+import { type ReactNode } from "react";
+import * as UT from 'aio-utils';
 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,11 +14,11 @@ type I_cellDetail<T> = I_rowDetail<T> & {
     change: (newRow: T) => void;
     isDate: boolean;
 };
-export type I_table_paging = I_paging;
-export type I_table_sort<T> = I_sort<T>;
-export type I_table_filter = I_filter;
-export type I_table_filter_item = I_filter_item;
-export type I_table_filter_saved_item = I_filter_saved_item;
+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_saved_item;
 export type I_table_column<T> = {
     title?: any;
     sort?: true | I_table_sort<T>;
@@ -94,6 +94,10 @@ export type I_table<T> = {
     filter?: I_table_filter;
     gap?: [number, number];
     striped?: [string, string];
+    visibleColumns?: {
+        [columnId: string]: boolean | undefined;
+    };
+    onChangeColumns?: (v: I_table_column<any>[]) => void;
 };
 declare const AIOTable: <T>(props: I_table<T>) => import("react/jsx-runtime").JSX.Element;
 export default AIOTable;

package/index.js

@@ -13,7 +13,6 @@ import AIOInput from "aio-input";
 import * as UT from 'aio-utils';
 import usePopup from "aio-popup";
 import AIODate from "aio-date";
-import { Filterbar, usePaging, useSort } from "aio-component-utils";
 import "./index.css";
 const Context = createContext({});
 const Provider = (p) => _jsx(Context.Provider, { value: p.value, children: p.children });
@@ -33,11 +32,17 @@ const AIOTable = (props) => {
     const getRowsIndexDic = () => rowsIndexDicRef.current;
     const propsRef = useRef(props);
     propsRef.current = props;
-    const pagingHook = usePaging({ rows: props.value, paging: props.paging, onChange: props.onChangePaging });
+    const pagingHook = UT.usePaging({ rows: props.value, paging: props.paging, onChange: props.onChangePaging });
     const tableHook = useTable(() => propsRef.current, () => props.paging);
     const getIconRef = useRef(new UT.GetSvg());
     const getIcon = getIconRef.current.getIcon;
-    const DragColumns = UT.useDrag((dragIndex, dropIndex, reOrder) => setColumns(reOrder(columns, dragIndex, dropIndex)));
+    const DragColumns = UT.useDrag((dragIndex, dropIndex, reOrder) => {
+        const newColumns = reOrder(columns, dragIndex, dropIndex);
+        if (props.onChangeColumns) {
+            props.onChangeColumns(newColumns);
+        }
+        setColumns(newColumns);
+    });
     const getGetValue = (sort, column) => {
         if (sort.getValue) {
             return sort.getValue;
@@ -72,7 +77,15 @@ const AIOTable = (props) => {
         }
         return sorts;
     };
-    const sortHook = useSort({
+    const isColumnVisible = (column) => {
+        const { visibleColumns = {} } = props;
+        const { filterId } = column;
+        if (!filterId) {
+            return true;
+        }
+        return !!visibleColumns[filterId];
+    };
+    const sortHook = UT.useSort({
         sorts: [],
         rows: propsRef.current.value,
         onChangeRows: props.onChange,
@@ -108,7 +121,6 @@ const AIOTable = (props) => {
     }, []);
     useEffect(() => {
         if (props.paging) {
-            debugger;
             pagingHook.changePaging(props.paging);
         }
     }, [JSON.stringify(props.paging)]);
@@ -233,6 +245,7 @@ const AIOTable = (props) => {
         }
     }
     const changeCell = (cellDetail, cellNewValue) => {
+        if (cellNewValue) { }
         if (!props.onChange) {
             return;
         }
@@ -250,10 +263,10 @@ const AIOTable = (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, getTimeText, isDate, columns, excelColumns, filterColumns, changeCell, tableHook, sortHook, ROWS,
-        getRowsIndexDic, add, remove, search, exportToExcel, DragColumns, getIcon, popup,
+        getRowsIndexDic, add, remove, search, exportToExcel, DragColumns, getIcon, popup, isColumnVisible
     };
     return (_jsxs(Provider, { value: context, children: [_jsxs("div", Object.assign({}, attrs, { children: [_jsx(TableToolbar, {}), !!props.filter &&
-                        _jsx(Filterbar, { columns: filterColumns, filter: props.filter, fa: props.fa, columnOption: { text: (column) => column.title, id: (column) => column.filterId, type: (column) => column.type || 'text' } }), _jsxs("div", { className: 'aio-table-unit aio-table-scroll', style: { gap: gap[1] }, children: [_jsx(TableHeader, {}), _jsx(TableRows, {})] }), pagingHook.render()] })), popup.render()] }));
+                        _jsx(UT.Filterbar, { columns: filterColumns, filter: props.filter, fa: props.fa, columnOption: { text: (column) => column.title, id: (column) => column.filterId, type: (column) => column.type || 'text' } }), _jsxs("div", { className: 'aio-table-unit aio-table-scroll', style: { gap: gap[1] }, children: [_jsx(TableHeader, {}), _jsx(TableRows, {})] }), pagingHook.render()] })), popup.render()] }));
 };
 export default AIOTable;
 const TableRows = () => {
@@ -319,8 +332,11 @@ const TableHeader = () => {
     return _jsxs("div", Object.assign({}, headerAttrs, { children: [Titles, RemoveTitle] }));
 };
 const TableTitle = (p) => {
-    const { column, isLast, colIndex } = p;
-    let { tableHook, DragColumns } = useProvider();
+    const { column, colIndex } = p;
+    let { tableHook, DragColumns, isColumnVisible } = useProvider();
+    if (!isColumnVisible(column)) {
+        return null;
+    }
     const attrs = Object.assign(Object.assign(Object.assign({}, tableHook.getTitleAttrs(column)), DragColumns.getDragAttrs(colIndex)), DragColumns.getDropAttrs(colIndex));
     return _jsx("div", Object.assign({}, attrs, { children: attrs.title }));
 };
@@ -328,12 +344,16 @@ const TableRow = (props) => {
     const { rowDetail } = props;
     const { row, rowIndex } = rowDetail;
     const rowId = row._id;
-    let { remove, rootProps, columns, tableHook, getIcon, isDate } = useProvider();
+    let { remove, rootProps, columns, tableHook, getIcon, isDate, isColumnVisible } = useProvider();
     const isOdd = rowIndex % 2 === 0;
     function getCells() {
-        return columns.map((column, i) => {
+        return columns.map((column) => {
+            if (!isColumnVisible(column)) {
+                return null;
+            }
             const key = rowId + ' ' + column._id;
             const cellDetail = Object.assign(Object.assign({}, rowDetail), { column, change: (cellNewValue) => {
+                    if (cellNewValue) { }
                     if (!rootProps.onChange) {
                         return;
                     }
@@ -353,7 +373,7 @@ const TableRow = (props) => {
 };
 const TableCell = (props) => {
     const { cellDetail, cellValue, isOdd } = props;
-    const { row, column, isLast } = cellDetail;
+    const { row, column } = cellDetail;
     const { tableHook, getTimeText, rootProps } = useProvider();
     const { template, before, after, subtext } = column;
     const rowId = row._id;
@@ -390,6 +410,7 @@ const useTable = (getProps, getPaging) => {
         let type = typeof cellValue;
         if (type === 'string') {
             const { row } = cellDetail;
+            if (row) { }
             let result = cellValue;
             if (getValue[cellValue]) {
                 result = getValue[cellValue](cellDetail);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "aio-table",
-    "version": "9.2.1",
+    "version": "9.3.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",
@@ -19,8 +19,7 @@
     "homepage": "https://github.com/mohammadFeiz/aio-table#readme",
     "dependencies": {
         "aio-input": "latest",
-        "aio-utils": "latest",
-        "aio-component-utils":"latest"
+        "aio-utils": "latest"
     },
     "devDependencies": {
         "react-scripts": "latest"