DEV Community

Cover image for Ember Table custom sorting indicator

Ember Table custom sorting indicator

michalbryxi profile image Michal Bryxí Updated on ・2 min read

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}} />


  <t.body @rows={{rows}} />
Enter fullscreen mode Exit fullscreen mode

Now to our new component:

{{!-- app/components/custom-sorter.hbs --}}

{{#if @columnMeta.isSorted}}
  {{#if @columnMeta.isSortedAsc}}
    <FaIcon @icon="sort-up" class="text-gray-500" />
    <FaIcon @icon="sort-down" class="text-gray-500" />
Enter fullscreen mode Exit fullscreen mode

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

CustomSorter (1)



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

Discussion (0)

Editor guide