Creating collapsible columns

To create a column that will collapse and expand, define the collapsible parameter of the header cell in the columns array. It can be:

• either true - the column can be fully collapsed;
• or "first" - the first column from a colspan will be visible in the collapsed state.

To make the initial state of a collapsible column collapsed, set the value of the collapsed property 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: "first",
                },
                { text: "User", colspan: 2, collapsible: true, collapsed: true },
                { text: "First Name" },
            ],
            width: 150,
        },
    ];
</script>
<div style="padding: 20px;">
    <div>
        <Grid {data} {columns} />
    </div>
</div>