R
Refine

ask-any-question

Clickable Title

Mmetropolitan-bronze4/3/2024
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
Kkapa.ai4/3/2024
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: ----------------------
Kkapa.ai4/3/2024
<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below
Mmetropolitan-bronze4/3/2024
@kapa.ai show is not a function?
Kkapa.ai4/3/2024
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: ----------------------
Kkapa.ai4/3/2024
<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
using hooks in nextjs layout causesError: (0 , _refinedev_core__WEBPACK_IMPORTED_MODULE_8__.useMenu)Hey. If i try to use the useMenu hook inside the nextjs app layout im getting the error `Error: (0 ,Edit not working if form is not touchHaving this code if the form is not touch, save button is not working. Only performs a GET instade oFailing to deploy: Cannot find module... or its corresponding type declarations.Hi everyone, I'm trying to deploy my app and doing a local build works as expected. However, when deresponseType: 'arraybuffer'I want do a request with useCustom with the responseType: 'arraybuffer' for binary data. How could iHowToCustomize the default Login.tsx without altering authenticationHere below is the code after npx refine swizzle auth.disable sider itemsSeeing as my backend requires a user to make a team/tenant before allowing the user to continue, howHide ListButtonHow can I hide the list button on the show pagesub resource on show pageI have a resource called order, in the backend an order has a line item, however this is not a refinShow ant design table list on show page of parentI have a resource called building, one building can have multiple offers (which is not part of the jremove layout styles on specific routeI am using antd themedlayoutv2. Can I not use the layout styles for a specific route in my app?useFormin useForm from "@refinedev/antd", how to refetch data when in "edit" and clone mode?useCustom call function directlyI am wanting to call the function that useCustom would call to fetch reason being I have some componmap ColumnsHow to correct this code, i´m getting error in the dataIndex mapping columns: { title: "filter on key inside nested JSON# [FEATURE] Deep Filtering on Nested JSON Fields in Supabase I'm currently working on a project usihey guys, i need a help for creatinghey guys, i need a help for creating dockerfile with nginx configuration for refinedev nestjs. is angraphql codegen generate querySo im following the guide of refine and how to use graphql codegen but it states to write the querie