aio-table 9.3.0 → 9.3.1

package/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 import * as UT from 'aio-utils';
 import "./index.css";
 type I_rowOption<T, R> = (p: I_rowDetail<T>) => R;
@@ -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

@@ -36,7 +36,13 @@ const AIOTable = (props) => {
     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;
@@ -71,6 +77,14 @@ const AIOTable = (props) => {
         }
         return sorts;
     };
+    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,
@@ -107,7 +121,6 @@ const AIOTable = (props) => {
     }, []);
     useEffect(() => {
         if (props.paging) {
-            debugger;
             pagingHook.changePaging(props.paging);
         }
     }, [JSON.stringify(props.paging)]);
@@ -250,7 +263,7 @@ 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(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()] }));
@@ -320,7 +333,10 @@ const TableHeader = () => {
 };
 const TableTitle = (p) => {
     const { column, colIndex } = p;
-    let { tableHook, DragColumns } = useProvider();
+    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,10 +344,13 @@ 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) => {
+            if (!isColumnVisible(column)) {
+                return null;
+            }
             const key = rowId + ' ' + column._id;
             const cellDetail = Object.assign(Object.assign({}, rowDetail), { column, change: (cellNewValue) => {
                     if (cellNewValue) { }

package/package.json

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