@trackunit/react-table 1.24.7 → 1.24.8

package/index.cjs.js

@@ -464,14 +464,7 @@ const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn
  */
 const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], columnOrder, onUserEvent, setColumnSize, }) => {
     const [t] = useTranslation();
-    const initialSetupRef = react.useRef(false);
     const [searchText, setSearchText] = react.useState("");
-    react.useEffect(() => {
-        if (!initialSetupRef.current && defaultColumnOrder.length > 0) {
-            setColumnOrder(defaultColumnOrder);
-            initialSetupRef.current = true;
-        }
-    }, [columnOrder, defaultColumnOrder, setColumnOrder]);
     const resetColumnState = react.useCallback(() => {
         const sizes = {};
         columns.forEach(column => {
@@ -500,7 +493,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
             });
         }
         return columnOrder && columnOrder.length > 0
-            ? filteredColumns.sort((a, b) => columnOrder.indexOf(a.id) - columnOrder.indexOf(b.id))
+            ? filteredColumns.toSorted((a, b) => columnOrder.indexOf(a.id) - columnOrder.indexOf(b.id))
             : filteredColumns;
     }, [columnOrder, columns, searchText]);
     const visibleColumnsCount = react.useMemo(() => {
@@ -1395,6 +1388,7 @@ const useColumnHelper = () => {
     }, []);
 };
 
