[syncfusion_flutter_datagrid] Filter Icon color and positioning

[steph-lion]

Hi, I'm using the SfDataGrid from its package and SfDataGridTheme from the core package. I applied the filter and sorting icons but, while you can change the color of the sorting icon with sortIconColor property, it seems that I can't change the default icon color of the filter one.
Code:

         data: SfDataGridThemeData(
                headerColor: Theme.of(context).primaryColor,
                sortIconColor: Colors.white),
         child: SfDataGrid

Also, another problem. As you can see on the screenshot, the column "NAME" is aligned to the content below because I applied a padding of 55 to its left, while I left "SURNAME" column as it initially was. I'm trying to achieve the first result without use manual padding, because when I'm going to use another screen, it will be surely different.
Without the filter and sort icons, the text is centered with the cell below, but the icons move the column text to the left. Is it possible to solve it?

[Tamilarasan-Paranthaman]

Hi @steph-lion,

Regarding Query: I applied the filter and sorting icons but, while you can change the color of the sorting icon with sortIconColor property, it seems that I can't change the default icon color of the filter one.

The support for changing the color of the filter icon has been included in the Syncfusion Essential Studio 2022 Volume 4 Main Release version 20.4.38.

Release Notes: https://help.syncfusion.com/flutter/release-notes/v20.4.0.38?type=all#datagrid

Regarding query: Without the filter and sort icons, the text is centered with the cell below, but the icons move the column text to the left. Is it possible to solve it?

As per the DataGrid structure, the header cell, sort, and filter icon widgets are added as children of the Row widget. The header cell is wrapped as a child of the Flexible widget. So, the header cell container would be adjusted the width to the remaining space. That's the behavior of DataGrid. You can achieve it in the sample level itself by setting the width of the icon as the left padding of the Container widget. I have attached a sample for that. Note: The default width of both Icon is 62(The sort icon width is 20, the filter icon width is 34 and the padding is 8)

List<GridColumn> get getColumns {
    return [
      GridColumn(
          columnName: 'id',
          label: Container(
              padding: const EdgeInsets.fromLTRB(62, 0, 0, 0),
              alignment: Alignment.center,
              child: const Text('ID'))),
      GridColumn(
          columnName: 'name',
          label: Container(
              padding: const EdgeInsets.fromLTRB(62, 0, 0, 0),
              alignment: Alignment.center,
              child: const Text('Name'))),
      GridColumn(
          columnName: 'designation',
          label: Container(
              padding: const EdgeInsets.fromLTRB(62, 0, 0, 0),
              alignment: Alignment.center,
              child: const Text('Designation'))),
      GridColumn(
          columnName: 'salary',
          label: Container(
              padding: const EdgeInsets.fromLTRB(62, 0, 0, 0),
              alignment: Alignment.center,
              child: const Text('Salary')))
    ];
  }

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample-228624097