Dash DataTable - Change Direction of Column Headers

Dash Python
1

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

2

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/)

3

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

4

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…

5

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”