useExport with download: false

When using useExport with option download: false, how do I get the CSV data?

2 Replies

Hi @geoffatsource. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To use the useExport hook with the download option set to false and get the CSV data without triggering a download, you can follow these steps: 1. Set up the useExport hook: Configure the useExport hook with the download option set to false. 2. Use the triggerExport function: Call the triggerExport function to initiate the export process. Since download is set to false, the data will not be downloaded automatically. 3. Handle the returned data: The triggerExport function will return the CSV data, which you can then handle as needed. Here is an example of how you can achieve this:

import React from "react";
import { useExport } from "@refinedev/core";

interface IProduct {
  id: number;
  name: string;
  description: string;
  category: string;
}

export const HomePage = () => {
  const { triggerExport, isLoading } = useExport<IProduct>({
    resource: "products",
    mapData: (item) => {
      return {
        ...item,
        category: JSON.stringify(item.category),
      };
    },
    download: false, // Set download to false
  });

  const handleExport = async () => {
    const csvData = await triggerExport();
    console.log(csvData); // Handle the CSV data as needed
  };

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
        padding: "16px",
      }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
        <h2>Products</h2>
        <button onClick={handleExport} disabled={isLoading}>
          {isLoading ? "Exporting..." : "Export Products"}
        </button>
      </div>
    </div>
  );
};

import React from "react";
import { useExport } from "@refinedev/core";

interface IProduct {
  id: number;
  name: string;
  description: string;
  category: string;
}

export const HomePage = () => {
  const { triggerExport, isLoading } = useExport<IProduct>({
    resource: "products",
    mapData: (item) => {
      return {
        ...item,
        category: JSON.stringify(item.category),
      };
    },
    download: false, // Set download to false
  });

  const handleExport = async () => {
    const csvData = await triggerExport();
    console.log(csvData); // Handle the CSV data as needed
  };

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-start",
        padding: "16px",
      }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
        <h2>Products</h2>
        <button onClick={handleExport} disabled={isLoading}>
          {isLoading ? "Exporting..." : "Export Products"}
        </button>
      </div>
    </div>
  );
};

In this example: - The useExport hook is configured with download: false. - The handleExport function calls triggerExport and logs the CSV data to the console. You can replace the console.log statement with any other logic to handle the CSV data as needed. For more details, you can refer to the useExport documentation (https://refine.dev/docs/core/hooks/utilities/use-export/#download). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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