Exporting data and styles

Exporting data

The widget allows exporting data to the CSV/XLSX formats. To export data, you should apply the export action.

In the example below we trigger the export action with the api.exec() method and call the export functions with a button click. To get access to the Grid api, we use bind:api

Example:

<script>
    import { Grid } from "@xbs/svelte-wx";
    import { Button } from "@xbs/svelte-wx";

    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",
            },
        });
    }

    function exportCsv() {
        api.exec("export", {
            options: {
                format: "csv",
                fileName: "clients",
                cols: ";",
            },
        });
    }
</script>

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

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

Exporting styles

The widget allows exporting data with styles to XLSX. To export required styles, apply the styles parameter of the export action.

In the example below we export xlsx table with default and custom styles. To do this, we trigger the export action by applying the api.exec() method.

Example:

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

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

    let api;

    // export default styles
    function exportExcel(styles) {
        api.exec("export", {
            options: {
                format: "xlsx",
                styles,
            },
        });
    }

    const commonStyles = {
        verticalAlign: "center",
        align: "left",
    };

    // export custom styles
    function exportCustom() {
        const headerStyles = {
            fontWeight: "bold",
            color: "#ffffff",
            background: "#457b9d",
            ...commonStyles,
        };
        exportExcel({
            cell: {
                color: "#000000",
                background: "#f2f3f7",
                fontSize: "12px",

                ...commonStyles,
            },
            header: { ...headerStyles, textDecoration: "underline" },
            footer: {
                ...headerStyles,
                fontStyle: "italic",
                background: "#f2f3f7",
                color: "#000000",
            },
            lastHeaderCell: {
                ...headerStyles,
                borderBottom: "2px solid #e63946",
                textDecoration: "underline",
            },
            firstFooterCell: {
                ...headerStyles,
                borderTop: "1px dotted #000000",
                fontStyle: "italic",
                background: "#f2f3f7",
                color: "#000000",
            },
        });
    }

</script>

<div style="padding: 20px;">
  <p>
    <Button click={() => exportExcel()}>Export default styles (material skin)</Button>
    <Button click={() => exportCustom()}>Export custom styles</Button>
  </p>
  <div style="max-width: 800px;">
    <Grid footer={true} {data} {columns} bind:api={api} />
  </div>
</div>

---

Related articles: How to access Grid API