jQuery DataTables FixedColumn with Rich Scrollbar

Follow dependencies. 1. https://jquery.com/ 2. https://datatables.net/ 3. https://datatables.net/extensions/fixedcolumns/ 4. https://github.com/malihu/malihu-custom-scrollbar-plugin

by modimayur

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.3/jquery.mCustomScrollbar.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.3/jquery.mCustomScrollbar.js"></script>
<script src="//cdn.datatables.net/fixedcolumns/3.0.0/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/fixedcolumns/3.0.0/css/dataTables.fixedColumns.min.css">
<div id="parentId">
  <table id="tableId" class="table">
    <thead>
      <tr>
        <th>xxx1</th>
        <th>xxx2</th>
        <th>xxx3</th>
        <th>xxx4</th>
        <th>xxx5</th>
        <th>xxx6</th>
        <th>xxx7</th>
        <th>xxx8</th>
        <th>xxx9</th>
        <th>xxx10</th>
        <th>xxx11</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>xxx1</td>
        <td>xxx2</td>
        <td>xxx3</td>
        <td>xxx4</td>
        <td>xxx5</td>
        <td>xxx6</td>
        <td>xxx7</td>
        <td>xxx8</td>
        <td>xxx9</td>
        <td>xxx10</td>
        <td>xxx11</td>
      </tr>
      <tr>
        <td>axx1</td>
        <td>axx2</td>
        <td>axx3</td>
        <td>axx4</td>
        <td>axx5</td>
        <td>axx6</td>
        <td>axx7</td>
        <td>axx8</td>
        <td>axx9</td>
        <td>axx10</td>
        <td>axx11</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript

/*
 * (c) 2016 - tkosuga.
 * @license MIT.
 */
function changeRichScrollbar(parentSelector, tableSelector) {

  $(tableSelector + ' thead tr th').each(function(index, v) {
    var style = $(v).attr('style');
    $(v).css({
      cssText: style + "; height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;"
    });
  });

  $(parentSelector + ' .dataTables_scrollBody').mCustomScrollbar({
    axis: "x",
    scrollInertia: 0,
    theme: "inset-2-dark",
    callbacks: {
      whileScrolling: function() {
        $(parentSelector + " .dataTables_scrollHead").scrollLeft(this.mcs.left * -1);
      },
    },
  });
  $(parentSelector + ' .dataTables_scrollBody').css("border-bottom", "none");
}

var tableParentSelector = "#parentId";
var tableSelector = "#tableId";
var table = $(tableSelector).DataTable({
  sScrollX: "100%",
  sScrollXInner: "100%",
});
new $.fn.dataTable.FixedColumns(table);
changeRichScrollbar(tableParentSelector, tableSelector);