使用 react-bootstrap-table-next 时如何删除表的 header

Question

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.

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.

Answer 1

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.