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​

import { Grid } from "wx-react-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",
  },
]

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

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

Related articles: