FancyGrid Tree Data Folders

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: Kia',
    renderTo: 'container',
    width: 600,
    height: 600,
    columnLines: false,
    theme: 'gray',
    trackOver: true,
    selModel: 'row',
    data: {
      items: data,
      fields: ['name', 'type', 'price', 'img']
    },
    defaults: {
      type: 'string',
      draggable: true,
      sortable: true,
      resizable: true
    },
    columns: [{
      type: 'tree',
      folder: true,
      title: 'Name',
      width: 240,
      index: 'name'
    }, {
      index: 'name',
      title: 'Name',
      width: 140
    }, {
      index: 'price',
      title: 'Start Price',
      type: 'currency',
      width: 80
    }]
  });
});

const data = [{
  name: 'KIA',
  type: 'root',
  expanded: true,
  child: [{
    name: 'Sedan',
    type: 'type',
    expanded: true,
    child: [{
      name: 'Smart Compact Morning',
      img: 'imgs/new-morning.png',
      leaf: true,
      price: 9890
    }, {
      name: 'New Ray',
      leaf: true,
      img: 'imgs/ray.png',
      price: 11150
    }, {
      name: 'K3',
      leaf: true,
      img: 'imgs/k3.png',
      price: 14250
    }, {
      name: 'K5',
      leaf: true,
      img: 'imgs/newk5.png',
      price: 20900
    }, {
      name: 'K7',
      leaf: true,
      img: 'imgs/k7.png',
      price: 28600
    }, {
      name: 'Stinger',
      leaf: true,
      img: 'imgs/stinger.png',
      price: 32300
    }, {
      name: 'K9',
      leaf: true,
      img: 'imgs/k9.png',
      price: 47000
    }]
  }, {
    name: 'ECO',
    type: 'type',
    child: [{
      name: 'Niro',
      leaf: true,
      img: 'imgs/niro.png',
      price: 21700
    }, {
      name: 'Niro Phev',
      leaf: true,
      img: 'imgs/niro-phev.png',
      price: 30500
    }, {
      name: 'Soul Ev',
      leaf: true,
      img: 'imgs/soul_ev.png',
      price: 39400
    }, {
      name: 'K5 plug-in Hybrid',
      leaf: true,
      img:...