FancyGrid Grouping

by FancyGrid Inc.

HTML

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

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

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  new FancyGrid({
    renderTo: 'container',
    width: 550,
    height: 450,
    trackOver: true,
    selModel: 'row',
    textSelection: true,
    data: {
      items: data
    },
    defaults: {
      type: 'string',
      width: 75,
      resizable: true,
      sortable: true
    },
    clicksToEdit: 1,
    columnLines: false,
    columnClickData: true,
    grouping: {
      by: 'model'
    },
    columns: [{
      title: 'Full Name',
      index: 'fullName',
      width: 160
    }, {
      title: 'Color',
      index: 'color',
      type: 'color',
      cls: 'color-column',
      sortable: false,
      width: 60
    }, {
      title: 'Color Name',
      index: 'colorName',
      width: 140
    }, {
      title: 'Price',
      index: 'price',
      format: 'number',
      type: 'number',
      render: function(o) {
        o.value = '$' + o.value;

        return o;
      }
    }, {
      title: 'Count',
      index: 'count',
      type: 'number',
      width: 60
    }]
  });
});

const data = [{
    model: 'Sorento Prime',
    fullName: 'KIA Sorento Prime Prestige 2.2 L 6AT',
    color: '#4d382d',
    colorName: '(MY3) Imperial Bronze',
    price: 37500,
    count: 1
  }, {
    model: 'Picanto',
    fullName: 'KIA Picanto 1.2 L 4AT',
    color: '#860b0b',
    colorName: '(BEG) Signal Red',
    price: 13000,
    count: 1
  }, {
    model: "cee'd",
    fullName: "KIA cee'd Classic 1.4 L 6MT",
    color: '#393D43',
    colorName: '(E5B) Dark Gun Metal',
    price: 12500,
    count: 1
  }, {
    model: "cee'd",
    fullName: "KIA cee'd Classic 1.4 L 6MT",
    color: 'white',
    colorName: '(HW2) Deluxe White',
    price: 12500,
    count: 1
  }, {
    model: "cee'd",
    fullName: "KIA cee'd Classic 1.6 L 6MT",
    color: '#D9D9D9',
    colorName: '(9S) Machine Silver',
    price: 13400,
    count: 1
  }, {
    model: "cee'd",
    fullName: "KIA cee'd Classic 1.6 L 6MT",
    color: '#B4B6A6',
    colorName:...