boha_admin/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 26 Wiki Activity

feat(mui): add DataTable rowSx per-row style escape hatch

Browse Source 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
2026-06-07 00:31:28 +02:00
parent 3d1bd49ad6
commit 9ab2bd7ef2
1 changed files with 51 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/admin/ui/DataTable.tsx
View File

@@ -1,4 +1,5 @@
import type { ReactNode } from "react";
import type { SxProps, Theme } from "@mui/material/styles";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
@@ -36,6 +37,8 @@ export interface DataTableProps<T> {
onRowClick?: (row: T) => void;
/** When it returns true, the row is tinted with the error palette (danger highlight). */
rowDanger?: (row: T) => boolean;
/** Per-row style escape hatch (merged last) for arbitrary status tints. */
rowSx?: (row: T) => SxProps<Theme>;
empty?: ReactNode;
/** Server-sort wiring: active key (matches a column's sortKey), direction, handler. */
sortBy?: string;
@@ -51,6 +54,7 @@ export default function DataTable<T>({
rowInactive,
onRowClick,
rowDanger,
rowSx,
empty,
sortBy,
sortDir,
@@ -117,50 +121,54 @@ export default function DataTable<T>({
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow
key={rowKey(row)}
hover
onClick={onRowClick ? () => onRowClick(row) : undefined}
sx={[
onRowClick ? { cursor: "pointer" } : {},
rowDanger?.(row)
? {
bgcolor: "error.light",
opacity: 0.88,
"&:hover": {
{rows.map((row) => {
const extra = rowSx?.(row);
return (
<TableRow
key={rowKey(row)}
hover
onClick={onRowClick ? () => onRowClick(row) : undefined}
sx={[
onRowClick ? { cursor: "pointer" } : {},
rowDanger?.(row)
? {
bgcolor: "error.light",
filter: "brightness(0.97)",
},
}
: {},
rowInactive?.(row) ? { opacity: 0.55 } : {},
]}
>
{columns.map((c) => (
<TableCell
key={c.key}
align={c.align}
sx={{
fontSize: ".8rem",
...(c.bold ? { fontWeight: 500 } : {}),
...(c.mono
? { fontFamily: "'DM Mono', Menlo, monospace" }
: {}),
...(hasWidths
? {
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}
: {}),
}}
>
{c.render(row)}
</TableCell>
))}
</TableRow>
))}
opacity: 0.88,
"&:hover": {
bgcolor: "error.light",
filter: "brightness(0.97)",
},
}
: {},
rowInactive?.(row) ? { opacity: 0.55 } : {},
...(Array.isArray(extra) ? extra : extra ? [extra] : []),
]}
>
{columns.map((c) => (
<TableCell
key={c.key}
align={c.align}
sx={{
fontSize: ".8rem",
...(c.bold ? { fontWeight: 500 } : {}),
...(c.mono
? { fontFamily: "'DM Mono', Menlo, monospace" }
: {}),
...(hasWidths
? {
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}
: {}),
}}
>
{c.render(row)}
</TableCell>
))}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>