Auto Merge Identical Adjacent Cells In Table - jQuery addTableRowSpan

File Size: 4.1 KB
Views Total: 172
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Auto Merge Identical Adjacent Cells In Table - jQuery addTableRowSpan

addTableRowSpan is a lightweight and fast jQuery plugin that automatically merges adjacent cells with the same value in an HTML table. This can help remove unnecessary repetition and make data interpretation more intuitive for the user.

The plugin has several configuration options to control its behavior, like specifying which columns to apply the spanning to, whether to merge empty cells up or down, and which types of cells (TH or TD) to target. 

How to use it:

1. Download and load the jquery-addtablerowspan.js script after jQuery library (slim build is recommended).

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery-addtablerowspan.js"></script>

2. Just call the function addTableRowSpan on your HTML table and the plugin will do the rest.

<table>
  ...
</table>
$("table").addTableRowSpan({
  // ...
});

3. Set the vertical alignment. Default: 'top'.

$("table").addTableRowSpan({
  vertical_align:'middle',
});

4. Specify exactly which columns should have their identical cells merged. Default: [].

$("table").addTableRowSpan({
  columns: [0, 1, 2],
});

5. Pair empty cells with upper or lower cells. Default: false.

$("table").addTableRowSpan({
  emptyCellsPairWithUppers: false,
  emptyCellsPairWithLowers: false,
});

6. Determine from which row the plugin should start its magic. Default: 0 (table header).

$("table").addTableRowSpan({
  firstRow: 1,
});

7. Determine which types of cells (TH or TD) to target. Default: ["th", "td"].

$("table").addTableRowSpan({
  cellTypes: ["td"]
});

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