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
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:
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:
----------------------<@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> ); };
return ( <Show>
</Show> ); };
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:
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:
----------------------<@652499665090117645> kapa.ai is still learning and improving, please let us know how it did by reacting below