document.addEventListener("DOMContentLoaded", function() { new FancyGrid({ theme: 'extra-gray', title: 'Array Data', renderTo: 'container', width: 450, height: 400, data: { items: data }, defaults: { type: 'string', width: 100 }, columns: [{ index: '4', width: 105, title: 'Company' }, { index: '0', title: 'Name' }, { index: '1', title: 'Sur Name' }, { index: '5', width: 60, title: 'Age', type: 'number' }] }); }); var data = [ ['Ted', 'Smith', 'Java Developer', '[email protected]', 'Electrical Systems', 30, 'High School Of Cambridge', 'Java, Ruby'], ['Ed', 'Johnson', 'C/C++ Market Data Developer', '[email protected]', 'Energy and Oil', 35, 'High School Of Cambridge', 'C++'], ['Sam', 'Williams', 'Technical Analyst', '[email protected]', 'Airbus', 38, 'High School Of Cambridge', ''], ['Alexander', 'Brown', 'Project Manager', '[email protected]', 'Renault', 24, 'High School Of Cambridge', ''], ['Nicholas', 'Miller', 'Senior Software Engineer', '[email protected]', 'Adobe', 33, 'High School Of Cambridge', 'Unix, C/C++'], ['Andrew', 'Thompson', 'Agile Project Manager', '[email protected]', 'Google', 28, 'High School Of Cambridge', ''], ['Ryan', 'Walker', 'Application Support Engineer', '[email protected]', 'Siemens', 39, 'High School Of Cambridge', 'ActionScript'], ['John', 'Scott', 'Flex Developer', '[email protected]', 'Cargo', 45, 'High School Of Cambridge', 'Flex'], ['James', 'Phillips', 'Senior C++/C# Developer', '[email protected]', 'Pro bugs', 30, 'High School Of Cambridge', 'C/C++, Unix'], ['Brian', 'Edwards', 'UNIX/C++ Developer', '[email protected]', 'IT Consultant', 23, 'High School Of Cambridge', 'C/C++ Unix'], ['Jack', 'Richardson', 'Ruby Developer', '[email protected]', 'Europe IT', 24, 'High School Of Cambridge', 'Ruby'], ['Alex', 'Howard', 'CSS3/HTML5 Developer', '[email protected]', 'Cisco', 27, 'High School Of Cambridge', 'CSS3/HTML5'], ['Carlos', 'Wood', 'Node.js Developer', '[email protected]', 'HP', 36, 'High School Of Cambridge', 'Node.js'], ['Adrian', 'Russell', 'Frontend Developer', '[email protected]', 'Micro Systems', 31, 'High School Of Cambridge', 'HTML, JavaScript'], ['Jeremy', 'Hamilton', 'Scala Developer', '[email protected]', 'Big Machines', 30, 'High School Of Cambridge', 'Scala'], ['Ivan', 'Woods', 'Objective C Developer', '[email protected]', '', 24, 'High School Of Cambridge', 'Objective C'], ['Peter', 'West', 'PHP/HTML Developer', '[email protected]', 'Adobe', 26, 'High School Of Cambridge', 'PHP/HTML'], ['Scott', 'Simpson', 'Designer', '[email protected]', 'IBM', 29, 'High School Of Cambridge', 'Adobe PhotoShop'], ['Lorenzo', 'Tucker', 'Architect', '[email protected]', 'Intel', 29, 'High School Of Cambridge', ''], ['Randy', 'Grant', 'Engineer', '[email protected]', 'Bridges', 30, 'High School Of Cambridge', ''], ['Arthur', 'Gardner', 'Analytic', '[email protected]', 'Google', 31, 'High School Of Cambridge', ''], ['Orlando', 'Ruiz', 'Unit Testing Developer', '[email protected]', 'Apple', 32, 'High School Of Cambridge', ''] ];
<script src="https://cdn.fancygrid.com/fancy.min.js"></script> <div id="container"></div>