JSFiddle - React, Tailwind, and code Playground

JavaScript

jQuery(document).ready(function() {
      var grid = $("#grid").jqGrid({
        url:'cobranzajson.php',
        datatype: 'json',
        mtype: 'GET',
        colNames:['Sucursal','# Asesor', 'Asesor','Nombre del Cliente', 'Tipo de documento', '# Doc', 'Plazos', 'Fecha Contabilización', 'Fecha Vencimiento', 'Documento Físico', 'Saldo Total', 'Saldo Vencido', 'Saldo Vencido'],
        colModel: [
          {name:'Sucursal', index:'Sucursal', width:80},
          {name:'T5SlpCode', index:'T5SlpCode', width:80}, 
          {name:'SlpName', index:'SlpName', width:80}, 
          {name:'OCRDCardName', index:'OCRDCardName', width:200}, 
          {name:'JDT1LineMemo', index:'JDT1LineMemo'},
          {name:'JDT1BaseRef', index:'JDT1BaseRef', width:50}, 
          {name:'JDT1SourceLine', index:'JDT1SourceLine', width:45},
          {name:'JDT1RefDate', index:'JDT1RefDate'},
          {name:'JDT1DueDate', index:'JDT1DueDate'},
          {name:'T5NumAtCard', index:'T5NumAtCard'},
          {name:'OCRDBalance', index:'OCRDBalance'},
          {name:'SaldoVencido', index:'SaldoVencido'},
          {name:'SaldoVencido1', index:'SaldoVencido1', sorttype:"float", formatter:"number", summaryType:'sum', summaryTpl:'<b>Total: {0}</b>'}
        ],
        pager: '#pager',
        rowNum: 600,
        rowList: [15, 30, 50, 100, 150],
        //height: this['rowNum']*25,
        height: 'auto',
        viewrecords: true,
        autowidth: true,
        sortname: 'SlpName',
        //sortorder: 'desc',
        grouping:true,
        groupingView : {
          groupField : ['Sucursal','SlpName','OCRDCardName'],
          groupColumnShow : [false, false],
          groupText : ['<b>{0}</b>'],
          groupCollapse : true,
          groupOrder: ['asc', 'asc'],
          groupSummary : [true, true],
          showSummaryOnHide: true
        },
        caption: "Grouping Array Data"
    });