SyncFusion React grid with typescript - Change filter icon when filter is applied

[Ilya Zlochisty]

Hi,

I am using SyncFusion react grid with typescript. I have enabled filter functionality on columns. When I filter on a column, I want to show a visible indicator that the column has a filter applied, currently I do not see any such indicator on a filtered column.

I grabbed the following picture from online excel, when I apply filter on a column, excel changes the icon to a different one.

Can you suggest a way to achieve this in SyncFusion react grid with typescript code?

[Pavithra Subramaniyam]

Hi Ilya Zlochisty,

Greetings from Syncfusion support.

By default, the filtered icon will be highlighted in a different color based on the Syncfusion theme you are using. Please refer to the below screenshot for more information.

If you didn’t have this indication in your sample, we suspect that some of the styles might be overridden. If you are still facing the issue, please share the below details which will be helpful for us to provide a better solution as early as possible.

1. Is there any style customization in your sample?
2. Do you want to show a different icon for the filtered column?
3. Share the Syncfusion package version.
4. Share an issue reproducible sample if possible.

Regards,

Pavithra S

[Ilya Zlochisty]

I was able to find the solution. By utilizing a custom style, we can attain the desired outcomes.

<style>

    div.e-icons.e-filtered:before {

        content: '\e796' !important

    }

</style>

[Pavithra Subramaniyam]

Hi Ilya Zlochisty,

We are glad to hear that you have found a solution to achieve your requirement. Please get back to us if you need further assistance.

Regards,

Pavithra S