Hello. I am using handsontable for my project. I need to highlight some cells according to my specific condition. Im using a React.  It works fine, but i had a problem: when im try to filter my data (with built-in filter or my custom filtering method) - the styles doesnt applying. For "не актуальний" all row should be red and crossed out like on previous screenshot.  To solve this problem im try to use hook afterFilter and add this to my init handsontable method
afterFilter: () => {
this.hotTableComponent.current.hotInstance.updateSettings({cells: this.cells});
},
and it works, my styles applying also after filtering, but when im clear the filter this hook also triggered and after this all my styles are not applied (even readOnly column become editable)  Can someone help with solving this problem? This is a fragment of my cells method where im applying styles by some logic
if (this.instance.getDataAtCell(row, 7) === ‘не актуальний’) {
cellProperties.className += ’ not-actual-row’;
} else if (this.instance.getDataAtCell(row, 7) === ‘новий’) {
if (visualColIndex === 3 ||
visualColIndex === 14 ||
visualColIndex === 15) {
cellProperties.className += ’ new-row’;
}
}
if (this.instance.getDataAtCell(row, 8) === ‘stat’ && parseFloat(this.instance.getDataAtCell(row, 13)) <= 76) {
if (visualColIndex === 13) {
cellProperties.className += ’ splice’;
}
}
Styles are not applied after filtering
Hi @tokyomanul
Thank you for contacting us. Please provide a code demo in a chosen sandbox (jsFiddle, CodeSandbox, StackBlitz) in which the issue can be replicated.
Hello. I tried to reproduce the bug, but it didn’t. https://jsfiddle.net/oeb9cgh1/1/ here is a demo. Hook afterFilter works correctly after clearing the filter and styles applied.
Maybe there another way to apply styles to cells after filtering?
Thank you for the example, but can you please clarify? Do you mean, that in the demo the issue is not present and the implementation works as intended?
Yes, you are right. In demo everything works fine
If that works in the example, then it should also work in your local project. Without the example where the issue can be replicated there’s not much I can do to help. I can only advise to check for any differences between the code demo and your project.
I did it. The demo https://jsfiddle.net/mu4r9b3a/ . You should filter any column, and then after the clearing filter, styles doesn`t applied to some cells. I can produce this bag after adding all handsontable settings i have in my project, so i think there is a conflict between some settings.
Also i record the video https://drive.google.com/file/d/1z01Jr4YLKAGPOx1CwSYp6E6_eox_kAcb/view?usp=sharing
Hi @tokyomanul
Thank you for the example. I investigated this issue further and it seems that this issue might be caused by some of your styling conditions that in some way are affected by defining colWidths option. Only if this option is present, the styling will break in your implementation.
Additionally, in my example, where I simplified the styling if I declare cells function twice instead of passing the reference, then everything works fine, no matter the settings: https://jsfiddle.net/handsoncode/86x19ezt/ But if I pass the reference inside updateSettings, then it breaks the same way. In your example it doesn’t make any difference, that’s why I suppose that the conditions themselves could be the source of this issue.
Hello. Thank you for your answer. My solution was to replace the conflicting colWidths settings with a column header style in hadsontable setting:
colHeaders: [’^div class=“header blue-header”^Колiр^/div^’,]
and css style
.blue-header {
background-color: dodgerblue;
width: 120px;
}.
And now with applying this styles to header i can change the width of every column.
Thank you again. Have a nice day =)
I’m glad you were able to find the solution! I will close this topic now, but if you have any other questions, let me know.