Press "Enter" to skip to content

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>
  <thead>
    <tr>
      <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>
    </tr>
    <tr>
      <th>1 July 2018</th>
      <th>1 July 2019</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>China</td>
      <td>Asia</td>
      <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>
    </tr>
    <tr>
      <th>2</th>
      <td>India</td>
      <td>Asia</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>
    </tr>
    <tr>
      <th>3</th>
      <td>United States</td>
      <td>Americas</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>
    </tr>
    ...
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <td>World</td>
      <td></td>
      <td></td>
      <td>7,631,091,040</td>
      <td>7,713,468,100</td>
      <td>+1.08%
      </td>
    </tr>
  </tfoot>
</table>

Specifications

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.