column header not displaying , while the table is getting displayed

shivankb

hi all ,

i am working on a non server app , where i have a local csv file and i am using datatable to display it on the html page , my table is getting displayed successfully . however the column header is not getting displayed. it turns out that the name of the column tittle is not getting passed to the html DOM .

here is my code :

JS:

class Datasets

{

constructor(filePath) {
    this.filePath = filePath;
}

readDatasets() {
    let DataFrame = dfjs.DataFrame;
    DataFrame.fromCSV(this.filePath).then(df => {
        let data = df.toArray();
        let keys = df.listColumns();
        this.displayData(data, this.getGoodcols(keys));
    });
}

displayData(data, cols) {
    $('#tabledisplay').DataTable({
        "data": data,
        "columns": cols,
        "scrollY": "800px"
    });
}

getGoodcols(keys) {
    let columns = [];
    for (var x = 0; x < keys.length; x++) {
        columns.push({ "tittle": keys[x] });
    }
    return columns;
}

displayLabels(cols){
    $('#filters').DataTable({

    })
}

}

on the HTML :

so this my code , i am not able to understand why is it happening , i am sending the data in the requested format which Datatable will understand . i am a Mac user doing all of it on Firefox and this app is not a server based app . its standalone app .

kthorngren

To start with tittle should be title in this line:
columns.push({ "tittle": keys[x] });

Hope making that change will resolve the issue.

Kevin

shivankb

yes you got it right , this fixed my issue . thanks