title: Personalizing table headers, create pagination, sorting and filter with HTML Table Using JavaScript
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;style type="text/css"&gt;
          #container,#buttondiv{
              margin: 0 auto;
              width: 80%;
              overflow: auto;
          }
          table.gridtable {
              margin: 0 auto;
              width: 95%;
              overflow: auto;;
              font-family: helvetica, arial, sans-serial;
              font-size: 14px;
              color: #333333;
              border-width: 1px;
              border-color: #666666;
              border-collapse: collapse;
              text-align: center;
          }
          table.gridtable th {
              border-width: 1px;
              padding: 8px;
              border-style: solid;
              border-color: #666666;
              background-color: #F6B4A5;
          }
          table.gridtable td{
              border-width: 1px;
              padding: 8px;
              border-style: solid;
              border-color: #666666;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;p align="center"&gt;&lt;input type="file" id="fileUpload" /&gt;
      &lt;input type="button" id="upload" value="Upload" onclick="Upload()" /&gt;&lt;/p&gt;
      &lt;hr /&gt;
      &lt;div id="dvCSV"&gt;
      &lt;/div&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
      function Upload() {
          var fileUpload = document.getElementById("fileUpload");
          var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
          if (regex.test(fileUpload.value.toLowerCase())) {
              if (typeof (FileReader) != "undefined") {
                  var reader = new FileReader();
                  reader.onload = function (e) {
                      var table = document.createElement("table");
                      var rows = e.target.result.split("\n");
                      for (var i = 0; i &lt; rows.length; i++) {
                          var cells = rows[i].split(",");
                          if (cells.length &gt; 1) {
                              var row = table.insertRow(-1);
                              for (var j = 0; j &lt; cells.length; j++) {
                                  var cell = row.insertCell(-1);
                                  cell.innerHTML = cells[j];
                              }
                          }
                      }
                      var dvCSV = document.getElementById("dvCSV");
                      dvCSV.innerHTML = "";
                      dvCSV.appendChild(table);
                  }
                  reader.readAsText(fileUpload.files[0]);
              } else {
                  alert("This browser does not support HTML5.");
              }
          } else {
              alert("Please upload a valid CSV file.");
          }
      }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm new in javascript and in the above code, I am loading a CSV file into HTML table. But I am getting the table headers as they are the CSV files. However, I would like to personalize them when displaying.  For example, in the CSV file, I have pr_id and I would like to display it as PR ID in the HTML table. 
  Also, I would like to add a javascript code that will create pagination, sorting and filter with HTML Table. </p>