Merge pull request #6596 from mjomble/expandable-panel-class

Added expandedPanel to Datagrid styles
marmelab · Oct 15, 2021 · 179dd1d · 179dd1d
2 parents 315e82e + db3f8a7
commit 179dd1d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/docs/List.md b/docs/List.md
@@ -2394,6 +2394,7 @@ The `Datagrid` component accepts the usual `className` prop but you can override
 | `expandIconCell` | Applied to each expandable cell                               |
 | `expandIcon`     | Applied to each expand icon                                   |
 | `expanded`       | Applied to each expanded icon                                 |
+| `expandedPanel`  | Applied to each expandable panel                              |
 | `checkbox`       | Applied to each checkbox cell                                 |
 
 You can customize the `<Datagrid>` styles by passing a `classes` object as prop, through `useStyles()`. Here is an example:

diff --git a/packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx b/packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx
@@ -41,7 +41,12 @@ const computeNbColumns = (expand, children, hasBulkActions) =>
           React.Children.toArray(children).filter(child => !!child).length // non-null children
         : 0; // we don't need to compute columns if there is no expand panel;
 
-const defaultClasses = { expandIconCell: '', checkbox: '', rowCell: '' };
+const defaultClasses = {
+    expandIconCell: '',
+    checkbox: '',
+    rowCell: '',
+    expandedPanel: '',
+};
 
 const DatagridRow: FC<DatagridRowProps> = React.forwardRef((props, ref) => {
     const {
@@ -204,7 +209,11 @@ const DatagridRow: FC<DatagridRowProps> = React.forwardRef((props, ref) => {
                 )}
             </TableRow>
             {expandable && expanded && (
-                <TableRow key={`${id}-expand`} id={`${id}-expand`}>
+                <TableRow
+                    key={`${id}-expand`}
+                    id={`${id}-expand`}
+                    className={classes.expandedPanel}
+                >
                     <TableCell colSpan={nbColumns}>
                         {isValidElement(expand)
                             ? cloneElement(expand, {

diff --git a/packages/ra-ui-materialui/src/list/datagrid/useDatagridStyles.tsx b/packages/ra-ui-materialui/src/list/datagrid/useDatagridStyles.tsx
@@ -45,6 +45,7 @@ const useDatagridStyles = makeStyles(
         expanded: {
             transform: 'rotate(0deg)',
         },
+        expandedPanel: {},
     }),
     { name: 'RaDatagrid' }
 );