Budibase / svelte-ag-grid

A svelte wrapper component around ag-grid
MIT License
24 stars 14 forks source link

Allow access to api #8

Open roydukkey opened 3 years ago

roydukkey commented 3 years ago

As a user of the component, I would like to be able to download the data as a CSV.

Would it be as simple as changing the following from:

https://github.com/Budibase/svelte-ag-grid/blob/9d19c4c991ed9034510cc3754a551029a8c3d691/src/Component.svelte#L25

to:

export let api;

Or, is there a better solution?

roydukkey commented 3 years ago

Implementing #9 might be a better option for this issue, as it would allow the consumer to write something like this to access the APIs.

<script>
    import AgGrid from "@budibase/svelte-ag-grid";

    let data = [
        { make: "Toyota", model: "Celica", price: 35000 },
        { make: "Ford", model: "Mondeo", price: 32000 },
        { make: "Porsche", model: "Boxter", price: 72000 },
    ];

    let columnDefs = [
        {
            headerName: "Make",
            field: "make",
            sortable: true,
            editable: true,
        },
        { headerName: "Model", field: "model", sortable: true },
        { headerName: "Price", field: "price", sortable: true },
    ];

    let api;

    let options = {
        onGridReady: (params) => {
            api = params.api;
        }
    }

    function download () {
        if (api) {
            api.exportDataAsCsv({
                fileName: 'downloadFileName.csv',
                columnGroups: true
            });
        }
    }

</script>

<style>
    :global(:root) {
        --grid-height: 500px;
    }
</style>

<AgGrid bind:data {columnDefs} {options} />

<button on:click|preventDefault={download}>Download Data</button>