Spreadsheet-Like Editable Table Plugin With jQuery - tableX

tableX is a simple, lightweight, accessible jQuery plugin which makes the table cells editable similar to the spreadsheet application. Supports copy, paste and keyboard interactions.

How to use it:

1. Include the tableX plugin and other required resources on the html page.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="tableX.js"></script>
<link rel="stylesheet" href="tableX.css">

2. Create a normal HTML table for the spreadsheet.

<table class="tableX" border="0">
  <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
  </tr>
  <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
  </tr>
  <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
  </tr>
  <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
  </tr>
  <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
  </tr>
  <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
  </tr>
  <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
  </tr>
  <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
  </tr>
  <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
  </tr>
</table>

3. Activate the plugin on the html table and specify the table cells to be editable.

$('.tableX').tableX({ 
  index_from_left: 0, 
  index_from_right: 0, 
  index_from_top: 0 
});

4. Override the default CSS styles as per your needs.

.active-cell { border: 1px solid #007064 !important; }

.tableX-txt-box {
  height: 100%;
  width: 100%;
  background: none;
}

.projected {
  box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
  z-index: 100;
}

.selected-area { background: linear-gradient(to bottom, rgba(181,209,255,0.34) 0%, rgba(181,209,255,0.34) 100%); }

.tableX-clipboard-text-area {
  position: fixed;
  top: 0;
  left: -99999px;
  width: 100%;
  height: 100%;
}

---

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