+const VISIBLE_ONLY_COLUMN_VISIBILITY_KEY = "__trackunitVisibleOnlyColumnVisibility";
 const computeMergedPinning = (initialPinning, columnConfigPinning) => {
     const leftPinning = initialPinning?.left;
     const mergedLeft = leftPinning !== undefined && leftPinning.length > 0 ? [...leftPinning] : [...(columnConfigPinning.left ?? [])];
@@ -1453,6 +1447,7 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
     const updatedInitialColumnVisibility = react.useMemo(() => {
         const columnsList = JSON.parse(stableColumns);
         const initialStateColumnVisibility = initialState?.columnVisibility;
+        const shouldHideColumnsMissingFromInitialVisibility = initialStateColumnVisibility?.[VISIBLE_ONLY_COLUMN_VISIBILITY_KEY] === true;
         const resultFromInitialState = initialStateColumnVisibility
             ? Object.fromEntries(columnsList
                 .map((column) => {
@@ -1465,13 +1460,15 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
             : {};
         columnsList.forEach((column) => {
             if (column.id && resultFromInitialState[column.id] === undefined) {
-                resultFromInitialState[column.id] = column.meta?.hiddenByDefault !== true;
+                resultFromInitialState[column.id] = shouldHideColumnsMissingFromInitialVisibility
+                    ? false
+                    : column.meta?.hiddenByDefault !== true;
             }
         });
         return resultFromInitialState;
     }, [stableColumns, initialState?.columnVisibility]);
     const updatedInitialColumnOrder = react.useMemo(() => {
-        const resultFromInitialState = initialState?.columnOrder || [];
+        const resultFromInitialState = initialState?.columnOrder ? [...initialState.columnOrder] : [];
         JSON.parse(stableColumns).forEach((column) => {
             if (column.id && !resultFromInitialState.includes(column.id)) {
                 resultFromInitialState.push(column.id);
@@ -1497,6 +1494,18 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
         });
         return pinningState;
     }, [stableColumns]);
+    const defaultColumnSizingById = react.useMemo(() => {
+        const columnsList = JSON.parse(stableColumns);
+        const defaultColumnSize = reactTableProps.defaultColumn?.size ?? reactTable.defaultColumnSizing.size;
+        return Object.fromEntries(columnsList
+            .map((column) => {
+            if (column.id === undefined) {
+                return null;
+            }
+            return [column.id, column.size ?? defaultColumnSize];
+        })
+            .filter(sharedUtils.nonNullable));
+    }, [stableColumns, reactTableProps.defaultColumn?.size]);
     const [columnState, setColumnState] = react.useState(() => ({
         columnVisibility: reactTableProps.state?.columnVisibility || updatedInitialColumnVisibility,
         columnOrder: reactTableProps.state?.columnOrder || updatedInitialColumnOrder,
@@ -1515,6 +1524,26 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
             }));
         }
     }, [initialState, updatedInitialColumnOrder, stableUpdatedInitialColumnPinning, updatedInitialColumnVisibility]);
+    react.useEffect(() => {
+        if (initialState && sharedUtils.objectKeys(initialState).length > 0) {
+            return;
+        }
+        setColumnState(prev => {
+            const missingColumnOrder = updatedInitialColumnOrder.filter(columnId => !prev.columnOrder.includes(columnId));
+            const missingColumnVisibility = Object.fromEntries(Object.entries(updatedInitialColumnVisibility).filter(([columnId]) => prev.columnVisibility[columnId] === undefined));
+            if (missingColumnOrder.length === 0 && sharedUtils.objectKeys(missingColumnVisibility).length === 0) {
+                return prev;
+            }
+            return {
+                ...prev,
+                columnOrder: [...prev.columnOrder, ...missingColumnOrder],
+                columnVisibility: {
+                    ...prev.columnVisibility,
+                    ...missingColumnVisibility,
+                },
+            };
+        });
+    }, [initialState, updatedInitialColumnOrder, updatedInitialColumnVisibility]);
     react.useEffect(() => {
         setColumnState(prev => ({
             ...prev,
@@ -1527,6 +1556,13 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
             ...reactTableProps.state,
         };
     }, [columnState, reactTableProps.state]);
+    const stateForTableStateChange = react.useMemo(() => {
+        const columnSizing = Object.fromEntries(Object.entries(state.columnSizing).filter(([columnId, size]) => defaultColumnSizingById[columnId] !== size));
+        return {
+            ...state,
+            columnSizing,
+        };
+    }, [defaultColumnSizingById, state]);
     const table = reactTable.useReactTable({
         manualSorting: true,
         enableSortingRemoval: true,
@@ -1574,9 +1610,9 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
     });
     react.useEffect(() => {
         if (onTableStateChange) {
-            onTableStateChange(state);
+            onTableStateChange(stateForTableStateChange);
         }
-    }, [onTableStateChange, state]);
+    }, [onTableStateChange, stateForTableStateChange]);
     return react.useMemo(() => {
         return { table };
     }, [table]);

package/index.esm.js

@@ -2,14 +2,14 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation, NamespaceTrans } from '@trackunit/i18n-library-translation';
 import { MenuItem, Icon, Button, Tooltip, useOverflowItems, MoreMenu, MenuList, Spacer, cvaInteractableItem, Text, Popover, PopoverTrigger, IconButton, PopoverContent, useBidirectionalScroll, noPagination, Card, Spinner, EmptyState } from '@trackunit/react-components';
 import { objectValues, nonNullable, objectKeys, objectEntries } from '@trackunit/shared-utils';
-import { useMemo, Children, cloneElement, useRef, useState, useEffect, useCallback, createElement } from 'react';
+import { useMemo, Children, cloneElement, useRef, useState, useCallback, useEffect, createElement } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Link } from '@tanstack/react-router';
 import { cvaLabel, ToggleSwitch, Search, RadioGroup, RadioItem, Checkbox } from '@trackunit/react-form-components';
 import update from 'immutability-helper';
 import { useDrop, useDrag, DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { flexRender, createColumnHelper, useReactTable, getCoreRowModel, getSortedRowModel } from '@tanstack/react-table';
+import { flexRender, createColumnHelper, defaultColumnSizing, useReactTable, getCoreRowModel, getSortedRowModel } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
 import { TableRoot, Thead, Tr, Th, ResizeHandle, Tbody, Td } from '@trackunit/react-table-base-components';
 import { twMerge } from 'tailwind-merge';
@@ -463,14 +463,7 @@ const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn
  */
 const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], columnOrder, onUserEvent, setColumnSize, }) => {
     const [t] = useTranslation();
-    const initialSetupRef = useRef(false);
     const [searchText, setSearchText] = useState("");
-    useEffect(() => {
-        if (!initialSetupRef.current && defaultColumnOrder.length > 0) {
-            setColumnOrder(defaultColumnOrder);
-            initialSetupRef.current = true;
-        }
-    }, [columnOrder, defaultColumnOrder, setColumnOrder]);
     const resetColumnState = useCallback(() => {
         const sizes = {};
         columns.forEach(column => {
@@ -499,7 +492,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
             });
         }
         return columnOrder && columnOrder.length > 0
-            ? filteredColumns.sort((a, b) => columnOrder.indexOf(a.id) - columnOrder.indexOf(b.id))
+            ? filteredColumns.toSorted((a, b) => columnOrder.indexOf(a.id) - columnOrder.indexOf(b.id))
             : filteredColumns;
     }, [columnOrder, columns, searchText]);
     const visibleColumnsCount = useMemo(() => {
@@ -1394,6 +1387,7 @@ const useColumnHelper = () => {
     }, []);
 };
 
