Ember-table shows index on the header

Question

I am using ember-table but have a weird behavior. It automatically adds index next to my header title.

But after I click one of the header to sort the table, the index will disappear as I want. How do I get rid of the index in the first place. Plus, without the sorting function, the table was normal.

After I click anyone of the header to sort the column, the index will go away.

Here is my sort object

sorts = [
  { valuePath: 'username' },
  { valuePath: 'total_assignment_count' },
  { valuePath: 'accepted_assignment_count' },
  { valuePath: 'accepted_rate' },
  { valuePath: 'acl_name' },
  { valuePath: 'repo_name'}
];

template

<EmberTable as |t|>
  <t.head
    @columns={{this.tableColumns}}
    @sorts={{this.sorts}}
    @onUpdateSorts={{action (mut this.sorts)}}
  />
  <t.body @rows={{this.tableData}} />
</EmberTable>

I fixed the issue, use only one sorting key do the trick. `sorts = [ { valuePath: 'username' } ];` — rj487, Jul 01 '22 at 16:04
I’m voting to close this question because the asker solved the problem themseves and didn't post an answer. I would retract my vote to close if an answer is posted tho :) — NullVoxPopuli, Jul 03 '22 at 16:39

score 0 · Answer 1 · answered Jul 13 '22 at 18:39

I found the answer.

Use only one sorting key.

sorts = [  { valuePath: 'username' } ];

Moreover, if you specify more than 1 key, then ember-table will help sort the table by the sequence.

EX:

sorts = [
  { valuePath: 'username' },
  { valuePath: 'score' },
];

The table will sort username first and then score

Ember-table shows index on the header

1 Answers1