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 - (required) 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 columns = [
        { id: "id", width: 50, footer: { text: "All users", colspan: 4 } },
        {
            id: "firstName",
            header: [
                {
                    text: "Main client info",
                    colspan: 3,
                    collapsible: "first",
                },
                { text: "First Name" },
            ],
            width: 150,
        },
        { id: "lastName", header:["", "Last Name"] },
        { id: "email", header:["", "Email"]}
    ];  

    let api = $state();

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

  <Button onclick={collapse} type="primary">Collapse</Button>

  <Grid {data} {columns} bind:this={api} />

Related articles: