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 some column in the columns property to true
• for initially closed branches set the open parameter of a data item to false

Example:

<script setup>
    import { Grid } from "@svar-ui/vue-grid";

    const treeColumns = [
        { id: "id", width: 80 },
        {
            id: "lastName",
            header: "Last Name",
            flexgrow: 1,
            treetoggle: true,
        },
        { id: "firstName", header: "First Name" },
        { id: "city", width: 100, header: "City" },
    ];

    const treeData = [
        {
            id: 1,
            city: "Amieshire",
            firstName: "Ernest",
            lastName: "Schuppe",
            open: false,
            data: [
                {
                    id: "1.1",
                    city: "Gust",
                    firstName: "Janis",
                    lastName: "Vandervort",

                },
                {
                    id: "1.2",
                    city: "Amieshire",
                    firstName: "Makenzie",
                    lastName: "Bode",
                },
            ],
        },
        {
            id: 2,
            city: "Amieshire",
            firstName: "Ciara",
            lastName: "Towne",
            data: [
                {
                    id: "2.1",
                    city: "Amieshire",
                    firstName: "Suzanne",
                    lastName: "Wolff",
                },
                {
                    id: "2.2",
                    city: "Amieshire",
                    firstName: "Alessandra",
                    lastName: "Feeney",
                },
            ],
        },
    ];
</script>

<template>
    <Grid :tree="true" :data="treeData" :columns="treeColumns" />
</template>

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 the ref construct and use the api.exec() method to trigger the open-row and close-row actions with a button click.

Example:

<script setup>
    import { ref } from "vue";
    import { Button } from "@svar-ui/vue-core"; // import the Button component
    import { getData } from "./common/data";
    import { Grid } from "@svar-ui/vue-grid";

    const { treeData, treeColumns } = getData();

    const api = ref(null);

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

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

</script>

<template>
    <div class="toolbar">
        <Button type="primary" :onclick="() => openAll()">Open all</Button>
        <Button type="primary" :onclick="() => closeAll()">Close all</Button>
    </div>

    <Grid ref="api" :tree="true" :data="treeData" :columns="treeColumns" />
</template>

---

Related sample: Tree structure

Related articles: How to access Grid API