Redirect to show page onClick of list item

How can I redirect to the show page of the specific item that is being clicked in the List UI

14 Replies

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 redirect to the show page of a specific item when it is clicked in the List UI, you can use the onRow prop of the Ant Design <Table /> component to pass onClick handlers to each row. This can be achieved using the useNavigation or useGo hooks from Refine. Here is an example of how you can implement this:

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

const PostList: React.FC = () => {
    const { tableProps } = useTable();
    const { show } = useNavigation();

    return (
        <List>
            <Table
                {...tableProps}
                rowKey="id"
                onRow={(record) => {
                    return {
                        onClick: () => {
                            show("posts", record.id);
                        },
                    };
                }}
            >
                <Table.Column dataIndex="id" title="ID" />
                <Table.Column dataIndex="title" title="Title" width="100%" />
            </Table>
        </List>
    );
};

export default PostList;

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

const PostList: React.FC = () => {
    const { tableProps } = useTable();
    const { show } = useNavigation();

    return (
        <List>
            <Table
                {...tableProps}
                rowKey="id"
                onRow={(record) => {
                    return {
                        onClick: () => {
                            show("posts", record.id);
                        },
                    };
                }}
            >
                <Table.Column dataIndex="id" title="ID" />
                <Table.Column dataIndex="title" title="Title" width="100%" />
            </Table>
        </List>
    );
};

export default PostList;

In this example: - The useTable hook is used to manage table properties. - The useNavigation hook is used to get the show method. - The onRow prop of the <Table /> component is used to add an onClick handler to each row, which calls the show method with the resource name ("posts") and the record ID. This setup ensures that clicking on any row in the table will navigate to the show page of the corresponding record. For more details, you can refer to the Ant Design Table API (https://ant.design/components/table#table) and 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•2mo ago

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

rare-sapphire•2mo ago

@kapa.ai can I sync with location?

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can sync the table state with the URL using the syncWithLocation feature. This allows the table's state (e.g., sort order, filters, pagination) to be automatically encoded in the query parameters of the URL, and when the URL changes, the table state is automatically updated to match. To enable synchronization, you need to pass syncWithLocation: true to the <Refine /> component's options prop and also set it in the useTable hook. Here is an example of how you can implement this:

import React from "react";
import { Refine, List, useTable, useNavigation } from "@refinedev/antd";
import { Table } from "antd";

const PostList: React.FC = () => {
    const { tableProps } = useTable({
        syncWithLocation: true,
    });
    const { show } = useNavigation();

    return (
        <List>
            <Table
                {...tableProps}
                rowKey="id"
                onRow={(record) => {
                    return {
                        onClick: () => {
                            show("posts", record.id);
                        },
                    };
                }}
            >
                <Table.Column dataIndex="id" title="ID" />
                <Table.Column dataIndex="title" title="Title" width="100%" />
            </Table>
        </List>
    );
};

const App: React.FC = () => {
    return (
        <Refine
            options={{ syncWithLocation: true }}
            // other props
        >
            <PostList />
        </Refine>
    );
};

export default App;

import React from "react";
import { Refine, List, useTable, useNavigation } from "@refinedev/antd";
import { Table } from "antd";

const PostList: React.FC = () => {
    const { tableProps } = useTable({
        syncWithLocation: true,
    });
    const { show } = useNavigation();

    return (
        <List>
            <Table
                {...tableProps}
                rowKey="id"
                onRow={(record) => {
                    return {
                        onClick: () => {
                            show("posts", record.id);
                        },
                    };
                }}
            >
                <Table.Column dataIndex="id" title="ID" />
                <Table.Column dataIndex="title" title="Title" width="100%" />
            </Table>
        </List>
    );
};

const App: React.FC = () => {
    return (
        <Refine
            options={{ syncWithLocation: true }}
            // other props
        >
            <PostList />
        </Refine>
    );
};

export default App;

In this example: - The syncWithLocation: true option is set in both the <Refine /> component and the useTable hook. - This ensures that the table's state is synchronized with the URL, making it easy to share table state across different routes or pages, and allowing users to bookmark or share links to specific table views. For more details, you can refer to the Refine Component Documentation (https://refine.dev/docs/core/refine-component#syncwithlocation) and the useTable Documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table#syncwithlocation-). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

rare-sapphire•2mo ago

@kapa.ai no I ment can I call the show method with the currently viewed resource without hardcoding the name?

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can call the show method with the currently viewed resource without hardcoding the name by using the useResource hook. This hook provides information about the current resource, which you can then use to dynamically call the show method. Here is an example of how you can achieve this:

import React from "react";
import { List, useTable, useNavigation, useResource } from "@refinedev/antd";
import { Table } from "antd";

const PostList: React.FC = () => {
    const { tableProps } = useTable();
    const { show } = useNavigation();
    const { resource } = useResource();

    return (
        <List>
            <Table
                {...tableProps}
                rowKey="id"
                onRow={(record) => {
                    return {
                        onClick: () => {
                            show(resource.name, record.id);
                        },
                    };
                }}
            >
                <Table.Column dataIndex="id" title="ID" />
                <Table.Column dataIndex="title" title="Title" width="100%" />
            </Table>
        </List>
    );
};

export default PostList;

import React from "react";
import { List, useTable, useNavigation, useResource } from "@refinedev/antd";
import { Table } from "antd";

const PostList: React.FC = () => {
    const { tableProps } = useTable();
    const { show } = useNavigation();
    const { resource } = useResource();

    return (
        <List>
            <Table
                {...tableProps}
                rowKey="id"
                onRow={(record) => {
                    return {
                        onClick: () => {
                            show(resource.name, record.id);
                        },
                    };
                }}
            >
                <Table.Column dataIndex="id" title="ID" />
                <Table.Column dataIndex="title" title="Title" width="100%" />
            </Table>
        </List>
    );
};

export default PostList;

In this example: - The useResource hook is used to get the current resource information. - The resource.name is then used in the show method to dynamically call the show page for the current resource without hardcoding the resource name. This approach ensures that your code is more flexible and can handle different resources dynamically. For more details, you can refer to the useResource documentation (https://refine.dev/docs/core/hooks/resource/useResource/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

rare-sapphire•2mo ago

@kapa.ai the resource hook doesn't seem to work? also how can I show the little finger cursor when I hover over the Ant design list item?

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To dynamically call the show method for the currently viewed resource and to show the pointer cursor when hovering over an Ant Design list item, you can use the useRouterContext hook to get the current resource and apply custom styles for the cursor. Here is an example of how you can achieve this:

import React from "react";
import { List, useTable, useNavigation, useRouterContext } from "@refinedev/antd";
import { Table } from "antd";

const PostList: React.FC = () => {
    const { tableProps } = useTable();
    const { show } = useNavigation();
    const { resource } = useRouterContext();

    return (
        <List>
            <Table
                {...tableProps}
                rowKey="id"
                onRow={(record) => {
                    return {
                        onClick: () => {
                            show(resource.route, record.id);
                        },
                        style: { cursor: "pointer" }, // Apply pointer cursor style
                    };
                }}
            >
                <Table.Column dataIndex="id" title="ID" />
                <Table.Column dataIndex="title" title="Title" width="100%" />
            </Table>
        </List>
    );
};

export default PostList;

import React from "react";
import { List, useTable, useNavigation, useRouterContext } from "@refinedev/antd";
import { Table } from "antd";

const PostList: React.FC = () => {
    const { tableProps } = useTable();
    const { show } = useNavigation();
    const { resource } = useRouterContext();

    return (
        <List>
            <Table
                {...tableProps}
                rowKey="id"
                onRow={(record) => {
                    return {
                        onClick: () => {
                            show(resource.route, record.id);
                        },
                        style: { cursor: "pointer" }, // Apply pointer cursor style
                    };
                }}
            >
                <Table.Column dataIndex="id" title="ID" />
                <Table.Column dataIndex="title" title="Title" width="100%" />
            </Table>
        </List>
    );
};

export default PostList;

In this example: - The useRouterContext hook is used to get the current resource information. - The resource.route is used in the show method to dynamically call the show page for the current resource. - The style: { cursor: "pointer" } is applied to the row to show the pointer cursor when hovering over the list item. This approach ensures that your code is flexible and can handle different resources dynamically while providing a better user experience with the pointer cursor. For more details, you can refer to the useRouterContext documentation (https://refine.dev/docs/core/hooks/router/useRouterContext/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

rare-sapphire•2mo ago

@kapa.ai That doesn't get the current resource either

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To dynamically call the show method for the currently viewed resource without hardcoding the name, you can use the useResourceParams hook. This hook provides the current resource, action, and id from the route. Here is an example of how you can achieve this:

import React from "react";
import { List, useTable, useNavigation } from "@refinedev/antd";
import { Table } from "antd";
import { useResourceParams } from "@refinedev/core";

const PostList: React.FC = () => {
    const { tableProps } = useTable();
    const { show } = useNavigation();
    const { resource } = useResourceParams();

    return (
        <List>
            <Table
                {...tableProps}
                rowKey="id"
                onRow={(record) => {
                    return {
                        onClick: () => {
                            show(resource?.name, record.id);
                        },
                        style: { cursor: "pointer" }, // Apply pointer cursor style
                    };
                }}
            >
                <Table.Column dataIndex="id" title="ID" />
                <Table.Column dataIndex="title" title="Title" width="100%" />
            </Table>
        </List>
    );
};

export default PostList;

import React from "react";
import { List, useTable, useNavigation } from "@refinedev/antd";
import { Table } from "antd";
import { useResourceParams } from "@refinedev/core";

const PostList: React.FC = () => {
    const { tableProps } = useTable();
    const { show } = useNavigation();
    const { resource } = useResourceParams();

    return (
        <List>
            <Table
                {...tableProps}
                rowKey="id"
                onRow={(record) => {
                    return {
                        onClick: () => {
                            show(resource?.name, record.id);
                        },
                        style: { cursor: "pointer" }, // Apply pointer cursor style
                    };
                }}
            >
                <Table.Column dataIndex="id" title="ID" />
                <Table.Column dataIndex="title" title="Title" width="100%" />
            </Table>
        </List>
    );
};

export default PostList;

In this example: - The useResourceParams hook is used to get the current resource information. - The resource?.name is used in the show method to dynamically call the show page for the current resource. - The style: { cursor: "pointer" } is applied to the row to show the pointer cursor when hovering over the list item. This approach ensures that your code is flexible and can handle different resources dynamically while providing a better user experience with the pointer cursor. For more details, you can refer to the useResourceParams documentation (https://refine.dev/docs/routing/hooks/use-resource-params). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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