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​

import { useRef } from "react";
import { Grid } from "@svar-ui/react-grid";
import { Button } from "@svar-ui/react-core";

import { getData } from "../data";

export default function ExportExample() {
  const { data, columns } = getData();
  const apiRef = useRef(null);

  function exportCsv() {
    apiRef.current?.exec("export-data", {
      format: "csv",
      fileName: "data",
      download: true,
      csv: {
        header: true,
        footer: false,
        cols: ";",
        rows: "\n"
      }
    });
  }

  return (
    <>
      <Button type="primary" onClick={exportCsv}>
        Export to CSV
      </Button>

      <Grid
        data={data}
        columns={columns}
        ref={apiRef}
      />
    </>
  );
}

Related articles: