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,


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,


Hello, is this still not possible to rotate headers of a datatable in Dash? With a lot of columns and binary data (short representation) it’s really uncomfortable to have headers much wider than actual data content…

Hi @fingoldo

It’s possible to do this with CSS, but another great option (new since the OP) is to use tooltips . See the example on this page: DataTable Tooltips | Dash for Python Documentation | Plotly “Tooltips in Column Headers”