JSFiddle - React, Tailwind, and code Playground

by Pamela Florián

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/todc-bootstrap/3.3.6-3.3.6/js/bootstrap.min.js"></script>
<table id="lstSegPyme"></table>
<div id="plstSegPyme"></div>

JavaScript

var mydata = [{
    ncli: "IAN S.A.",
    ccli: "0000000000001",
    tcli: "CASH RICH",
    fncl: "Mary",
    ofcl: "S.I",
    flgc: "N/L",
    recl: "10",
    potm: "999999.99",
    icon: "1",
    conc: "Patsy",
    imed: "1",
    itip: "1",
    tlfc: "9999999",
    ccel: "",
    ccor: "",
    ftlf: "1",
    estc: "Concreted"
  }, {
    ncli: "E. S.A.",
    ccli: "0000000000002",
    tcli: "PLATINUM",
    fncl: "Joseph",
    ofcl: "P.",
    flgc: "N/L",
    recl: "10",
    potm: "999999.99",
    icon: "2",
    conc: "Patty",
    imed: "2",
    itip: "1",
    tlfc: "9999998",
    ccel: "",
    ccor: "",
    ftlf: "1",
    estc: "Pending"
  }, {
    ncli: "E. S.A.",
    ccli: "0000000000002",
    tcli: "PLATINUM",
    fncl: "Joseph",
    ofcl: "P.",
    flgc: "N/L",
    recl: "10",
    potm: "999999.99",
    icon: "2",
    conc: "Patty",
    imed: "1",
    itip: "2",
    tlfc: "",
    ccel: "999999999",
    ccor: "",
    ftlf: "1",
    estc: "Pending"
  }, {
    ncli: "E. S.A.",
    ccli: "0000000000002",
    tcli: "PLATINUM",
    fncl: "Joseph",
    ofcl: "P.",
    flgc: "N/L",
    recl: "10",
    potm: "999999.99",
    icon: "2",
    conc: "Patty",
    imed: "1",
    itip: "3",
    tlfc: "",
    ccel: "",
    ccor: "p@mail.com",
    ftlf: "1",
    estc: "Pending"
  }, {
    ncli: "E. S.A.",
    ccli: "0000000000002",
    tcli: "PLATINUM",
    fncl: "Joseph",
    ofcl: "P.",
    flgc: "N/L",
    recl: "10",
    potm: "999999.99",
    icon: "3",
    conc: "Martin",
    imed: "3",
    itip: "1",
    tlfc: "9999997",
    ccel: "",
    ccor: "",
    ftlf: "1",
    estc: "Pending"
  },

];

$("#lstSegPyme").jqGrid({
  url: "AlertasSegmentacionPyme.aspx/ListarClientes",
  data: mydata,
  datatype: "local",
  mtype: "POST",
  height: 'auto',
  styleUI: "Bootstrap",
  responsive: true,
  rowNum: 500,
  rowList: [500, 650, 850],
  loadonce: true,
  colNames: ['Cli.', 'Cod.', 'Tip.', 'FN', 'Of.', 'L/C', 'Rec.', 'PM', 'IdC', 'Con', 'IdMed', 'IdT', 'Tel.', 'Cel.', 'E-Mail',...