
# Tree - Object Data

You can use Json format data to implement TreeView.
Use [setObjectRows()](/refs/Class/LocalTreeDataProvider#setobjectrows) to display data in Json format.

```js
const fields = [
  { fieldName: "icon", dataType: "number" },
  { fieldName: "col0", dataType: "text" },
  { fieldName: "col1", dataType: "number" },
  { fieldName: "col2", dataType: "number" },
  { fieldName: "col3", dataType: "number" },
  { fieldName: "col4", dataType: "number" },
  { fieldName: "col5", dataType: "number" },
  { fieldName: "col6", dataType: "number" },
  { fieldName: "col7", dataType: "number" }
];

const columns = [
  {
    name: "col0",
    fieldName: "col0",
    type: "data",
    width: "150",
    header: { text: "Type" }
  },
  {
    name: "col1",
    fieldName: "col1",
    type: "data",
    width: "80",
    numberFormat: "#,##0",
    header: { text: "Agriculture/Forestry/Fishery" }
  },
  {
    name: "col2",
    fieldName: "col2",
    type: "data",
    width: "75",
    numberFormat: "#,##0",
    header: { text: "Mining" }
  },
  {
    name: "col3",
    fieldName: "col3",
    type: "data",
    width: "75",
    numberFormat: "#,##0",
    header: { text: "Manufacturing" }
  },
  {
    name: "col4",
    fieldName: "col4",
    type: "data",
    width: "80",
    numberFormat: "#,##0",
    header: { text: "Construction" }
  },
  {
    name: "col5",
    fieldName: "col5",
    type: "data",
    width: "130",
    numberFormat: "#,##0",
    header: { text: "Wholesale/Retail, Consumer Goods" }
  },
  {
    name: "col6",
    fieldName: "col6",
    type: "data",
    width: "90",
    numberFormat: "#,##0",
    header: { text: "Food/Lodging" }
  },
  {
    name: "col7",
    fieldName: "col7",
    type: "data",
    width: "120",
    numberFormat: "#,##0",
    header: { text: "Transport, Warehousing, Telecom" }
  }
];

const { treeView, dataProvider } = RealGrid.createTree("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (tree) => {
    fetch('/data/en/treedata.json')
      .then(response => response.json())
      .then(data => {
        tree.getDataSource().setObjectRows(data, "rows", "", "");
        tree.expandAll();
      });
  }
}, {
  fields
});

window.treeView = treeView;
window.dataProvider = dataProvider;
```

## setObjectRows()

```js
treeProvider.setObjectRows(data, "rows", "", "");
```

## Object Data

This is JSON format data to implement a tree.

```js
{
   "rows": [{
       "icon": "0",
       "col0": "Man",
       "col1": "11723",
       "col2": "1258",
       "col3": "29500",
       "col4": "21401",
       "col5": "28261",
       "col6": "3732",
       "col7": "7393",
       "rows": [{
           "icon": "2",
           "col0": "Asia",
           "col1": "4244",
           "col2": "133",
           "col3": "11565",
           "col4": "5866",
           "col5": "9024",
           "col6": "2256",
           "col7": "4129",
           "rows": [{
               "icon": "4",
               "col0": "Cyprus",
               "col1": "12",
               "col2": "0",
               "col3": "26",
               "col4": "43",
               "col5": "40",
               "col6": "14",
               "col7": "14"
           }, {
                ... skip ...
           }]
       }, {
           "icon": "2",
           "col0": "North America",
           "col1": "7062",
           "col2": "1101",
           "col3": "17234",
           "col4": "14992",
           "col5": "18465",
           "col6": "1321",
           "col7": "2658",
           "rows": [{
               "icon": "8",
               "col0": "Canada",
               "col1": "319",
               "col2": "225",
               "col3": "1537",
               "col4": "1565",
               "col5": "1654",
               "col6": "470",
               "col7": "837"
           }, {
               ... skip ...
```