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.

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>