Add styling for header rows

This commit is contained in:
Robert
2023-10-18 14:10:17 +01:00
parent 298656444f
commit 56d0f28814
2 changed files with 13 additions and 6 deletions

View File

@@ -54,9 +54,14 @@ const StyledDataGridCell = styled.div<{
${({ $gridRow }) => ($gridRow ? `grid-row: ${$gridRow};` : "")}
${({ $gridColumn }) => ($gridColumn ? `grid-column: ${$gridColumn};` : "")}
padding: 4px 12px;
&.header {
font-weight: 600;
}
`;
interface DataGridCellProps {
rowType?: "default" | "header";
gridRow?: string | number;
gridColumn?: string | number;
className?: string;
@@ -64,11 +69,13 @@ interface DataGridCellProps {
}
export function DataGridCell({
rowType = "default",
gridRow,
gridColumn,
className,
children,
}: DataGridCellProps) {
className = `${className || ""} ${rowType}`;
return (
<StyledDataGridCell
$gridRow={gridRow}

View File

@@ -71,13 +71,13 @@ export const ModeledMethodDataGrid = ({
<DataGrid gridTemplateColumns={gridTemplateColumns}>
{someMethodsAreVisible && (
<>
<DataGridCell>API or method</DataGridCell>
<DataGridCell>Model type</DataGridCell>
<DataGridCell>Input</DataGridCell>
<DataGridCell>Output</DataGridCell>
<DataGridCell>Kind</DataGridCell>
<DataGridCell rowType="header">API or method</DataGridCell>
<DataGridCell rowType="header">Model type</DataGridCell>
<DataGridCell rowType="header">Input</DataGridCell>
<DataGridCell rowType="header">Output</DataGridCell>
<DataGridCell rowType="header">Kind</DataGridCell>
{viewState.showMultipleModels && (
<DataGridCell>
<DataGridCell rowType="header">
<ScreenReaderOnly>Add or remove models</ScreenReaderOnly>
</DataGridCell>
)}