JSFiddle - React, Tailwind, and code Playground

by esameer

HTML

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Score</th>
            <th>Saldo1</th>
            <th>Saldo2</th>
            <th>Saldo3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>OOO "TEST"</td>
            <td>402750</td>
            <td>1000</td>
            <td>3000</td>
            <td>6000</td>
        </tr>
        <tr>
            <td>OOO "TEST"</td>
            <td>402750</td>
            <td>1500</td>
            <td>3500</td>
            <td>6500</td>
        </tr>
        <tr>
            <td>OOO "TEST"</td>
            <td>402750</td>
            <td>1600</td>
            <td>3100</td>
            <td>6200</td>
        </tr>
        <tr>
            <td>OOO "TEST"</td>
            <td>402750</td>
            <td>1000</td>
            <td>3000</td>
            <td>6500</td>
        </tr>
        <tr>
            <td>OOO "TEST"</td>
            <td>402750</td>
            <td>2000</td>
            <td>3700</td>
            <td>6000</td>
        </tr>
        <tr>
            <td>OOO "TEST"</td>
            <td>402700</td>
            <td>1500</td>
            <td>3800</td>
            <td>6300</td>
        </tr>
        <tr>
            <td>OOO "TEST"</td>
            <td>402700</td>
            <td>1000</td>
            <td>3000</td>
            <td>6800</td>
        </tr>
    </tbody>
</table>

JavaScript

$(document).ready(function (){
    var table = $('#example').DataTable({
     "columnDefs": [
                { "visible": false,  "targets": [0,1]},
                ],
    
          "rowGroup": {
          
                dataSrc: 0,
                startRender: null,
                endRender: function ( rows, group) {
                    var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
           					 };
                    //var numFormat = window.getFormatNumberTable().display;
                    var sumWeight = rows
                        .data()
                        .pluck(2)
                        .reduce( function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    return $('<tr/>')
                        .append( '<td>'+ 'OOO "TEST" Total: ' +  sumWeight +'</td>' );
                },
            },
      	"drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last = null;
            api.rows({page:'current'}).data().each(function (data, i){
                var group = data[0];
                var groupLink = '<a href="#">' + $('<div>').text(group).html() + '</a>';
                
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td colspan="5">'+groupLink+'</td></tr>'
                    );
 
                    last = group;
                }
            });
              api.rows({page:'current'}).data().each(function (data, i){
                var group = data[1];
                var groupLink = '<a href="#">' + $('<div>').text(group).html() + '</a>';
                
                if ( last !== group ) {
                    $(rows).eq( i ).before(
  ...