CODEWITHSUNDEEP
material-uireact-admin
Best Mamgu Ever
Best Mamgu Ever

Reputation: 303

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

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.

Upvotes: 13

Views: 5366

Answers (2)

Kia Kaha
Kia Kaha

Reputation: 1781

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>

Upvotes: 3

Pedro Vieira
Pedro Vieira

Reputation: 2316

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">

Upvotes: 0

Related Questions