Being able to render tree table data directly

[shriniwasayyer14]

By default I believe, react table uses a flat list as the data input with grouping and subtotalling done on the front end. If the data is already grouped and exists in a tree table format, we cannot render it directly using react table. it would be great if we could do so.

Sample data:
[
{
Name: "USA",
Area: 9826675,
Population: 318212000,
TimeZone: "UTC -5 to -10",
children: [
{
Name: "California",
Area: 423970,
Population: 38340000,
TimeZone: "Pacific Time",
children: [
{
Name: "San Francisco",
Area: 231,
Population: 837442,
TimeZone: "PST"
},
{
Name: "Los Angeles",
Area: 503,
Population: 3904657,
TimeZone: "PST"
}
]
},
{
Name: "Illinois",
Area: 57914,
Population: 12882135,
TimeZone: "Central Time Zone",
children: [
{
Name: "Chicago",
Area: 234,
Population: 2695598,
TimeZone: "CST"
}
]
}
]
},
{
Name: "Texas",
Area: 268581,
Population: 26448193,
TimeZone: "Mountain"
}
];

[erfangc]

@shriniwasayyer14 you can create the table with prop rootNode

example:

var myRootNode = new TreeNode();
...

<ReactTable rootNode={myRootNode} />

You can take a look at the TreeNode API

Take note of the states (you don't need to fill-out ultimateChildren for intermediate subtotal rows):

    // accessible properties
    this.sectorTitle = sectorTitle;
    this.parent = parent;
    this.groupByColumnDef = {};
    this.rowData = null;
    this.display = true;
    this.children = [];
    this.ultimateChildren = [];
    this.collapsed = this.parent != null;
    this.sortIndex = null;
    this.hiddenByFilter = false;
    // private members
    this._childrenSectorNameMap = {}

Ideally, we should create a JSON -> recursive TreeNode converter, call it Json2TreeNode.js and expose a utility function for converting structured JSON to TreeNode

[shriniwasayyer14]

Is there a way to do this without using the angular directive ? Like using React.renderComponent ?

[erfangc]

@shriniwasayyer14 discussed offline - this component does not depend on angular at all

[shriniwasayyer14]

Re-opening this issue, since it turns out this feature is not supported by React table. Would be a great enhancement to have for Prism to use it.