Is it possible to filter and sort clr-datagrid, with specific API data setup

[MckMaciek]

Hi everyone,

I am trying to implement grid filtering and sorting, using clr-datagrid, using built in mechanism, unfortunately I am unable to do so.
Let's suppose my API returns the following structure :

this.users = [{rows: ['anyName1','anyType2'], id : 12}, {rows : ['anyName2', 'anyType1'], id : 13}];
this.columnNames = ['name', 'type'];

The idea is that, column names are lexically sorted, and rows are also sorted with regards to the column keys in a map, processed on a backend, so in the end I end up with something like that:

<clr-dg-column
*ngFor="let key of columnNames "
clrDgField="{{key}}"
>
<div style=" text-transform: capitalize;">{{key.toLowerCase()}}</div>
</clr-dg-column>
<clr-dg-row
*clrDgItems="let user of users" [clrDgItem]="user">
<clr-dg-cell *ngFor="let columnKey of userColumns"> {{ user.rows[userColumns.indexOf(columnKey)] }} </clr-dg-cell>
</clr-dg-row>

It looks exactly how I would like to, nevertheless sorting and filtering is not working at all. Perhaps I am missing something.
I would really appreciate any kind of guidance :), My apologies if the problem turns out to be trivial :).
Many thanks!

[MckMaciek]

I figured that out, so if someone had to do it this way, I guess it should be somewhat done the following way:
<clr-dg-column
*ngFor="let key of initial.columns"
clrDgField="row.{{initial.columns.indexOf(key)}}"
>
<div style=" text-transform: capitalize;">{{key.toLowerCase()}}</div>
</clr-dg-column>
<clr-dg-row
*clrDgItems="let rows of initial.rows"
[clrDgItem]="rows">
<clr-dg-cell *ngFor="let columnKey of initial.columns"> {{ rows.row[initial.columns.indexOf(columnKey)]}} </clr-dg-cell>
</clr-dg-row>
(I had to change the example a little bit to fit my needs)

[kevinbuhmann]

You can use let index = index in the *ngFor directives instead of calling indexOf in the bindings to be more performant.