feat:toggle index column (#1037)

* feat:add `showIndexColumn` boolean property to `CuesheetSettings`

* feat:use `showIndexColumn` to hide column index th/tr

* feat:pass `showIndexColumn` to components

* fix:update column headers naming

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

@@ -1,4 +1,3 @@
-import { Tooltip } from '@chakra-ui/react';
 import {
   closestCorners,
   DndContext,
@@ -13,7 +12,6 @@ import { flexRender, HeaderGroup } from '@tanstack/react-table';
 import { OntimeRundownEntry } from 'ontime-types';
 
 import { getAccessibleColour } from '../../../common/utils/styleUtils';
-import { tooltipDelayFast } from '../../../ontimeConfig';
 
 import { SortableCell } from './SortableCell';
 
@@ -22,10 +20,11 @@ import style from '../Cuesheet.module.scss';
 interface CuesheetHeaderProps {
   headerGroups: HeaderGroup<OntimeRundownEntry>[];
   saveColumnOrder: (fromId: string, toId: string) => void;
+  showIndexColumn: boolean;
 }
 
 export default function CuesheetHeader(props: CuesheetHeaderProps) {
-  const { headerGroups, saveColumnOrder } = props;
+  const { headerGroups, saveColumnOrder, showIndexColumn } = props;
 
   const handleOnDragEnd = (event: DragEndEvent) => {
     const { delta, active, over } = event;
@@ -61,11 +60,7 @@ export default function CuesheetHeader(props: CuesheetHeaderProps) {
         return (
           <DndContext key={key} sensors={sensors} collisionDetection={closestCorners} onDragEnd={handleOnDragEnd}>
             <tr key={headerGroup.id}>
-              <th className={style.indexColumn}>
-                <Tooltip label='Event Order' openDelay={tooltipDelayFast}>
-                  #
-                </Tooltip>
-              </th>
+              {showIndexColumn && <th className={style.indexColumn}>#</th>}
               <SortableContext key={key} items={headerGroup.headers} strategy={horizontalListSortingStrategy}>
                 {headerGroup.headers.map((header) => {
                   const width = header.getSize();