Transpose Table For Better Readability - jQuery table.Transpose.js

table.Transpose.js is a jQuery plugin that transposes tabular data from rows to columns (or vice versa), with horizontal or vertical headers, for better readability.

How to use it:

1. Include the necessary jQuery and jQuery UI libraries on the web page.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="scripts/jquery.table.transpose.min.js"></script>

2. Transpose your HTML table with horizontal or vertical headers as these:

$(function () {

  // 0 = Horizontal, 1 = Vertical
  if (!$("#table").is(":blk-transpose"))
      $("#table").transpose({ mode: 0 });

  if (!$("#table").is(":blk-transpose"))
      $("#table").transpose({ mode: 1});
      
});

3. This will convert the regular html table...

<table id="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Telephone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bill Gates</td>
      <td>555 77 854</td>
    </tr>
    <tr>
      <td>Steve Jobs</td>
      <td>888 99 222</td>
    </tr>
    <tr>
      <td>Mark Zuckerberg</td>
      <td>777 88 999</td>
    </tr>
  </tbody>
</table>

4. Into...

<table id="table">
  <thead style="display: none;">
    <tr>
      <th>Name</th>
      <th>Telephone</th>
    </tr>
  </thead>
  <tbody>
    <tr style="display: none;"> </tr>
    <tr style="display: none;"> </tr>
    <tr style="display: none;"> </tr>
    <tr id="tp_row_table_0" class="tp_rows">
      <th>Name</th>
      <td>Bill Gates</td>
      <td>Steve Jobs</td>
      <td>Mark Zuckerberg</td>
    </tr>
    <tr id="tp_row_table_1" class="tp_rows">
      <th>Telephone</th>
      <td>555 77 854</td>
      <td>888 99 222</td>
      <td>777 88 999</td>
    </tr>
  </tbody>
</table>

5. Reset the HTML table.

$("#table").transpose("reset");

---

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