jQuery Convert HTML Table Into Spreadsheet - Sheetjs

Convert HTML Table Into Spreadsheet
jQuery Convert HTML Table Into Spreadsheet

Sheetjs is a jQuery plugin that converts large HTML tables into spreadsheet-style data grids for better display and manipulation of tabular data.


  • Sort data alphabetically (A to Z or Z to A).
  • Data Filter.
  • Copy the selected cells or columns.
  • Sum a column or row of numbers
  • Context menu.
  • Easy to implement.

How to use it:

1. Load the stylesheet sheetjs.css and JavaScript sheetjs.js in the HTML document.

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- sheetjs plugin -->
<link rel="stylesheet" href="sheetjs.css" />
<script src="sheetjs.js"></script>

2. Just add the CSS class sheetjs to your HTML table and the plugin will take care of the rest.

<table class="sheetjs">
  <caption>List of countries by population (United Nations)</caption>
      <th rowspan="2">NO</th>
      <th rowspan="2">Country/Territory</th>
      <th rowspan="2">UN continental<br>region</th>
      <th rowspan="2">UN statistical<br>subregion</th>
      <th colspan="2">Population</th>
      <th rowspan="2">Change</th>
      <th>1 July 2018</th>
      <th>1 July 2019</th>
      <td>Eastern Asia</td>
      <td align="right">1,427,647,786</td>
      <td align="right">1,433,783,686</td>
      <td align="right">0.43%</td>
      <td>Southern Asia</td>
      <td align="right">1,352,642,280</td>
      <td align="right">1,366,417,754</td>
      <td align="right">1.02%</td>
      <td>United States</td>
      <td>Northern America</td>
      <td align="right">327,096,265</td>
      <td align="right">329,064,917</td>
      <td align="right">0.60%</td>

Live Demo

See the Pen Untitled by Plugin JS (@teguhsigit) on CodePen.

File Info

File Name :
Size :
Site Download :
Official Website:
Go to website
Previous Post Next Post