13

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.

Best Mamgu Ever
  • 303
  • 2
  • 10
  • Does this answer your question? [How do I have more complex layouts in \`react-admin\` "Show" and "Edit" and "Create" screens?](https://stackoverflow.com/questions/50992309/how-do-i-have-more-complex-layouts-in-react-admin-show-and-edit-and-creat) – Kia Kaha Sep 26 '20 at 14:34

2 Answers2

2

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>
Kia Kaha
  • 1,565
  • 1
  • 17
  • 39
0

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

Pedro Vieira
  • 2,266
  • 1
  • 20
  • 35
  • 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 – Pedro Vieira Apr 18 '19 at 18:04
  • 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) – acidjunk Feb 12 '20 at 23:00
  • https://github.com/marmelab/react-admin/issues/3154#ref-pullrequest-507330980 – acidjunk Feb 12 '20 at 23:18
  • Textfields are not rendered. – mcfly soft Oct 14 '20 at 09:50