document.addEventListener("DOMContentLoaded", function() { new FancyGrid({ title: 'Server paging and sorting', renderTo: 'container', width: 700, height: 400, theme: 'blue', data: { remoteSort: true, proxy: { url: 'https://fancygrid.com/ajax/ajax.php' } }, paging: true, defaults: { type: 'string', width: 100, sortable: true, resizable: true, ellipsis: true }, columns: [{ index: 'company', locked: true, title: 'Company' }, { index: 'name', title: 'Name' }, { index: 'surname', title: 'Sur Name' }, { index: 'age', width: 60, title: 'Age', type: 'number' }, { index: 'position', locked: true, title: 'Position', width: 150 }] }); });
<script src="https://cdn.fancygrid.com/fancy.min.js"></script> <div id="container"></div>