How to export a table to CSV?

Question

I have a table with expandable rows that contain another table. It has been rendered using a library called antd. I want to export the table along with the expandables as a CSV file. The table :

Answer 1

As one approach you can use react-csv(@NPM) to export antd table data.

You can use a CSVLink by setting the table data to the element.

Example:

<CSVLink
  filename={"TableContent.csv"}
  data={data}
  className="btn btn-primary"
>
  Download csv
</CSVLink>

Here you can find a CodeSandBox as a minimal working example.

---

Edit:

For nested tables usage you can combine the table data with the needed nested table data to export all data in one file.

E.g.:

  data.forEach(element => {
    exportedData.push(element);
    nestedData.forEach(element => exportedData.push(element));
  });

with the depending csv-link

      <CSVLink
        filename={"TableContent.csv"}
        data={exportedData}
        className="btn btn-primary"
      >

CodeSandBox for nested Table data.