Skip to main content

tree

Description​

Optional. Enables the tree structure in the table

Usage​

tree?: boolean

Parameters​

If the property is defined, the tree structure is enabled (the value is set to true). The tree structure is disabled by default.

Example​

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

  const treeData = [
    {
      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,
      open: true,
      data: [
        {
          id: "1.1",
          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: "1.2",
          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: 2,
      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,
      open: true,
      data: [
        {
          id: "2.1",
          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: "2.2",
          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 treeColumns = [
    { id: "id", width: 80 },
    {
      id: "lastName",
      header: "Last Name",
      footer: "Last Name",
      flexgrow: 1,
      treetoggle: true,
    },
    {
      id: "firstName",
      header: "First Name",
      footer: "First Name",
      width: 150,
    },
    {
      id: "city",
      width: 100,
      header: "City",
      footer: "City",
    },
  ];
  
</script>

<Grid tree data={treeData} columns={treeColumns} />

Related articles: