Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Dash DataTable - Change Direction of Column Headers

Hi Guys,

quite new to the forum! First of all I have enjoyed the use of data-table-experiments.
Is there any way (without changing CSS codes) to change direction of the interactive table headers. In case of long header titles.

kind regards,

Stuart

Hey @Stuart_Kerkhof - This isn’t possible in Dash DataTable right now. For now, you will have to do this by overwriting the CSS of the DataTable or by using CSS in a regular html.Table element. Here is a good CSS tutorial on rotated column headers: https://css-tricks.com/rotated-table-column-headers/

Once https://github.com/plotly/dash-table-experiments/pull/11 is merged, this will be easier to customize in the DataTable component. There is still quite a bit of work that needs to be done to make this possible (if any company out there needs this work expedited and can help sponsor development, please reach out: https://plot.ly/products/consulting-and-oem/)

Hi Chris,

Thanks for your reaction. I have been experimenting some with changing the CSS code. In CSS would (for example) .DataTable .th be the correct call for customization?

Kind regards,

Stuart