React-bootstrap-table2: Implement custom sort caret

[sinisbad123]

Hi @AllenFang ,

I was wondering if there's any progress for the sort caret?

It says in the documentation that it's coming soon, and since the issue #177 was opened and "closed", was wondering if there are any progress to this.

Let me know if there are any alternatives to customizing the caret

Thanks and keep on improving this!

[AllenFang]

@sinisbad123 hello, sorry for lately feature support, I will implement it ASAP. I can not tell you the when I can finish, because there're huge task I have to do for this project by myself. thanks

[AllenFang]

Anyway, I will implement it before Nov.

[AllenFang]

RELEASE NOTE

Please upgrade to [email protected]

ONLINE DEMO

DOCS

[sinisbad123]

Thank you so much @AllenFang ! More power!

[AllenFang]

👍

[hdehal]

@AllenFang Per https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/177#issuecomment-427662857

Your Storybook demo does not include the actual caret icons/glyphs:
sortCaret: (order, column) => { if (!order) return (<span>&nbsp;&nbsp;Desc/Asc</span>); else if (order === 'asc') return (<span>&nbsp;&nbsp;Desc/<font color="red">Asc</font></span>); else if (order === 'desc') return (<span>&nbsp;&nbsp;<font color="red">Desc</font>/Asc</span>); return null; }
So I went in and added them to my local test. And oddly enough, the "caret" _CSS_ seems to be missing when I add in the relevant <span>...<span> for the carets:

    sortCaret: (order, column) => {
      if (!order) return (<span className="order"><span className="dropdown"><span className="caret"></span></span><span className="dropup"><span className="caret"></span></span></span>);
      else if (order === 'asc') return (<span className="react-bootstrap-table-sort-order"><span className="caret"></span></span>);
      else if (order === 'desc') return (<span className="react-bootstrap-table-sort-order dropup"><span className="caret"></span></span>);
      return null;
    }

E.g. the CSS we want that is missing:

/* Missing from Boostrap CSS */
.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
 }
 .dropdown,
 .dropup {
  position:relative
 }
 .dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
 content:"";
 border-top:0;
 border-bottom:4px dashed;
 border-bottom:4px solid\9
}

Here are my includes:
import 'bootstrap/dist/css/bootstrap.min.css'; import BootstrapTable from 'react-bootstrap-table-next';
This is my version:

"react-bootstrap-table-next": "^3.3.3",

And I have bootstrap4 enabled on my <BootstrapTable />

Any thoughts if I'm doing this wrong, or if indeed the 'bootstrap.min.css` is missing the relevant caret CSS?

P.S. Thanks for everything @AllenFang !

[KM5538]

@hdehal

OMG....yours is the ONLY solution in the WHOLE internet that worked for me for sort caret!!! (after 2 days of trying everything else I finally found this post)

You saved me!

May your code always work in 1st go your entire life!

[akshayDatacode]

Thanks for Solution