Prevent sorting from styling column on antd

user_1812322 0
Viewed 646

I have an antd Table with a sortable column. This table's rows might or might not be styled. When I sort the rows the style is overwritten. Is there a way to prevent this?

Here's an example of an styled row. enter image description here

And here's what happens when I sort the rows. enter image description here

Here's what my Due Date column definition looks like:

{
      title: 'Due Date',
      dataIndex: 'due_date',
      key: 'due_date',
      sorter: (a:any, b:any) => new Date(a.due_date).getTime() - new Date(b.due_date).getTime(),
      defaultSortOrder: 'ascend' as 'ascend'
}
antd reactjs
2 Answers

The sorted column CSS rule has the following selector:

td.ant-table-column-sort {
 ...
}

So, to overwrite it you just have to write a CSS rule that's more specific than that.

tr.warning-table-row > td.ant-table-cell {
 ...
}

Bear in mind that in the example above warning-table-row is a custom class I created to tell whether the row should have a custom style applied to it. You'll have to write your own.

user_18123220

As Bonifacio2 pointed out, I just followed his advice and for me this worked:

td.ant-table-column-sort {
  background-color: transparent;
}

Now when I sort a column, it's backgrounds color remains the same as other columns.

user_95403910
Related