DataTable's style_* should allow class names instead of CSS styles

[quazgar]

It should be possible to specify class names instead of verbatim CSS style attributes in the style_* parameters of DataTable. This way, styling could be done at a later time and independent from the table creation code.

API change proposal

Class names could be given as lists of strings, in the case of style_*_conditional, there could be a second special key classNames which takes a list of strings.

DataTable(...,
    style_header=['myHeaderClass', 'myTableClass'],
    style_data_conditional=[
        {
            'if': {'row_index': 'odd'},
            'classNames': ['myOddClass', 'myTableClass'],
            },
    ...
)

[alexcjohnson]

That's a great idea @quazgar - but is it important that this be a list rather than a space-separated string? That's what we use throughout DCC, it's a more direct line to the underlying HTML, and it's simpler when you just want a single class.

[quazgar]

No, that's no problem, whatever is easier to implement. Actually, maybe the two ways to specify styling could be unified, by always using the special key:

DataTable(...,
    style_header={
        'textAlign': 'left',
        'classNames': 'myHeaderClass myTableClass'
    },
    style_data_conditional=[
        {
            'if': {'row_index': 'odd'},
            'classNames': 'myOddClass myTableClass',
        },
    ...
)

[alexcjohnson]

Yes exactly, apply this to the conditional and static style props alike. We'd still support explicit styling, just allow the special key className that gets passed along to the class attribute instead of the style attribute. Note it should be className not classNames - to match how react does it which is the convention DCC and dash-html-components followed.

[ned2]

I would be so keen to see this feature added. Just found myself scouring the DataTable reference hoping I would find it. Found this issue via an existing StackOverflow question where someone else was looking for this feature also.

Are there any dependencies for adding this feature, or is it just a matter of prioritisation @alexcjohnson?

edit: oops, just realised I'm in the wrong repo

[a4shubert]

I would be very keen to have this feature. It's just not clear how to structure the styling of dash application: you can use properly created external css file (which in turn could be created by sass etc) for all the html components, but for the dash-table you have to copy/paste all the different values from already existing css into the string.

[BShuYi]

I would be very keen to have this feature. So, same design can apply to multiple table without repeat all the style and can reduce the script of it. Hope have this feature soon.

[frnhr]

One thing that CSS stylesheets can do that inline style cannot is play with pseudo-elements and pseudo-classes (:hover, ::before, etc.) And another thing that is not supported via Dash's style* attributes is styling child elements inside cells.

Would be great to have this conditional className implemented!