@trackunit/react-table 1.15.11 → 1.15.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/index.cjs.js +55 -36
  2. package/index.esm.js +55 -36
  3. package/package.json +9 -9
package/index.cjs.js CHANGED
@@ -516,9 +516,14 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
516
516
  };
517
517
  const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, isSortDisabled, visibleColumnsCount, }) => {
518
518
  const [localColumns, setLocalColumns] = react.useState(columns);
519
- react.useEffect(() => {
520
- setLocalColumns(columns);
519
+ const latestColumnsRef = react.useRef(columns);
520
+ latestColumnsRef.current = columns;
521
+ const columnIdsSignature = react.useMemo(() => {
522
+ return columns.map(column => column.id).join(",");
521
523
  }, [columns]);
524
+ react.useEffect(() => {
525
+ setLocalColumns(latestColumnsRef.current);
526
+ }, [columnIdsSignature]);
522
527
  const onColumDrop = react.useCallback(() => {
523
528
  const newColumnOrder = localColumns.map(column => column.id);
524
529
  setColumnOrder(newColumnOrder);
@@ -1386,6 +1391,14 @@ const useColumnHelper = () => {
1386
1391
  }, []);
1387
1392
  };
1388
1393
 
1394
+ const computeMergedPinning = (initialPinning, columnConfigPinning) => {
1395
+ const leftPinning = initialPinning?.left;
1396
+ const mergedLeft = leftPinning !== undefined && leftPinning.length > 0 ? [...leftPinning] : [...(columnConfigPinning.left ?? [])];
1397
+ const rightPinning = initialPinning?.right;
1398
+ const mergedRight = rightPinning !== undefined && rightPinning.length > 0 ? [...rightPinning] : [...(columnConfigPinning.right ?? [])];
1399
+ const filteredRight = mergedRight.filter(column => !mergedLeft.includes(column));
1400
+ return { left: mergedLeft, right: filteredRight };
1401
+ };
1389
1402
  /**
1390
1403
  * Hook for managing and controlling a table's state and behavior.
1391
1404
  *
@@ -1442,45 +1455,36 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
1442
1455
  });
1443
1456
  return pinningState;
1444
1457
  }, [stableColumns]);
1445
- const [columnVisibility, setColumnVisibility] = react.useState(reactTableProps.state?.columnVisibility || updatedInitialColumnVisibility);
1446
- const [columnOrder, setColumnOrder] = react.useState(reactTableProps.state?.columnOrder || updatedInitialColumnOrder);
1447
- const [sorting, setSorting] = react.useState(reactTableProps.state?.sorting || initialState?.sorting || []);
1448
- const [columnSizing, setColumnSizing] = react.useState(reactTableProps.state?.columnSizing || initialState?.columnSizing || {});
1449
- const [columnPinning, setColumnPinning] = react.useState(reactTableProps.state?.columnPinning || stableUpdatedInitialColumnPinning);
1458
+ const [columnState, setColumnState] = react.useState(() => ({
1459
+ columnVisibility: reactTableProps.state?.columnVisibility || updatedInitialColumnVisibility,
1460
+ columnOrder: reactTableProps.state?.columnOrder || updatedInitialColumnOrder,
1461
+ sorting: reactTableProps.state?.sorting || initialState?.sorting || [],
1462
+ columnSizing: reactTableProps.state?.columnSizing || initialState?.columnSizing || {},
1463
+ columnPinning: reactTableProps.state?.columnPinning || stableUpdatedInitialColumnPinning,
1464
+ }));
1450
1465
  react.useEffect(() => {
1451
1466
  if (initialState && sharedUtils.objectKeys(initialState).length > 0) {
1452
- setColumnVisibility(updatedInitialColumnVisibility);
1453
- setColumnOrder(updatedInitialColumnOrder);
1454
- setSorting(initialState.sorting || []);
1455
- setColumnSizing(initialState.columnSizing || {});
1467
+ setColumnState(prev => ({
1468
+ ...prev,
1469
+ columnVisibility: updatedInitialColumnVisibility,
1470
+ columnOrder: updatedInitialColumnOrder,
1471
+ sorting: initialState.sorting || [],
1472
+ columnSizing: initialState.columnSizing || {},
1473
+ }));
1456
1474
  }
1457
1475
  }, [initialState, updatedInitialColumnOrder, stableUpdatedInitialColumnPinning, updatedInitialColumnVisibility]);
1458
1476
  react.useEffect(() => {
1459
- const leftPinning = initialState?.columnPinning?.left;
1460
- const mergedLeft = leftPinning !== undefined && leftPinning.length > 0
1461
- ? [...leftPinning]
1462
- : [...(stableUpdatedInitialColumnPinning.left ?? [])];
1463
- const rightPinning = initialState?.columnPinning?.right;
1464
- const mergedRight = rightPinning !== undefined && rightPinning.length > 0
1465
- ? [...rightPinning]
1466
- : [...(stableUpdatedInitialColumnPinning.right ?? [])];
1467
- const filteredRight = mergedRight.filter(column => !mergedLeft.includes(column));
1468
- const mergedPinningState = {
1469
- left: mergedLeft,
1470
- right: filteredRight,
1471
- };
1472
- setColumnPinning(mergedPinningState);
1477
+ setColumnState(prev => ({
1478
+ ...prev,
1479
+ columnPinning: computeMergedPinning(initialState?.columnPinning, stableUpdatedInitialColumnPinning),
1480
+ }));
1473
1481
  }, [initialState?.columnPinning, stableUpdatedInitialColumnPinning]);
1474
1482
  const state = react.useMemo(() => {
1475
1483
  return {
1476
- sorting,
1477
- columnVisibility,
1478
- columnOrder,
1479
- columnSizing,
1480
- columnPinning,
1484
+ ...columnState,
1481
1485
  ...reactTableProps.state,
1482
1486
  };
1483
- }, [sorting, columnVisibility, columnOrder, columnSizing, columnPinning, reactTableProps.state]);
1487
+ }, [columnState, reactTableProps.state]);
1484
1488
  const table = reactTable.useReactTable({
1485
1489
  manualSorting: true,
1486
1490
  enableSortingRemoval: true,
@@ -1489,23 +1493,38 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
1489
1493
  getCoreRowModel: reactTable.getCoreRowModel(),
1490
1494
  ...reactTableProps,
1491
1495
  onColumnVisibilityChange: value => {
1492
- setColumnVisibility(value);
1496
+ setColumnState(prev => ({
1497
+ ...prev,
1498
+ columnVisibility: typeof value === "function" ? value(prev.columnVisibility) : value,
1499
+ }));
1493
1500
  reactTableProps.onColumnVisibilityChange?.(value);
1494
1501
  },
1495
1502
  onColumnSizingChange: value => {
1496
- setColumnSizing(value);
1503
+ setColumnState(prev => ({
1504
+ ...prev,
1505
+ columnSizing: typeof value === "function" ? value(prev.columnSizing) : value,
1506
+ }));
1497
1507
  reactTableProps.onColumnSizingChange?.(value);
1498
1508
  },
1499
1509
  onColumnOrderChange: value => {
1500
- setColumnOrder(value);
1510
+ setColumnState(prev => ({
1511
+ ...prev,
1512
+ columnOrder: typeof value === "function" ? value(prev.columnOrder) : value,
1513
+ }));
1501
1514
  reactTableProps.onColumnOrderChange?.(value);
1502
1515
  },
1503
1516
  onSortingChange: value => {
1504
- setSorting(value);
1517
+ setColumnState(prev => ({
1518
+ ...prev,
1519
+ sorting: typeof value === "function" ? value(prev.sorting) : value,
1520
+ }));
1505
1521
  reactTableProps.onSortingChange?.(value);
1506
1522
  },
1507
1523
  onColumnPinningChange: value => {
1508
- setColumnPinning(value);
1524
+ setColumnState(prev => ({
1525
+ ...prev,
1526
+ columnPinning: typeof value === "function" ? value(prev.columnPinning) : value,
1527
+ }));
1509
1528
  reactTableProps.onColumnPinningChange?.(value);
1510
1529
  },
1511
1530
  columns,
package/index.esm.js CHANGED
@@ -515,9 +515,14 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
515
515
  };
516
516
  const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, isSortDisabled, visibleColumnsCount, }) => {
517
517
  const [localColumns, setLocalColumns] = useState(columns);
518
- useEffect(() => {
519
- setLocalColumns(columns);
518
+ const latestColumnsRef = useRef(columns);
519
+ latestColumnsRef.current = columns;
520
+ const columnIdsSignature = useMemo(() => {
521
+ return columns.map(column => column.id).join(",");
520
522
  }, [columns]);
523
+ useEffect(() => {
524
+ setLocalColumns(latestColumnsRef.current);
525
+ }, [columnIdsSignature]);
521
526
  const onColumDrop = useCallback(() => {
522
527
  const newColumnOrder = localColumns.map(column => column.id);
523
528
  setColumnOrder(newColumnOrder);
@@ -1385,6 +1390,14 @@ const useColumnHelper = () => {
1385
1390
  }, []);
1386
1391
  };
1387
1392
 
1393
+ const computeMergedPinning = (initialPinning, columnConfigPinning) => {
1394
+ const leftPinning = initialPinning?.left;
1395
+ const mergedLeft = leftPinning !== undefined && leftPinning.length > 0 ? [...leftPinning] : [...(columnConfigPinning.left ?? [])];
1396
+ const rightPinning = initialPinning?.right;
1397
+ const mergedRight = rightPinning !== undefined && rightPinning.length > 0 ? [...rightPinning] : [...(columnConfigPinning.right ?? [])];
1398
+ const filteredRight = mergedRight.filter(column => !mergedLeft.includes(column));
1399
+ return { left: mergedLeft, right: filteredRight };
1400
+ };
1388
1401
  /**
1389
1402
  * Hook for managing and controlling a table's state and behavior.
1390
1403
  *
@@ -1441,45 +1454,36 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
1441
1454
  });
1442
1455
  return pinningState;
1443
1456
  }, [stableColumns]);
1444
- const [columnVisibility, setColumnVisibility] = useState(reactTableProps.state?.columnVisibility || updatedInitialColumnVisibility);
1445
- const [columnOrder, setColumnOrder] = useState(reactTableProps.state?.columnOrder || updatedInitialColumnOrder);
1446
- const [sorting, setSorting] = useState(reactTableProps.state?.sorting || initialState?.sorting || []);
1447
- const [columnSizing, setColumnSizing] = useState(reactTableProps.state?.columnSizing || initialState?.columnSizing || {});
1448
- const [columnPinning, setColumnPinning] = useState(reactTableProps.state?.columnPinning || stableUpdatedInitialColumnPinning);
1457
+ const [columnState, setColumnState] = useState(() => ({
1458
+ columnVisibility: reactTableProps.state?.columnVisibility || updatedInitialColumnVisibility,
1459
+ columnOrder: reactTableProps.state?.columnOrder || updatedInitialColumnOrder,
1460
+ sorting: reactTableProps.state?.sorting || initialState?.sorting || [],
1461
+ columnSizing: reactTableProps.state?.columnSizing || initialState?.columnSizing || {},
1462
+ columnPinning: reactTableProps.state?.columnPinning || stableUpdatedInitialColumnPinning,
1463
+ }));
1449
1464
  useEffect(() => {
1450
1465
  if (initialState && objectKeys(initialState).length > 0) {
1451
- setColumnVisibility(updatedInitialColumnVisibility);
1452
- setColumnOrder(updatedInitialColumnOrder);
1453
- setSorting(initialState.sorting || []);
1454
- setColumnSizing(initialState.columnSizing || {});
1466
+ setColumnState(prev => ({
1467
+ ...prev,
1468
+ columnVisibility: updatedInitialColumnVisibility,
1469
+ columnOrder: updatedInitialColumnOrder,
1470
+ sorting: initialState.sorting || [],
1471
+ columnSizing: initialState.columnSizing || {},
1472
+ }));
1455
1473
  }
1456
1474
  }, [initialState, updatedInitialColumnOrder, stableUpdatedInitialColumnPinning, updatedInitialColumnVisibility]);
1457
1475
  useEffect(() => {
1458
- const leftPinning = initialState?.columnPinning?.left;
1459
- const mergedLeft = leftPinning !== undefined && leftPinning.length > 0
1460
- ? [...leftPinning]
1461
- : [...(stableUpdatedInitialColumnPinning.left ?? [])];
1462
- const rightPinning = initialState?.columnPinning?.right;
1463
- const mergedRight = rightPinning !== undefined && rightPinning.length > 0
1464
- ? [...rightPinning]
1465
- : [...(stableUpdatedInitialColumnPinning.right ?? [])];
1466
- const filteredRight = mergedRight.filter(column => !mergedLeft.includes(column));
1467
- const mergedPinningState = {
1468
- left: mergedLeft,
1469
- right: filteredRight,
1470
- };
1471
- setColumnPinning(mergedPinningState);
1476
+ setColumnState(prev => ({
1477
+ ...prev,
1478
+ columnPinning: computeMergedPinning(initialState?.columnPinning, stableUpdatedInitialColumnPinning),
1479
+ }));
1472
1480
  }, [initialState?.columnPinning, stableUpdatedInitialColumnPinning]);
1473
1481
  const state = useMemo(() => {
1474
1482
  return {
1475
- sorting,
1476
- columnVisibility,
1477
- columnOrder,
1478
- columnSizing,
1479
- columnPinning,
1483
+ ...columnState,
1480
1484
  ...reactTableProps.state,
1481
1485
  };
1482
- }, [sorting, columnVisibility, columnOrder, columnSizing, columnPinning, reactTableProps.state]);
1486
+ }, [columnState, reactTableProps.state]);
1483
1487
  const table = useReactTable({
1484
1488
  manualSorting: true,
1485
1489
  enableSortingRemoval: true,
@@ -1488,23 +1492,38 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
1488
1492
  getCoreRowModel: getCoreRowModel(),
1489
1493
  ...reactTableProps,
1490
1494
  onColumnVisibilityChange: value => {
1491
- setColumnVisibility(value);
1495
+ setColumnState(prev => ({
1496
+ ...prev,
1497
+ columnVisibility: typeof value === "function" ? value(prev.columnVisibility) : value,
1498
+ }));
1492
1499
  reactTableProps.onColumnVisibilityChange?.(value);
1493
1500
  },
1494
1501
  onColumnSizingChange: value => {
1495
- setColumnSizing(value);
1502
+ setColumnState(prev => ({
1503
+ ...prev,
1504
+ columnSizing: typeof value === "function" ? value(prev.columnSizing) : value,
1505
+ }));
1496
1506
  reactTableProps.onColumnSizingChange?.(value);
1497
1507
  },
1498
1508
  onColumnOrderChange: value => {
1499
- setColumnOrder(value);
1509
+ setColumnState(prev => ({
1510
+ ...prev,
1511
+ columnOrder: typeof value === "function" ? value(prev.columnOrder) : value,
1512
+ }));
1500
1513
  reactTableProps.onColumnOrderChange?.(value);
1501
1514
  },
1502
1515
  onSortingChange: value => {
1503
- setSorting(value);
1516
+ setColumnState(prev => ({
1517
+ ...prev,
1518
+ sorting: typeof value === "function" ? value(prev.sorting) : value,
1519
+ }));
1504
1520
  reactTableProps.onSortingChange?.(value);
1505
1521
  },
1506
1522
  onColumnPinningChange: value => {
1507
- setColumnPinning(value);
1523
+ setColumnState(prev => ({
1524
+ ...prev,
1525
+ columnPinning: typeof value === "function" ? value(prev.columnPinning) : value,
1526
+ }));
1508
1527
  reactTableProps.onColumnPinningChange?.(value);
1509
1528
  },
1510
1529
  columns,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-table",
3
- "version": "1.15.11",
3
+ "version": "1.15.14",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
@@ -14,14 +14,14 @@
14
14
  "react-dnd-html5-backend": "16.0.1",
15
15
  "@tanstack/react-router": "1.114.29",
16
16
  "tailwind-merge": "^2.0.0",
17
- "@trackunit/react-components": "1.18.20",
18
- "@trackunit/shared-utils": "1.13.74",
19
- "@trackunit/css-class-variance-utilities": "1.11.74",
20
- "@trackunit/ui-icons": "1.11.71",
21
- "@trackunit/react-table-base-components": "1.15.11",
22
- "@trackunit/react-form-components": "1.16.11",
23
- "@trackunit/i18n-library-translation": "1.13.10",
24
- "@trackunit/iris-app-runtime-core-api": "1.12.57",
17
+ "@trackunit/react-components": "1.18.21",
18
+ "@trackunit/shared-utils": "1.13.75",
19
+ "@trackunit/css-class-variance-utilities": "1.11.75",
20
+ "@trackunit/ui-icons": "1.11.72",
21
+ "@trackunit/react-table-base-components": "1.15.14",
22
+ "@trackunit/react-form-components": "1.16.14",
23
+ "@trackunit/i18n-library-translation": "1.13.13",
24
+ "@trackunit/iris-app-runtime-core-api": "1.12.58",
25
25
  "graphql": "^16.10.0"
26
26
  },
27
27
  "module": "./index.esm.js",