@trackunit/react-table 2.1.3 → 2.1.4

package/index.cjs.js

@@ -1389,7 +1389,6 @@ 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 ?? [])];
@@ -1448,7 +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 shouldHideColumnsMissingFromInitialVisibility = initialStateColumnVisibility?.[sharedUtils.VISIBLE_ONLY_COLUMN_VISIBILITY_KEY] === true;
         const resultFromInitialState = initialStateColumnVisibility
             ? Object.fromEntries(columnsList
                 .map((column) => {
@@ -1507,63 +1506,43 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
         })
             .filter(sharedUtils.nonNullable));
     }, [stableColumns, reactTableProps.defaultColumn?.size]);
-    const [columnState, setColumnState] = react.useState(() => ({
-        columnVisibility: reactTableProps.state?.columnVisibility || updatedInitialColumnVisibility,
-        columnOrder: reactTableProps.state?.columnOrder || updatedInitialColumnOrder,
-        sorting: reactTableProps.state?.sorting || initialState?.sorting || [],
-        columnSizing: reactTableProps.state?.columnSizing || initialState?.columnSizing || {},
-        columnPinning: reactTableProps.state?.columnPinning || stableUpdatedInitialColumnPinning,
-    }));
-    react.useEffect(() => {
-        if (initialState && sharedUtils.objectKeys(initialState).length > 0) {
-            setColumnState(prev => ({
-                ...prev,
-                columnVisibility: updatedInitialColumnVisibility,
-                columnOrder: updatedInitialColumnOrder,
-                sorting: initialState.sorting || [],
-                columnSizing: initialState.columnSizing || {},
-            }));
+    // In-session, user-driven edits. Populated ONLY from the table change callbacks below (real
+    // user events), never from props or effects. Every other value is derived from props on each
+    // render, so async data arrival — saved preferences resolving, custom-field columns appearing
+    // — flows through automatically without any prop-syncing effects.
+    const [userEdits, setUserEdits] = react.useState({});
+    const columnVisibility = react.useMemo(() => userEdits.columnVisibility
+        ? { ...updatedInitialColumnVisibility, ...userEdits.columnVisibility }
+        : updatedInitialColumnVisibility, [updatedInitialColumnVisibility, userEdits.columnVisibility]);
+    const columnOrder = react.useMemo(() => {
+        const userOrder = userEdits.columnOrder;
+        if (!userOrder) {
+            return updatedInitialColumnOrder;
         }
-    }, [initialState, updatedInitialColumnOrder, stableUpdatedInitialColumnPinning, updatedInitialColumnVisibility]);
-    react.useEffect(() => {
-        if (initialState && sharedUtils.objectKeys(initialState).length > 0) {
+        // Keep the user's chosen order, then append any columns that arrived afterwards (e.g. async
+        // custom fields) so newly-loaded columns are never dropped from the table.
+        const appended = updatedInitialColumnOrder.filter(columnId => !userOrder.includes(columnId));
+        return appended.length > 0 ? [...userOrder, ...appended] : userOrder;
+    }, [updatedInitialColumnOrder, userEdits.columnOrder]);
+    const columnPinning = react.useMemo(() => userEdits.columnPinning ?? computeMergedPinning(initialState?.columnPinning, stableUpdatedInitialColumnPinning), [userEdits.columnPinning, initialState?.columnPinning, stableUpdatedInitialColumnPinning]);
+    const sorting = react.useMemo(() => userEdits.sorting ?? initialState?.sorting ?? [], [userEdits.sorting, initialState?.sorting]);
+    const columnSizing = react.useMemo(() => userEdits.columnSizing ?? initialState?.columnSizing ?? {}, [userEdits.columnSizing, initialState?.columnSizing]);
+    const baseState = react.useMemo(() => ({ columnVisibility, columnOrder, sorting, columnSizing, columnPinning }), [columnVisibility, columnOrder, sorting, columnSizing, columnPinning]);
+    const state = react.useMemo(() => ({ ...baseState, ...reactTableProps.state }), [baseState, reactTableProps.state]);
+    // A ref exposes the latest derived state to the change callbacks without making them depend on
+    // it (callbacks run on user events, outside render). Every column-state key on `state` is always
+    // defined — it originates from `baseState` — so the callbacks read it directly.
+    const stateRef = react.useRef(state);
+    stateRef.current = state;
+    // Persist on user actions only (not on mount or prop-driven recomputation): drop column sizes
+    // that match their default so only meaningful overrides are stored.
+    const persistTableState = react.useCallback((nextState) => {
+        if (!onTableStateChange) {
             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,
-            columnPinning: computeMergedPinning(initialState?.columnPinning, stableUpdatedInitialColumnPinning),
-        }));
-    }, [initialState?.columnPinning, stableUpdatedInitialColumnPinning]);
-    const state = react.useMemo(() => {
-        return {
-            ...columnState,
-            ...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 columnSizingToPersist = Object.fromEntries(Object.entries(nextState.columnSizing ?? {}).filter(([columnId, size]) => defaultColumnSizingById[columnId] !== size));
+        onTableStateChange({ ...nextState, columnSizing: columnSizingToPersist });
+    }, [onTableStateChange, defaultColumnSizingById]);
     const table = reactTable.useReactTable({
         manualSorting: true,
         enableSortingRemoval: true,
@@ -1572,48 +1551,43 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
         getCoreRowModel: reactTable.getCoreRowModel(),
         ...reactTableProps,
         onColumnVisibilityChange: value => {
-            setColumnState(prev => ({
-                ...prev,
-                columnVisibility: typeof value === "function" ? value(prev.columnVisibility) : value,
-            }));
+            const current = stateRef.current.columnVisibility;
+            const next = typeof value === "function" ? value(current) : value;
+            setUserEdits(prev => ({ ...prev, columnVisibility: next }));
+            persistTableState({ ...stateRef.current, columnVisibility: next });
             reactTableProps.onColumnVisibilityChange?.(value);
         },
         onColumnSizingChange: value => {
-            setColumnState(prev => ({
-                ...prev,
-                columnSizing: typeof value === "function" ? value(prev.columnSizing) : value,
-            }));
+            const current = stateRef.current.columnSizing;
+            const next = typeof value === "function" ? value(current) : value;
+            setUserEdits(prev => ({ ...prev, columnSizing: next }));
+            persistTableState({ ...stateRef.current, columnSizing: next });
             reactTableProps.onColumnSizingChange?.(value);
         },
         onColumnOrderChange: value => {
-            setColumnState(prev => ({
-                ...prev,
-                columnOrder: typeof value === "function" ? value(prev.columnOrder) : value,
-            }));
+            const current = stateRef.current.columnOrder;
+            const next = typeof value === "function" ? value(current) : value;
+            setUserEdits(prev => ({ ...prev, columnOrder: next }));
+            persistTableState({ ...stateRef.current, columnOrder: next });
             reactTableProps.onColumnOrderChange?.(value);
         },
         onSortingChange: value => {
-            setColumnState(prev => ({
-                ...prev,
-                sorting: typeof value === "function" ? value(prev.sorting) : value,
-            }));
+            const current = stateRef.current.sorting;
+            const next = typeof value === "function" ? value(current) : value;
+            setUserEdits(prev => ({ ...prev, sorting: next }));
+            persistTableState({ ...stateRef.current, sorting: next });
             reactTableProps.onSortingChange?.(value);
         },
         onColumnPinningChange: value => {
-            setColumnState(prev => ({
-                ...prev,
-                columnPinning: typeof value === "function" ? value(prev.columnPinning) : value,
-            }));
+            const current = stateRef.current.columnPinning;
+            const next = typeof value === "function" ? value(current) : value;
+            setUserEdits(prev => ({ ...prev, columnPinning: next }));
+            persistTableState({ ...stateRef.current, columnPinning: next });
             reactTableProps.onColumnPinningChange?.(value);
         },
         columns,
         state,
     });
-    react.useEffect(() => {
-        if (onTableStateChange) {
-            onTableStateChange(stateForTableStateChange);
-        }
-    }, [onTableStateChange, stateForTableStateChange]);
     return react.useMemo(() => {
         return { table };
     }, [table]);

package/index.esm.js

@@ -1,7 +1,7 @@
 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 { objectValues, VISIBLE_ONLY_COLUMN_VISIBILITY_KEY, nonNullable, objectKeys, objectEntries } from '@trackunit/shared-utils';
 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';
@@ -1388,7 +1388,6 @@ 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 ?? [])];
@@ -1506,63 +1505,43 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
         })
             .filter(nonNullable));
     }, [stableColumns, reactTableProps.defaultColumn?.size]);
