chore(deps): migrate to @tanstack/react-table v9

apps/client/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@base-ui/react": "1.6.0",
+    "@base-ui/react": "1.7.0",
     "@codemirror/commands": "^6.0.0",
     "@codemirror/lang-css": "^6.0.0",
     "@codemirror/state": "^6.0.0",
@@ -13,12 +13,12 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@fontsource/open-sans": "^5.2.7",
-    "@mantine/hooks": "^8.3.7",
+    "@mantine/hooks": "^9.5.1",
     "@sentry/react": "^10.59.0",
     "@table-nav/react": "^0.0.7",
     "@tanstack/react-query": "^5.101.0",
     "@tanstack/react-query-devtools": "^5.101.0",
-    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-table": "^9.1.2",
     "@uiw/codemirror-theme-vscode": "^4.25.10",
     "autosize": "^6.0.1",
     "axios": "^1.18.0",
@@ -29,7 +29,7 @@
     "react-dom": "^19.2.7",
     "react-fast-compare": "^3.2.2",
     "react-hook-form": "^7.80.0",
-    "react-icons": "5.6.0",
+    "react-icons": "5.7.0",
     "react-router": "^8.0.1",
     "react-virtuoso": "^4.18.7",
     "zustand": "^5.0.14"
@@ -60,7 +60,8 @@
     ]
   },
   "devDependencies": {
-    "@sentry/vite-plugin": "5.1.1",
+    "@sentry/vite-plugin": "5.4.0",
+    "@types/node": "catalog:",
     "@types/qrcode": "^1.5.6",
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",
@@ -72,8 +73,8 @@
     "ontime-utils": "workspace:*",
     "sass": "^1.57.1",
     "typescript": "catalog:",
-    "vite": "8.0.1",
-    "vite-plugin-compression2": "2.5.1",
+    "vite": "8.2.1",
+    "vite-plugin-compression2": "2.5.3",
     "vite-plugin-svgr": "4.5.0",
     "vitest": "catalog:"
   }

apps/client/src/common/components/navigation-menu/NavigationMenu.tsx

@@ -1,5 +1,5 @@
 import { Dialog } from '@base-ui/react/dialog';
