Search code examples
reactjsadmin-on-rest

Admin on rest - How to display a Datagrid withtout a ReferenceField?


In one of my API endpoint I have a resource like that :

{
    "name": "Foo",
    "anotherField": "anotherValue"
    "users": [
        {
          "id": "XXX-XXX-XXX-XXX"
          "firstname": "Clément",
          "lastname": "Le Biez"
        }
    ]
}

And I would like to display it in the Show view with a Datagrid component :

      <Show {...props}>
        <SimpleShowLayout>
            <TextField source="id" />
            <TextField source="name" />
            <TextField source="anotherField" />
            {# Here use data grid for display users #}
            <Datagrid>

            </Datagrid>
        </SimpleShowLayout>
    </Show>

I don't care about ReferenceField of anything like that because I already have users resources in the main entity. What's the tips for use Datagrid without List or Reference Component?


Solution

  • Datagrid is just an iterator component. It iterates through the a list of 'resource' provided by its parent.

    A look at the source code for Datagrid shows that it accepts the following properties from its parent

    resource, children, ids, isLoading, data, currentSort, basePath
    

    1) here the resource is an array of values to be displayed

    2) children are the various columns you want to display

    3) ids are the ids of the resources above ^^

    4) isLoading is provided by the parent but is a boolean, try setting default values for it and see what will work

    5) basePath is the path of the route. If you log the props being passed to your show component, you will probably find it. Just pass it down the chain to datagrid.

    If none of this works, then know that Datagrid is just a thin layer on top of the MUI Table component. You can just use that straight and really customize it for your needs