Limejar Grid - LimeGRID

Table, Datagrid and Spreadsheet components for Javascript Web Applications.

  • Minimal Code to transform data into a Datagrid
  • JSON Source
  • REST Interfaces
  • Bootstrap Integration
  • Vanilla Javascript
  • Users Demo

    Please chose a theme below.

    Spreadsheet

    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: [
    		  {
    			data: 'Forenames'
    		  },
    		  {
    			data: 'Surname',
    			bold: true
    		  },
    		  {
    			data: 'Email'
    		  },
    		  {
    			data: 'DOB',
    			type: 'date'
    		  },
    		  {
    			data: 'PhoneNumber'
    		  },
    		  {
    			data: 'StaffReference',
    			readOnly: true
    		  }
    		],
    		columnSorting: true,
    		spreadsheet: true,
    		sortIndicator: true,
    		showIndicator: true
    	});
    	
    	grid.render(container);
    	

    Card View

    Arrange your data in a image focused card view ... This sample also illustrates grouping "groupBy" grid separators.

    Pivot Chart / Crosstab

    Please note this grid is editable. Please click Save below to save your changes once finished editing.