I want to display the data of a .csv file in a tabular form using LWC.(Below is the image for the reference.)
Requirement: Whenever I upload a csv file, the data in the csv file should show in a tabular form(like above image.) in LWC.

Problem: Whenever I try to show the data in a <table>. The value is not showing in the <thead> &<tbody> (i.e. html). If I print the values of columnHeader and rows in the console, it gets displayed. 
As I am not able to find where is the problem?
(If there is any doubt in understanding, please mention here.)
Below is the code.

<!-- html file -->
<template>
  <lightning-card>
    <h3>
      <lightning-icon icon-name="utility:database" size="small"></lightning-icon>  CSV Dataloader
      <button class="slds-button slds-button_destructive" style="margin-right:0; margin-left:auto; display:block;">
        Clean Data
      </button>
    </h3>
    <lightning-input type="file" name="file" label="Attachment" accept=".csv" onchange={handleUploadFinished}>
    </lightning-input>

    <template if:true={showTable}>
      <table>
        <thead>
          <tr>
            <template for:each={csvString} for:item="head">
              <th key={head.column_name}>
                {head.column_name}
              </th>
            </template>
          </tr>
        </thead>
        <tbody>
          <template for:each={lines} for:item="row">
            <tr key={row}>
              <!--<template for:each={row} for:item="rowData">-->
                <td key={row}>{row}</td>
              <!--</template>-->
            </tr>
          </template>
        </tbody>
      </table>
    </template>
  </lightning-card>
</template>
=================================

// Javascript File

import { LightningElement, track, wire } from 'lwc';
import getCSVObject from '@salesforce/apex/CSVCreator.getCSVObject';

export default class CustomCSVDataloaderInLWC extends LightningElement {
  
    @track colHeader = [];
    @track showTable = false;
    @track csvString;
    @track st;
    @track csvFile;
    @track lines;
    
    handleUploadFinished(event) {
        
        const uploadedFiles = event.detail.files;
        const file = uploadedFiles[0];
        console.log("file : " + file);

        if (file) {
            this.showTable = true; //show the table
            console.log("this.showTable : " + this.showTable);
            let reader = new FileReader();
            reader.readAsText(file, "UTF-8");
            reader.onload = function (evt) {
                const csv = evt.target.result;
                console.log('csv : ' + csv);
                this.csvFile = csv;

                getCSVObject({
                    csv_str: csv
                })
                    .then(response => {
                        console.log("response : " + JSON.stringify(response));
                        this.csvString =JSON.stringify([...response.headers]);
                        console.log('this.csvString : '+this.csvString);
                       
                        this.lines = [...response.lines];
                        console.log('this.lines : '+JSON.stringify(this.lines));
                     
                        
                        let temp = response.headers;
                        let col_head;
                        this.colHeader = [];
                        temp.forEach(element => {

                            col_head = element.column_name;//JSON.stringify(element.column_name);
                            console.log("col_head : " + col_head);
                            this.colHeader = [...this.colHeader,col_head];                         
                        });
                        console.log("this.colHeader : " + this.colHeader);

                    }).catch(error => {
                        console.log("error2 ==> " + error);
                        console.log("error ==> " + error.body.message);
                    });

            };
        }
    }
}

Below is the console.log output of chrome in browser.