React-bootstrap-table2: Carets don't display

[Thebarda]

Hello

I setted 'sort' to true on my column but I can't see any carets near of header title
The sort works when I'm clicking on header.

Here is a sample of my code.

Column Declaration...
const column = [ { dataField: 'name', text: 'Name', sort: true } }

Table Declaration...
<BootstrapTable data={datas} columns={column} />

Thank you for your response

EDIT: I'm using bootstrap 4

[AllenFang]

HI @Thebarda currently, we dont support the bootstrap 4, check this docs, we will support it soon.

[LuisUrrutia]

@Thebarda you can add the following styles to your global stylesheet:

  .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
  }

  .dropup .caret, .navbar-fixed-bottom .dropdown .caret {
    border-top: 0;
    border-bottom: 4px dashed;
    border-bottom: 4px solid \9;
    content: "";
  }

[hayk077]

@LuisUrrutia in this case this is the solution but after adding pagination, get double caret in the sizePerPage block. So add .react-bootstrap-table class.

[ertejaspatel]

Hi Hayk077

Where do you add .react-bootstrap-table class as I am facing similar issue and adding it to ReactBootstrapTable does not make any difference for me.

classes="react-bootstrap-table"
keyField={'id'}
data={data}
columns={columns}
>

Thanks:)

[ertejaspatel]

For now I just scoped the above css to the table header only.

table thead .caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid 9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}

table thead .dropup .caret, table thead .navbar-fixed-bottom .dropdown .caret {
border-top: 0;
border-bottom: 4px dashed;
border-bottom: 4px solid 9;
content: "";
}

[Thebarda]

Hey @ertejaspatel.
You can use @LuisUrrutia 's solution ;)
It works perfectly with / without using pagination

[AllenFang]

Support from [email protected]: https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/bootstrap4.html