Easy Editable Data Grid with Vanilla JavaScript – GridEdit

A simple lightweight JavaScript library for creating an easily editable data grid like the spreadsheet. Double click to make a cell editable.

How to use it:

Load the necessary gridedit.js library in the document.

<script src="path/to/gridedit.js"></script>

Create an empty DIV element that will be served as a container for the data grid.

<div id="gridedit"></div>

Prepare your data and inert into the data grid using JS array objects, and then initialize the data grid with available callbacks as shown below.

ge = new GridEdit({
  cols: [
    { label: 'Name', valueKey: 'name', type: 'string' },
    { label: 'Job Title', valueKey: 'jobTitle', type: 'string', style: { textAlign: 'left' } },
    { label: 'Number of Projects', valueKey: 'numProjects', type: 'number', editable: false }
  ],
  rows: [
    { name: 'Ben Simmons', jobTitle: 'AWESOME!', numProjects: '1000'},
    { name: 'Chuck Guilbert', jobTitle: 'BORING', numProjects: '2'}
  ],
  tableClass: 'table table-bordered',
  beforeInit: function() {
    // console.log('beforeInit');
  },
  afterInit: function() {
    // console.log('afterInit');
  },
  beforeCellActivate: function(cell) {
    if (cell.type === 'date' && cell.editable === true) {
      // console.log(cell, 'This is a date field!');
    }
    if (cell.meta.valueKey === 'notes') {
      // cell.element.onclick = function() {
      //   return false;
      // };
    }
  },
  afterCellActivate: function(cell) {
    // console.log(cell, 'afterCellActivate');
  },
  initialize: true
});

Feel free to style the data grid as follows.

table { max-width: 100%; }
th { text-align: left; }
.table {
  width: 100%;
  margin-bottom: 20px;
}
.table > thead > tr > th,
 .table > tbody > tr > th,
 .table > tfoot > tr > th,
 .table > thead > tr > td,
 .table > tbody > tr > td,
 .table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.428571429;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}
.table > caption + thead > tr:first-child > th,
 .table > colgroup + thead > tr:first-child > th,
 .table > thead:first-child > tr:first-child > th,
 .table > caption + thead > tr:first-child > td,
 .table > colgroup + thead > tr:first-child > td,
 .table > thead:first-child > tr:first-child > td { border-top: 0; }
.table > tbody + tbody { border-top: 2px solid #ddd; }
.table .table { background-color: #fff; }
.table-bordered { border: 1px solid #ddd; }
.table-bordered > thead > tr > th,
 .table-bordered > tbody > tr > th,
 .table-bordered > tfoot > tr > th,
 .table-bordered > thead > tr > td,
 .table-bordered > tbody > tr > td,
 .table-bordered > tfoot > tr > td { border: 1px solid #ddd; }
.table-bordered > thead > tr > th,
 .table-bordered > thead > tr > td { border-bottom-width: 2px; }
#contextMenu { position: absolute; }
#contextMenu .disabled {
  color: #C0C0C0;
  background: none;
}
#contextMenu li a { cursor: pointer; }
.active {
  background-color: #FFE16F !important;
  opacity: 0.6;
}
.uneditable {
  background: #FFBBB3 !important;
  opacity: 0.6;
}

Changelog:

06/22/2018

• Updates Utility function to handle keys with keycodes of 144 or greater