Skip to main content

subrow

Description​

Optional. Enables expanding rows by adding subrows with data

To make the subrow functionality available, disable the treetoggle option of the columns property.

Usage​

subrow?: boolean|function;

Parameters​

The property can be set to true to enable adding subrows with data from a specified data field; false is set by default. To add data from multiple specified data fields to subrows, the property value can be set to the function name that takes an object with the row data and returns a string.

Example​

In the example below we use a function to add the followers and stars data to the subrows:

<script>
   import { getData } from "./common/data";
   import { Grid } from "@wx/svelte-grid";

   const { data, columns } = getData();
   columns[0].subtoggle = true;
   columns[0].width = 60;

   function subTemplate(row) {
      return `Followers: ${row.followers}\nStars: ${row.stars}`;
   }
</script>

<Grid {data} {columns} subrow={subTemplate} />

You can see more examples in the Creating subrows section.

Related articles: