rare-sapphire•9mo ago

Show single record on a page AntD Refine

I have a list page <List> <Table {...tableProps} rowKey="id"> <Table.Column/><Table.Column/><Table.Column/><Table.Column/> </List> I want when the user clicks on a row, navigate /show/:id, where the information of that row show. I'm using AntD. What is the conventional way to do this?

5 Replies

kapa.ai•9mo ago

Hi @lamcong. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can achieve this by using the onRow prop of the <Table /> component to pass onClick handlers to each row. This will trigger a navigation to the show page of the clicked record. You can use the useNavigation or useGo hooks provided by Refine to handle the navigation. Here is an example of how you can do this:

import { useTable, useNavigation } from "@refinedev/antd";  
import { Table } from "antd";  

export const UserList = () => {  
 const { tableProps } = useTable<IFormValue>();  
 const { go } = useNavigation();

 return (  
 <List>  
 <Table 
    {...tableProps} 
    rowKey="id"
    onRow={(record) => ({
        onClick: () => {
            go(`/show/${record.id}`);
        },
    })}
 >  
 <Table.Column dataIndex="firstName" title="First Name" />  
 <Table.Column dataIndex="email" title="Email" />  
 <Table.Column dataIndex="skills" title="Skills" />  
 </Table>  
 </List>  
 );  
}

import { useTable, useNavigation } from "@refinedev/antd";  
import { Table } from "antd";  

export const UserList = () => {  
 const { tableProps } = useTable<IFormValue>();  
 const { go } = useNavigation();

 return (  
 <List>  
 <Table 
    {...tableProps} 
    rowKey="id"
    onRow={(record) => ({
        onClick: () => {
            go(`/show/${record.id}`);
        },
    })}
 >  
 <Table.Column dataIndex="firstName" title="First Name" />  
 <Table.Column dataIndex="email" title="Email" />  
 <Table.Column dataIndex="skills" title="Skills" />  
 </Table>  
 </List>  
 );  
}

In this example, when a row is clicked, the go function is called with the URL of the show page of the clicked record. You can find more information about the useNavigation hook in the Refine documentation (https://refine.dev/docs/routing/hooks/use-navigation/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

rare-sapphireOP•9mo ago

That worked! @kapa.ai Now I want to show information on the "show" page import { Show } from "@refinedev/antd"; type Props = React.PropsWithChildren<{}>; export const PatientShow: React.FC<Props> = () => {
return ( <Show>
</Show> ); };

kapa.ai•9mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To display information on the "show" page, you can use the useShow hook provided by Refine. This hook fetches the data of a single record from your API. You can then display this data inside the <Show /> component. Here is an example of how you can do this:

import { Show, useShow } from "@refinedev/antd";
import { Typography } from "antd";

const { Title, Text } = Typography;

type Props = React.PropsWithChildren<{}>;

export const PatientShow: React.FC<Props> = () => {
    const { queryResult } = useShow<IPatient>();
    const { data, isLoading } = queryResult;
    const record = data?.data;

    return (
        <Show isLoading={isLoading}>
            <Title level={5}>Id</Title>
            <Text>{record?.id}</Text>

            <Title level={5}>Name</Title>
            <Text>{record?.name}</Text>

            <Title level={5}>Age</Title>
            <Text>{record?.age}</Text>

            {/* Add more fields as needed */}
        </Show>
    );
};

import { Show, useShow } from "@refinedev/antd";
import { Typography } from "antd";

const { Title, Text } = Typography;

type Props = React.PropsWithChildren<{}>;

export const PatientShow: React.FC<Props> = () => {
    const { queryResult } = useShow<IPatient>();
    const { data, isLoading } = queryResult;
    const record = data?.data;

    return (
        <Show isLoading={isLoading}>
            <Title level={5}>Id</Title>
            <Text>{record?.id}</Text>

            <Title level={5}>Name</Title>
            <Text>{record?.name}</Text>

            <Title level={5}>Age</Title>
            <Text>{record?.age}</Text>

            {/* Add more fields as needed */}
        </Show>
    );
};

In this example, IPatient is the type of the data you are fetching. You should replace it with the actual type of your data. The isLoading prop of the <Show /> component is used to display a loading indicator while the data is being fetched. You can find more information about the useShow hook in the Refine documentation (https://refine.dev/docs/api-references/hooks/data/useShow/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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