FancyGrid Tree Data

by FancyGrid Inc.

HTML

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

<div id="container"></div>

CSS

.fancy-theme-gray.fancy-panel .fancy-panel-header {
  background-color: white;
  border-bottom: 2px solid #e3223a;
  color: #515151;
}

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  new FancyGrid({
    title: 'Tree Grid: Region - Country - City',
    renderTo: 'container',
    width: 600,
    height: 600,
    data: {
      items: data,
      fields: ['name', 'type', 'population']
    },
    selModel: 'rows',
    trackOver: true,
    theme: 'gray',
    defaults: {
      type: 'string',
      sortable: true,
      resizable: true
    },
    columns: [{
      type: 'tree',
      title: 'Name',
      width: 200,
      index: 'name'
    }, {
      index: 'type',
      title: 'Territory',
      width: 100
    }, {
      index: 'population',
      title: 'Population(mlns)',
      format: 'number',
      type: 'number',
      width: 120
    }]
  });
});


var data = [{
  name: 'North America',
  type: 'Territory',
  expanded: true,
  child: [{
    name: 'USA',
    type: 'Country',
    population: 325365189,
    child: [{
      type: 'City',
      name: 'New York',
      population: 8175133,
      leaf: true
    }, {
      type: 'City',
      name: 'Washington',
      population: 681170,
      leaf: true
    }]
  }, {
    name: 'Canada',
    type: 'Country',
    population: 35151728,
    child: [{
      type: 'City',
      name: 'Ottawa',
      population: 934243,
      leaf: true
    }, {
      type: 'City',
      name: 'Toronto',
      population: 2731571,
      leaf: true
    }]
  }, {
    name: 'Mexico',
    type: 'Country',
    population: 123675325,
    child: [{
      type: 'City',
      population: 8918653,
      leaf: true,
      name: 'Mexico'
    }]
  }]
}, {
  name: 'South America',
  type: 'Territory',
  expanded: true,
  child: [{
    name: 'Brazil',
    type: 'Country',
    population: 208385000,
    child: [{
      name: 'Brasilia',
      type: 'City',
      population: 2977216,
      leaf: true
    }, {
      name: 'Sao Paulo',
      type: 'City',
      population: 12038175,
      leaf: true
    }]
  }, {
    name: 'Argentina',
    type: 'Country',
    population: 43847430,
   ...