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
Top comments (0)