document.addEventListener("DOMContentLoaded", function() { 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, editable: 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' }] }); });
<script src="https://cdn.fancygrid.com/fancy.min.js"></script> <div id="container"></div>