Skip to main content

export

Description​

Fires when exporting data

Usage​

"export": ({
    options: {},
    result: any
}) => boolean|void;

Parameters​

The callback of the action takes an object with the following parameters:

  • options - (required) an object with the following export settings:
    • format (string) - (optional) the export format which is "xlsx" or "csv"
    • cdn (string) - (optional) for excel only; the link to the library that exports to excel
    • header (boolean) - (optional) if set to true, headers will be exported
    • footer (boolean) - (optional) if set to true, footers will be exported
    • download (boolean) - (optional) if set to true, downloads a file; if set to false, adds the export results to the BLOB (for excel) or string (for csv)
    • fileName (string) - (optional) the name of a file
    • sheetName (string) - (optional) for excel only; the name of an excel sheet
    • rows (string) - (optional) for csv only; a separator for rows, "\n" is set by default
    • cols (string) - (optional) for csv only; a separator for columns, the default value is "\t"
    • styles (excel only) - (optional) an object with the header, cell, and footer style parameters: 
styles = {
 header: {
    [key: string]: string; // an object with the style parameters
    };
 footer: {
    [key: string]: string; // an object with the style parameters
    };
 cell: {
    [key: string]: string; // an object with the style parameters
    };
 lastHeaderCell: {
    [key: string]: string; // an object with the style parameters
    };
 firstFooterCell: {
    [key: string]: string; // an object with the style parameters
    };
};

The list of possible style parameters is the following: 

    fontSize?: string;
    align?: string;         // left | center | right
    verticalAlign?: string; // top | center | bottom

    background?: string;
    color?: string;

    fontWeight?: string;     // bold
    fontStyle?: string;      // italic
    textDecoration?: string; // underline

    format?: string;

    // border valid format: {size} {style} {color}
    // size: 0.5px | 1px | 2px (works only with 'solid' style)
    // style: dashed | dotted | double | thin | solid
    // color: #000 | #000000
    borderTop?: string;
    borderRight?: string;
    borderBottom?: string;
    borderLeft?: string;
  • result - the export result

Returning false from the event handler will block data export.

Example​

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

    const { data, columnsSpans } = getData();

    let api;

    function exportExcel() {
        api.exec("export", {
            options: {
                format: "xlsx",
                fileName: "clients",
                sheetName: "Main client info",
                styles: {
                    cell: { color: "#2c2f3c" },
                    header: { fontWeight: "bold", verticalAlign: "center" },
                    footer: { background: "#f2f3f7", color: "#2c2f3c" },
                },
            },
        });
    }

    function exportCsv() {
        api.exec("export", {
            options: {
                format: "csv",
                fileName: "clients",
                cols: ";",
                download: false,
            },
        }).then((ev) => console.log(ev.result));
    }
</script>

<Button click={exportExcel}>Export to excel</Button>
<Button click={exportCsv}>Export to csv</Button>

<Grid
footer={true}
{data}
columns={columnsSpans}
bind:api />

Related articles: