Add <Datagrid rowSx> prop to customize row style for each record

docs/Datagrid.md

@@ -51,7 +51,7 @@ Here are all the props accepted by the component:
 * [`isRowExpandable`](#isrowexpandable)
 * [`isRowSelectable`](#isrowselectable)
 * [`optimized`](#optimized-better-performance-for-large-tables)
-* [`rowStyle`](#rowstyle)
+* [`rowSx`](#rowsx)
 * [`rowClick`](#rowclick)
 * [`size`](#size)
 * [`sx`](#sx-css-api)
@@ -620,21 +620,21 @@ const PostList = () => (
 );
 ```
 
-## `rowStyle`
+## `rowSx`
 
-You can customize the `<Datagrid>` row style (applied to the `<tr>` element) based on the record, thanks to the `rowStyle` prop, which expects a function. React-admin calls this function for each row, passing the current record and index as arguments. The function should return a style object, which react-admin uses as a `<tr style>` prop. 
+You can customize the styles of rows and cells in `<Datagrid>` (applied to the `<DatagridRow>` element) based on the record, thanks to the `rowSx` prop, which expects a function. React-admin calls this function for each row, passing the current record and index as arguments. The function should return a Material UI `sx`, which react-admin uses as a `<TableRow sx>` prop. 
 
 For instance, this allows to apply a custom background to the entire row if one value of the record - like its number of views - passes a certain threshold.
 
 ```jsx
 import { List, Datagrid } from 'react-admin';
 
-const postRowStyle = (record, index) => ({
+const postRowSx = (record, index) => ({
     backgroundColor: record.nb_views >= 500 ? '#efe' : 'white',
 });
 export const PostList = () => (
     <List>
-        <Datagrid rowStyle={postRowStyle}>
+        <Datagrid rowSx={postRowSx}>
             ...
         </Datagrid>
     </List>

docs/SimpleList.md

@@ -28,7 +28,7 @@ export const PostList = () => (
             secondaryText={record => `${record.views} views`}
             tertiaryText={record => new Date(record.published_at).toLocaleDateString()}
             linkType={record => record.canEdit ? "edit" : "show"}
-            rowStyle={record => ({ backgroundColor: record.nb_views >= 500 ? '#efe' : 'white' })}
+            rowSx={record => ({ backgroundColor: record.nb_views >= 500 ? '#efe' : 'white' })}
         />
     </List>
 );
@@ -46,7 +46,7 @@ It accepts the following props:
 * [`leftIcon`](#lefticon)
 * [`rightAvatar`](#rightavatar)
 * [`rightIcon`](#righticon)
-* [`rowStyle`](#rowstyle)
+* [`rowSx`](#rowsx)
 * [`empty`](#empty)
 
 ## `leftAvatar`
@@ -157,20 +157,20 @@ This prop should be a function returning an `<Avatar>` component. When present,
 
 This prop should be a function returning an `<Icon>` component. When present, the `<ListItem>` renders a `<ListIcon>` after the `<ListItemText>`.
 
-## `rowStyle`
+## `rowSx`
 
 This optional prop should be a function, which gets called for each row. It receives the current record and index as arguments, and should return a style object. The style object is applied to the `<ListItem>` styles prop.
 
 ```jsx
 import { List, SimpleList } from 'react-admin';
 
-const postRowStyle = (record, index) => ({
+const postRowSx = (record, index) => ({
     backgroundColor: record.nb_views >= 500 ? '#efe' : 'white',
 });
 
 export const PostList = () => (
     <List>
-        <SimpleList primaryText={record => record.title} rowStyle={postRowStyle} />
+        <SimpleList primaryText={record => record.title} rowSx={postRowSx} />
     </List>
 );
 ```

examples/demo/src/reviews/ReviewListDesktop.tsx

@@ -10,7 +10,7 @@ import {
 import ProductReferenceField from '../products/ProductReferenceField';
 import CustomerReferenceField from '../visitors/CustomerReferenceField';
 import StarRatingField from './StarRatingField';
-import rowStyle from './rowStyle';
+import rowSx from './rowSx';
 
 import BulkAcceptButton from './BulkAcceptButton';
 import BulkRejectButton from './BulkRejectButton';
@@ -30,7 +30,7 @@ const ReviewsBulkActionButtons = () => (
 const ReviewListDesktop = ({ selectedRow }: ReviewListDesktopProps) => (
     <Datagrid
         rowClick="edit"
-        rowStyle={rowStyle(selectedRow)}
+        rowSx={rowSx(selectedRow)}
         optimized
         bulkActionButtons={<ReviewsBulkActionButtons />}
         sx={{

examples/demo/src/reviews/rowStyle.tsx → examples/demo/src/reviews/rowSx.tsx

@@ -1,21 +1,20 @@
 import green from '@mui/material/colors/green';
+import type { SxProps } from '@mui/material';
 import orange from '@mui/material/colors/orange';
 import red from '@mui/material/colors/red';
-import { useTheme } from '@mui/material/styles';
 import { Identifier } from 'react-admin';
 
 import { Review } from './../types';
 
-const rowStyle = (selectedRow?: Identifier) => (record: Review) => {
-    const theme = useTheme();
+const rowSx = (selectedRow?: Identifier) => (record: Review): SxProps => {
     let style = {};
     if (!record) {
         return style;
     }
     if (selectedRow && selectedRow === record.id) {
         style = {
             ...style,
-            backgroundColor: theme.palette.action.selected,
+            backgroundColor: 'action.selected',
         };
     }
     if (record.status === 'accepted')
@@ -42,4 +41,4 @@ const rowStyle = (selectedRow?: Identifier) => (record: Review) => {
     return style;
 };
 
-export default rowStyle;
+export default rowSx;

packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
+import type { SxProps } from '@mui/material';
 import { isValidElement, ReactNode, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import {
@@ -44,7 +45,7 @@ import { ListNoResults } from '../ListNoResults';
  * - rightAvatar: same
  * - rightIcon: same
  * - linkType: 'edit' or 'show', or a function returning 'edit' or 'show' based on the record
- * - rowStyle: function returning a style object based on (record, index)
+ * - rowSx: function returning a sx object based on (record, index)
  *
  * @example // Display all posts as a List
  * const postRowStyle = (record, index) => ({
@@ -58,7 +59,7 @@ import { ListNoResults } from '../ListNoResults';
  *             tertiaryText={record =>
  *                 new Date(record.published_at).toLocaleDateString()
  *             }
- *             rowStyle={postRowStyle}
+ *             rowSx={postRowStyle}
  *          />
  *     </List>
  * );
@@ -78,7 +79,7 @@ export const SimpleList = <RecordType extends RaRecord = any>(
         rightIcon,
         secondaryText,
         tertiaryText,
-        rowStyle,
+        rowSx,
         ...rest
     } = props;
     const { data, isLoading, total } = useListContext<RecordType>(props);
@@ -134,11 +135,7 @@ export const SimpleList = <RecordType extends RaRecord = any>(
                             resource={resource}
                             id={record.id}
                             record={record}
-                            style={
-                                rowStyle
-                                    ? rowStyle(record, rowIndex)
-                                    : undefined
-                            }
+                            sx={rowSx?.(record, rowIndex)}
                         >
                             {leftIcon && (
                                 <ListItemIcon>
@@ -248,7 +245,7 @@ SimpleList.propTypes = {
         PropTypes.element,
         PropTypes.string,
     ]),
-    rowStyle: PropTypes.func,
+    rowSx: PropTypes.func,
 };
 
 export type FunctionToElement<RecordType extends RaRecord = any> = (
@@ -269,7 +266,7 @@ export interface SimpleListProps<RecordType extends RaRecord = any>
     rightIcon?: FunctionToElement<RecordType>;
     secondaryText?: FunctionToElement<RecordType> | ReactElement | string;
     tertiaryText?: FunctionToElement<RecordType> | ReactElement | string;
-    rowStyle?: (record: RecordType, index: number) => any;
+    rowSx?: (record: RecordType, index: number) => SxProps;
     // can be injected when using the component without context
     resource?: string;
     data?: RecordType[];

packages/ra-ui-materialui/src/list/datagrid/Datagrid.stories.tsx

@@ -134,11 +134,14 @@ export const Hover = () => (
     </Wrapper>
 );
 
-export const RowStyle = () => (
+export const RowSx = () => (
     <Wrapper>
         <Datagrid
-            rowStyle={(record: any) => ({
+            rowSx={(record: any) => ({
                 backgroundColor: record.id % 2 ? 'white' : '#eee',
+                ...(record.year > 1900 && {
+                    '& td.column-year': { color: 'primary.main' },
+                }),
             })}
         >
             <TextField source="id" />

packages/ra-ui-materialui/src/list/datagrid/Datagrid.tsx

@@ -19,7 +19,7 @@ import {
     RaRecord,
     SortPayload,
 } from 'ra-core';
-import { Table, TableProps } from '@mui/material';
+import { Table, TableProps, SxProps } from '@mui/material';
 import clsx from 'clsx';
 import union from 'lodash/union';
 import difference from 'lodash/difference';
@@ -51,18 +51,17 @@ const defaultBulkActionButtons = <BulkDeleteButton />;
  *  - isRowExpandable
  *  - isRowSelectable
  *  - optimized
- *  - rowStyle
  *  - rowClick
  *  - size
  *  - sx
  *
  * @example // Display all posts as a datagrid
- * const postRowStyle = (record, index) => ({
+ * const postRowSx = (record, index) => ({
  *     backgroundColor: record.nb_views >= 500 ? '#efe' : 'white',
  * });
  * export const PostList = () => (
  *     <List>
- *         <Datagrid rowStyle={postRowStyle}>
+ *         <Datagrid rowSx={postRowSx}>
  *             <TextField source="id" />
  *             <TextField source="title" />
  *             <TextField source="body" />
@@ -129,7 +128,7 @@ export const Datagrid: FC<DatagridProps> = React.forwardRef((props, ref) => {
         isRowExpandable,
         resource,
         rowClick,
-        rowStyle,
+        rowSx,
         size = 'small',
         sx,
         expandSingle = false,
@@ -272,7 +271,7 @@ export const Datagrid: FC<DatagridProps> = React.forwardRef((props, ref) => {
                                 hover,
                                 onToggleItem: handleToggleItem,
                                 resource,
-                                rowStyle,
+                                rowSx,
                                 selectedIds,
                                 isRowSelectable,
                             },
@@ -318,7 +317,7 @@ Datagrid.propTypes = {
         PropTypes.func,
         PropTypes.bool,
     ]),
-    rowStyle: PropTypes.func,
+    rowSx: PropTypes.func,
     selectedIds: PropTypes.arrayOf(PropTypes.any),
     setSort: PropTypes.func,
     total: PropTypes.number,
@@ -346,7 +345,7 @@ export interface DatagridProps<RecordType extends RaRecord = any>
     isRowExpandable?: (record: RecordType) => boolean;
     optimized?: boolean;
     rowClick?: string | RowClickFunction | false;
-    rowStyle?: (record: RecordType, index: number) => any;
+    rowSx?: (record: RecordType, index: number) => SxProps;
     size?: 'medium' | 'small';
     // can be injected when using the component without context
     sort?: SortPayload;

packages/ra-ui-materialui/src/list/datagrid/DatagridBody.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { cloneElement, memo, FC, ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import { TableBody, TableBodyProps } from '@mui/material';
+import { SxProps, TableBody, TableBodyProps } from '@mui/material';
 import clsx from 'clsx';
 import { Identifier, RaRecord } from 'ra-core';
 
@@ -21,7 +21,7 @@ const DatagridBody: FC<DatagridBodyProps> = React.forwardRef(
             resource,
             row,
             rowClick,
-            rowStyle,
+            rowSx,
             selectedIds,
             isRowSelectable,
             ...rest
@@ -52,7 +52,7 @@ const DatagridBody: FC<DatagridBodyProps> = React.forwardRef(
                         rowClick,
                         selectable: !isRowSelectable || isRowSelectable(record),
                         selected: selectedIds?.includes(record.id),
-                        style: rowStyle ? rowStyle(record, rowIndex) : null,
+                        sx: rowSx?.(record, rowIndex),
                     },
                     children
                 )
@@ -79,7 +79,7 @@ DatagridBody.propTypes = {
         PropTypes.func,
         PropTypes.bool,
     ]),
-    rowStyle: PropTypes.func,
+    rowSx: PropTypes.func,
     selectedIds: PropTypes.arrayOf(PropTypes.any),
     styles: PropTypes.object,
     isRowSelectable: PropTypes.func,
@@ -111,7 +111,7 @@ export interface DatagridBodyProps extends Omit<TableBodyProps, 'classes'> {
     resource?: string;
     row?: ReactElement;
     rowClick?: string | RowClickFunction | false;
-    rowStyle?: (record: RaRecord, index: number) => any;
+    rowSx?: (record: RaRecord, index: number) => SxProps;
     selectedIds?: Identifier[];
     isRowSelectable?: (record: RaRecord) => boolean;
 }