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

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

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

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.

  • Publication date: 04.12.2017
  • Source