HTML Table Enhancement Plugin - jQuery simpleTable

simpleTable is a jQuery plugin which enhances the regular HTML table with the following advanced features: 

• Fixed table headers/columns.
• Dynamic data rendering.
• Single- or multi-row selection.
• Merges rows/columns.

How to use it:

1. Insert both jQuery library and the simpleTable plugin into your HTML file.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="simpletable.compress.js"></script>

2. Prepare your data to be presented in the HTML table.

var results = [
    { id: '1', date: '05-02-2019', name: 'jQuery', address: 'Your Address Here', state: 'Alabama', city: 'Birmingham' },
    { id: '2', date: '05-03-2019', name: 'Script', address: 'Your Address Here', state: 'Alaska', city: 'Anchorage' },
    { id: '3', date: '05-04-2019', name: 'CSS', address: 'Your Address Here', state: 'American Samoa', city: 'Tafuna' },
    { id: '4', date: '05-05-2019', name: 'HTML', address: 'Your Address Here', state: 'Arizona', city: 'Phoenix' },
];

3. Render the data in an HTML table.

<div id="basicTable">
</div>

var option = {
    tableClass: 'cgridTable',
    head: [
      {
        'data-field': 'id',
        'display': false
      },
      {
        'data-field': 'date',
        'name': 'Date'
      },
      {
        'data-field': 'name',
        'name': 'Name'
      },
      {
        'data-field': 'address',
        'name': 'Address'
      }
    ]
};

// initialize the table
var ctable = cgrid.instance("basicTable", option);

// generate the table
ctable.genTable(results);

4. Create fixed table headers & columns.

var option = {
    tableClass: 'cgridTable',
    titleFixed: true, // fixed header
    head: [
      {
        'data-field': 'id',
        'display': false
      },
      {
        'data-field': 'date',
        'name': 'Date',
        'fixed': true // fixed column
      },
      {
        'data-field': 'name',
        'name': 'Name'
      },
      {
        'data-field': 'address',
        'name': 'Address'
      }
    ]
};

5. Make table rows selectable with checkboxes.

// single selection
var oneRowSelTable;
function oneRowSelTable() {
  var option = {
      withCheckBox: true,
      disableMutiSel: true,
      tableClass: 'cgridTable',
      head: [
          {
              'data-field': 'id',
              'display': false
          },
          {
              'data-field': 'date',
              'name': 'Date'
          },
          {
              'data-field': 'name',
              'name': 'Name'
          },
          {
              'data-field': 'address',
              'name': 'Address'
          }
      ]
  };
  oneRowSelTable = cgrid.instance("oneRowSelTable", option);
  oneRowSelTable.genTable(results);
}

function oneRowClick() {
  var selectedRow = oneRowSelTable.getChecked();
  if (selectedRow.length < 1) {
      alert("Select A Row");
  }
  else {
      alert(JSON.stringify(selectedRow[0]));
  }
}

// multiple selection
var multRowsSelTable;
function multRowsSelTable() {
  var option = {
      withCheckBox: true,
      disableMutiSel: false,
      tableClass: 'cgridTable',
      head: [
          {
              'data-field': 'id',
              'display': false
          },
          {
              'data-field': 'date',
              'name': 'Date'
          },
          {
              'data-field': 'name',
              'name': 'Name'
          },
          {
              'data-field': 'address',
              'name': 'Address'
          }
      ]
  };
  multRowsSelTable = cgrid.instance("multRowsSelTable", option);
  multRowsSelTable.genTable(results);
}

function multRowsClick() {
  var selectedRows = multRowsSelTable.getChecked();
  if (selectedRows.length < 1) {
      alert("Select A Row");
  }
  else {
      alert(JSON.stringify(selectedRows));
  }
}

6. Merge table cells.

var option = {
    tableClass: 'cgridTable',
    head: [
      {
        'data-field': 'id',
        'name': 'ID',
        'mergeRow': true, // merge rows
      },
      {
        'data-field': 'name',
        'name': 'Name'
      },
      {
        'data-field': 'state',
        'name': 'State'
      },
      {
        'data-field': 'city',
        'name': 'City'
      },
      {
        'data-field': 'address',
        'name': 'Address'
      }
    ],

    // merge columns
    mergeinrows: [1,3],
    mergerowcellsize: 2

};

---

This awesome jQuery plugin is developed by omengye. For more Advanced Usages, please check the demo page or visit the official website.