How to display a list of child elements on the show page?

Question

myAPI has 3 tables,

• Groups, 1group has many users(one-to-many)
• Users, 1user has many posts(one-to-many)
• Posts (no children)

In "/groups/:group_id/show", you can see the status of a group. What I want to do is to have the show page show the details of the element and list the children that have that element as a parent. If you click on one of the children in the list, it will display the details of the element and its children in the list as well. In other words, I want to embed the list in the show and create a nest structure.

I have completed the tutorial on React-admin. In the tutorial, when I click on an item from the list view of Posts, the detailed information of that post is displayed. /posts/posts_id/show. This page is rendered using simpleShowLayout, but if I want to do more list views on this page, what should I do?

In "/groups/", send a request to "api_endpoint/grops". If I want to nest them "groups/group_id/show" will send the request to "api_endpoint/groups/group_id".

I think I need to create the dataprovider and showlayout by myself, is that correct? I don't know where to start, so could you give me some advice?

Answer 1

Inside your "SimpleShowLayout" for your Group, you will have to add a children of type "ReferenceManyField"

For ex:

<SimpleShowLayout {...props}>
    {/* Here you are in the show context of 1 Group *}
    <TextField source="name"/> {/* Name of the group *}
    <ReferenceManyField reference="Users" source="id" target="GroupId">
        {/* Here you are in the list context of Users, for all the users whose GroupId is equal to the id of the currently shown group *}
        ...
    </ReferenceManyField>
</SimpleShowLayout/>

Then, as told in the link, as children of the "ReferenceManyField" you can use a Datagrid to show all the users.

If you want to go further, in a column of the Datagrid you can put another ReferenceManyFields that shows all the Posts for the user.