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 api reference

Example:

const { data, columnsSpans } = getData();

export default function App() {
    const api = useRef(null);

    function exportExcel() {
        api.current.exec("export", {
            options: {
                format: "xlsx",
                fileName: "clients",
                sheetName: "Main client info",
            },
        });
    }

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

    return (
        <>
            <button onClick={exportExcel}>Export to excel</button>
            <button onClick={exportCsv}>Export to csv</button>

            <Grid data={data} columns={columnsSpans} api={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:

import { Grid } from "@wx/react-grid";
import { getData } from "./common/data";

const { data, columns } = getData();

export default function App() {
    const api = useRef(null);

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

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

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

    return (
        <div style={{ padding: "20px" }}>
            <p>
                <button onClick={() => exportExcel()}>Export default styles (material skin)</button>
                <button onClick={() => exportCustom()}>Export custom styles</button>
            </p>
            <div style={{ maxWidth: "800px" }}>
                <Grid footer={true} data={data} columns={columns} api={api} />
            </div>
        </div>
    );
}

---

Related articles: How to access Grid API