CODEWITHSUNDEEP
reactjscsv
Jason000
Jason000

Reputation: 199

How to turn off header feature in CSVToHtmlTable library

I'm using this CSV to HTML table library, and it's working great. My problem is that, when i upload a csv that does not contain headers, the first row is displayed as the header row instead. I would like the header row displayed only if there is a header obviously. Any idea how?

This is the library i'm using: 

<CsvToHtmlTable                                             
data={this.file}
csvDelimiter={this.delimiter)}
tableClassName="table"
tableColumnClassName="tableColumn"
tableRowClassName="tableRow"
header="th"/>

And this is the css for 'th', if it is necessary: 

th {
  /*background-color: rgb(177, 176, 176); */
  background-color: #222222;
  color: white;
  font-size: 13px;
  font-weight: 400;
  border-right: 1px solid #ddd;
  height : 38px;
}

Upvotes: 0

Views: 33

Answers (1)

akseli
akseli

Reputation: 79

According to Wikipedia, CSV doesn’t have a standardized way to tell if the file has a header or not. You could of course come up with some way to detect the header’s presence, applicable to your data set.

For your convenience, the NPM package you are using has a prop called hasHeader. By setting it, you tell the component whether to render a header or not. The default value is true.

So, you can remove the header from the element simply by giving your <CsvToHtmlTable /> element a false as its hasHeader prop.

Like this:

<CsvToHtmlTable                                             
  data={this.file}
  csvDelimiter={this.delimiter}
  hasHeader={false}
  tableClassName="table"
  tableColumnClassName="tableColumn"
  tableRowClassName="tableRow"
/>

Hope I could be of help! Ask away if you have any further doubts!

Upvotes: 1

Related Questions