Skip to main content

collapse-column

Description​

Fires when collapsing/expanding a column

Usage​

"collapse-column": ({
    id: string | number,
    row?: number,
    mode?: boolean,
}) => boolean|void;

Parameters​

The callback of the action takes an object with the following parameters:

  • id - (required) the ID of a column that is collapsed
  • row - (optional) in case a header spans multiple rows, this parameter can be used to specify the ordinal number of a header row (starting from 0) to be collapsed
  • mode - (optional) if set to true, the column state is changed to collapsed; if false, expanded. If the mode value is not set, the column collapsing will work in the toggle mode (switch from collapsed to expanded).

Returning false from the event handler will prevent collapsing/expanding columns.

Example​

The following example shows how to collapse a specific column (the first row of the "firstName" column's header) with the right-click using the api.exec() method: 

<script>
    import { getData } from "./common/data";
    import { Grid } from "@wx/svelte-grid";
    import { Button } from "@wx/svelte-core";
    const { data } = getData();
    
    const collapsibleColumns = [
        { 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 },
                { text: "First Name" },
            ],
            width: 150,
        },
        {
            id: "lastName",
            header: ["", "", "Last Name"],
            width: 150,
        },
        {
            id: "email",
            header: ["", { text: "Email", rowspan: 2, css: "center" }],
        },
        {
            id: "companyName",
            header: [
                "",
                {
                    text: "Company",
                    colspan: 2,
                    collapsible: true,
                },
                { text: "Name" },
            ],
        },
        {
            id: "city",
            width: 100,
            header: ["", "", "City"],
        },
        { id: "stars", header: "Stars" },
    ];

    let api;

    const collapse = () => {
        api.exec("collapse-column", { id: "firstName", row: 1 });
    };
</script>

  <Button click={collapse} type="primary">Collapse</Button>
  <Grid {data} columns={collapsibleColumns} bind:api />

Related articles: