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",
            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",
                },
            ],
        },
    ];
    const treeColumns = [
        { id: "id", width: 80 },
        {
            id: "lastName",
            header: "Last Name",
            flexgrow: 1,
            treetoggle: true,
        },
        {
            id: "firstName",
            header: "First Name",
            width: 150,
        },
        {
            id: "city",
            width: 100,
            header: "City",
        },
    ];

</script>

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

Related articles: