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>

Answer 1

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