-    const [columnState, setColumnState] = useState(() => ({
-        columnVisibility: reactTableProps.state?.columnVisibility || updatedInitialColumnVisibility,
-        columnOrder: reactTableProps.state?.columnOrder || updatedInitialColumnOrder,
-        sorting: reactTableProps.state?.sorting || initialState?.sorting || [],
-        columnSizing: reactTableProps.state?.columnSizing || initialState?.columnSizing || {},
-        columnPinning: reactTableProps.state?.columnPinning || stableUpdatedInitialColumnPinning,
-    }));
-    useEffect(() => {
-        if (initialState && objectKeys(initialState).length > 0) {
-            setColumnState(prev => ({
-                ...prev,
-                columnVisibility: updatedInitialColumnVisibility,
-                columnOrder: updatedInitialColumnOrder,
-                sorting: initialState.sorting || [],
-                columnSizing: initialState.columnSizing || {},
-            }));
+    // In-session, user-driven edits. Populated ONLY from the table change callbacks below (real
+    // user events), never from props or effects. Every other value is derived from props on each
+    // render, so async data arrival — saved preferences resolving, custom-field columns appearing
+    // — flows through automatically without any prop-syncing effects.
+    const [userEdits, setUserEdits] = useState({});
+    const columnVisibility = useMemo(() => userEdits.columnVisibility
+        ? { ...updatedInitialColumnVisibility, ...userEdits.columnVisibility }
+        : updatedInitialColumnVisibility, [updatedInitialColumnVisibility, userEdits.columnVisibility]);
+    const columnOrder = useMemo(() => {
+        const userOrder = userEdits.columnOrder;
+        if (!userOrder) {
+            return updatedInitialColumnOrder;
         }
-    }, [initialState, updatedInitialColumnOrder, stableUpdatedInitialColumnPinning, updatedInitialColumnVisibility]);
-    useEffect(() => {
-        if (initialState && objectKeys(initialState).length > 0) {
+        // Keep the user's chosen order, then append any columns that arrived afterwards (e.g. async
+        // custom fields) so newly-loaded columns are never dropped from the table.
+        const appended = updatedInitialColumnOrder.filter(columnId => !userOrder.includes(columnId));
+        return appended.length > 0 ? [...userOrder, ...appended] : userOrder;
+    }, [updatedInitialColumnOrder, userEdits.columnOrder]);
+    const columnPinning = useMemo(() => userEdits.columnPinning ?? computeMergedPinning(initialState?.columnPinning, stableUpdatedInitialColumnPinning), [userEdits.columnPinning, initialState?.columnPinning, stableUpdatedInitialColumnPinning]);
+    const sorting = useMemo(() => userEdits.sorting ?? initialState?.sorting ?? [], [userEdits.sorting, initialState?.sorting]);
+    const columnSizing = useMemo(() => userEdits.columnSizing ?? initialState?.columnSizing ?? {}, [userEdits.columnSizing, initialState?.columnSizing]);
+    const baseState = useMemo(() => ({ columnVisibility, columnOrder, sorting, columnSizing, columnPinning }), [columnVisibility, columnOrder, sorting, columnSizing, columnPinning]);
+    const state = useMemo(() => ({ ...baseState, ...reactTableProps.state }), [baseState, reactTableProps.state]);
+    // A ref exposes the latest derived state to the change callbacks without making them depend on
+    // it (callbacks run on user events, outside render). Every column-state key on `state` is always
+    // defined — it originates from `baseState` — so the callbacks read it directly.
+    const stateRef = useRef(state);
+    stateRef.current = state;
+    // Persist on user actions only (not on mount or prop-driven recomputation): drop column sizes
+    // that match their default so only meaningful overrides are stored.
+    const persistTableState = useCallback((nextState) => {
+        if (!onTableStateChange) {
             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,
-            columnPinning: computeMergedPinning(initialState?.columnPinning, stableUpdatedInitialColumnPinning),
-        }));
-    }, [initialState?.columnPinning, stableUpdatedInitialColumnPinning]);
-    const state = useMemo(() => {
-        return {
-            ...columnState,
-            ...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 columnSizingToPersist = Object.fromEntries(Object.entries(nextState.columnSizing ?? {}).filter(([columnId, size]) => defaultColumnSizingById[columnId] !== size));
+        onTableStateChange({ ...nextState, columnSizing: columnSizingToPersist });
+    }, [onTableStateChange, defaultColumnSizingById]);
     const table = useReactTable({
         manualSorting: true,
         enableSortingRemoval: true,
@@ -1571,48 +1550,43 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
         getCoreRowModel: getCoreRowModel(),
         ...reactTableProps,
         onColumnVisibilityChange: value => {
-            setColumnState(prev => ({
-                ...prev,
-                columnVisibility: typeof value === "function" ? value(prev.columnVisibility) : value,
-            }));
+            const current = stateRef.current.columnVisibility;
+            const next = typeof value === "function" ? value(current) : value;
+            setUserEdits(prev => ({ ...prev, columnVisibility: next }));
+            persistTableState({ ...stateRef.current, columnVisibility: next });
             reactTableProps.onColumnVisibilityChange?.(value);
         },
         onColumnSizingChange: value => {
-            setColumnState(prev => ({
-                ...prev,
-                columnSizing: typeof value === "function" ? value(prev.columnSizing) : value,
-            }));
+            const current = stateRef.current.columnSizing;
+            const next = typeof value === "function" ? value(current) : value;
+            setUserEdits(prev => ({ ...prev, columnSizing: next }));
+            persistTableState({ ...stateRef.current, columnSizing: next });
             reactTableProps.onColumnSizingChange?.(value);
         },
         onColumnOrderChange: value => {
-            setColumnState(prev => ({
-                ...prev,
-                columnOrder: typeof value === "function" ? value(prev.columnOrder) : value,
-            }));
+            const current = stateRef.current.columnOrder;
+            const next = typeof value === "function" ? value(current) : value;
+            setUserEdits(prev => ({ ...prev, columnOrder: next }));
+            persistTableState({ ...stateRef.current, columnOrder: next });
             reactTableProps.onColumnOrderChange?.(value);
         },
         onSortingChange: value => {
-            setColumnState(prev => ({
-                ...prev,
-                sorting: typeof value === "function" ? value(prev.sorting) : value,
-            }));
+            const current = stateRef.current.sorting;
+            const next = typeof value === "function" ? value(current) : value;
+            setUserEdits(prev => ({ ...prev, sorting: next }));
+            persistTableState({ ...stateRef.current, sorting: next });
             reactTableProps.onSortingChange?.(value);
         },
         onColumnPinningChange: value => {
-            setColumnState(prev => ({
-                ...prev,
-                columnPinning: typeof value === "function" ? value(prev.columnPinning) : value,
-            }));
+            const current = stateRef.current.columnPinning;
+            const next = typeof value === "function" ? value(current) : value;
+            setUserEdits(prev => ({ ...prev, columnPinning: next }));
+            persistTableState({ ...stateRef.current, columnPinning: next });
             reactTableProps.onColumnPinningChange?.(value);
         },
         columns,
         state,
     });
-    useEffect(() => {
-        if (onTableStateChange) {
-            onTableStateChange(stateForTableStateChange);
-        }
-    }, [onTableStateChange, stateForTableStateChange]);
     return useMemo(() => {
         return { table };
     }, [table]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -11,14 +11,14 @@
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-components": "2.1.2",
-    "@trackunit/shared-utils": "1.15.12",
-    "@trackunit/css-class-variance-utilities": "1.13.12",
-    "@trackunit/ui-icons": "1.13.13",
-    "@trackunit/react-table-base-components": "2.1.3",
-    "@trackunit/react-form-components": "2.1.3",
-    "@trackunit/i18n-library-translation": "2.0.4",
-    "@trackunit/iris-app-runtime-core-api": "1.16.12"
+    "@trackunit/react-components": "2.1.3",
+    "@trackunit/shared-utils": "1.15.13",
+    "@trackunit/css-class-variance-utilities": "1.13.13",
+    "@trackunit/ui-icons": "1.13.14",
+    "@trackunit/react-table-base-components": "2.1.4",
+    "@trackunit/react-form-components": "2.1.4",
+    "@trackunit/i18n-library-translation": "2.0.5",
+    "@trackunit/iris-app-runtime-core-api": "1.16.13"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.114.29",