Add styling for header rows
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user