How to organise a Show layout in React Admin using a Material UI Grid

Question

I've created a number of Show views in a new React-Admin project. Rather than have the fields just form a single column I would like to use Material UI's Grid component to arrange them into a more efficient and helpful layout. Unfortunately this stops React Admin's ...ShowLayout components from rendering the Field components inside them properly.

I was hoping to be able to do something like this:

<Show {...props}>
    <SimpleShowLayout>
        <Grid container>
            <Grid item>
                <TextField source="firstName" />
            </Grid>
            <Grid item>
                <TextField source="lastName" />
            </Grid>
        </Grid>      
    </SimpleShowLayout>
</Show>

I've also had a go at creating wrapper components to try to ensure the right props get passed along to the Field components, to no avail. How can I better arrange the fields in a layout? Do I have to fall back to "manually" styling the contents of a show layout using custom styles? If so that seems a shame given that RA uses MUI so heavily for rendering and it already provides a framework for doing this.

Lemuel

Does this answer your question? How do I have more complex layouts in `react-admin` "Show" and "Edit" and "Create" screens? – Slippage

Answer 1

In case somebody is still stumbling upon this issue - just passing the props forward is not enough based on how the SimpleShowLayout works behind the scenes.

I am working on a react-admin npm package where I have implemented a basic recursive GridShowLayout. It allows you to nest as many <Grid> components as needed like @Pedro Viera have shown and the react-admin fields will still recieve the needed props accordinly.

There is also a BoxedShowLayout, you can check it out here: ra-compact-ui/GridShowLayout

Example:

<Show {...props}>
    <GridShowLayout>
        <Grid container>
            <Grid >
                <TextField source="firstName" />
            </Grid >
            <Grid >
                <TextField source="lastName" />
            </Grid >
        </Grid >      
    </GridShowLayout>
</Show>

Slippage

Answer 2

I tried to style my app with grids and it was a nightmare, I was advised to use flexboxes instead, the advantage is that it is extremely responsive. You could do it like this:

import { unstable_Box as Box } from '@material-ui/core/Box';

<Show {...props}>
    <SimpleShowLayout>
        <Box display="flex">
            <Box>
                <TextField source="firstName" />
            </Box>
            <Box>
                <TextField source="lastName" />
            </Box>
        </Box>      
    </SimpleShowLayout>
</Show>

And using the desired configurations from the material-ui documentation, like

<Box display="flex" flexWrap="wrap" justifyContent="center" alignItems="center">

Haplosis

If you really want to use Grid, you could style them using lg, sm, xs, etc, to configure the size of the component. Knowing that the whole screen has 12 unitis of width, if you want two elements side by side, for example, use the a configuration like: sm={6} for each – Haplosis

Box isn't available in the ancient React-Admin Material-UI version. And this solution would probably also not render the children, like TextField (in React-Admin pages they somehow don't receive the props) – Suzetta

github.com/marmelab/react-admin/issues/… – Suzetta

Textfields are not rendered. – Roussel