How do I have more complex layouts in `react-admin` "Show" and "Edit" and "Create" screens?

Question

I'm trying to build on react-admin. The base structure is this:

<Show {...props} >
  <SimpleShowLayout>
    <TextField source="id" />
    <TextField source="name" />
  </SimpleShowLayout>
</Show>

I'm looking to do something like this:

<Show {...props} >
  <div className="row">
    <div className="col-sm-6">
      <TextField source="id" />
    </div>
    <div className="col-sm-6">
      <TextField source="name" />
    </div>
  </div>
</Show>

Twobit

Answer 1

We need to update our documentation about this. We recently decoupled components with logic, that we name XXXController (ListController, CreateController, etc) in the ra-core package and UI components (List, Create, etc) in the ra-ui-materialui package which the controllers.

Think about the react-admin package as a distribution of react-admin with material-ui UI. When heavy customization is needed, you can use the controllers directly.

For now, you'll have to explore the source code to fully understand how to use them.

Here's an example:

import { ShowController, ShowView, SimpleShowLayout, TextField } from 'react-admin';

const UserShow = props => (
    <ShowController {...props}>
        {controllerProps => 
            // You're on your own here
        }
    </ShowController>
);

Urethra

That works, but I lose the header, which I need to modify anyway. How would you add the title, and page frame back in? – Twobit

I got it. For anyone else... I wrapped my content in <Paper>, then added inside it: <Header title="Entity" actions={this.headerActions()}></Header> – Twobit

Yes, because ShowController does not display anything. You really are on your own ;) – Urethra

Isn't there any way to have some extra bits in the form - like <p>, <h3> elements even? Every single element in a <SimpleForm> appears to be treated like a component - and passed props which cause errors/warnings in the console. Some of the layout needs lots of classic HTML treatment but it seems <SimpleForm> only expects specific components to be inside it – Scandinavian

actually see https://mcmap.net/q/912184/-custom-layout-in-simpleform-component-on-react-admin - I've just cobbled together something that does this for me – Scandinavian