refactor(gradebook): GradebookTable consumes extended Table

Removes ~230 lines of bespoke MUI/sx/useLayoutEffect machinery from
GradebookTable in favor of the grouped-header / pin API added in
lib/components/table.

Intentional behavior change: Total column is now sticky-right during
horizontal scroll (was previously rowSpan-only without sticky).

Author: claude

client/app/bundles/course/gradebook/components/GradebookTable.tsx

@@ -1,17 +1,9 @@
-import { FC, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { FC, useMemo } from 'react';
 import { defineMessages } from 'react-intl';
-import {
-  Paper,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Tooltip,
-} from '@mui/material';
-import { black, grey, white } from 'theme/colors';
+import { Tooltip } from '@mui/material';
 
+import { ColumnTemplate } from 'lib/components/table';
+import Table from 'lib/components/table/Table';
 import useTranslation from 'lib/hooks/useTranslation';
 
 import { AssessmentData, StudentRow, TabData } from '../types';
@@ -34,14 +26,6 @@ interface Props {
   showRawScore: boolean;
 }
 
-interface HeaderGroup {
-  id: number;
-  title: string;
-  colSpan: number;
-}
-
-const ASSESSMENT_COL_WIDTH = 'w-[160px] min-w-[160px] max-w-[160px]';
-
 const RawScore: FC<{ grade: number; maxGrade: number }> = ({
   grade,
   maxGrade,
@@ -68,232 +52,77 @@ const formatGrade = (
   return `${((grade / maxGrade) * 100).toFixed(2)}%`;
 };
 
-const buildHeaderGroups = (
+const buildColumns = (
   assessments: AssessmentData[],
   tabMap: Map<number, TabData>,
-  getId: (tab: TabData) => number,
-  getTitle: (tab: TabData) => string,
-): HeaderGroup[] => {
-  const seen = assessments.reduce((map, assessment) => {
-    const tab = tabMap.get(assessment.tabId);
-    if (!tab) return map;
-    const id = getId(tab);
-    const existing = map.get(id);
-    if (existing) {
-      existing.colSpan += 1;
-    } else {
-      map.set(id, { id, title: getTitle(tab), colSpan: 1 });
-    }
-    return map;
-  }, new Map<number, HeaderGroup>());
-  return Array.from(seen.values());
-};
-
-const stickyNameCell = {
-  position: 'sticky',
-  left: 0,
-  zIndex: 20,
-  backgroundColor: white,
-  minWidth: '12rem',
-  boxShadow: `inset -1px 0 0 ${grey[400]}`,
-};
-
-const stickyNameHeaderCell = {
-  ...stickyNameCell,
-  zIndex: 40,
-  color: black,
-};
-
-const headerCell = {
-  backgroundColor: white,
-  fontWeight: 600,
-  textAlign: 'center',
-  color: black,
-  zIndex: 30,
-};
-
-const rowSpanHeaderCellSx = {
-  backgroundColor: white,
-  // rowSpan=3 cells sit in row 1, so the last-child selector in Table sx won't
-  // match them. !important overrides MUI's default cell border for these cells.
-  borderBottom: `2px solid ${grey[600]} !important`,
+  t: ReturnType<typeof useTranslation>['t'],
+  showRawScore: boolean,
+): ColumnTemplate<StudentRow>[] => {
+  const numberAlign = showRawScore ? 'text-left' : 'text-right';
+
+  const leaves: ColumnTemplate<StudentRow>[] = assessments
+    .map((a) => {
+      const tab = tabMap.get(a.tabId);
+      if (!tab) return null;
+      return {
+        id: `assessment-${a.id}`,
+        title: (
+          <Tooltip placement="top" title={a.title}>
+            <span className="block truncate">{a.title}</span>
+          </Tooltip>
+        ),
+        groupPath: [
+          { id: tab.categoryId, title: tab.categoryTitle, label: tab.categoryTitle },
+          { id: tab.id, title: tab.title, label: tab.title },
+        ],
+        widthPx: 160,
+        className: `${numberAlign} tabular-nums`,
+        cell: (row) =>
+          formatGrade(row.grades[String(a.id)] ?? 0, a.maxGrade, showRawScore),
+      } satisfies ColumnTemplate<StudentRow>;
+    })
+    .filter((c): c is ColumnTemplate<StudentRow> => c !== null);
+
+  return [
+    {
+      id: 'name',
+      title: t(translations.studentName),
+      pin: 'left',
+      widthPx: 192,
+      cell: (row) => row.name,
+    },
+    ...leaves,
+    {
+      id: 'total',
+      title: t(translations.total),
+      pin: 'right',
+      widthPx: 96,
+      className: `${numberAlign} tabular-nums`,
+      cell: (row) =>
+        formatGrade(row.totalGrade, row.totalMaxGrade, showRawScore),
+    },
+  ];
 };
 
-const GradebookTable: FC<Props> = ({
-  tabs,
-  assessments,
-  students,
-  showRawScore,
-}) => {
+const GradebookTable: FC<Props> = ({ tabs, assessments, students, showRawScore }) => {
   const { t } = useTranslation();
-
-  // MUI stickyHeader sets top:0 on every thead cell, stacking all three rows at
-  // the same y-position. Measure row heights and override `top` on rows 2 and 3.
-  const row1Ref = useRef<HTMLTableRowElement>(null);
-  const row2Ref = useRef<HTMLTableRowElement>(null);
-  const [row2Top, setRow2Top] = useState(0);
-  const [row3Top, setRow3Top] = useState(0);
-
   const tabMap = useMemo(
     () => new Map(tabs.map((tab) => [tab.id, tab])),
     [tabs],
   );
-
-  const categoryGroups = useMemo(
-    () =>
-      buildHeaderGroups(
-        assessments,
-        tabMap,
-        (tab) => tab.categoryId,
-        (tab) => tab.categoryTitle,
-      ),
-    [assessments, tabMap],
-  );
-
-  const tabGroups = useMemo(
-    () =>
-      buildHeaderGroups(
-        assessments,
-        tabMap,
-        (tab) => tab.id,
-        (tab) => tab.title,
-      ),
-    [assessments, tabMap],
+  const columns = useMemo(
+    () => buildColumns(assessments, tabMap, t, showRawScore),
+    [assessments, tabMap, t, showRawScore],
   );
 
-  useLayoutEffect(() => {
-    const h1 = row1Ref.current?.offsetHeight ?? 0;
-    const h2 = row2Ref.current?.offsetHeight ?? 0;
-    setRow2Top(h1);
-    setRow3Top(h1 + h2);
-  }, [categoryGroups, tabGroups]);
-
-  const gradeAlign = showRawScore ? 'left' : 'right';
-
   return (
-    <TableContainer
-      className="max-h-[70vh] w-full"
-      component={Paper}
-      variant="outlined"
-    >
-      <Table
-        className="!border-separate"
-        stickyHeader
-        sx={{
-          borderSpacing: 0,
-          // Sticky cells at the same z-index paint in DOM order, so a later
-          // cell's white background covers the border of the cell before it.
-          // Fix: let the COVERING cell own the border line.
-          // Horizontal: use borderLeft (not borderRight) — cell N+1 owns the vertical sep.
-          // Vertical: use borderTop on non-first header rows (not borderBottom on row above).
-          '& .MuiTableCell-root': {
-            borderBottom: `1px solid ${grey[400]}`,
-            borderLeft: `1px solid ${grey[400]}`,
-            backgroundColor: white,
-          },
-          '& .MuiTableCell-stickyHeader': {
-            backgroundColor: white,
-          },
-          '& .assessment-cell': {
-            boxShadow: `inset 1px 0 0 ${grey[400]}`,
-          },
-          // Non-last header rows: drop borderBottom (covered by the next row's bg).
-          '& .MuiTableHead-root .MuiTableRow-root:not(:last-child) .MuiTableCell-root':
-            {
-              borderBottom: 'none',
-            },
-          // Non-first header rows: add borderTop so the line is owned by the covering row.
-          '& .MuiTableHead-root .MuiTableRow-root:not(:first-child) .MuiTableCell-root':
-            {
-              borderTop: `1px solid ${grey[400]}`,
-            },
-          // Last header row: thick bottom border separating header from body.
-          '& .MuiTableHead-root .MuiTableRow-root:last-child .MuiTableCell-root':
-            {
-              borderBottom: `2px solid ${grey[600]}`,
-            },
-        }}
-      >
-        <TableHead>
-          <TableRow ref={row1Ref}>
-            <TableCell
-              rowSpan={3}
-              sx={{ ...stickyNameHeaderCell, ...rowSpanHeaderCellSx }}
-            >
-              {t(translations.studentName)}
-            </TableCell>
-            {categoryGroups.map((cat) => (
-              <TableCell key={cat.id} colSpan={cat.colSpan} sx={headerCell}>
-                {cat.title}
-              </TableCell>
-            ))}
-            <TableCell
-              rowSpan={3}
-              sx={{ ...headerCell, ...rowSpanHeaderCellSx }}
-            >
-              {t(translations.total)}
-            </TableCell>
-          </TableRow>
-
-          <TableRow
-            ref={row2Ref}
-            sx={{ '& .MuiTableCell-stickyHeader': { top: row2Top } }}
-          >
-            {tabGroups.map((tab) => (
-              <TableCell
-                key={tab.id}
-                align="center"
-                colSpan={tab.colSpan}
-                sx={headerCell}
-              >
-                {tab.title}
-              </TableCell>
-            ))}
-          </TableRow>
-
-          <TableRow sx={{ '& .MuiTableCell-stickyHeader': { top: row3Top } }}>
-            {assessments.map((assessment) => (
-              <TableCell
-                key={assessment.id}
-                className={`${ASSESSMENT_COL_WIDTH} assessment-cell z-30 text-black`}
-              >
-                <Tooltip placement="top" title={assessment.title}>
-                  <span className="block truncate">{assessment.title}</span>
-                </Tooltip>
-              </TableCell>
-            ))}
-          </TableRow>
-        </TableHead>
-
-        <TableBody>
-          {students.map((student) => (
-            <TableRow key={student.id}>
-              <TableCell sx={stickyNameCell}>{student.name}</TableCell>
-              {assessments.map((assessment) => (
-                <TableCell
-                  key={assessment.id}
-                  align={gradeAlign}
-                  className={`${ASSESSMENT_COL_WIDTH} tabular-nums`}
-                >
-                  {formatGrade(
-                    student.grades[String(assessment.id)] ?? 0,
-                    assessment.maxGrade,
-                    showRawScore,
-                  )}
-                </TableCell>
-              ))}
-              <TableCell align={gradeAlign} className="tabular-nums">
-                {formatGrade(
-                  student.totalGrade,
-                  student.totalMaxGrade,
-                  showRawScore,
-                )}
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
+    <Table
+      columns={columns}
+      data={students}
+      getRowId={(s) => s.id.toString()}
+      getRowEqualityData={(s) => s}
+      maxHeight="70vh"
+    />
   );
 };