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>