Create a download link for each row in a useTable

How can I generate a download link using the id of each row in a table generated using useTable and dataprovider

2 Replies

Hi @Todilo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a download link for each row in a table generated using useTable and a data provider in refine, you can utilize the useNavigation hook along with the Table component from Ant Design. Here's how you can achieve this: 1. First, import the necessary hooks and components:

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

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

2. In your component, use the useTable hook to fetch the data and the useNavigation hook to generate the download URL:

const { tableProps } = useTable();
const { showUrl } = useNavigation();

const { tableProps } = useTable();
const { showUrl } = useNavigation();

3. Then, in your Table component, add a column for the download link:

<Table {...tableProps} rowKey="id">
  {/* Other columns */}
  <Table.Column<YourDataType>
    title="Download"
    dataIndex="id"
    render={(value) => (
      <Button
        href={showUrl("your_resource", value)}
        target="_blank"
      >
        Download
      </Button>
    )}
  />
</Table>

<Table {...tableProps} rowKey="id">
  {/* Other columns */}
  <Table.Column<YourDataType>
    title="Download"
    dataIndex="id"
    render={(value) => (
      <Button
        href={showUrl("your_resource", value)}
        target="_blank"
      >
        Download
      </Button>
    )}
  />
</Table>

In this example, replace YourDataType with the interface of your data, and "your_resource" with the name of your resource. The showUrl function from useNavigation generates a URL for the "show" action of a specific record. You can use this URL as the download link. If you need a different URL for downloading, you might need to create a custom function or use a different method from your data provider. This approach is based on the usage of useNavigation as described in the refine documentation (https://refine.dev/docs/core/hooks/navigation/useNavigation/#show) and the table rendering technique shown in the refine blog post about creating tables (https://refine.dev/blog/refine-pixels-5/#refine-ant-design-table--component). Remember that the exact implementation might vary depending on your specific data provider and how it handles file downloads. You may need to adjust the URL generation or the download mechanism according to your backend setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@207945811592478720> Kapa.ai is still learning and improving, please let me know how I did by reacting below.