Apply a Simple Spreadsheet UI to the HTML Table Tag | sheetjs

sheetjs is a simple spreadsheet UI application to your table tag as a plugin to jQuery. Simply write the class “sheetjs” into your “table”. sheetjs is a jQuery plug-in that transforms large HTML tables into spreadsheet-style data grids for better display and manipulation of tabular data.

export html table data to excel using jquery without plugin, how to display excel data in html table using javascript, convert html table to excel with formatting, import data from excel to html table using jquery

How to make use of it:

1. Load the stylesheet sheetjs.css and JavaScript sheetjs.js within the HTML doc.

<!-- 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 handle the remaining.

<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>


  • Prerequisites

    • Table tag is complete. Use thead, tbody, tfoot and caption properly.
    • Works on both IE7 and Chrome.
  • Functions

    • Cell selection
      • Click the cell to select it.
      • Click with Shift-key, the rectangle will be sekected.
      • If another area is selected, the selection will be removed.
    • Line selection
      • Click ‘th’ at the beginning of a line in tbody, you can also select a ractangle by selectiong the line
      • Clicking on other element on th is not work
    • Column selection
      • Click on a colum ‘thead th’ to select all the columns with thead, tbody and tfoot.
      • ‘th’ only. ‘td’ does not react.
    • Value copy
      • Selecting cell text can be copy into your clipboard with Copy command, ‘Ctrl + c’ or right-click.
      • The copied value is in TSV (tab separated) text format and can be pasted into Excel as it is.
      • The text does not include INPUT or A tag link information. Extract only pure text
    • Filter
      • Select a cell and right-click to Filter to filter the entire table with the selected value
    • Line count display
      • The number of displayed tbody columns is automatically counted and displayed on the screen. If you have declared a caption tag.
    • Total value display
      • Sum the value of the selected cell and display it. If you have declared a caption tag.
      • Take out what looks like a number and add it up. For example, if you select 1,000 yen and A-100, 1000+ (-100) will be 900.
    • Header fixed
      • Follow only the header title as the window scrolls
  • Functional restrictions in IE

    • Header fixed
    • No icons in IE7

Convert HTML Table Into Spreadsheet, sheetjs Plugin/Github, export html table to xlsx using javascript, export html table to excel with formatting, html table to excel javascript, convert html table to excel

HTML Table Tag sheetjs

See Demo And Download

Official Website(hidehitomobile): Click Here

This superior jQuery/javascript plugin is developed by hidehitomobile. For extra Advanced Usages, please go to the official website.

Related Posts


Create Side Sliders Input Values Using Mouse Drag | Pointer Lock

HTML Range Slider is a lightweight library to create side sliders to adjust values easily and precisely by making use of the Pointer Lock API. Side Slider…


Smooth and Lightweight Parallax Scroll Library in Pure Javascript

Lightweight and seamless parallax scrolling library implemented in pure javascript using hardware acceleration for additional performance. Main Features Extremely lightweight with no dependencies A few kilobytes of pure…


How to Convert Form Data to JSON with HTML Forms | FormsJS

FormsJS is a simple-to-use JavaScript library that covers type subject values to JSON in real time. The items containing the data category will be analyzed automatically. It…


A Small jQuery Extension to Convert An Editable HTML Table

Editable Table is a small jQuery extension to convert an editable HTML table for fast data entry and validation. A small jQuery extension to convert a static…

Simple jQuery Plugin for Embedding YouTube Videos As Cover Background is a jQuery plugin built to facilitate YouTube embeds as cover wallpaper using the YouTube Embed API. There is another jQuery Youtube Video Background plugin that…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…