Carets don't display

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

[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: "";
  }

[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: “”; }