diff --git a/apps/client/src/common/components/state/Empty.tsx b/apps/client/src/common/components/state/Empty.tsx
index 08662b034..11299a381 100644
--- a/apps/client/src/common/components/state/Empty.tsx
+++ b/apps/client/src/common/components/state/Empty.tsx
@@ -11,8 +11,7 @@ interface EmptyProps {
className?: string;
}
-export default function Empty(props: EmptyProps) {
- const { text, className, ...rest } = props;
+export default function Empty({ text, className, ...rest }: EmptyProps) {
return (
diff --git a/apps/client/src/common/components/state/EmptyTableBody.module.scss b/apps/client/src/common/components/state/EmptyTableBody.module.scss
new file mode 100644
index 000000000..d51f7e752
--- /dev/null
+++ b/apps/client/src/common/components/state/EmptyTableBody.module.scss
@@ -0,0 +1,19 @@
+.emptyContainer {
+ width: 100%;
+ color: $white-10;
+
+ .emptyCell {
+ margin-inline: auto;
+ text-align: center;
+ }
+
+ .empty {
+ width: 100%;
+ opacity: 0.8;
+ }
+
+ .text {
+ font-weight: 600;
+ font-size: 2em;
+ }
+}
diff --git a/apps/client/src/common/components/state/EmptyTableBody.tsx b/apps/client/src/common/components/state/EmptyTableBody.tsx
new file mode 100644
index 000000000..98a771d4f
--- /dev/null
+++ b/apps/client/src/common/components/state/EmptyTableBody.tsx
@@ -0,0 +1,20 @@
+import EmptyImage from '../../../assets/images/empty.svg?react';
+
+import style from './EmptyTableBody.module.scss';
+
+interface EmptyTableBodyProps {
+ text: string;
+}
+
+export default function EmptyTableBody({ text }: EmptyTableBodyProps) {
+ return (
+
+
+ |
+
+ {text && {text}}
+ |
+
+
+ );
+}
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 e994931ea..123bcf94f 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
@@ -13,6 +13,7 @@ import {
import { colourToHex, cssOrHexToColour } from 'ontime-utils';
import { RUNDOWN } from '../../../../common/api/constants';
+import EmptyTableBody from '../../../../common/components/state/EmptyTableBody';
import { useSelectedEventId } from '../../../../common/hooks/useSocket';
import { getAccessibleColour } from '../../../../common/utils/styleUtils';
import { usePersistedCuesheetOptions } from '../../cuesheet.options';
@@ -47,6 +48,10 @@ export default function CuesheetBody({ rowModel, selectedRef, table }: CuesheetB
};
}, []);
+ if (rowModel.rows.length === 0) {
+ return ;
+ }
+
return (
{rowModel.rows.map((row, index) => {