Creating collapsible columns

To create a column that will expand/collapse, set the collapsible parameter of the columns property to true. To make the initial column state expanded, set the open value to true.

Example:

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

    const { data } = getData();

    const columns = [
        { id: "id", width: 50, footer: { text: "All users", colspan: 7 } },
        {
            id: "firstName",
            header: [
                {
                    text: "Main client info",
                    colspan: 5,
                    collapsible: true,
                    open: true,
                },
                { text: "User", colspan: 2, collapsible: true, open: true },
                { text: "First Name" },
            ],
            width: 150,
        },
    ];
</script>
<div style="padding: 20px;">
    <div>
        <Grid {data} {columns} />
    </div>
</div>