Borderless table react-bootstrap-table

Question

I am trying to make my react-bootstrap-table table fully borderless and have checked out all their docs and GitHub issues but haven't been able to get a fully borderless table. Here's what I have:

In my CSS:

.react-bs-container-header tr {
  border-bottom-style: hidden !important;
}
.react-bs-container-header {
  border-bottom-style: hidden !important;
  border-left-style: hidden !important;
  border-right-style: hidden !important;
}

.columnClassNameFormat1 {
  color: #4F58EA;
  border: none;

}

In my React Component:

<BootstrapTable data={this.state.data} version='4' options={ this.getOptions() }
              tableHeaderClass='columnClassNameFormat1'
              tableBodyClass='columnClassNameFormat1'
              containerClass='columnClassNameFormat1'
              tableContainerClass='columnClassNameFormat1'
              headerContainerClass='columnClassNameFormat1'
              bodyContainerClass='columnClassNameFormat1'
              trStyle = { this.rowClassNameFormat }
              >
              <TableHeaderColumn isKey dataField='name' dataFormat={formattedTextH3} columnClassName='columnClassNameFormat1' isKey > Name</TableHeaderColumn>
              <TableHeaderColumn dataField='img' dataFormat={imageFormatter} >Images</TableHeaderColumn>
              <TableHeaderColumn dataField='category1' dataFormat={formattedTextH3} columnClassName='columnClassNameFormat1'>Category</TableHeaderColumn>
              <TableHeaderColumn dataField='category2' dataFormat={formattedTextH3} columnClassName='columnClassNameFormat1'>Category</TableHeaderColumn>
              <TableHeaderColumn dataField='category3' dataFormat={formattedTextH3} columnClassName='columnClassNameFormat1'>Category</TableHeaderColumn>
              <TableHeaderColumn dataField='category4' dataFormat={formattedTextH3} columnClassName='columnClassNameFormat1' >Category</TableHeaderColumn>

            </BootstrapTable>

 ...

  rowClassNameFormat(row, rowIdx) {
     return 'border: none';
  }

Right now, it the only borders to remain standing are the inside column borders and the border at the bottom of the table. Even so, this just seems like a really verbose way to do this. How should this be done?

Answer 1

react-bootstrap-table has a property bordered={ false }.

Add it to <BootstrapTable data={this.state.data} bordered={ false } ... />. It will remove part of the inside borders.

Accroding to your goals you need to remove all other borders as you overwrite the css classes.

Answer 2

There are other properties that might help you...

For example -

<BootstrapTable bootstrap4 keyField='id' data={data} columns={columns}  bordered={true} striped={true} hover={true} />