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: