document.addEventListener("DOMContentLoaded", function() { new FancyGrid({ emptyText: 'Drop items to display', title: 'London Office', renderTo: 'mainOffice', theme: 'extra-gray', width: 400, height: 500, data: data, selModel: 'rows', trackOver: true, droppable: true, defaults: { type: 'string', width: 100, sortable: true, resizable: true, editable: true, vtype: 'notempty' }, columns: [{ type: 'rowdrag' }, { type: 'select' }, { index: 'id', width: 40, type: 'number' }, { title: 'Name', render: function(o) { o.value = o.data.name + ' ' + o.data.surname; return o; } }, { index: 'birthday', title: 'Birthday', type: 'date', width: 100 }, { index: 'country', title: 'Country', type: 'combo', data: ['USA', 'England', 'Canada', 'Germany'] }, { index: 'position', title: 'Position', width: 100 }, { index: 'hour', type: 'currency', title: 'Hour rate', width: 70 }, { index: 'active', type: 'checkbox', title: 'Active?', width: 60 }, { title: 'email', index: 'email', width: 150 }] }); new FancyGrid({ emptyText: 'Drop items to display', theme: 'extra-gray', title: 'Edinburgh office', renderTo: 'newOffice', width: 400, height: 500, data: { fields: ['id', 'name', 'surname', 'birthday', 'country', 'position', 'hour', 'active', 'email'], items: [] }, selModel: 'rows', trackOver: true, droppable: true, defaults: { type: 'string', width: 100, sortable: true, resizable: true, editable: true, vtype: 'notempty' }, columns: [{ type: 'rowdrag' }, { type: 'select' }, { index: 'id', width: 40, type: 'number' }, { title: 'Name', render: function(o) { o.value = o.data.name + ' ' + o.data.surname; return o; } }, { index: 'birthday', title: 'Birthday', type: 'date', width: 100 }, { index: 'country', title: 'Country', type: 'combo', data: ['USA', 'England', 'Canada', 'Germany'] }, { index: 'position', title: 'Position', width: 100 }, { index: 'hour', type: 'currency', title: 'Hour rate', width: 70 }, { index: 'active', type: 'checkbox', title: 'Active?', width: 60 }, { title: 'email', index: 'email', width: 150 }] }); }); var data = [{ id: 1, name: 'Ted', surname: 'Smith', email: '[email protected]', position: 'Java Developer', birthday: '6/22/1953', country: 'USA', hour: 52, active: true, about: 'Likes to play on guitar.' }, { id: 2, name: 'Ed', surname: 'Johnson', email: '[email protected]', position: 'C/C++ Market Data Developer', birthday: '9/12/1971', country: 'England', hour: 26, active: true, about: 'Proffesional persone.' }, { id: 3, name: 'Sam', surname: 'Williams', email: '[email protected]', position: 'Technical Analyst', birthday: '9/2/1973', country: 'USA', hour: 40, active: true, about: 'Dreams about travel around the world.' }, { id: 4, name: 'Alexander', surname: 'Brown', email: '[email protected]', position: 'Project Manager', country: 'USA', birthday: '9/25/1991', hour: 33, active: true, about: 'Has big family.' }, { id: 5, name: 'Nicholas', surname: 'Miller', email: '[email protected]', position: 'Senior Software Engineer', country: 'Canada', birthday: '8/24/1959', hour: 50, active: false, about: 'Has country house where team spent holidays.' }, { id: 6, name: 'Andrew', surname: 'Thompson', email: '[email protected]', position: 'Agile Project Manager', country: 'Germany', birthday: '8/18/1978', hour: 27, active: true, about: 'Encourages team.' }, { id: 7, name: 'Ryan', surname: 'Walker', email: '[email protected]', position: 'Application Support Engineer', country: 'England', birthday: '4/2/1981', hour: 40, active: true, about: 'Intelligent and polite, works with VIP clients' }, { id: 8, name: 'John', surname: 'Scott', email: '[email protected]', position: 'Flex Developer', country: 'USA', birthday: '2/14/1960', hour: 71, active: true, about: 'Cool at support.' }, { id: 9, name: 'James', surname: 'Phillips', email: '[email protected]', position: 'Senior C++/C# Developer', country: 'USA', birthday: '10/18/1991', hour: 58, active: true, about: 'Works 24 hours per day.' }, { id: 10, name: 'Brian', surname: 'Edwards', email: '[email protected]', position: 'UNIX/C++ Developer', country: 'USA', birthday: '4/16/1963', hour: 64, active: false, about: 'Dreams to built self car.' }, { id: 11, name: 'Jack', surname: 'Richardson', email: '[email protected]', position: 'Ruby Developer', country: 'Germany', birthday: '11/20/1982', hour: 58, active: true, about: 'Helps in office.' }, { id: 12, name: 'Alex', surname: 'Howard', email: '[email protected]', position: 'CSS3/HTML5 Developer', country: 'USA', birthday: '7/22/1987', hour: 66, active: true, about: 'Manages meetings.' }, { id: 13, name: 'Carlos', surname: 'Wood', email: '[email protected]', position: 'Node.js Developer', country: 'USA', birthday: '8/8/1988', hour: 41, active: true, about: 'Like to present product on performances.' }, { id: 14, name: 'Adrian', surname: 'Russell', email: '[email protected]', position: 'Frontend Developer', country: 'Canada', birthday: '6/19/1969', hour: 25, active: true, about: 'Dreams to buy plain.' }, { id: 15, name: 'Jeremy', surname: 'Hamilton', email: '[email protected]', position: 'Scala Developer', country: 'USA', birthday: '4/17/1950', hour: 69, active: true, about: 'Dreams to go in cruis with all team.' }, { id: 16, name: 'Ivan', surname: 'Woods', email: '[email protected]', position: 'Objective C Developer', country: 'USA', birthday: '3/25/1964', hour: 64, active: false, about: 'Likes to play hockey.' }, { id: 17, name: 'Peter', surname: 'West', email: '[email protected]', position: 'PHP/HTML Developer', country: 'England', birthday: '9/6/1977', hour: 30, active: true, about: 'Just married.' } ];
<script src="https://cdn.fancygrid.com/fancy.min.js"></script> <div style="position:relative"> <div id="mainOffice" style="width: 400px;float: left;"></div> <div id="newOffice" style="float: left;margin-left: 10px;"></div> </div>