Skip to main content

Exporting data

Overview​

Grid provides a built-in export-data action that allows you to export data to a CSV file.

By default, it exports:

  • all rows and columns
  • column headers
  • footer rows (if present)
  • with standard CSV delimiters
  • automatically downloads the file

Including or excluding headers​

You can control whether column headers are included in the exported CSV file via the header property:

api.exec("export-data", {
    format: "csv",
    csv: {
        header: false
    }
});

Footer rows (such as totals or summaries) can be included or excluded from the export via the footer property.

api.exec("export-data", {
    format: "csv",
    csv: {
        footer: false
    }
});

Customizing column and row delimiters​

You can change the column or row delimiter used in the CSV file via the cols or rows property:

api.exec("export-data", {
    format: "csv",
    csv: {
        cols: ";",
        rows: "\n"
    }
});

Getting access to the generated CSV data via result​

When you set download: false, the CSV content is returned via result. The example below shows how to output the exported data to console by clicking the button:

import { useState } from "react";
import { Grid } from "@svar-ui/react-grid";
import { Button } from "@svar-ui/react-core";
import { getData } from "../data";

export default function ExportCsvExample() {
  const { clientData, clientColumns } = getData();

  const [api1, setApi1] = useState(null);

  function exportCsv() {
    const api = api1;
    if (!api) return;

    const options = {
      format: "csv",
      fileName: "clients",
      download: false,
      csv: {
        cols: ";",
      },
    };

    api.exec("export-data", options);

    console.log("CSV result:", options.result); // Blob
  }

  return (
    <div style={{ padding: 20 }}>
      <Button type="primary" onClick={exportCsv} disabled={!api1}>
        Export CSV
      </Button>

      <Grid
        data={clientData}
        columns={clientColumns}
        footer={true}
        ref={(el) => setApi1(el)}
      />
    </div>
  );
}

You get a Blob (binary file).

Related sample: Export to CSV