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

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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<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,7 +121,9 @@ export default function DataTable<T>({
           </TableRow>
         </TableHead>
         <TableBody>
-          {rows.map((row) => (
+          {rows.map((row) => {
+            const extra = rowSx?.(row);
+            return (
               <TableRow
                 key={rowKey(row)}
                 hover
@@ -135,6 +141,7 @@ export default function DataTable<T>({
                       }
                     : {},
                   rowInactive?.(row) ? { opacity: 0.55 } : {},
+                  ...(Array.isArray(extra) ? extra : extra ? [extra] : []),
                 ]}
               >
                 {columns.map((c) => (
@@ -160,7 +167,8 @@ export default function DataTable<T>({
                   </TableCell>
                 ))}
               </TableRow>
-          ))}
+            );
+          })}
         </TableBody>
       </Table>
     </TableContainer>