Black Lives Matter. Please consider donating to Black Girls Code today.

Css property and selectors in `dash-table`

Any documentation on how to use the css property that I see used in the docs a few times? it refers to selectors like .dash-spreadhseet, are those pre-defined? Can I use css to set my own CSS properties? Like making the table height a certain percentage of its Div container?

The css property just sets the CSS properties on the app. So, you can use this to set your own CSS properties.

Right now, css is an “escape hatch”. Ideally, you wouldn’t need to supply custom CSS properties, everything would be possible via the style_* properties (style_cell, style_data, style_filter, style_header, style_data and all of their conditional versions like style_cell_conditional, etc). However, we haven’t quite achieved that level of abstraction yet: the markup for cells gets pretty complex and it can become ambiguous where style_cell should be applied (i.e. on the outermost div inside the cell, or the inner-most?).

As we stabilize this component, I hope that we’ll improve this and we’ll be able to remove the css. That’s why we’ve only documented it in a few cases and why we haven’t exposed all of the possible CSS selectors in the documentation.

A post was split to a new topic: Styling the Export button in DataTable