CSS styling does not work with ToolkitProvider

[zaweb]

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!

[YassienW]

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 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 :)

[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 ***@***.***> 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 <#662 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA7LL09qIw3eRvccSlQPw4TtvVxEQen6ks5uuzvXgaJpZM4YYMbQ> .

[YassienW]

Good to know you got it sorted. Out of curiosity, are striped and bordered working on <ToolkitProvider/> or did you have to move them to <BootstrapTable/> 😛

[zaweb]

Seems to work fine in <ToolkitProvider /> Now that I have this working, I must say you've done a great job with react-bootstrap-table2. It has saved me a lot of time; I love it!

…

On Tue, Nov 13, 2018 at 4:57 PM Yassien ***@***.***> wrote: Good to know you got it sorted. Out of curiosity, are striped and bordered working on <ToolkitProvider/> or did you have to move them to <BootstrapTable/> 😛 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#662 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA7LLx-xDxd833TKE0ksrJprtSJE_RXoks5uu0BdgaJpZM4YYMbQ> .

[YassienW]

@AllenFang is the creator of react-bootstrap-table2 not me. I'm just helping around :)

[zaweb]

Oops! But thank you too for your help. :-)

…

On Tue, Nov 13, 2018 at 5:48 PM Yassien ***@***.***> wrote: @AllenFang <https://github.com/AllenFang> is the creator of react-bootstrap-table2 not me. I'm just helping around :) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#662 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA7LL_hWoDwJu24s2QQa98sOFM3fSqkRks5uu0wugaJpZM4YYMbQ> .

[AllenFang]

hey guys... sorry that lately reply. Actually, you can pass them via ToolkitProvider :)

[AllenFang]

Thank @YassienW help 👍

[jasonusdid]

Hi experts,

I got silimar issue, the searchbar, clearSearchButton and csvExportButton cann't show normally, could you help to take a look plz? Put the code as below.

import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitProvider, { Search, CSVExport } from 'react-bootstrap-table2-toolkit'
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css'
import 'bootstrap/dist/css/bootstrap.css'

const { SearchBar, ClearSearchButton } = Search;
const { ExportCSVButton } = CSVExport;
const products = [
{
id: 0,
name: 'test',
price: '2100'
},
{
id: 1,
name: 'test',
price: '2100',
test: 'aa'
},
{
id: 2,
name: 'test',
price: '2120',
}
];

const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];

export default class CustomTable extends React.Component {
render() {
return (

<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
search
>
{
props => (

<SearchBar { ...props.searchProps }/>
<ClearSearchButton { ...props.searchProps } />
<BootstrapTable
{ ...props.baseProps }
/>
<ExportCSVButton { ...props.csvProps}/>

)
}

)

}
}

[YassienW]

@jasonusdid In the future please place the code in code tags (between ``) or preferably create a working example on https://codesandbox.io with your issue, this makes it easier to help and reduces syntax errors. Your code has some critical problems, not really related to this issue:

1. The <ToolkitProvider> element is not closed. This element accepts a function as a child, this function should return a react element.
2. The render function can only return one react element. If you want to return multiple elements you can wrap them in a <React.Fragment> or a <div>

You should read more about render props here, you should also use this project's storybook for examples

Here is a working example, tailored for bootstrap4:
https://codesandbox.io/s/musing-feather-4wy9vlo0x4

[jasonusdid]

Hi @YassienW , Thanks a lot for your help.
The syntax errros are caused by something wrong when coping the code. and the btn style issue is due to the initial code without no className specified as below.

export default class CustomTable extends React.Component {
render() {
return (

<ToolkitProvider
bootstrap4
keyField="id"
data={ products }
columns={ columns }
search
>
{
props => (

<SearchBar { ...props.searchProps }/>
<ClearSearchButton className="btn-secondary" { ...props.searchProps } />
<BootstrapTable
{ ...props.baseProps }
/>
<ExportCSVButton { ...props.csvProps}/>

)
}

)
}
}

Thanks again for your help. It's really helpful.

[jasonusdid]

it's strange that the code cannot be copied with some keywords for example

...

Anyway, Thanks again @YassienW for help

[YassienW]

I am unsure whether the buttons are supposed to be unstyled by default or not, perhaps you should open a new issue

Also, using 3 ticks sorts the code out, you can also add the language for highlighting ```code```javascript

import React from "react";
import ReactDOM from "react-dom";
import BootstrapTable from "react-bootstrap-table-next";
import ToolkitProvider, {
  Search,
  CSVExport
} from "react-bootstrap-table2-toolkit";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";
import "bootstrap/dist/css/bootstrap.css";

const { SearchBar, ClearSearchButton } = Search;
const { ExportCSVButton } = CSVExport;
const products = [
  {
    id: 0,
    name: "test",
    price: "2100"
  },
  {
    id: 1,
    name: "test",
    price: "2100",
    test: "aa"
  },
  {
    id: 2,
    name: "test",
    price: "2120"
  }
];

const columns = [
  {
    dataField: "id",
    text: "Product ID"
  },
  {
    dataField: "name",
    text: "Product Name"
  },
  {
    dataField: "price",
    text: "Product Price"
  }
];

export default class CustomTable extends React.Component {
  render() {
    return (
      <ToolkitProvider
        bootstrap4
        keyField="id"
        data={products}
        columns={columns}
        search
      >
        {props => (
          <React.Fragment>
            <SearchBar {...props.searchProps} />
            <ClearSearchButton
              className="btn-secondary"
              {...props.searchProps}
            />
            <BootstrapTable {...props.baseProps} />
            <ExportCSVButton className="btn-primary" {...props.csvProps}>
              Download CSV
            </ExportCSVButton>
          </React.Fragment>
        )}
      </ToolkitProvider>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<CustomTable />, rootElement);

[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"