document.addEventListener("DOMContentLoaded", function() { new FancyGrid({ renderTo: 'container', title: 'Paging - bar type', width: 690, height: 400, data: data, defaults: { type: 'string', width: 100, editable: true, sortable: true }, paging: { barType: 'both' }, columns: [{ index: 'id', locked: true, title: 'ID', type: 'number', editable: false, width: 40 }, { index: 'company', width: 105, locked: true, title: 'Company' }, { index: 'name', title: 'Name' }, { index: 'surname', title: 'Sur Name' }, { index: 'age', width: 60, title: 'Age', type: 'number' }] }); }); var data = [{ id: 1, name: 'Ted', surname: 'Smith', position: 'Java Developer', email: '[email protected]', company: 'Electrical Systems', age: 30, education: 'High School Of Cambridge', knownledge: 'Java, Ruby' }, { id: 2, name: 'Ed', surname: 'Johnson', position: 'C/C++ Market Data Developer', email: '[email protected]', company: 'Energy and Oil', age: 35, education: 'High School Of Cambridge', knownledge: 'C++' }, { id: 3, name: 'Sam', surname: 'Williams', position: 'Technical Analyst', email: '[email protected]', company: 'Airbus', age: 38, education: 'High School Of Cambridge', knownledge: '' }, { id: 4, name: 'Alexander', surname: 'Brown', position: 'Project Manager', email: '[email protected]', company: 'Renault', age: 24, education: 'High School Of Cambridge', knownledge: '' }, { id: 5, name: 'Nicholas', surname: 'Miller', position: 'Senior Software Engineer', email: '[email protected]', company: 'Adobe', age: 33, education: 'High School Of Cambridge', knownledge: 'Unix, C/C++' }, { id: 6, name: 'Andrew', surname: 'Thompson', position: 'Agile Project Manager', email: '[email protected]', company: 'Google', age: 28, education: 'High School Of Cambridge', knownledge: '' }, { id: 7, name: 'Ryan', surname: 'Walker', position: 'Application Support Engineer', email: '[email protected]', company: 'Siemens', age: 39, education: 'High School Of Cambridge', knownledge: 'ActionScript' }, { id: 8, name: 'John', surname: 'Scott', position: 'Flex Developer', email: '[email protected]', company: 'Cargo', age: 45, education: 'High School Of Cambridge', knownledge: 'Flex' }, { id: 9, name: 'James', surname: 'Phillips', position: 'Senior C++/C# Developer', email: '[email protected]', company: 'Pro bugs', age: 30, education: 'High School Of Cambridge', knownledge: 'C/C++, Unix' }, { id: 10, name: 'Brian', surname: 'Edwards', position: 'UNIX/C++ Developer', email: '[email protected]', company: 'IT Consultant', age: 23, education: 'High School Of Cambridge', knownledge: 'C/C++ Unix' }, { id: 11, name: 'Jack', surname: 'Richardson', position: 'Ruby Developer', email: '[email protected]', company: 'Europe IT', age: 24, education: 'High School Of Cambridge', knownledge: 'Ruby' }, { id: 12, name: 'Alex', surname: 'Howard', position: 'CSS3/HTML5 Developer', email: '[email protected]', company: 'Cisco', age: 27, education: 'High School Of Cambridge', knownledge: 'CSS3/HTML5' }, { id: 13, name: 'Carlos', surname: 'Wood', position: 'Node.js Developer', email: '[email protected]', company: 'HP', age: 36, education: 'High School Of Cambridge', knownledge: 'Node.js' }, { id: 14, name: 'Adrian', surname: 'Russell', position: 'Frontend Developer', email: '[email protected]', company: 'Micro Systems', age: 31, education: 'High School Of Cambridge', knownledge: 'HTML, JavaScript' }, { id: 15, name: 'Jeremy', surname: 'Hamilton', position: 'Scala Developer', email: '[email protected]', company: 'Big Machines', age: 30, education: 'High School Of Cambridge', knownledge: 'Scala' }, { id: 16, name: 'Ivan', surname: 'Woods', position: 'Objective C Developer', email: '[email protected]', company: '', age: 24, education: 'High School Of Cambridge', knownledge: 'Objective C' }, { id: 17, name: 'Peter', surname: 'West', position: 'PHP/HTML Developer', email: '[email protected]', company: 'Adobe', age: 26, education: 'High School Of Cambridge', knownledge: 'PHP/HTML' }, { id: 18, name: 'Scott', surname: 'Simpson', position: 'Designer', email: '[email protected]', company: 'IBM', age: 29, education: 'High School Of Cambridge', knownledge: 'Adobe PhotoShop' }, { id: 19, name: 'Lorenzo', surname: 'Tucker', position: 'Architect', email: '[email protected]', company: 'Intel', age: 29, education: 'High School Of Cambridge', knownledge: '' }, { id: 20, name: 'Randy', surname: 'Grant', position: 'Engineer', email: '[email protected]', company: 'Bridges', age: 30, education: 'High School Of Cambridge', knownledge: '' }, { id: 21, name: 'Arthur', surname: 'Gardner', position: 'Analytic', email: '[email protected]', company: 'Google', age: 31, education: 'High School Of Cambridge', knownledge: '' }, { id: 22, name: 'Orlando', surname: 'Ruiz', position: 'Unit Testing Developer', email: '[email protected]', company: 'Apple', age: 32, education: 'High School Of Cambridge', knownledge: '' }];
<link href="https://cdn.fancygrid.com/fancy.min.css" rel="stylesheet"> <script src="https://cdn.fancygrid.com/fancy.min.js"></script> <div id="container"></div>