JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.1/css/select.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<table id="table1" class="table table-bordered table-striped display mbuhsakarepku" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>Action</th>
      <th>Tgl. Nota</th>
      <th>No. Nota</th>
      <th>Supplier</th>
      <th>Tgl. Terima</th>
      <th>Hrg. Total Nota</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

JavaScript

var table = '';
$(document).ready(function() {
  table = $('#table1').DataTable({
    dom: 'lrtp',
    serverSide: true,
    deferRender: true,
    select: true,
    ajax: {
      url: 'https://api.myjson.com/bins/14hnsd',
    },
    scrollY: 220,
    scrollX: true,
    scroller: {
      loadingIndicator: true
    },
    stateLoadParams: function(settings, data) {
      for (var i = 0; i < data.columns.length; i++) {
        data.columns[i].search.search = "";
      }
    },
    columns: [{
      "data": "edit",
      "orderable": false,
      render: function(data, type, row) {
        return "<div class='btn btn-xs btn-warning' data-toggle='tooltip' data-placement='bottom' title='Update' onclick='update(this," + JSON.stringify(row) + ")' data-message='" + data + "' data-tipe='header'><i class='fa fa-pencil'></i></div>";
      }
    }, {
      "data": "tglnota",
      "className": "menufilter numberfilter"
    }, {
      "data": "nonota",
      "className": "menufilter textfilter"
    }, {
      "data": "suppliernama",
      "className": "menufilter textfilter"
    }, {
      "data": "tglterima",
      "className": "menufilter numberfilter"
    }, {
      "data": "hargatotal",
      "className": "text-right menufilter numberfilter"
    }, ]
  });
});



function update(e, data) {
  var message = $(e).data('message');
  var tipe = $(e).data('tipe');
  if (message == 'edit') {
    //please look on your console tab while inspecting element
    //click on action button that has tgl.terima null
    //if object[0] array length is 1 then it can be scrolled to
    //otherwiser it cant be scrolled to
    //it is happen because the index i want to be scrolled to is on page 2
    //any solution? thankyou
    //console.log(table.row(10).scrollTo()); //this code can be done
    console.log(table.row(100).scrollTo()); //this code can't be done coz its on page 2
  } else {
    alert('Tgl. Terima already filled');
  }
}