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:

import { Grid } from "wx-react-grid";
import { useRef } from "react";

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",
    },
];

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,
            },
            {
                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,
            },
        ],
    },
];

export default function App() {
    const api = useRef(null);

    return (
        <Grid tree={true} data={treeData} columns={treeColumns} api={api} />
    );
}

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

Example:

const { treeData, treeColumns } = getData();

export default function App() {
    const api = useRef(null);

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

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

    return (
        <>
            <div className="toolbar">
                <button  onClick={() => openAll()}>Open all</button>
                <button  onClick={() => closeAll()}>Close all</button>
            </div>

            <Grid
                api={api}
                tree={true}
                data={treeData}
                columns={treeColumns}
                footer={true}
            />
        </>
    );
}

---

Related articles: How to access Grid API