nested table inside show page
I want to display table that shows list of relations using nested API. I want to do similar to the picture, except the show page is for user data and the nested table is for displaying user's user_profiles.
user api route: /users
user_profile api route: /users/:id/user_profiles
How can i do this?
5 Replies
Hi @regnregn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To display a table with nested data from the
/users/:id/user_profiles
API route, you can use the useTable
hook with a custom resource
property. Here's an example of how you can achieve this:
1. First, fetch the data from the /users
endpoint using the useTable
hook:
2. Next, create a nested table for the user_profiles. You can use the useTable
hook again, but this time, pass the nested route as the resource
property:
3. Now, you can use the UserProfileList
component inside the UserList
component to display the nested table. You can pass the userId
as a prop to the UserProfileList
component.
Keep in mind that the code snippets provided above are based on the information available in the extracts. You may need to adjust them according to your specific API structure and data format.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@336843331416096768> kapa.ai is still learning and improving, please let us how it did by reacting below
deep-jade•2y ago
Can i use useDataGrid to display the data?
Can i use useDataGrid to display the data? @kapa.ai
Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, you can use
useDataGrid
to display the data. Here's an example of how you can achieve this:
1. First, fetch the data from the /users
endpoint using the useDataGrid
hook:
2. Next, create a nested table for the user_profiles. You can use the useDataGrid
hook again, but this time, pass the nested route as the resource
property:
3. Now, you can use the UserProfileList
component inside the UserList
component to display the nested table. You can pass the userId
as a prop to the UserProfileList
component.
Keep in mind that the code snippets provided above are based on the information available in the extracts. You may need to adjust them according to your specific API structure and data format. For more information on useDataGrid
, you can refer to the documentation (https://refine.dev/docs/api-reference/mui/hooks/useDataGrid).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@336843331416096768> kapa.ai is still learning and improving, please let us how it did by reacting below