I have an HTML table, that is dynamically rewritten by external code.
The first column is a grouping column, and rows in the same group are always consecutive.
When dynamic filters are applied, all rows that don't match the filter are hidden by third-party. Order never changes.
The problem is the client wants to have lines separating the groups, but rows devised to do that disappear when filtering kicks in.
At the moment I resolved this by adding "row-group-N" class to rows, as they generate, and writing this CSS:
.row {border-top: 1px solid black}
.row-group-N + .row-group-N {border-top: none}
(with N being group counter modulo Max)
Edit:
Here's a demonstration: https://plnkr.co/edit/Zzh9olmmLafs1Y8lCoZB?p=preview
Max is here set to three. Bold row signifies beginning of the group, as per CSS. When you search for 'things', you'll see that the result is incorrect, due to classes wrapping around.
End of edit
It works by adding the separator to every element, but removing it when consecutive elements belong to the same group. But there is worst case 1/Max chance of the line not showing in correct place. This is because I always have a finite number of CSS classes for this purpose.
I'm looking for a way, myself, to determine when the filtering code finishes execution, as to be able to perform the changes then with JavaScript.
But is there something else I can do?