Skip to main content

export-data

Description​

Fires when exporting data

Usage​

"export-data": ({
    format: "csv",
    fileName?: string,
    download?: boolean,
    csv?: {
      header?: boolean,
      footer?: boolean,
      rows?: string,
      cols?: string,
    },
  result?: any,
}) => boolean | void;

Parameters​

  • format (string) - must be set to "csv"
  • fileName (string) - (optional) a file name ("data" by default)
  • download (boolean) - (optional) defines whether to download a file. true is set by default. If set to false, the file will not be downloaded, CSV data (Blob) will be available as ev.result
  • csv (object) - an object with CSV-specific options:
    • header (boolean) - (optional) defines if a header should be exported (true by default)
    • footer (boolean) - (optional) defines if a footer should be exported (true by default)
    • rows (string) - (optional) rows delimiter, "\n" by default
    • cols (string) - (optional) columns delimiter, "\t" by default
  • result - the result of the exported CSV data (Blob); available when download:false

Example​

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

    import { getData } from "../data";
    const { data, columns } = getData();

    let api = $state();

    function exportCsv() {
        api.exec("export-data", {
            format: "csv",
            fileName: "data",
            download: true,
            csv: {
                header: true,
                footer: false,
                cols: ";",
                rows: "\n"
            }
        });
    }
</script>

<Button type="primary" onclick={exportCsv}>
    Export to CSV
</Button>

<Grid
    data={data}
    columns={columns}
    bind:this={api}
/>

Related articles: