Position of Sort Arrow When Using Complex Headers

alexeos

Hello!

I have been tasked with changing up the header usage one of our web apps high usage data tables.

This example clearly illustrated the usage, and I was able to get the appropriate functionality with no hiccups:

https://datatables.net/examples/basic_init/complex_header.html

However, when I sent the changes for review, I received some feedback on the positioning of the sort icons (attached as screenshot).

The first 4 columns (checkboxes, Staff Number, First Name, Last Name) are all rowspan=2, the "Number of Rising" is a colspan=6, and no colspan/rowspan specific for Total, Underrepresented

As you can see, that is implemented properly, BUT, the sort icons for Staff Number, First Name, Last Name are all at the top of their two row element.

In the second screenshot, I've highlighted a portion of the example page, where the sort icon is shown vertically aligned with the text.

I've done a fair amount of searching, and it seems like moving around the sort icons is quite a bit of work. However, since the behavior I'm seeing is different from the example, so I wanted to ask if their was an implementation detail I might have overlooked.

Thanks,
Alex