JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<table>
    <thead>
        <tr>
            <th data-sort="number" data-class="number" >No</th>
            <th data-sort="number" data-class="department" >Department</th>
            <th data-sort="number">Quantity</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td rowspan="2" class="sortNum">1</td>
            <td class="depart">20</td>
            <td>20</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center">VTP</td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td rowspan="2" class="sortNum">2</td>
            <td class="depart">30</td>
            <td>25</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center">VTP</td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td rowspan="2" class="sortNum">3</td>
            <td class="depart">40</td>
            <td>50</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center">VTP</td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td rowspan="2" class="sortNum">4</td>
            <td class="depart">50</td>
            <td>15</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center">VTP</td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td rowspan="2" class="sortNum">5</td>
            <td class="depart">60</td>
            <td>32</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center">VTP</td>
        </tr>
    </tbody>


    
    
</table>

CSS

table {
  border-collapse: collapse;
  width: 400px;
}


th, td {
    padding: 5px;
    border: 1px #DDD solid;
}

.sort-asc:after,
.sort-desc:after {
    content: '▲';
    font-size: 12px;
}
.sort-desc:after {
    content: '▼';
}

JavaScript

var table = $('table'),
    th = table.find('thead th'),
    tbody = table.find('tbody');


$(th).on('click', function() {
    
    $(th).removeClass();
    
    var index = this.cellIndex,
        sortType = $(this).data('sort'),
        sortDir  = $(this).data('dir') || 'asc';
    

		var that = $(this);

    $('table').find('tbody').slice().sort(function(a, b) {
    
    		var dataTH = that.data('class'); 
        
        //alert(dataTH);
    
    		if(dataTH == 'number')
        	{
            //alert("hi this is a number");
            var aText = $(a).find('td.sortNum:eq(' + index + ')').text(),
                bText = $(b).find('td.sortNum:eq(' + index + ')').text();          
          }
          
    		else if(dataTH == 'department')
        	{
            //alert("hi this is a department");
            var aText = $(a).find('td.depart:eq(' + index + ')').text(),
                bText = $(b).find('td.depart:eq(' + index + ')').text();          
          }
    
            if (sortDir == 'desc') {
                temp = aText;
                aText = bText;
                bText = temp;
            }
            
            if (sortType == 'string') {
                return aText.localeCompare(bText);    
            }

						else {
                return +aText - +bText;
            }
        })
        .appendTo('table');

    $(this).data('dir', sortDir == 'asc' ? 'desc' : 'asc');
    $(this).removeClass().addClass('sort-' + sortDir);

});