Dynamic Sortable Filterable Data Table In Pure JavaScript – simpleTable

simpleTable is a vanilla JavaScript library to dynamically renders a sortable, filterable, scrollable, editable data table from JavaScript/JSON data.

Click a cell to edit the tabular data in a modal popup with value validation support.

How to use it:

Insert the simpleTable.css and simpleTable.js into the document.

<link href="simpleTable.css" rel="stylesheet">
<script src="simpleTable.js"></script>

Create a container to hold the table.

<div id="tableContainer"></div>

Create an empty container for the modal popup.

<div id="myModal" class="modal" ></div>

Define the header of the table: column names (matching data), types, titles and width. Supported types : number, string and mm-dd-yyyy, mm/dd/yyyy, dd-mm-yyyy, dd/mm/yyyy.

var aHeader = '{"arr":[{"name":"id","type":"protected","title":"Key","width":"0px"},{"name":"firstname","type":"string","title":"First name","width":"200px"},{"name":"lastname","type":"string","title":"Last name","width":"200px","placeholder":"Name your hero !"},{"name":"birthdate","type":"mm-dd-yyyy","title":"Birthdate","width":"150px"},{"name":"langage","type":"string","title":"Language","width":"150px"},{"name":"note","type":"string","title":"note","width":"0px","list":"0,zero,1,one,2,two,3,three,4,four,5,five"},{"name":"useit","type":"string","title":"Use it ?","width":"0px","cb_list":"no,yes"}]}';

Define the data to be presented in the table.

var aData = '{"arr": [{"id": "1","firstname": "Bjarne ","lastname": "Stroustrup","birthdate": "12-30-1950","langage": "C++", "note":"","useit":"no"}, {"id": "2","firstname": "Denis","lastname": "Ritchie","birthdate": "09-09-1941","langage": "C", "note":"","useit":"no"}, {"id": "3","firstname": "Kenneth","lastname": "Thompson","birthdate": "02-04-1943","langage": "Go", "note":"","useit":"no"}, {"id": "4","firstname": "James","lastname": "Gosling","birthdate": "05-19-1955","langage": "Java", "note":"","useit":"no"}, {"id": "5","firstname": "Brendan ","lastname": "Eich","birthdate": "07-04-1961","langage": "Javascript", "note":"my fav","useit":"yes"}, {"id": "6","firstname": "Guido","lastname": "Van Rossum","birthdate": "01-31-1956","langage": "Python","useit":"yes"}, {"id": "7","firstname": "Yukihiro","lastname": "Matsumoto","birthdate": "04-14-1965","langage": "Ruby", "note":"my fav","useit":"no"}, {"id": "8","firstname": "Roberto","lastname": "Lerusalimschy","birthdate": "05-21-1960","langage": "Lua", "note":"","useit":"no"}, {"id": "9","firstname": "Rasmus","lastname": "Lerdorf","birthdate": "11-22-1968","langage": "Php", "note":"","useit":"yes"}, {"id": "10","firstname": "Jean","lastname": "Ichbiah","birthdate": "03-25-1940","langage": "Ada", "note":"","useit":"no"}]}';

Initialize the data table with the following parameters.

• zoneId: container ID
• tableId: table ID
• tableClass: table class(es)

var myTable = new SimpleTable("tableContainer","tableId","grid-table ");

Config the data table with the following options.

myTable.SetConfig({
  // my modal
  modal: 'myModal',
  // enable live filter
  allowSearch: true,
  // width
  width: "600px",
  // height
  height: "300px"
  
});

The function to validate the tabular data.

myTable.modalValidation = function(){
  var ok=true;
  var T_Err="";
  var lastname = $get('lastname').value;
  var language = $get('langage').value;
  if(lastname.length===0){
      ok=false;
      T_Err="LastName is mandatory";
  }
  if(ok){
    if(langage.length===0){
      ok=false;
      T_Err="Language is mandatory";
    }
  }
  if(!ok){
    $get(".err_sg_modal").innerHTML=T_Err;
  }
  return ok;
}

Declare the saving function.

myTable.config.save = function(){
  var json = myTable.getData();
  alert('You got to send this Json string to your backend !\r\n'+json);
}

Set the table header.

myTable.SetHeader(aHeader);

Populate the tabular data.

myTable.SetData(aData);

Render the data table on the page.

myTable.Draw();