+const VISIBLE_ONLY_COLUMN_VISIBILITY_KEY = "__trackunitVisibleOnlyColumnVisibility";
 const computeMergedPinning = (initialPinning, columnConfigPinning) => {
     const leftPinning = initialPinning?.left;
     const mergedLeft = leftPinning !== undefined && leftPinning.length > 0 ? [...leftPinning] : [...(columnConfigPinning.left ?? [])];
@@ -1452,6 +1446,7 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
     const updatedInitialColumnVisibility = useMemo(() => {
         const columnsList = JSON.parse(stableColumns);
         const initialStateColumnVisibility = initialState?.columnVisibility;
+        const shouldHideColumnsMissingFromInitialVisibility = initialStateColumnVisibility?.[VISIBLE_ONLY_COLUMN_VISIBILITY_KEY] === true;
         const resultFromInitialState = initialStateColumnVisibility
             ? Object.fromEntries(columnsList
                 .map((column) => {
@@ -1464,13 +1459,15 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
             : {};
         columnsList.forEach((column) => {
             if (column.id && resultFromInitialState[column.id] === undefined) {
-                resultFromInitialState[column.id] = column.meta?.hiddenByDefault !== true;
+                resultFromInitialState[column.id] = shouldHideColumnsMissingFromInitialVisibility
+                    ? false
+                    : column.meta?.hiddenByDefault !== true;
             }
         });
         return resultFromInitialState;
     }, [stableColumns, initialState?.columnVisibility]);
     const updatedInitialColumnOrder = useMemo(() => {
-        const resultFromInitialState = initialState?.columnOrder || [];
+        const resultFromInitialState = initialState?.columnOrder ? [...initialState.columnOrder] : [];
         JSON.parse(stableColumns).forEach((column) => {
             if (column.id && !resultFromInitialState.includes(column.id)) {
                 resultFromInitialState.push(column.id);
@@ -1496,6 +1493,18 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
         });
         return pinningState;
     }, [stableColumns]);
+    const defaultColumnSizingById = useMemo(() => {
+        const columnsList = JSON.parse(stableColumns);
+        const defaultColumnSize = reactTableProps.defaultColumn?.size ?? defaultColumnSizing.size;
+        return Object.fromEntries(columnsList
+            .map((column) => {
+            if (column.id === undefined) {
+                return null;
+            }
+            return [column.id, column.size ?? defaultColumnSize];
+        })
+            .filter(nonNullable));
+    }, [stableColumns, reactTableProps.defaultColumn?.size]);
     const [columnState, setColumnState] = useState(() => ({
         columnVisibility: reactTableProps.state?.columnVisibility || updatedInitialColumnVisibility,
         columnOrder: reactTableProps.state?.columnOrder || updatedInitialColumnOrder,
@@ -1514,6 +1523,26 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
             }));
         }
     }, [initialState, updatedInitialColumnOrder, stableUpdatedInitialColumnPinning, updatedInitialColumnVisibility]);
+    useEffect(() => {
+        if (initialState && objectKeys(initialState).length > 0) {
+            return;
+        }
+        setColumnState(prev => {
+            const missingColumnOrder = updatedInitialColumnOrder.filter(columnId => !prev.columnOrder.includes(columnId));
+            const missingColumnVisibility = Object.fromEntries(Object.entries(updatedInitialColumnVisibility).filter(([columnId]) => prev.columnVisibility[columnId] === undefined));
+            if (missingColumnOrder.length === 0 && objectKeys(missingColumnVisibility).length === 0) {
+                return prev;
+            }
+            return {
+                ...prev,
+                columnOrder: [...prev.columnOrder, ...missingColumnOrder],
+                columnVisibility: {
+                    ...prev.columnVisibility,
+                    ...missingColumnVisibility,
+                },
+            };
+        });
+    }, [initialState, updatedInitialColumnOrder, updatedInitialColumnVisibility]);
     useEffect(() => {
         setColumnState(prev => ({
             ...prev,
@@ -1526,6 +1555,13 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
             ...reactTableProps.state,
         };
     }, [columnState, reactTableProps.state]);
+    const stateForTableStateChange = useMemo(() => {
+        const columnSizing = Object.fromEntries(Object.entries(state.columnSizing).filter(([columnId, size]) => defaultColumnSizingById[columnId] !== size));
+        return {
+            ...state,
+            columnSizing,
+        };
+    }, [defaultColumnSizingById, state]);
     const table = useReactTable({
         manualSorting: true,
         enableSortingRemoval: true,
@@ -1573,9 +1609,9 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
     });
     useEffect(() => {
         if (onTableStateChange) {
-            onTableStateChange(state);
+            onTableStateChange(stateForTableStateChange);
         }
-    }, [onTableStateChange, state]);
+    }, [onTableStateChange, stateForTableStateChange]);
     return useMemo(() => {
         return { table };
     }, [table]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "1.24.7",
+  "version": "1.24.8",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -11,13 +11,13 @@
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-components": "1.24.4",
+    "@trackunit/react-components": "1.24.5",
     "@trackunit/shared-utils": "1.15.2",
     "@trackunit/css-class-variance-utilities": "1.13.2",
     "@trackunit/ui-icons": "1.13.2",
-    "@trackunit/react-table-base-components": "1.24.6",
-    "@trackunit/react-form-components": "1.25.6",
-    "@trackunit/i18n-library-translation": "1.21.4",
+    "@trackunit/react-table-base-components": "1.24.7",
+    "@trackunit/react-form-components": "1.25.7",
+    "@trackunit/i18n-library-translation": "1.21.5",
     "@trackunit/iris-app-runtime-core-api": "1.16.2"
   },
   "peerDependencies": {