DATATABLE with javascript datasource

by Alexandre Froger

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jq-2.2.4/pdfmake-0.1.18/dt-1.10.13/af-2.1.3/b-1.2.4/b-colvis-1.2.4/b-flash-1.2.4/b-html5-1.2.4/b-print-1.2.4/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.2.0/r-2.1.1/rr-1.2.0/sc-1.4.2/se-1.2.0/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.15/r-2.1.1/datatables.min.js"></script>
<script src="https://cdn.datatables.net/scroller/1.4.2/js/dataTables.scroller.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/scroller/1.4.2/css/scroller.dataTables.min.css">
<table id="example" class="display nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>First name</th>
                <th>Last name</th>
                <th>ZIP / Post code</th>
                <th>Country</th>
            </tr>
        </thead>

CSS

.ngerow_10{
  background-color: yellow !important;
}
.ngecol_1{
  background-color: yellow !important;
}

JavaScript

$(document).ready(function() {
        var data = [];
        for ( var i=0 ; i<20000 ; i++ ) {
            data.push( [ "abcdefg"+i, i, i, i, i ] );
        }
         
        $('#example').DataTable( {
            data:           data,
            deferRender:    true,
						responsive: true,
            createdRow: function( row, data, rowIndex ) {
              jQuery(row).addClass("ngerow_"+rowIndex);
            },
          	columnDefs: [ {
              targets: "_all",
              createdCell: function (cell, cellData, rowData, row, colIndex) {
              		jQuery(cell).addClass("ngecol_"+colIndex);
              }
            }],
            scrollY:        300,
            scrollCollapse: true,
            scroller:       true
        } );
    } );