Ember Table custom sorting indicator

EmberTable is a very powerful addon for EmberJS that allows great degree of flexibility.

Since I'm using tailwindcss for styling and FontAwesome for icons, I really wanted to be able to make a custom component for sorting indicator.

From the docs it was not directly obvious what to do, so I decided to make this little write-up.

The code

First we need to tell EmberTable to use the component we are going to create later on:

{{!-- app/application/template.hbs --}} <EmberTable as |t| > <t.head @columns={{@columns}} as |h| > <h.row as |r| > <r.cell as |columnValue columnMeta| > {{!-- Our new component --}} <CustomSorter @columnMeta={{columnMeta}} /> {{columnValue.name}} </r.cell> </h.row> </t.head> <t.body @rows={{rows}} /> </EmberTable> 

Now to our new component:

{{!-- app/components/custom-sorter.hbs --}} {{#if @columnMeta.isSorted}} {{#if @columnMeta.isSortedAsc}} <FaIcon @icon="sort-up" class="text-gray-500" /> {{else}} <FaIcon @icon="sort-down" class="text-gray-500" /> {{/if}} {{/if}} 

The output with some additional table styling might look something like this:

Edits

2021-01-07

Found out that there is a cough not great code in ember-table for calculating sortIndex that freaks out when you want to consume isSortedAsc even though isSorted===false. Updated the code here to work even with that.

Image by Michael Schwarzenberger from Pixabay