Add image in column header

[ak-chinmay]

Hello,

I need to put sort icon image in the column header so that user will understand the table is sortable. Is there any solution for the same ?

Thanks and Regards, Chinmay

[mjarmoc]

+1 from me. After clicking the header sort icons appear. However, I need to show them from beggining.

[SircleCquare]

Little work-around for now: you need to make sure that your data is wrapped up in the a LocalDataSource, then set the sort for that source. It makes the icon show up from the start.

Your code might look something like this:

// Your original data
data : [{
    {
        name: "a", 
        number: 1
    }, 
    {
        name: "b", 
        number: 3
    }
}]

...

// Data source to wrap data in 
dataSource: LocalDataSource;

...

constructor(){
    ...    

    // Wrap source and sort 
    this.dataSource= new LocalDataSource(this.data);
    this.dataSource.setSort([{ field: 'name', direction: 'asc' }]);

    ...
}

[ashwinbhamare]

You Can simply Write a CSS for it

a.sort::after{ content: ''; display: inline-block; width: 0; height: 0; border-bottom: 4px solid rgba(0,0,0,.3); border-top: 4px solid transparent; border-left: 4px solid transparent; border-right: 4px solid transparent; margin-bottom: 2px; -webkit-transform: rotate(0deg)!important; transform: rotate(0deg)!important; } a.sort.asc::after { -webkit-transform: rotate(-180deg)!important; transform: rotate(-180deg)!important; margin-bottom: -2px!important; }

Or you if you want you can swipe rotation of arrows It works for me hope for you also, Thank!