collapse-column
Description
Fires when collapsing/expanding a columnUsage
"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 collapsedrow
- (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 collapsedmode
- (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: