Merge pull request #209 from balena-io-modules/fix-thead-error

RJST: Fix nested `th` and `thead` console warning

Author: flowzone-app[bot]

src/components/RJST/components/Table/TableHeader.tsx

@@ -7,6 +7,7 @@ import {
 	Checkbox,
 	TableCell,
 	TableHead,
+	TableRow,
 	TableSortLabel,
 } from '@mui/material';
 
@@ -43,63 +44,68 @@ export const TableHeader = <T extends object>({
 }: TableHeaderProps<T>) => {
 	return (
 		<TableHead sx={{ borderCollapse: 'collapse' }}>
-			{onSelectAllClick && (
-				<TableCell data-table="table_cell__sticky_header" padding="checkbox">
-					<Checkbox
-						color="primary"
-						indeterminate={checkedState === 'some'}
-						checked={
-							(rowCount > 0 && numSelected === rowCount) ||
-							checkedState === 'all'
-						}
-						onChange={() => {
-							const state =
-								checkedState === 'some'
-									? 'none'
-									: checkedState === 'all'
+			<TableRow>
+				{onSelectAllClick && (
+					<TableCell data-table="table_cell__sticky_header" padding="checkbox">
+						<Checkbox
+							color="primary"
+							indeterminate={checkedState === 'some'}
+							checked={
+								(rowCount > 0 && numSelected === rowCount) ||
+								checkedState === 'all'
+							}
+							onChange={() => {
+								const state =
+									checkedState === 'some'
 										? 'none'
-										: 'all';
-							const clientData = state === 'all' ? data : undefined;
-							onSelectAllClick?.(isServerSide ? undefined : clientData, state);
-						}}
-						inputProps={{
-							'aria-label': 'select all rows',
-						}}
-					/>
-				</TableCell>
-			)}
-			{columns.map(
-				(column, index) =>
-					column.selected && (
-						<TableCell
-							key={`${column.label}_${index}`}
-							align="left"
-							sortDirection={orderBy === column.key ? order : false}
-							sx={{ whiteSpace: 'nowrap', border: 'none' }}
-						>
-							{column.sortable ? (
-								<TableSortLabel
-									active={orderBy === column.key}
-									direction={orderBy === column.key ? order : 'asc'}
-									onClick={(event) => {
-										onRequestSort(event, column);
-									}}
-								>
-									{column.label ?? column.title}
-									{orderBy === column.key ? (
-										<Box component="span" sx={visuallyHidden}>
-											{order === 'desc'
-												? 'sorted descending'
-												: 'sorted ascending'}
-										</Box>
-									) : null}
-								</TableSortLabel>
-							) : (
-								(column.label ?? column.title)
-							)}
-						</TableCell>
-					),
-			)}
+										: checkedState === 'all'
+											? 'none'
+											: 'all';
+								const clientData = state === 'all' ? data : undefined;
+								onSelectAllClick?.(
+									isServerSide ? undefined : clientData,
+									state,
+								);
+							}}
+							inputProps={{
+								'aria-label': 'select all rows',
+							}}
+						/>
+					</TableCell>
+				)}
+				{columns.map(
+					(column, index) =>
+						column.selected && (
+							<TableCell
+								key={`${column.label}_${index}`}
+								align="left"
+								sortDirection={orderBy === column.key ? order : false}
+								sx={{ whiteSpace: 'nowrap', border: 'none' }}
+							>
+								{column.sortable ? (
+									<TableSortLabel
+										active={orderBy === column.key}
+										direction={orderBy === column.key ? order : 'asc'}
+										onClick={(event) => {
+											onRequestSort(event, column);
+										}}
+									>
+										{column.label ?? column.title}
+										{orderBy === column.key ? (
+											<Box component="span" sx={visuallyHidden}>
+												{order === 'desc'
+													? 'sorted descending'
+													: 'sorted ascending'}
+											</Box>
+										) : null}
+									</TableSortLabel>
+								) : (
+									(column.label ?? column.title)
+								)}
+							</TableCell>
+						),
+				)}
+			</TableRow>
 		</TableHead>
 	);
 };