Merge Identical Table Rows jQuery plugin | RowMerge

Row merge jQuery plugin to merge table cells with the same data (and with the colspan attribute) into adjacent rows. It also provides a matching function that allows you to merge table rows based on a custom function.

Easily merge matching table cells into adjacent rows:

  • Cells in adjacent rows with mirrored text and colspan are merged.
  • Provide your own matcher functionality to customize the behavior.
  • Ability to exclude rows in any column from the merge.

How to make use of it:

1. Load the row-merge JavaScript library after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/row-merge-bundle.min.js"></script>

2. Just name the function rowMerge() in your HTML table and the plugin will do the remaining.

<table id="table-example" class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>Month</th>
      <th>Week</th>
      <th>Day</th>
      <th>Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>March</td>
      <td>1</td>
      <td>Monday</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>March</td>
      <td>1</td>
      <td>Tuesday</td>
      <td>Green</td>
    </tr>
    <tr>
      <td>March</td>
      <td>1</td>
      <td>Wednesday</td>
      <td>Blue</td>
    </tr>
    <tr>
      <td>March</td>
      <td>1</td>
      <td>Thursday</td>
      <td>Blue</td>
    </tr>
    <tr>
      <td>March</td>
      <td colspan="2">1</td>
      <!-- <td>Friday</td> -->
      <td>Yellow</td>
    </tr>
    <tr>
      <td>March</td>
      <td>2</td>
      <td>Monday</td>
      <td>Yellow</td>
    </tr>
    <tr>
      <td>March</td>
      <td>2</td>
      <td colspan="2">Tuesday</td>
    </tr>
    <tr>
      <td>March</td>
      <td>2</td>
      <td>Wednesday</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>March</td>
      <td>2</td>
      <td>Thursday</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>March</td>
      <td>2</td>
      <td>Friday</td>
      <td>Blue</td>
    </tr>
  </tbody>
</table>
$(function(){
  var table = $('#table-example').rowMerge();
});

3. Merge and unmerge the table manually.

table.merge();
table.unmerge();

4. Sometimes you may exclude sure columns to be merged.

var table = $('#table-example').rowMerge({
    excludedColumns: [1, 2, 3],
    zeroIndexed: false // or true
});

5. Merge table cells utilizing a customized function.

var table = $('#table-example').rowMerge({
    matcher: function(HTMLTableCellElement, HTMLTableCellElement) {
      // ...
    }
});

Read More – Simple Vanilla Javascript DataTable | RdataTB

Options

The following indexed parameters can be passed to rowMerge() at construction.

  • matcher – a function of the form function(thisCell: HTMLTableCellElement, otherCell: HTMLTableCellElement) => boolean that accepts two HTMLTableCellElement arguments and returns true if they “match”, otherwise returns false. The implementation is up to the user. Adjacent rows with identical colspan that “match” will be merged into. default behavior: test cell text for equality.
  • excludedColumns – column indices to exclude from merging. default=[]
  • zeroIndexed – whether columns are zero-indexed or not. default=false

API

The following methods are exposed on the plugin:

  • unmerge() – unmerges the table to the original definition in the HTML source.
  • merge() – applies this plug-in and replaces HTML in DOM.

The following global field is exposed on the jQuery extension point:

  • $.fn.rowMerge.selector – the selector string used to automatically target and apply the plugin. default = “table.row-merge”

Merge Adjacent Rows With Same Data, row-merge Plugin/Github, jquery datatable column merge

row-merge-demo


See Demo And Download

Official Website(andreww1011): Click Here

This superior jQuery/javascript plugin is developed by andreww1011. For extra advanced usage, please go to the official website.

Share