CODEWITHSUNDEEP
javascripthtmlcssreactjsreact-table
Shalin Patel
Shalin Patel

Reputation: 179

how to remove the header of the table when using react-bootstrap-table-next

I am using react-bootstrap-table-next to generate a table in my web app and I have data in the columns but I dont want the header to appear. As of now its an empty header with no text but I want that header section to be gone if possible. As you can see from the image below, that small header space is what I want to be gone. I have tried researching online but nothing I have found seems to work. I tried display: none as suggested but no luck.

enter image description here

The code below is what I am using to generate the table above. Any guidance or pointers I can use to make that header disappear or is that not possible when using this react library.

enter image description here

Upvotes: 0

Views: 4415

Answers (1)

Jono Calvo
Jono Calvo

Reputation: 56

I have never used that library only use bootstrap with sass and then compile the bootstrap to the project. It looks like the doc says you can add the attribute headerTitle: true, so I guess you can try to set it to false and see if that works.

But you are right that doesn't work. I found this other attribute and it worked for me. headerAttrs: { hidden: true }

const columns = [{
dataField: 'id',
text: 'Product ID',
  headerAttrs: {
    hidden: true
  }
}, {
dataField: 'name',
text: 'Product Name',
  headerAttrs: {
    hidden: true
  }
}, {
dataField: 'price',
text: 'Product Price',
  headerAttrs: {
    hidden: true
  }

}];

let me know if it works for you.

Upvotes: 2

Related Questions