ambitious-aqua•4mo ago

Clickable Title

I am using antd design and I have a title column, I would like to make the title rendered value clickable (like wordpress) it should then show the post that belongs to the clicked title

5 Replies

kapa.ai•4mo ago

Hi @BlackBearFTW. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To make the title clickable in a table using Ant Design with Refine, you can use the render prop of the <Table.Column /> component. This prop allows you to customize what content to render inside a table cell. Here's an example of how you can make the title clickable:

<Table.Column<IPost>  
 key="title"  
 dataIndex="title"  
 title="Title"  
 render={(value, record) => (
    <a onClick={() => show(record.id)}>{value}</a>
 )}  
/>

<Table.Column<IPost>  
 key="title"  
 dataIndex="title"  
 title="Title"  
 render={(value, record) => (
    <a onClick={() => show(record.id)}>{value}</a>
 )}  
/>

In this example, value is the title of the post and record is the entire post object. When you click on the title, it calls the show function with the id of the post, which can be used to fetch and display the post. Please note that you need to define the show function to fetch and display the post based on its id. This could involve using a modal, drawer, or navigating to a different route, depending on your application's requirements. For more information, you can refer to the following documentation: - Refine Ant Design <Table.Column /> Children (https://refine.dev/blog/refine-pixels-5#refine-ant-design-tablecolumn--children) - useEditableTable (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-editable-table#editing-by-clicking-to-row) - useModalForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form#usage) - useDrawerForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-drawer-form#usage) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

ambitious-aqua•4mo ago

@kapa.ai show is not a function?

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Apologies for the confusion. The show function I mentioned is actually a method from the useNavigation hook provided by Refine. This hook provides several methods to navigate around your application, including show, which is used to navigate to the "show" page of a resource. Here's how you can use it:

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

// Inside your component
const { show } = useNavigation();

<Table.Column<IPost>  
 key="title"  
 dataIndex="title"  
 title="Title"  
 render={(value, record) => (
    <a onClick={() => show("posts", record.id)}>{value}</a>
 )}  
/>

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

// Inside your component
const { show } = useNavigation();

<Table.Column<IPost>  
 key="title"  
 dataIndex="title"  
 title="Title"  
 render={(value, record) => (
    <a onClick={() => show("posts", record.id)}>{value}</a>
 )}  
/>

In this example, when you click on the title, it calls the show function with the resource name ("posts" in this case) and the id of the post. This will navigate to the "show" page of the post with the given id. For more information, you can refer to the useNavigation 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•4mo ago

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