CSS styling does not work with ToolkitProvider

When I use ToolkitProvider, table styling does not work at all. I specified “striped” and “bordered”, but it doesn’t work. I tried applying my own custom rowStyle as well, but it doesn’t work. It’s as if the CSS doesn’t exist. Search bar styling does not work either. Here is my code:

import React, { Component } from 'react'
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css'
import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css'
import dataArr from './data/dataArr'
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'
import BootstrapTable from 'react-bootstrap-table-next'
import paginationFactory from 'react-bootstrap-table2-paginator'

class IndexTable extends Component {
  constructor (props) {
    super(props)
    this.state = {
      data: dataArr
    }

    this.formatImage = this.formatImage.bind(this)
  }
...
...
...
render () {
    const { SearchBar } = Search
    const columns = [ ....... ]
    ...
    ...
    return (
      <div>
        <ToolkitProvider
          keyField="id"
          data={this.state.data}
          columns={columns}
          bootstrap4
          striped
          bordered
          search
        >
          {
            props => (
              <div>
                <SearchBar {...props.searchProps}
                  placeholder="Search..."
                />
                <hr />
                <BootstrapTable pagination={paginationFactory()} { ...props.baseProps } />
                <br />
              </div>
            )
          }
        </ToolkitProvider>
      </div>
    )
  }
}

I’m running versions: react-bootstrap-table-next: 1.4.1 react-bootstrap-table2-paginator: 1.0.4 react-bootstrap-table2-toolkit: 1.1.1

Thank you!

[zaweb]

I tried it that way but it didn’t work. What I ended up doing is adding “import ‘bootstrap/dist/css/bootstrap.css’” before the table2 CSS. Now it appears to work. Thanks!

On Tue, Nov 13, 2018 at 4:38 PM Yassien [e-mail] wrote:

The reason striped and bordered are not working is because you have to pass them to the <BootstrapTable/> component not the <ToolkitProvider/> like so:

<BootstrapTable striped bordered { …props.baseProps }/>

As per the documentation https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/toolkits-getting-started.html you only need to move keyField, data, columns and bootstrap4 props to <ToolkitProvider/>

I tested the <SearchBar/> placeholder and it’s working fine, and you didn’t provide any code for the rowStyle. I could test the styling if you provide the code 😃

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/662#issuecomment-438447560, or mute the thread https://github.com/notifications/unsubscribe-auth/AA7LL09qIw3eRvccSlQPw4TtvVxEQen6ks5uuzvXgaJpZM4YYMbQ .

[mihael-stormrage]

Have this or kinda alike issue on Export CSV btn:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';
// ...
<ToolkitProvider keyField="id" data={employees} columns={columns} bootstrap4 exportCSV>
  {({ baseProps, csvProps }) => (
    <div>
      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
      <ExportCSVButton {...csvProps}>Export CSV</ExportCSVButton>
      <hr />
      <BootstrapTable
        /* eslint-disable-next-line react/jsx-props-no-spreading */
        {...baseProps}
        filter={filterFactory()}
        filterPosition
      />
    </div>
  )}
</ToolkitProvider>

UPD: Probably not a bug, fixed by adding className="btn-success"