DataTable.net

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
<table id="example" class="display" width="100%">
</table>

JavaScript

var dataSet = [
  [1,"Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"],
  [2,"Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000"],
  [10,"Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575"],
  [3,"Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650"],
  [5,"Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850"],
  [9,"Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000"],
  [12,"Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000"],
  [23,"Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050"],
  [99,"Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675"]
];

 $(document).ready(function() {

  var columns = [
      {title: "ID"},
      {title: "Name"}, 
      {title: "Position"}, 
      {title: "Office"}, 
      {title: "Extn."}, 
      {title: "Start date"}, 
      {title: "Salary"}
  ];


  var table = $('#example').DataTable( {
      data: dataSet,
      columns: columns,
      language: {
          "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
      },
      initComplete: function () {
      table.columns.adjust().draw();
      }
  });
  
  
  
});