Skip to main content

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>