Table, Datagrid and Spreadsheet components for Javascript Web Applications.
Please note this grid is editable ...
var container = document.getElementById('grdSpreadsheet'); var list = [ { Surname: 'Smith', Forenames: 'John', DOB: new Date(1976, 5, 1)}, { Surname: 'Roberts', Forenames: 'Mark', DOB: new Date(1980, 8, 3)}, { Surname: 'Rojas-Sanchez', Forenames: 'Oscar', DOB: new Date(1980, 8, 3)}, { Surname: 'Craig', Forenames: 'Anthony', DOB: new Date(1980, 8, 3)}, { Surname: 'Devlin', Forenames: 'Brendan', DOB: new Date(1980, 8, 3)}, { Surname: 'Boyd', Forenames: 'Sara', DOB: new Date(1980, 8, 3)}, { Surname: 'de Bruin', Forenames: 'Pierre', DOB: new Date(1980, 8, 3)}, { Surname: 'Collins', Forenames: 'Jane', DOB: new Date(1980, 8, 3)}, { Surname: 'Zuckerberg', Forenames: 'Frank', DOB: new Date(1980, 8, 3)}, { Surname: 'Doe', Forenames: 'Jane', DOB: new Date(1980, 8, 3)}, { Surname: 'Doe', Forenames: 'Jane', DOB: new Date(1980, 8, 3)} ]; var grid = new LimeGrid({ data: list, colHeaders: [ 'Forenames', 'Surname', 'Email', 'Date of Birth', 'Phone', 'Staff No' ], columns: [ { field: 'Forenames' }, { field: 'Surname', bold: true }, { field: 'Email' }, { field: 'DOB', type: 'date' }, { field: 'PhoneNumber' }, { field: 'StaffReference', readOnly: true } ], columnSorting: true, spreadsheet: true, sortIndicator: true, showIndicator: true }); grid.render(container);
Arrange your data in a image focused card view ... This sample also illustrates grouping "groupBy" grid separators.
Please note this grid is editable. Please click Save below to save your changes once finished editing.