dataTree feature not working

[devkatcybersecurity]

I am using version react-tabulator version 4.9

Here is my code which is taken from examples provided in the repository :

import {ReactTabulator} from "react-tabulator";


function Groups(props) {

    const  tableDataNested = [
        {name:"Oli Bob", location:"United Kingdom", gender:"male", col:"red", dob:"14/04/1984", _children:[
                {name:"Mary May", location:"Germany", gender:"female", col:"blue", dob:"14/05/1982"},
                {name:"Christine Lobowski", location:"France", gender:"female", col:"green", dob:"22/05/1982"},
                {name:"Brendon Philips", location:"USA", gender:"male", col:"orange", dob:"01/08/1980", _children:[
                        {name:"Margret Marmajuke", location:"Canada", gender:"female", col:"yellow", dob:"31/01/1999"},
                        {name:"Frank Harbours", location:"Russia", gender:"male", col:"red", dob:"12/05/1966"},
                    ]},
            ]},
        {name:"Jamie Newhart", location:"India", gender:"male", col:"green", dob:"14/05/1985"},
        {name:"Gemma Jane", location:"China", gender:"female", col:"red", dob:"22/05/1982", _children:[
                {name:"Emily Sykes", location:"South Korea", gender:"female", col:"maroon", dob:"11/11/1970"},
            ]},
        {name:"James Newman", location:"Japan", gender:"male", col:"red", dob:"22/03/1998"},
    ];
    const config = {
        height:"311px",
        data:tableDataNested,
        dataTree:true,
        dataTreeStartExpanded:true,
        columns:[
        {title:"Name", field:"name", width:200, responsive:0}, //never hide this column
        {title:"Location", field:"location", width:150},
        {title:"Gender", field:"gender", width:150, responsive:2}, //hide this column first
        {title:"Favourite Color", field:"col", width:150},
        {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date", width:150},
    ],
        dataTreeChildField:"_children",
    }

            return(
                <div>
 <ReactTabulator {...config}  />
                </div>
    );
}

export default Groups;

and below is the UI rendered corresponding to the code

As you can see, table is not in tree format as I don't see any icons to toggle the rows. Am I missing something ? Can someone please help me out here. @ngduc @ericnkatz @ziemkowski @nbrookie @ApacheEx @olifolkerd

[franzbuenaventura]

Had the same issue and I found the solution. You should use the options

for example:

const config = {
  dataTree: true,
  dataTreeStartExpanded: true
};

      <ReactTabulator
        columns={this.columns}
        data={this.tableDataNested}
        options={config}
      />