modern-teal
modern-teal•15mo ago

Can I do nested lists in Refine.

For example, I have a list of users and each user has a list of chats. There should be a user pages which shows a list of users and when I click on a particular user, it should show the list of chats for that particular user.
3 Replies
kapa.ai
kapa.ai•15mo ago
Hi @viataram. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To achieve this, you can use refine's List and Show components. The List component can be used to display a list of users, and the Show component can be used to display the details of a specific user, including their list of chats. Here's a basic example of how you can structure your components: 1. UserList Component: This component will display a list of users. You can use the List component from refine for this. 
import { List } from "@refinedev/mui";  

function UserList() {  
 return <List></List>;  
}  
export default UserList;
import { List } from "@refinedev/mui";  

function UserList() {  
 return <List></List>;  
}  
export default UserList;
(Source: refine.dev blog (https://refine.dev/blog/dynamic-forms-in-react-hook-form/)) 2. UserShow Component: This component will display the details of a specific user, including their list of chats. You can use the Show component from refine for this. 
import { Show } from "@refinedev/mui";  

function UserShow() {  
 return <Show></Show>;  
}  
export default UserShow;
import { Show } from "@refinedev/mui";  

function UserShow() {  
 return <Show></Show>;  
}  
export default UserShow;
Please note that the above code snippets are just placeholders. You would need to replace them with your actual implementation. You can also customize the route for a resource using the options prop. This can be useful if you want to customize the URL path that is used to access the details of a specific user. 
resources={[
  {
    name: "user",
    list: UserList,
    show: UserShow,
    options: { label: "User", route: "/user" },
  },
]}
resources={[
  {
    name: "user",
    list: UserList,
    show: UserShow,
    options: { label: "User", route: "/user" },
  },
]}
(Source: Discord support thread (https://discord.com/channels/837692625737613362/1115919535598477382)) Please refer to the refine documentation (https://refine.dev/docs/tutorial/adding-crud-pages/headless/index/) and refine blog (https://refine.dev/blog/dynamic-forms-in-react-hook-form/) for more detailed examples and explanations. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•15mo ago
<@812336585982345217> kapa.ai is still learning and improving, please let us know how it did by reacting below
adverse-sapphire
adverse-sapphire•15mo ago

Did you find this page helpful?