diff --git a/src/admin/ui/DataTable.tsx b/src/admin/ui/DataTable.tsx index 2dc8fb7..65d44bc 100644 --- a/src/admin/ui/DataTable.tsx +++ b/src/admin/ui/DataTable.tsx @@ -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 { 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; empty?: ReactNode; /** Server-sort wiring: active key (matches a column's sortKey), direction, handler. */ sortBy?: string; @@ -51,6 +54,7 @@ export default function DataTable({ rowInactive, onRowClick, rowDanger, + rowSx, empty, sortBy, sortDir, @@ -117,50 +121,54 @@ export default function DataTable({ - {rows.map((row) => ( - onRowClick(row) : undefined} - sx={[ - onRowClick ? { cursor: "pointer" } : {}, - rowDanger?.(row) - ? { - bgcolor: "error.light", - opacity: 0.88, - "&:hover": { + {rows.map((row) => { + const extra = rowSx?.(row); + return ( + onRowClick(row) : undefined} + sx={[ + onRowClick ? { cursor: "pointer" } : {}, + rowDanger?.(row) + ? { bgcolor: "error.light", - filter: "brightness(0.97)", - }, - } - : {}, - rowInactive?.(row) ? { opacity: 0.55 } : {}, - ]} - > - {columns.map((c) => ( - - {c.render(row)} - - ))} - - ))} + 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) => ( + + {c.render(row)} + + ))} + + ); + })}