React-bootstrap-table2: Bootstrap 4 sorting icon missing

[RaySheikh]

Hi,
When I enable bootstrap 4 support, the sorting works. however the sorting arrow icons in the table header columns are missing.
I am using bootstrap table next ver 1.1.4 and Bootstrap 4.1.3.

Thanks!

[AllenFang]

@RaySheikh where the bootstrap4 prop you put?

[RaySheikh]

@RaySheikh where the bootstrap4 prop you put?

Sorry for the late reply. I'm using bootstrap 4 and I have it setup as:

<BootstrapTable
  bootstrap4
  keyField="id"
  data={ products }
  columns={ columns }
  defaultSorted={ defaultSorted } 
/>

it seems to be a bug. It works find with bootstrap 3.
i'm using Bootstrap 4.1.3
react-bootstrap-table-next 1.1.4.

Thanks!

[RaySheikh]

I have also noticed the edit validation message does not appear in BS4. The validation works but the message area is blank. anyone else seeing the same issue?
I recently updated to 1.2.0 and unable to get the autoSelectText to work.. not sure if it may be related to bs4 also.

Thanks Allen! Appreciate your time!

[AllenFang]

@RaySheikh I think in the online demo we are also use [email protected] but it work fine to me. Would you please share more about how to reproduce this issue? thanks

for the blank message issue, i will check it out. thanks

[RaySheikh]

@RaySheikh I think in the online demo we are also use [email protected] but it work fine to me. Would you please share more about how to reproduce this issue? thanks

for the blank message issue, i will check it out. thanks

@AllenFang
I have attached a link to the sandbox below. clicking on the column headers will sort the data but the icons are missing. I have also reproduced the missing validation message. If you change the price to 6 or higher the validation kicks in but the message is not displayed.

https://codesandbox.io/s/039869q7zv

Thanks!

[AllenFang]

@RaySheikh thanks for the demo, but I mean the demo is for the sort icon disappear problem lol . Because it this online demo is able to show the sort icon in bootstrap4, so i wanna see how you guy reproduce this issue, thank

[alexspence]

I'm having this issue as well. The demo @RaySheikh gave you reproduces the problem, I'm not sure why your storyboard is working. Also - on your storyboard, the caret only shows up on the current sort column. This gives no indication that the other columns are sortable. Ideally the caret would be on all the columns that are sortable, and the current sort would be highlighted.

[jakeleventhal]

I am also having this issue

[abdulrahman-khankan]

I solved the problem by adding this CSS to the top of my component file.
i.e. Just having bootstrap4 CSS on its own in index.html wasn't enough.

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"
  crossorigin="anonymous"
>

I had to add this to my component

import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';

[jakeleventhal]

This doesnt work for me

[AllenFang]

@alexspence The demo from @RaySheikh
is missing import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css"

Anyway, if anyone can show me a demo to reproduce, I will start to look into on it. Please check if you include the correct bootstrap css and react-bootstrap-table2 css, and add bootstrap4 property.

https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/bootstrap4.html

[AllenFang]

https://codesandbox.io/s/jj22w8lzvv

[hunterxxx]

First, add this to your component
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';

then, add bootstrap4 in

<BootstrapTable
  bootstrap4
  keyField="id"
  data={ products }
  columns={ columns }
  defaultSorted={ defaultSorted } 
/>

[Vignesh-Ravi]

Guys, Here is the solution. I had the same issue and resolved by adding,

import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';

and added bootstrap4 props in ToolkitProvider instead of BootstrapTable

exportCSV={{ onlyExportFiltered: true, exportAll: false }}>

noDataIndication="Table is Empty" selectRow={selectRow} {...props.baseProps} />

I strongly recommend to use ToolKitProvider instead of using BootstrapTable directly

Thanks all for your inputs.

[Jeadonara]

https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/1301#issuecomment-603049898

[abilpraju-aot]

Thanks to your support