diff --git a/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx b/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
index 6a4c096f8..d56875be7 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
@@ -104,7 +104,7 @@ export default function CuesheetTable(props: CuesheetTableProps) {
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetBody.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetBody.tsx
index c7171a75f..e5fe04f96 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetBody.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetBody.tsx
@@ -16,16 +16,24 @@ interface CuesheetBodyProps {
rowModel: RowModel;
selectedRef: MutableRefObject;
table: Table;
- columnSizing: Record;
}
export default function CuesheetBody(props: CuesheetBodyProps) {
- const { rowModel, selectedRef, table, columnSizing } = props;
+ const { rowModel, selectedRef, table } = props;
const { selectedEventId } = useSelectedEventId();
const { hideDelays, hidePast } = useCuesheetOptions();
- const getColumnCount = lazyEvaluate(() => table.getVisibleFlatColumns().length);
+ const getVisibleColumns = lazyEvaluate(() => table.getVisibleFlatColumns());
+ const getColumnHash = lazyEvaluate(() => {
+ let columnHash = '';
+ const columns = getVisibleColumns();
+
+ for (let i = 0; i < columns.length; i++) {
+ columnHash += `${columns[i].getIndex()}-${columns[i].getSize()} `;
+ }
+ return columnHash;
+ });
let eventIndex = 0;
// for the first event, it will be past if there is something selected
@@ -41,7 +49,7 @@ export default function CuesheetBody(props: CuesheetBodyProps) {
}
if (isOntimeBlock(entry)) {
- const columnCount = getColumnCount();
+ const columnCount = getVisibleColumns().length;
return ;
}
if (isOntimeDelay(entry)) {
@@ -58,6 +66,7 @@ export default function CuesheetBody(props: CuesheetBodyProps) {
if (isOntimeEvent(entry)) {
eventIndex++;
const isSelected = key === selectedEventId;
+ const columnHash = getColumnHash();
if (isPast && hidePast) {
return null;
@@ -87,7 +96,7 @@ export default function CuesheetBody(props: CuesheetBodyProps) {
selectedRef={isSelected ? selectedRef : undefined}
rowBgColour={rowBgColour}
table={table}
- columnSizing={columnSizing}
+ columnHash={columnHash}
/>
);
}
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
index 243635c04..a16be1e6e 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
@@ -23,7 +23,7 @@ interface EventRowProps {
rowBgColour?: string;
table: Table;
/** hack to force re-rendering of the row when the column sizes change */
- columnSizing: Record;
+ columnHash: string;
}
export default memo(EventRow, (prevProps, nextProps) => {
@@ -35,8 +35,7 @@ export default memo(EventRow, (prevProps, nextProps) => {
prevProps.isPast === nextProps.isPast &&
prevProps.selectedRef === nextProps.selectedRef &&
prevProps.rowBgColour === nextProps.rowBgColour &&
- prevProps.table === nextProps.table &&
- prevProps.columnSizing === nextProps.columnSizing
+ prevProps.columnHash === nextProps.columnHash
);
});