Creating the table tree

The widget allows displaying data in a hierarchical format with collapsible rows.

Creating a tree structure

To create a tree structure, do the following:

• prepare a valid dataset for the tree table using the columns and data properties
• set the tree property value to true
• set the treetoggle parameter of the columns property to true

Example:

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

    const treeColumns = [
        // use the columns property
        { 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",
        },
    ];

    const treeData = [
        // use the data property
        {
            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,
                },
                {
                    id: "2.3",
                    city: "Dejuan",
                    country: 2,
                    email: "Enrico_Beer@yahoo.com",
                    firstName: "Margret",
                    lastName: "Heller",
                    street: "Gunner Drive",
                    zipCode: "17423-9317",
                    date: new Date("2017-03-13T21:09:47.253Z"),
                    companyName: "Corwin, Maggio and Wintheiser",
                    stars: 9920,
                    newsletter: true,
                    followers: 570,
                },
            ],
        },
    ];
</script>

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

Collapsing/expanding all rows at a time

To collapse or expand all rows, apply the open-row and close-row actions and set the id value to 0, and the nested value to true. In the example below we make all rows expand/collapse on a button click. To do this, we get access to the Grid api via bind:api and use the api.exec() method to trigger the open-row and close-row actions with a button click.

Example:

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

    const { treeData, treeColumns } = getData();

    let api;

    function openAll() {
        api.exec("open-row", { id: 0, nested: true });
    }

    function closeAll() {
        api.exec("close-row", { id: 0, nested: true });
    }

</script>

<div class="toolbar">
    <Button type="primary" click={() => openAll()}>Open all</Button>
    <Button type="primary" click={() => closeAll()}>Close all</Button>
</div>

<Grid
  bind:api
  tree={true}
  data={treeData}
  columns={treeColumns}
  footer={true} />

---

Related articles: How to access Grid API