JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<table id="myTable" border="1" cellpadding="3" cellspacing="0">
    <tr>
        <th>Category</th>
        <th>Product</th>
        <th>Size</th>
        <th>Price</th>
        <th>Shipping</th>
    </tr>
    <tr>
        <td>Category-1</td>
        <td>Product-1</td>
        <td>Big</td>
        <td>102</td>
        <td>Free</td>
    </tr>
    <tr>
        <td>Category-1</td>
        <td>Product-1</td>
        <td>Big</td>
        <td>132</td>
        <td>Free</td>
    </tr>
    <tr>
        <td>Category-1</td>
        <td>Product-2</td>
        <td>Big</td>
        <td>130</td>
        <td>Free</td>
    </tr>
    <tr>
        <td>Category-1</td>
        <td>Product-2</td>
        <td>Small</td>
        <td>100</td>
        <td>Free</td>
    </tr>
    <tr>
        <td>Category-2</td>
        <td>Product-3</td>
        <td>Big</td>
        <td>130</td>
        <td>Free</td>
    </tr>
    <tr>
        <td>Category-2</td>
        <td>Product-3</td>
        <td>Big</td>
        <td>100</td>
        <td>Free</td>
    </tr>
    <tr>
        <td>Category-2</td>
        <td>Product-3</td>
        <td>Small</td>
        <td>100</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Category-2</td>
        <td>Product-4</td>
        <td>Big</td>
        <td>150</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Category-3</td>
        <td>Product-5</td>
        <td>Big</td>
        <td>150</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Category-3</td>
        <td>Product-5</td>
        <td>Small</td>
        <td>120</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Category-3</td>
        <td>Product-5</td>
        <td>Big</td>
        <td>120</td>
        <td>Free</td>
    </tr>
    <tr>
        <td>Category-4</td>
        <td>Product-6</td>
        <td>Big</td>
        <td>120</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Category-4</td>
        <td>Product-6</td>
        <td>Small</td>
        <td>120</td>
        <td>10</td>
   ...

CSS

.deleted {
    display: none !important;
}

JavaScript

$(function () {
   
    function groupTable($rows, startIndex, total) {
        if (total === 0) {
            return;
        }
        var i, currentIndex = startIndex,
            count = 1,
            lst = [];
        var tds = $rows.find('td:eq(' + currentIndex + ')');
        var ctrl = $(tds[0]);
        lst.push($rows[0]);
        for (i = 1; i <= tds.length; i++) {
            if (ctrl.text() == $(tds[i]).text()) {
                count++;
                $(tds[i]).addClass('deleted');
                lst.push($rows[i]);
            } else {
                if (count > 1) {
                    ctrl.attr('rowspan', count);
                    groupTable($(lst), startIndex + 1, total - 1)
                }
                count = 1;
                lst = [];
                ctrl = $(tds[i]);
                lst.push($rows[i]);
            }
        }
    }
    groupTable($('#myTable tr:has(td)'), 0, 3);

});