Infinite

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: 900,
    height: 600,
    data: {
      proxy: {
        url: 'https://fancygrid.com/json-data/data-10000.json'
      }
    },
    infinite: true,
    theme: 'extra-gray',
    title: 'Infinite',
    selModel: {
      type: 'cell',
      activeCell: true
    },
    defaults: {
      type: 'string',
      width: 150,
      editable: true,
      sortable: true,
      draggable: true,
      resizable: true,
      menu: true,
      filter: {
        header: true
      }
    },
    columns: [{
      type: 'order',
      width: 50,
      locked: true
    }, {
      index: 'company',
      title: 'Company'
    }, {
      index: 'name',
      title: 'Name'
    }, {
      index: 'surname',
      title: 'Sur Name'
    }, {
      index: 'age',
      width: 50,
      title: 'Age',
      summary: 'sum',
      type: 'number'
    }, {
      index: 'country',
      title: 'Country',
      rightLocked: true
    }, {
      index: 'position',
      title: 'Position'
    }]
  });

});