src/Schedule/Schedule.jsx

@@ -19,7 +19,7 @@ export default function Schedule({
         speakers: allSpeakers,
         tracks: allTracks,
         eventTypes,
-        halls: allHalls,
+        halls,
         events: allEvents,
         slots,
         isLoading,
@@ -30,16 +30,16 @@ export default function Schedule({
     const [eventTypeId, setEventTypeId] = useState(0);
 
     const {
+        header,
         rows,
         speakers,
         tracks,
-        halls,
         events,
     } = useScheduleTable({
         eventTypeId,
         speakers: allSpeakers,
         tracks: allTracks,
-        halls: allHalls,
+        halls,
         events: allEvents,
         slots,
     });
@@ -55,10 +55,9 @@ export default function Schedule({
             <hr/>
             {rows.length > 0 && <>
                 <table>
-                    {halls.length > 0 && <thead>
+                    {header.length > 0 && <thead>
                         <tr>
-                            <th />
-                            {halls.map(hall => <th key={hall.id}>{hall.name[lang]}</th>)}
+                            {header.map(hall => <th key={hall.id}>{hall.name[lang]}</th>)}
                         </tr>
                     </thead>}
                     <tbody>
@@ -70,10 +69,9 @@ export default function Schedule({
                             </td>)}
                         </tr>)}
                     </tbody>
-                    {halls.length > 0 && <tfoot>
+                    {header.length > 0 && <tfoot>
                         <tr>
-                            <th />
-                            {halls.map(hall => <th key={hall.id}>{hall.name[lang]}</th>)}
+                            {header.map(hall => <th key={hall.id}>{hall.name[lang]}</th>)}
                         </tr>
                     </tfoot>}
                 </table>

src/hooks/useScheduleTable.js

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { sorter } from '../utils.js';
+import { langs } from '../Schedule/constants.js';
 import { compareAsc, getTime, isSameDay, toDate } from 'date-fns';
 
 export default function useScheduleTable({
@@ -26,6 +27,13 @@ export default function useScheduleTable({
         const halls = allHalls.filter(hall => hallIds.has(hall.id));
         const skipHallSlots = new Map();
 
+        const header = [{
+                id: 0,
+                name: Object.fromEntries(Object.keys(langs).map(lang => [lang, ''])),
+            },
+            ...halls,
+        ];
+
         const rows = microslots.flatMap((date, slotsIndex, slotsArray) => {
             const isFirst = slotsIndex === 0;
             const isLast = slotsIndex === slotsArray.length - 1;
@@ -118,7 +126,7 @@ export default function useScheduleTable({
                     cells: [{
                         id: 'header',
                         attributes: {
-                            colSpan: halls.length + 1,
+                            colSpan: header.length,
                         },
                         dateHeader: date,
                     }],
@@ -140,9 +148,9 @@ export default function useScheduleTable({
         });
 
         return {
+            header,
             rows,
             tracks,
-            halls,
             events,
             speakers,
         };