Repositioning DataTable sort arrows

Dash Python
1

I am using the DataTable component to present some data. It works really well, but from a UX perspective the design of the header row could be better. Specifically, the sorting arrows are left aligned in the column, while the column header text is right aligned. This means that the sorting arrows appear closer to another column header, than to the column they actually affect (see image).

Screenshot 2022-12-15 at 10.15.00
Screenshot 2022-12-15 at 10.15.00809×157 23.4 KB

How can I move these to be after the column header text that they refer to?

I would be OK with moving the select column checkbox as well (I don’t use the select option in my table, so that would be hidden). I think this means I can target the <div class="column-actions"><div>element using CSS, but I can’t figure out how to reorder the elements (header text and actions) in that div using CSS. How would this work?

All suggestions welcome!

2

Hello @andyclifton,

Welcome to the community!

Since the headers are in a flex box, the easiest way to do this is by adding this css to your assets folder:

.column-actions {
    order: 9;
}

(I arbitrarily used 9)

This adjusts the order of the flex and will put the options on the right side of the column header. :slight_smile:

1 Like