graceful-beige•2y ago

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

kapa.ai•2y ago

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:

import { useTable } from "@refinedev/core";

const UserList: React.FC = () => {
  const { tableProps } = useTable({
    resource: "users",
  });

  // ...
};

import { useTable } from "@refinedev/core";

const UserList: React.FC = () => {
  const { tableProps } = useTable({
    resource: "users",
  });

  // ...
};

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:

import { useTable } from "@refinedev/core";

const UserProfileList: React.FC = ({ userId }) => {
  const { tableProps } = useTable({
    resource: `/users/${userId}/user_profiles`,
  });

  // ...
};

import { useTable } from "@refinedev/core";

const UserProfileList: React.FC = ({ userId }) => {
  const { tableProps } = useTable({
    resource: `/users/${userId}/user_profiles`,
  });

  // ...
};

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: ----------------------

kapa.ai•2y ago

<@336843331416096768> kapa.ai is still learning and improving, please let us how it did by reacting below

graceful-beigeOP•2y ago

Can i use useDataGrid to display the data? Can i use useDataGrid to display the data? @kapa.ai

kapa.ai•2y ago

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:

import { useDataGrid } from "@refinedev/mui";

const UserList: React.FC = () => {
  const { dataGridProps } = useDataGrid({
    resource: "users",
  });

  // ...
};

import { useDataGrid } from "@refinedev/mui";

const UserList: React.FC = () => {
  const { dataGridProps } = useDataGrid({
    resource: "users",
  });

  // ...
};

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:

import { useDataGrid } from "@refinedev/mui";

const UserProfileList: React.FC = ({ userId }) => {
  const { dataGridProps } = useDataGrid({
    resource: `/users/${userId}/user_profiles`,
  });

  // ...
};

import { useDataGrid } from "@refinedev/mui";

const UserProfileList: React.FC = ({ userId }) => {
  const { dataGridProps } = useDataGrid({
    resource: `/users/${userId}/user_profiles`,
  });

  // ...
};

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: ----------------------

kapa.ai•2y ago

<@336843331416096768> kapa.ai is still learning and improving, please let us how it did by reacting below