Javascript Performance Grid Table

  • Performance grid table with and without pagination option control by flag based.
  • Records will be load in grid on lighting speed won’t get hang browsers progress of loading and while using.
  • We have tested with Millions of massive records in both( with/without ) pagination option records loaded without hang.
  • Pagination is able to navigate through usual all arrows, pagination and home-end key felicity.
  • With filterable and Sort-able formatting choice for each filed, this formatting choice having each field autonomous level on/off flag based, as well as global level too.
  • And serial number enable or disable option available.
  • Theme supportable facility ( Have two more themes ) and footer calculation option.
  • With in the page N number of the grid can able to implement and each grid will be applicable described all behaviors.

Checked with all the browsers [ Chrome, Firefox, opera, Edge, Safari ]. developed by only native JavaScript for all described behavior.

Let’s see the example

Example for grid table header config Available fields are name, title, behavior, editable, width, align, footer and hasFilter.

Field Type Required
name String Yes
title String Yes
behavior String (alpha, alphanumeric, numeric, decimal) No
editable Boolean No
width Int Yes
align String (right, center) No
footer Object (See example) No
hasFilter Boolean No
type String checkbox
 

var header_config = [ {
            name : "name",
            title : "Name",
            behavior : "alpha",
            editable : false,
            width : 15,
            hasFilter : true,
            footer : { "show" : true, "calc" : false, "title" : "Total" }
         }, {
            name : "email",
            title : "Email",
            behavior : "alpha",
            editable : true,
            width : 20
        }, {
           name : "number",
           title : "Number",
           behavior : "alpha",
           editable : false,
           width : 15,
           sort : true,
           hasFilter : true,
           align : "center",
           footer : { "show" : true, "calc" : true, "title" : "" }
        }, {
           name : "ip_address",
           title : "Ip Address",
           behavior : "float",
           editable : false,
           width : 20,
           align : "right",
           hasFilter : true,
           footer : { "show" : true, "calc" : false, "title" : "Total" }
       }, {
           name : "dp_toggle",
           title : "Select Item",
           behavior : "float",
           editable : false,
           width : 10,
           type : "checkbox",
           align : "right",
           hasFilter : false
       } ];

 

Sample records for rendering sample grid

 
var records = [];
var record = [{
	  id           : 1,
	  name         : "Jeanette",
	  email        : "jpenddreth0@census.gov",
	  gender       : "Female",
	  ip_address   : "26.58.193.2",
          number       : 2,
          dp_toggle    : false
	}, {
	   id          : 2,
	   name        : "Giavani",
	   email       : "gfrediani1@senate.gov",
	   gender      : "Male",
	   ip_address  : "229.179.4.212",
           number      : 13,
           dp_toggle   : false
	}, {
	   id          : 3,
	   name        : "Noell",
	   email       : "nbea2@imageshack.us",
	   gender      : "Female",
	   ip_address  : "180.66.162.255",
           number      : 4,
           dp_toggle   : false
	}, {
	   id          : 4,
	   name        : "Willard",
	   email       : "wvalek3@vk.com",
	   gender      : "Male",
	   ip_address  : "67.76.188.26",
           number      : 7,
           dp_toggle   : true
	}];

	for( var n = 0; n < 400400; n++ ){
	     var rnumber = Math.floor( ( Math.random() * 4 ) + 0 );
	     records[n] = JSON.parse( JSON.stringify( record[rnumber] ) );
	}

Call back functions for grid actions. Using this functions you can validate record.

 

      var callbacks = {
		beforeRender : function( record ){
		   // todo...
		   return record;
		}, isCellEditable : function( record, index, field ){
		   var isEditable = false;
		   // todo...
		   return isEditable;
		}, injectHtml : function( record, index, field ){
		   var html = record[index][field];
		   // todo...
		   return html;
		}, onMoveNextCell : function( _prevIndex, _prevFieldName, _prevEnteredValue, _currentIndex, _currentFieldName,  _prevRecord, _currentRecord,  _targetElement ){
		   // Like to change the prev edited value and move current index pass return true otherwise return false
		   return true;
		}
	}

Here Grid table config

Field Type Required
config Object Yes
record Array(Object) or Array Yes
isPagination Boolean (false) No
gridId String ( Html ID ) No
enableSerialNumber Boolean (true) No
showPageInfo Boolean (true) No
enableSortable Noolean (true) No
recordPerPage Int Yes
enableHorizontalView Boolean (false) No
context Object (Callback actions) No
container String (css class or id) Yes
showPageField Boolean (false) No
enableFilter Boolean (false) No
isFooter Boolean (false) No
setActive Boolean (true) No
theme String (block-lite-line, borderless) No
cellHeight Int No
 

     var gridOne = new db_grid( {
		  config  		: header_config,
		  record  		: records,
		  isPagination   	: false,
		  gridId  		: "user-table",
		  enableSerialNumber    : true,
		  showPageInfo  	: false,
		  enableSortable  	: true,
		  recordPerPage  	: 15,
		  enableHorizontalView  : false,
		  context  		: callbacks,
		  container  		: "#container",
		  showPageField  	: true,
		  enableFilter		: true,
		  isFooter 		: true,
		  setActive  		: true,
		  theme 		: "block-lite-line",
		  cellHeight  		: 30
		});

Grid table live Config – Modify and click ( Reload Grid ) button grid will reload with your changes.
isPagination
enableSerialNumber
enableSortable
enableHorizontalView
showPageField
enableFilter
isFooter
setActive
recordPerPage
cellHeight
theme
And the result is

Methods

Method name Result
gridOne.getEditedRecord() If something edited or change on grid records only will return
gridOne.getRecord() Get all the records
gridOne.goToRecord( _recordNumber ) Show on top of the grid, need to pass record index
gridOne.setActive( _recordNumber, _fieldName ) Set active and select grid cell, need to pass record index and field name.
gridOne.reset( _newRecord ) Reset entire grid, if you not pass _newRecord old record will be show on grid.
Sample project 

Leave a Comment