Creating subrows with data

The widget API allows creating expandable rows to show extra information on demand, which makes it possible to add the text data or a separate custom Svelte component to subrows.

note

To enable the subrows functionality, make sure that the treetoggle option of the columns property is not activated.

Adding text data to subrows

To add text data to subrows, apply the subrow property:

• to add a specific data field to subrows, set its value to true and define which data field should be added to the subrows
• to add specific data from several fields, set the subrow value to the function name that takes data string
• you should also set the subtoggle parameter of the columns property to true to enable the expandable rows.

In the example below we add the companyName field data to the subrows.

Example:

<script>
   import { Grid } from "../src/";

   const columns = [
      { id: "id", width: 50 },
      {
         id: "city",
         width: 100,
         header: "City",
         footer: "City",
      },
      {
         id: "firstName",
         header: "First Name",
         footer: "First Name",
         width: 150,
      },
      {
         id: "lastName",
         header: "Last Name",
         footer: "Last Name",
         width: 150,
      },
      { id: "email", header: "Email", footer: "Email" },
   ];
   const data = [
      {
         id: 1,
         city: "Amieshire",
         country: 6,
         email: "Leora13@yahoo.com",
         firstName: "Ernest",
         lastName: "Schuppe",
         street: "Ratke Port",
         zipCode: "17026-3154",
         date: new Date("2016-09-23T07:57:40.195Z"),
         companyName: "Lebsack - Nicolas",
         stars: 820,
         followers: 70,
         newsletter: true,
         checked: 1,
      },
      {
         id: 2,
         city: "Gust",
         country: 4,
         email: "Mose_Gerhold51@yahoo.com",
         firstName: "Janis",
         lastName: "Vandervort",
         street: "Dickinson Keys",
         zipCode: "43767",
         date: new Date("2017-03-06T09:59:12.551Z"),
         companyName: "Glover - Hermiston",
         stars: 1200,
         followers: 170,
         checked: 1,
      },
      {
         id: 3,
         city: "Amieshire",
         country: 3,
         email: "Frieda.Sauer61@gmail.com",
         firstName: "Makenzie",
         lastName: "Bode",
         street: "Legros Divide",
         zipCode: "54812",
         date: new Date("2016-12-08T13:44:26.557Z"),
         companyName: "Williamson - Kassulke",
         stars: 610,
         followers: 170,
         checked: 1,
      },
      {
         id: 4,
         city: "Amieshire",
         country: 2,
         email: "Eloisa.OHara@hotmail.com",
         firstName: "Ciara",
         lastName: "Towne",
         street: "Schimmel Ramp",
         zipCode: "76315-2246",
         date: new Date("2016-07-19T12:54:30.994Z"),
         companyName: "Hilpert, Eichmann and Brown",
         stars: 5322,
         followers: 170,
         checked: 1,
      },
      {
         id: 5,
         city: "Amieshire",
         country: 2,
         email: "Brisa46@hotmail.com",
         firstName: "Suzanne",
         lastName: "Wolff",
         street: "Lemuel Radial",
         zipCode: "88870-3897",
         date: new Date("2017-02-23T17:11:53.875Z"),
         companyName: "Mayer - Considine",
         stars: 852,
         followers: 770,
         newsletter: true,
         checked: 1,
      },
      {
         id: 6,
         city: "Amieshire",
         country: 2,
         email: "Cody.Schultz56@gmail.com",
         firstName: "Alessandra",
         lastName: "Feeney",
         street: "Mosciski Estate",
         zipCode: "81514",
         date: new Date("2016-06-30T05:23:18.734Z"),
         companyName: "Nikolaus and Sons",
         stars: 3209,
         followers: 2780,
      },
   ];

   const ndata = data.map((a) => {
      const subrow = `works in ${a.companyName}`;
      return { ...a, subrow };
   });

   columns[0].subtoggle = true;
   columns[0].width = 60;
</script>

<Grid data={ndata} {columns}
subrow="{true}" />

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-core";

    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} />

Adding a component to the subrow

To add a Svelte component to the subrows (e.g., a separate subtable), use the subview property and set its value to the component name. And make sure that the subtoggle option is enabled.

Example:

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

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

    import SubGrid from "./stubs/SubGrid.svelte";//import the component

</script> 

  <Grid {data} {columns}
   subview={SubGrid} />

Setting the subrow height

If the subrow height is not set, the defaultRowHeight value is set for the subrow property (which is 37px) and auto is set for the subview property.

To change the default value, use the subHeight property: subHeight={number|"auto"}

Example:

<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}
subHeight={"50"} />