FancyGrid Auto Size Columns

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',
    title: 'Auto size columns',
    width: 600,
    height: 400,
    data: data,
    columns: [{
      index: 'company',
      title: 'Company'
    }, {
      index: 'name',
      title: 'Name',
      sortable: true
    }, {
      index: 'surname',
      title: 'Sur Name',
      flex: 1,
    }, {
      index: 'age',
      title: 'Age',
      type: 'number',
      flex: 1
    }, {
      index: 'education',
      title: 'Education',
      flex: 1
    }]
  });
});

const data = [{
  name: 'Ted',
  surname: 'Smith',
  position: 'Java Developer',
  email: 'ted.smith@gmail.com',
  company: 'Electrical Systems',
  age: 30,
  education: 'High School Of Cambridge with a much longer title here',
  knownledge: 'Java, Ruby'
}, {
  name: 'Ed',
  surname: 'Johnson',
  position: 'C/C++ Market Data Developer',
  email: 'ed.johnson@gmail.com',
  company: 'Energy and Oil',
  age: 35,
  education: 'High School Of Cambridge',
  knownledge: 'C++'
}, {
  name: 'Sam',
  surname: 'Williams',
  position: 'Technical Analyst',
  email: 'sam.williams@gmail.com',
  company: 'Airbus',
  age: 38,
  education: 'High School Of Cambridge',
  knownledge: ''
}, {
  name: 'Alexander',
  surname: 'Brown',
  position: 'Project Manager',
  email: 'alexander.brown@gmail.com',
  company: 'Renault',
  age: 24,
  education: 'High School Of Cambridge',
  knownledge: ''
}, {
  name: 'Nicholas',
  surname: 'Miller',
  position: 'Senior Software Engineer',
  email: 'nicholas.miller@gmail.com',
  company: 'Adobe',
  age: 33,
  education: 'High School Of Cambridge',
  knownledge: 'Unix, C/C++'
}, {
  name: 'Andrew',
  surname: 'Thompson',
  position: 'Agile Project Manager',
  email: 'andrew.thompson@gmail.com',
  company: 'Google',
  age: 28,
  education: 'High School Of Cambridge',
  knownledge: ''
}, {
  name: 'Ryan',
  surname: 'Walker',
  position: 'Application Support Engineer',
  email:...