-import { useDisclosure, useFullscreen } from '@mantine/hooks';
+import { useDisclosure, useFullscreenDocument } from '@mantine/hooks';
 import { memo } from 'react';
 import { IoClose, IoContract, IoExpand, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
 import { LuCoffee } from 'react-icons/lu';
@@ -33,7 +33,7 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
   const isSmallScreen = useIsSmallScreen();
 
   const [isRenameOpen, handlers] = useDisclosure(false);
-  const { fullscreen, toggle } = useFullscreen();
+  const { fullscreen, toggle } = useFullscreenDocument();
   const { mirror, toggleMirror } = useViewOptionsStore();
   const { keepAwake, toggleKeepAwake } = useKeepAwakeOptions();
   const location = useLocation();

apps/client/src/declarations/declaration.d.ts

@@ -1,5 +1,3 @@
-import { AppMode } from '../ontimeConfig';
-
 declare module '*.scss' {
   const content: Record<string, string>;
   export default content;
@@ -32,39 +30,6 @@ declare global {
   }
 }
 
-/**
- * Declare custom data we pass to the table
- * - `handleUpdate` callback to update the entry when the user edits a cell
- * - `handleUpdateTimer` callback to update the timer for a specific event
- * - `options-showDelayedTimes` whether to show or hide delayed times
- * - `options-hideTableSeconds` whether to hide seconds in the table
- * - `options-hideIndexColumn` whether to hide the index column
- * - `options-cuesheetMode` run or edit mode
- *
- * And metadata specific for each column
- * - `canWrite` whether the user can write to this column
- * - `colour` background colour associated with a custom field
- */
-declare module '@tanstack/react-table' {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  interface TableMeta<TData extends RowData> {
-    handleUpdate: (rowIndex: number, accessor: string, payload: string, isCustom: boolean) => void;
-    handleUpdateTimer: (eventId: string, field: TimeField, payload: string) => void;
-    options: {
-      showDelayedTimes: boolean;
-      hideTableSeconds: boolean;
-      hideIndexColumn: boolean;
-      cuesheetMode: AppMode;
-    };
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  interface ColumnMeta<TData extends RowData, TValue> {
-    canWrite: boolean;
-    colour?: string;
-  }
-}
-
 /**
  * Allow passing CSS Properties
  */

apps/client/src/features/rundown/rundown-table/makeRundownColumns.tsx

@@ -1,15 +1,14 @@
-import type { ColumnDef } from '@tanstack/react-table';
 import type { CustomFields } from 'ontime-types';
 
-import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { AppMode } from '../../../ontimeConfig';
 import { makeCuesheetColumns } from '../../../views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetColsFactory';
+import type { CuesheetColumnDef } from '../../../views/cuesheet/cuesheet-table/cuesheetTable.features';
 
 /**
  * Creates column definitions for the rundown table
  * Reuses cuesheetColsFactory with preset=undefined for full access
  */
-export function makeRundownColumns(customFields: CustomFields): ColumnDef<ExtendedEntry>[] {
+export function makeRundownColumns(customFields: CustomFields): CuesheetColumnDef[] {
   // When preset=undefined, factory defaults to fullRead=true, fullWrite=true
   // canWrite is determined by editorMode (AppMode.Edit vs AppMode.Run)
   return makeCuesheetColumns(customFields, AppMode.Edit, undefined);

apps/client/src/views/cuesheet/cuesheet-dnd/CuesheetDnd.tsx

@@ -7,14 +7,13 @@ import {
   useSensor,
   useSensors,
 } from '@dnd-kit/core';
-import { ColumnDef } from '@tanstack/react-table';
 import { PropsWithChildren } from 'react';
 
-import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
+import type { CuesheetColumnDef } from '../cuesheet-table/cuesheetTable.features';
 import { useColumnOrder } from '../cuesheet-table/useColumnManager';
 
 interface CuesheetDndProps {
-  columns: ColumnDef<ExtendedEntry>[];
+  columns: CuesheetColumnDef[];
   tableRoot?: 'editor' | 'cuesheet';
 }
 

apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx

@@ -1,5 +1,5 @@
 import { useTableNav } from '@table-nav/react';
-import { ColumnDef, Table, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { useTable } from '@tanstack/react-table';
 import { OntimeEntry, SupportedEntry, TimeField, isOntimeDelay, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
 import { ComponentProps, ReactNode, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
@@ -29,12 +29,17 @@ import GroupRow from './cuesheet-table-elements/GroupRow';
 import MilestoneRow from './cuesheet-table-elements/MilestoneRow';
 import TableMenu from './cuesheet-table-menu/TableMenu';
 import CuesheetTableHeaderToolbar from './cuesheet-table-settings/CuesheetTableHeaderToolbar';
+import {
+  CuesheetColumnDef,
+  CuesheetTable as CuesheetTableInstance,
+  cuesheetTableFeatures,
+} from './cuesheetTable.features';
 import { useColumnOrder, useColumnSizes, useColumnVisibility } from './useColumnManager';
 
 import style from './CuesheetTable.module.scss';
 
 type CuesheetTableBaseProps = {
-  columns: ColumnDef<ExtendedEntry>[];
+  columns: CuesheetColumnDef[];
   cuesheetMode: AppMode;
   source: RundownSource;
   insertElement?: ReactNode;
@@ -120,7 +125,8 @@ export default function CuesheetTable({
   const { columnSizing, setColumnSizing } = useColumnSizes(tableRoot);
   const { columnVisibility, setColumnVisibility } = useColumnVisibility(tableRoot);
 
-  const table = useReactTable({
+  const table = useTable({
+    features: cuesheetTableFeatures,
     data: flatRundown,
     columns,
     columnResizeMode: 'onChange',
@@ -131,7 +137,6 @@ export default function CuesheetTable({
     },
     onColumnVisibilityChange: setColumnVisibility,
     onColumnSizingChange: setColumnSizing,
-    getCoreRowModel: getCoreRowModel(),
     meta,
   });
 
@@ -195,7 +200,7 @@ export default function CuesheetTable({
     return colSizes;
     // eslint-disable-next-line react-compiler/react-compiler -- unfortunately this is what we need
     // eslint-disable-next-line react-hooks/exhaustive-deps -- this works well and follows documentation
-  }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
+  }, [table.state.columnResizing, table.state.columnSizing]);
 
   const allLeafColumns = table.getAllLeafColumns();
   const { rows } = table.getRowModel();
@@ -214,9 +219,7 @@ export default function CuesheetTable({
   const computeItemKey = useCallback((_: number, item: ExtendedEntry) => item.id, []);
   const fixedHeaderContent = useCallback(() => {
     return table.getHeaderGroups().map((headerGroup) => {
-      const HeaderComponent = table.getState().columnSizingInfo.isResizingColumn
-        ? CuesheetHeader
-        : SortableCuesheetHeader;
+      const HeaderComponent = table.state.columnResizing.isResizingColumn ? CuesheetHeader : SortableCuesheetHeader;
 
       // if the table is being resized, we render non-sortable headers to avoid performance issues
       return (
@@ -279,8 +282,8 @@ interface CuesheetVirtuosoContext {
   columnSizeVars: { [key: string]: number };
   cursor: string | null;
   listeners: ReturnType<typeof useTableNav>['listeners'];
-  rows: ReturnType<Table<ExtendedEntry>['getRowModel']>['rows'];
-  table: Table<ExtendedEntry>;
+  rows: ReturnType<CuesheetTableInstance['getRowModel']>['rows'];
+  table: CuesheetTableInstance;
   handleAddNew?: (type: SupportedEntry) => void;
 }
 

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetHeader.tsx

@@ -1,16 +1,16 @@
 import { SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable';
-import { HeaderGroup, flexRender } from '@tanstack/react-table';
+import { FlexRender } from '@tanstack/react-table';
 import { CSSProperties } from 'react';
 
-import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { AppMode } from '../../../../ontimeConfig';
+import type { CuesheetHeaderGroup } from '../cuesheetTable.features';
 import { Draggable, SortableCell, TableCell } from './SortableCell';
 
 import style from '../CuesheetTable.module.scss';
 
 interface CuesheetHeaderProps {
-  headerGroup: HeaderGroup<ExtendedEntry>;
+  headerGroup: CuesheetHeaderGroup;
   cuesheetMode: AppMode;
   hideIndexColumn: boolean;
 }
@@ -46,7 +46,7 @@ export function SortableCuesheetHeader({ headerGroup, cuesheetMode, hideIndexCol
               injectedStyles={{ width: `calc(var(--header-${header?.id}-size) * 1px)`, ...customStyles }}
               draggable={<Draggable header={header} />}
             >
-              {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+              {header.isPlaceholder ? null : <FlexRender header={header} />}
             </SortableCell>
           );
         })}
@@ -85,7 +85,7 @@ export function CuesheetHeader({ headerGroup, cuesheetMode, hideIndexColumn }: C
             injectedStyles={{ width: `calc(var(--header-${header?.id}-size) * 1px)`, ...customStyles }}
             draggable={<Draggable header={header} />}
           >
-            {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+            {header.isPlaceholder ? null : <FlexRender header={header} />}
           </TableCell>
         );
       })}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx

@@ -1,14 +1,14 @@
-import { Table, flexRender } from '@tanstack/react-table';
-import { EntryId, OntimeEntry, RGBColour, SupportedEntry } from 'ontime-types';
+import { FlexRender } from '@tanstack/react-table';
+import { EntryId, RGBColour, SupportedEntry } from 'ontime-types';
 import { colourToHex, cssOrHexToColour } from 'ontime-utils';
 import { CSSProperties, memo, useMemo } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 
 import IconButton from '../../../../common/components/buttons/IconButton';
-import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { cx, getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { AppMode } from '../../../../ontimeConfig';
 import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMenu';
+import type { CuesheetTable } from '../cuesheetTable.features';
 
 import style from './EventRow.module.scss';
 
@@ -25,7 +25,7 @@ interface EventRowProps {
   skip: boolean;
   parent: EntryId | null;
   rowIndex: number;
-  table: Table<ExtendedEntry<OntimeEntry>>;
+  table: CuesheetTable;
   injectedStyles?: CSSProperties;
   hasCursor?: boolean;
 }
@@ -133,7 +133,7 @@ function EventRow({
               data-testid={`cuesheet-cell-${cell.column.id}`}
               data-column-id={cell.column.id}
             >
-              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              <FlexRender cell={cell} />
             </td>
           );
         })}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GroupRow.tsx

@@ -1,12 +1,12 @@
-import { Table, flexRender } from '@tanstack/react-table';
+import { FlexRender } from '@tanstack/react-table';
 import { EntryId, SupportedEntry } from 'ontime-types';
 import { CSSProperties, memo } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 
 import IconButton from '../../../../common/components/buttons/IconButton';
-import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { AppMode } from '../../../../ontimeConfig';
 import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMenu';
+import type { CuesheetTable } from '../cuesheetTable.features';
 
 import style from './GroupRow.module.scss';
 
@@ -15,7 +15,7 @@ interface GroupRowProps {
   colour: string;
   rowId: string;
   rowIndex: number;
-  table: Table<ExtendedEntry>;
+  table: CuesheetTable;
   injectedStyles?: CSSProperties;
   hasCursor?: boolean;
 }
@@ -76,7 +76,7 @@ function GroupRow({
               }}
               role='cell'
             >
-              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              <FlexRender cell={cell} />
             </td>
           );
         })}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MilestoneRow.tsx

@@ -1,14 +1,14 @@
-import { Table, flexRender } from '@tanstack/react-table';
+import { FlexRender } from '@tanstack/react-table';
 import { EntryId, SupportedEntry } from 'ontime-types';
 import { colourToHex, cssOrHexToColour } from 'ontime-utils';
 import { CSSProperties, memo, useMemo } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 
 import IconButton from '../../../../common/components/buttons/IconButton';
-import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { cx, enDash, getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { AppMode } from '../../../../ontimeConfig';
 import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMenu';
+import type { CuesheetTable } from '../cuesheetTable.features';
 
 import style from './MilestoneRow.module.scss';
 
@@ -20,7 +20,7 @@ interface MilestoneRowProps {
   colour: string;
   rowId: string;
   rowIndex: number;
-  table: Table<ExtendedEntry>;
+  table: CuesheetTable;
   injectedStyles?: CSSProperties;
   hasCursor?: boolean;
 }
@@ -102,7 +102,7 @@ function MilestoneRow({
               }}
               tabIndex={-1}
             >
-              {canRender && flexRender(cell.column.columnDef.cell, cell.getContext())}
+              {canRender && <FlexRender cell={cell} />}
             </td>
           );
         })}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/SortableCell.tsx

@@ -1,9 +1,8 @@
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Header } from '@tanstack/react-table';
 import { CSSProperties, ReactNode } from 'react';
 
-import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
+import type { CuesheetHeaderCell } from '../cuesheetTable.features';
 
 import style from '../CuesheetTable.module.scss';
 
@@ -48,7 +47,7 @@ export function TableCell({ colSpan, injectedStyles, children, draggable }: Sort
 }
 
 interface DraggableProps {
-  header: Header<ExtendedEntry, unknown>;
+  header: CuesheetHeaderCell;
 }
 
 export function Draggable({ header }: DraggableProps) {

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetColsFactory.tsx

@@ -1,4 +1,3 @@
-import { CellContext, ColumnDef } from '@tanstack/react-table';
 import { CustomFields, TimeStrategy, URLPreset, isOntimeDelay, isOntimeEvent } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 import { useCallback } from 'react';
@@ -8,6 +7,7 @@ import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { formatDuration, formatTime } from '../../../../common/utils/time';
 import { AppMode } from '../../../../ontimeConfig';
 import { getCuesheetColumnAccessPolicy } from '../../cuesheet.policies';
+import type { CuesheetCellContext, CuesheetColumnDef } from '../cuesheetTable.features';
 import DurationInput from './DurationInput';
 import EditableImage from './EditableImage';
 import FlagCell from './FlagCell';
@@ -17,11 +17,11 @@ import MutedText from './MutedText';
 import SingleLineCell from './SingleLineCell';
 import TimeInput from './TimeInput';
 
-function getColumnLabel(column: CellContext<ExtendedEntry, unknown>['column']): string {
+function getColumnLabel(column: CuesheetCellContext['column']): string {
   return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
 }
 
-function MakeStart({ getValue, row, table, column }: CellContext<ExtendedEntry, unknown>) {
+function MakeStart({ getValue, row, table, column }: CuesheetCellContext) {
   if (!table.options.meta) {
     return null;
   }
@@ -60,7 +60,7 @@ function MakeStart({ getValue, row, table, column }: CellContext<ExtendedEntry,
   );
 }
 
-function MakeEnd({ getValue, row, table, column }: CellContext<ExtendedEntry, unknown>) {
+function MakeEnd({ getValue, row, table, column }: CuesheetCellContext) {
   if (!table.options.meta) {
     return null;
   }
@@ -100,7 +100,7 @@ function MakeEnd({ getValue, row, table, column }: CellContext<ExtendedEntry, un
   );
 }
 
-function MakeDuration({ getValue, row, table, column }: CellContext<ExtendedEntry, unknown>) {
+function MakeDuration({ getValue, row, table, column }: CuesheetCellContext) {
   if (!table.options.meta) {
     return null;
   }
@@ -131,7 +131,7 @@ function MakeDuration({ getValue, row, table, column }: CellContext<ExtendedEntr
   );
 }
 
-function MakeMultiLineField({ row, column, table }: CellContext<ExtendedEntry, unknown>) {
+function MakeMultiLineField({ row, column, table }: CuesheetCellContext) {
   const update = useCallback(
     (newValue: string) => {
       table.options.meta?.handleUpdate(row.index, column.id, newValue, false);
@@ -160,7 +160,7 @@ function MakeMultiLineField({ row, column, table }: CellContext<ExtendedEntry, u
   );
 }
 
-function LazyImage({ row, column, table }: CellContext<ExtendedEntry, unknown>) {
+function LazyImage({ row, column, table }: CuesheetCellContext) {
   const update = useCallback(
     (newValue: string) => {
       table.options.meta?.handleUpdate(row.index, column.id, newValue, true);
@@ -178,7 +178,7 @@ function LazyImage({ row, column, table }: CellContext<ExtendedEntry, unknown>)
   return <EditableImage initialValue={initialValue} updateValue={update} readOnly={!canWrite} />;
 }
 
-function MakeSingleLineField({ row, column, table }: CellContext<ExtendedEntry, unknown>) {
+function MakeSingleLineField({ row, column, table }: CuesheetCellContext) {
   const update = useCallback(
     (newValue: string) => {
       table.options.meta?.handleUpdate(row.index, column.id, newValue, false);
@@ -207,7 +207,7 @@ function MakeSingleLineField({ row, column, table }: CellContext<ExtendedEntry,
   );
 }
 
-function MakeFlagField({ row }: CellContext<ExtendedEntry, unknown>) {
+function MakeFlagField({ row }: CuesheetCellContext) {
   const event = row.original;
   if (!isOntimeEvent(event) || !event.flag) {
     return null;
@@ -215,7 +215,7 @@ function MakeFlagField({ row }: CellContext<ExtendedEntry, unknown>) {
   return <FlagCell />;
 }
 
-function MakeCustomField({ row, column, table }: CellContext<ExtendedEntry, unknown>) {
+function MakeCustomField({ row, column, table }: CuesheetCellContext) {
   const update = useCallback(
     (newValue: string) => {
       table.options.meta?.handleUpdate(row.index, column.id, newValue, true);
@@ -255,8 +255,8 @@ export function makeCuesheetColumns(
   customFields: CustomFields,
   cuesheetMode: AppMode,
   preset: URLPreset | undefined,
-): ColumnDef<ExtendedEntry>[] {
-  const columnsDef: ColumnDef<ExtendedEntry>[] = [];
+): CuesheetColumnDef[] {
+  const columnsDef: CuesheetColumnDef[] = [];
   const { canRead, canWrite } = getCuesheetColumnAccessPolicy(preset, cuesheetMode);
 
   if (canRead('flag')) {

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-settings/CuesheetTableHeaderToolbar.tsx

@@ -2,7 +2,6 @@ import { Popover } from '@base-ui/react/popover';
 import { Toggle } from '@base-ui/react/toggle';
 import { ToggleGroup } from '@base-ui/react/toggle-group';
 import { Toolbar } from '@base-ui/react/toolbar';
-import type { Column } from '@tanstack/react-table';
 import { ReactNode } from 'react';
 import { IoBookOutline, IoChevronDown, IoOptions } from 'react-icons/io5';
 
@@ -10,9 +9,9 @@ import Button from '../../../../common/components/buttons/Button';
 import Checkbox from '../../../../common/components/checkbox/Checkbox';
 import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
 import PopoverContents from '../../../../common/components/popover/Popover';
-import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { AppMode } from '../../../../ontimeConfig';
 import { useCuesheetPermissions } from '../../useTablePermissions';
+import type { CuesheetColumn } from '../cuesheetTable.features';
 import CuesheetShareModal from './CuesheetShareModal';
 
 import style from './CuesheetTableSettings.module.scss';
@@ -37,7 +36,7 @@ type TableModeControls = {
 };
 
 interface CuesheetTableHeaderToolbarProps {
-  columns: Column<ExtendedEntry, unknown>[];
+  columns: CuesheetColumn[];
   optionsStore: TableHeaderOptionsStore;
   handleResetResizing: () => void;
   handleResetReordering: () => void;
@@ -111,7 +110,7 @@ interface ViewSettingsProps {
 }
 
 interface ColumnSettingsProps {
-  columns: Column<ExtendedEntry, unknown>[];
+  columns: CuesheetColumn[];
   handleResetResizing: () => void;
   handleResetReordering: () => void;
   handleClearToggles: () => void;
@@ -203,7 +202,7 @@ function ColumnSettings({
 
             return (
               <Editor.Label key={`${column.id}-${visible}`} className={style.option}>
-                <Checkbox defaultChecked={visible} onCheckedChange={column.toggleVisibility} />
+                <Checkbox defaultChecked={visible} onCheckedChange={(checked) => column.toggleVisibility(checked)} />
                 {columnHeader as ReactNode}
               </Editor.Label>
             );

apps/client/src/views/cuesheet/cuesheet-table/cuesheetTable.features.ts

@@ -0,0 +1,74 @@
+import {
+  columnOrderingFeature,
+  columnResizingFeature,
+  columnSizingFeature,
+  columnVisibilityFeature,
+  metaHelper,
+  tableFeatures,
+} from '@tanstack/react-table';
+import type { CellContext, Column, ColumnDef, Header, HeaderGroup, Table } from '@tanstack/react-table';
+import type { TimeField } from 'ontime-types';
+
+import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
+import type { AppMode } from '../../../ontimeConfig';
+
+/**
+ * Custom data we pass to the table
+ * - `handleUpdate` callback to update the entry when the user edits a cell
+ * - `handleUpdateTimer` callback to update the timer for a specific event
+ * - `options-showDelayedTimes` whether to show or hide delayed times
+ * - `options-hideTableSeconds` whether to hide seconds in the table
+ * - `options-hideIndexColumn` whether to hide the index column
+ * - `options-cuesheetMode` run or edit mode
+ */
+export interface CuesheetTableMeta {
+  handleUpdate: (rowIndex: number, accessor: string, payload: string, isCustom: boolean) => void;
+  handleUpdateTimer: (eventId: string, field: TimeField, payload: string) => void;
+  options: {
+    showDelayedTimes: boolean;
+    hideTableSeconds: boolean;
+    hideIndexColumn: boolean;
+    cuesheetMode: AppMode;
+  };
+}
+
+/**
+ * Metadata specific for each column
+ * - `canWrite` whether the user can write to this column
+ * - `colour` background colour associated with a custom field
+ */
+export interface CuesheetColumnMeta {
+  canWrite: boolean;
+  colour?: string;
+}
+
+/**
+ * Features registered in the cuesheet and rundown tables.
+ * In v9 an API only exists once its feature is registered, so this list is the
+ * source of truth for what the table can do:
+ * - `columnOrderingFeature`: user reorders columns by dragging the headers
+ * - `columnVisibilityFeature`: user toggles columns in the table settings
+ * - `columnSizingFeature`: column widths, exposed to CSS as custom properties
+ * - `columnResizingFeature`: the drag handle in the header (requires sizing)
+ *
+ * The `tableMeta` / `columnMeta` slots replace the v8 global module augmentation:
+ * they scope our meta types to this table instead of every table in the app.
+ */
+export const cuesheetTableFeatures = tableFeatures({
+  columnOrderingFeature,
+  columnVisibilityFeature,
+  columnSizingFeature,
+  columnResizingFeature,
+  tableMeta: metaHelper<CuesheetTableMeta>(),
+  columnMeta: metaHelper<CuesheetColumnMeta>(),
+});
+
+export type CuesheetFeatures = typeof cuesheetTableFeatures;
+
+/** Convenience aliases so consumers do not need to repeat the feature generic */
+export type CuesheetColumnDef = ColumnDef<CuesheetFeatures, ExtendedEntry>;
+export type CuesheetTable = Table<CuesheetFeatures, ExtendedEntry>;
+export type CuesheetCellContext = CellContext<CuesheetFeatures, ExtendedEntry>;
+export type CuesheetHeaderGroup = HeaderGroup<CuesheetFeatures, ExtendedEntry>;
+export type CuesheetHeaderCell = Header<CuesheetFeatures, ExtendedEntry, unknown>;
+export type CuesheetColumn = Column<CuesheetFeatures, ExtendedEntry, unknown>;

apps/client/src/views/cuesheet/cuesheet-table/useColumnManager.tsx

@@ -1,10 +1,10 @@
 import { useLocalStorage } from '@mantine/hooks';
-import { ColumnDef, ColumnSizingState, Updater } from '@tanstack/react-table';
+import { ColumnSizingState, Updater } from '@tanstack/react-table';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { debounce } from '../../../common/utils/debounce';
 import { makeStageKey } from '../../../common/utils/localStorage';
-import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
+import type { CuesheetColumnDef } from './cuesheetTable.features';
 
 type TableRoot = 'editor' | 'cuesheet';
 
@@ -38,7 +38,7 @@ export function useColumnSizes(tableRoot: TableRoot = 'cuesheet') {
   };
 }
 
-export function useColumnOrder(columns: ColumnDef<ExtendedEntry>[], tableRoot: TableRoot = 'cuesheet') {
+export function useColumnOrder(columns: CuesheetColumnDef[], tableRoot: TableRoot = 'cuesheet') {
   const tableOrderKey = useMemo(() => makeStageKey(`${tableRoot}-table-order`), [tableRoot]);
 
   const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>({

apps/electron/package.json

@@ -14,8 +14,8 @@
   "main": "src/main.js",
   "devDependencies": {
     "electron": "38.2.1",
-    "electron-builder": "26.9.1",
-    "wait-on": "^7.2.0"
+    "electron-builder": "26.15.3",
+    "wait-on": "^9.0.0"
   },
   "scripts": {
     "dev:electron": "wait-on http://localhost:3000 && cross-env NODE_ENV=development electron .",

apps/server/package.json

@@ -10,7 +10,7 @@
     "cookie": "1.0.2",
     "cookie-parser": "1.4.7",
     "cors": "2.8.6",
-    "dotenv": "^16.0.1",
+    "dotenv": "^17.0.0",
     "express": "5.2.1",
     "express-static-gzip": "3.0.1",
     "express-validator": "7.3.2",
@@ -31,11 +31,11 @@
     "@types/multer": "2.1.0",
     "@types/node": "catalog:",
     "@types/ws": "^8.5.10",
-    "esbuild": "^0.24.0",
+    "esbuild": "^0.28.0",
     "ontime-types": "workspace:*",
     "server-timing": "^3.3.3",
     "ts-essentials": "catalog:",
-    "tsx": "^4.19.2",
+    "tsx": "^4.23.12",
     "typescript": "catalog:",
     "vitest": "catalog:"
   },

apps/server/src/api-data/rundown/rundown.utils.ts

@@ -353,19 +353,19 @@ export function isLoadedPlayable(loadedEventId: EntryId, rundown: Readonly<Rundo
 
 /** List of event properties which do not need the rundown to be regenerated */
 enum RegenerateWhitelist {
-  'id', // adding it for completeness, users cannot change ID
-  'type', // adding it for completeness, users cannot change ID
-  'cue',
-  'title',
-  'note',
-  'endAction',
-  'timerType',
-  'countToEnd',
-  'colour',
-  'timeWarning',
-  'timeDanger',
-  'custom',
-  'triggers',
+  id, // adding it for completeness, users cannot change ID
+  type, // adding it for completeness, users cannot change ID
+  cue,
+  title,
+  note,
+  endAction,
+  timerType,
+  countToEnd,
+  colour,
+  timeWarning,
+  timeDanger,
+  custom,
+  triggers,
 }
 
 /**

apps/server/src/api-mcp/mcp.server.ts

@@ -20,12 +20,9 @@ export function createMcpServer(): Server {
     { capabilities: { tools: {}, prompts: {}, resources: {} } },
   );
 
-  server.setRequestHandler(
-    ListToolsRequestSchema,
-    async (): Promise<ListToolsResult> => ({
-      tools: TOOL_DEFINITIONS as unknown as ListToolsResult['tools'],
-    }),
-  );
+  server.setRequestHandler(ListToolsRequestSchema, async (): Promise<ListToolsResult> => ({
+    tools: TOOL_DEFINITIONS as unknown as ListToolsResult['tools'],
+  }));
 
   server.setRequestHandler(CallToolRequestSchema, async (request): Promise<CallToolResult> => {
     const { name, arguments: args = {} } = request.params;

e2e/tests/features/202-cuesheet.spec.ts

@@ -6,6 +6,25 @@ test('cuesheet displays events', async ({ page }) => {
   await expect(page.getByTestId('cuesheet-event').first()).toBeVisible();
 });
 
+test('cuesheet persists column visibility', async ({ page }) => {
+  await page.goto('/cuesheet');
+
+  const noteHeader = page.getByRole('columnheader', { name: 'Note' });
+  const noteCell = page.getByTestId('cuesheet-event').first().getByTestId('cuesheet-cell-note');
+  await expect(noteHeader).toBeVisible();
+  await expect(noteCell).toBeVisible();
+
+  await page.getByRole('button', { name: 'Columns' }).click();
+  await page.getByRole('checkbox', { name: 'Note' }).click();
+
+  await expect(noteHeader).toBeHidden();
+  await expect(noteCell).toBeHidden();
+
+  await page.reload();
+  await expect(noteHeader).toBeHidden();
+  await expect(noteCell).toBeHidden();
+});
+
 test('cuesheet datagrid does not submit timer cells on tab-out or escape', async ({ page }) => {
   await page.goto('/cuesheet');
 

package.json

@@ -41,14 +41,14 @@
     "format:check": "oxfmt --check"
   },
   "devDependencies": {
-    "@playwright/test": "1.60.0",
+    "@playwright/test": "1.62.1",
     "@types/node": "catalog:",
     "cross-env": "^7.0.3",
-    "oxfmt": "^0.42.0",
-    "oxlint": "^1.57.0",
-    "oxlint-tsgolint": "^0.17.4",
+    "oxfmt": "^0.63.0",
+    "oxlint": "^1.78.0",
+    "oxlint-tsgolint": "^7.0.2001",
     "rimraf": "catalog:",
-    "turbo": "2.8.20",
+    "turbo": "2.10.10",
     "typescript": "catalog:"
   },
   "packageManager": "pnpm@11.1.2+sha512.415a1cc25974731e75455c1468371be74c5aa5fb7621b50d4056d222451609f11412f23fd602e6169f1e060466641f798597e1be961a10688836a67b16569499",

packages/utils/package.json

@@ -14,6 +14,7 @@
     "nanoid": "^6.0.0"
   },
   "devDependencies": {
+    "@types/node": "catalog:",
     "ontime-types": "workspace:*",
     "typescript": "catalog:",
     "vitest": "catalog:"

pnpm-workspace.yaml

@@ -4,10 +4,10 @@ packages:
 
 catalog:
   '@types/node': 22.19.11
-  rimraf: 6.0.1
-  ts-essentials: 10.1.1
+  rimraf: 6.1.3
+  ts-essentials: 10.2.1
   typescript: 7.0.2
-  vitest: 4.0.17
+  vitest: 4.1.10
 
 allowBuilds:
   '@parcel/watcher': true