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:

<script>
    import { Grid } from "@svar-ui/svelte-grid";
    import { Button } from "@svar-ui/svelte-core";
    import { getData } from "../data";

    const { clientData, clientColumns } = getData();

    let api1 = $state();

    function exportCsv(api) {
        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
    }
</script>

<div style="padding: 20px;">
    <Button type="primary" onclick={() => exportCsv(api1)} disabled={!api1}>
        Export CSV
    </Button>

    <Grid
        data={clientData}
        columns={clientColumns}
        footer={true}
        bind:this={api1}
    />
</div>

You get a Blob (binary file).

Related sample: Export to CSV