CODEWITHSUNDEEP
reactjsoverridingreact-admin
Christiaan Westerbeek
Christiaan Westerbeek

Reputation: 11137

How can I override just one sub file in react-admin?

I want a fancier DataGrid by adding React Flip Move wherever Datagrid is used. It's super easy. To DatagridBody.js I would just need to add this

--- a/packages/ra-ui-materialui/src/list/DatagridBody.js
+++ b/packages/ra-ui-materialui/src/list/DatagridBody.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import shouldUpdate from 'recompose/shouldUpdate';
 import TableBody from '@material-ui/core/TableBody';
 import classnames from 'classnames';
+import FlipMove from 'react-flip-move';

 import DatagridRow from './DatagridRow';

@@ -25,6 +26,7 @@ const DatagridBody = ({
     ...rest
 }) => (
     <TableBody className={classnames('datagrid-body', className)} {...rest}>
+        <FlipMove>
         {ids.map((id, rowIndex) => (
             <DatagridRow
                 basePath={basePath}
@@ -46,6 +48,7 @@ const DatagridBody = ({
                 {children}
             </DatagridRow>
         ))}
+        </FlipMove>
     </TableBody>
 );

How can I override this one file of react-admin without also needing to copy (and maintain!) Datagrid.js ?

Update. Apparently, decorating a react-admin is also a way of changing behavior without the need for a custom component.

Upvotes: 1

Views: 713

Answers (1)

M&#225;rio Ferreiro
M&#225;rio Ferreiro

Reputation: 317

I don't think you can with only your source code since that component is not even exported by RA. In the file where DatagridBody appears the component which is exported is PureDatagridBody an HoC of Datagrid, meaning if you extend the component it will have to be the PureDatagridBody because is the exported one and you have to import first in order to extend. The same goes with Datagrid.

However you can edit the source code of RA in the node_module as you like and recompile it to change have effect. Or clone RA, make changes as you like, recompile for the same reasons, and use that copy as if it was RA. I personally don't recommend doing that, since you can't update RA without loosing changes, or new bugs can be added that only you can fix them.

The best solution is to submit a feature request as an issue, requesting possibility to have custom Rows, Columns, whatever you like in Datagrid passed as props.

Upvotes: 1

Related Questions