Ember Table custom sorting indicator

#ember #tailwindcss

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