@ballistix.digital/react-components 1.0.3 → 1.1.0

package/dist/index.js

@@ -1756,11 +1756,11 @@ var isValidState = function (state) {
 };
 
 var TableList2 = function (props) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     var id = props.id, config = props.table, head = props.head, foot = props.foot, isLoading = props.isLoading, onRowClick = props.onRowClick, onChange = props.onChange, stylesOverrides = props.styles;
-    var _g = React.useState((_b = (_a = config.options) === null || _a === void 0 ? void 0 : _a.defaultSorting) !== null && _b !== void 0 ? _b : []), sorting = _g[0], setSorting = _g[1];
-    var _h = React.useState({}), columnVisibility = _h[0], setColumnVisibility = _h[1];
-    var _j = React.useState([]), columnOrder = _j[0], setColumnOrder = _j[1];
+    var _j = React.useState((_b = (_a = config.options) === null || _a === void 0 ? void 0 : _a.defaultSorting) !== null && _b !== void 0 ? _b : []), sorting = _j[0], setSorting = _j[1];
+    var _k = React.useState({}), columnVisibility = _k[0], setColumnVisibility = _k[1];
+    var _l = React.useState([]), columnOrder = _l[0], setColumnOrder = _l[1];
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$f.base);
         var keys = calculateNestedKeys(styles$f.base);
@@ -1775,6 +1775,32 @@ var TableList2 = function (props) {
         return result;
     };
     var styles = handleGenerateStyle();
+    var initialVisibilityState = React.useMemo(function () {
+        var _a;
+        var columnAccessorKeys = lodash.compact(lodash.map(config.columns, 'accessorKey'));
+        var columnIds = lodash.compact(lodash.map(config.columns, 'id'));
+        var visibilityState = {};
+        if ((_a = config.options) === null || _a === void 0 ? void 0 : _a.defaultVisibility) {
+            lodash.forEach(columnAccessorKeys, function (key) {
+                var _a;
+                var _b;
+                visibilityState = lodash.assign(visibilityState, (_a = {},
+                    _a[key] = lodash.includes((_b = config.options) === null || _b === void 0 ? void 0 : _b.defaultVisibility, key),
+                    _a));
+            });
+        }
+        else {
+            lodash.forEach(columnAccessorKeys, function (key) {
+                var _a;
+                visibilityState = lodash.assign(visibilityState, (_a = {}, _a[key] = true, _a));
+            });
+        }
+        lodash.forEach(columnIds, function (key) {
+            var _a;
+            visibilityState = lodash.assign(visibilityState, (_a = {}, _a[key] = true, _a));
+        });
+        return visibilityState;
+    }, [config.columns, (_c = config.options) === null || _c === void 0 ? void 0 : _c.defaultVisibility]);
     var table = reactTable.useReactTable({
         getCoreRowModel: reactTable.getCoreRowModel(),
         columns: config.columns,
@@ -1784,6 +1810,10 @@ var TableList2 = function (props) {
             columnVisibility: columnVisibility,
             columnOrder: columnOrder,
         },
+        initialState: {
+            columnVisibility: initialVisibilityState,
+            columnOrder: (_d = config.options) === null || _d === void 0 ? void 0 : _d.defaultOrder,
+        },
         manualPagination: true,
         manualSorting: true,
         onSortingChange: setSorting,
@@ -1832,7 +1862,7 @@ var TableList2 = function (props) {
             }
             setColumnVisibility(visibility_1);
         }
-    }, [(_c = config === null || config === void 0 ? void 0 : config.options) === null || _c === void 0 ? void 0 : _c.defaultVisibility, id, table]);
+    }, [(_e = config === null || config === void 0 ? void 0 : config.options) === null || _e === void 0 ? void 0 : _e.defaultVisibility, id, table]);
     React.useEffect(function () {
         var _a, _b, _c;
         var savedOrder = (_a = getTableState(id)) === null || _a === void 0 ? void 0 : _a.columnOrder;
@@ -1845,7 +1875,7 @@ var TableList2 = function (props) {
         else if (lodash.some(config.columns, function (column) { return (column === null || column === void 0 ? void 0 : column.id) || lodash.get(column, 'accessorKey'); })) {
             setColumnOrder(lodash.map(config.columns, function (column) { var _a; return ((_a = column === null || column === void 0 ? void 0 : column.id) !== null && _a !== void 0 ? _a : lodash.get(column, 'accessorKey')); }));
         }
-    }, [config.columns, (_d = config === null || config === void 0 ? void 0 : config.options) === null || _d === void 0 ? void 0 : _d.defaultOrder, id]);
+    }, [config.columns, (_f = config === null || config === void 0 ? void 0 : config.options) === null || _f === void 0 ? void 0 : _f.defaultOrder, id]);
     // Write state to local storage when it changes
     React.useEffect(function () {
         if (state) {
@@ -1886,7 +1916,7 @@ var TableList2 = function (props) {
                                                                     ((_c = (_b = table === null || table === void 0 ? void 0 : table.getState()) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.pageSize) - 1 &&
                                                                 'border-b border-gray-200'), children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
                                                     }) }, row.id));
-                                            }) }))] }), lodash.isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: ((_e = config === null || config === void 0 ? void 0 : config.options) === null || _e === void 0 ? void 0 : _e.emptyComponent) ? ((_f = config === null || config === void 0 ? void 0 : config.options) === null || _f === void 0 ? void 0 : _f.emptyComponent) : (jsxRuntime.jsx("div", { className: "w-full flex justify-center my-2", children: "There is no data to show..." })) })), isLoading && (jsxRuntime.jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: new Array(8).fill(undefined).map(function (index) { return (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsxRuntime.jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] }) }) }) }), jsxRuntime.jsx("div", { className: styles.foot, children: foot && foot(state) })] }));
+                                            }) }))] }), lodash.isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: ((_g = config === null || config === void 0 ? void 0 : config.options) === null || _g === void 0 ? void 0 : _g.emptyComponent) ? ((_h = config === null || config === void 0 ? void 0 : config.options) === null || _h === void 0 ? void 0 : _h.emptyComponent) : (jsxRuntime.jsx("div", { className: "w-full flex justify-center my-2", children: "There is no data to show..." })) })), isLoading && (jsxRuntime.jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: new Array(8).fill(undefined).map(function (index) { return (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsxRuntime.jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] }) }) }) }), jsxRuntime.jsx("div", { className: styles.foot, children: foot && foot(state) })] }));
 };
 
 var base$c = {
@@ -2632,7 +2662,7 @@ var TableColumnOptionsCustom = function (props) {
     var styles = handleGenerateStyle();
     return (jsxRuntime.jsxs(react.Popover, { children: [jsxRuntime.jsx(react.Popover.Button, { children: trigger }), jsxRuntime.jsxs(react.Popover.Panel, { className: styles.controls.content, children: [resetConfig && (jsxRuntime.jsxs("div", { className: styles.controls.dropdown.reset, onClick: function () {
                             removeTableState(resetConfig.tableId);
-                            table.resetColumnVisibility(true);
+                            table.resetColumnVisibility();
                             table.resetColumnOrder();
                             resetConfig.onReset && resetConfig.onReset();
                         }, children: [jsxRuntime.jsx(IconElement, { accessor: "rotate-left" }), jsxRuntime.jsx("p", { children: (_a = resetConfig.label) !== null && _a !== void 0 ? _a : 'Reset' })] })), table