Datatable - Rounded corners

Dash Python
1

Hi All,

I’ve been trying to get the corners of my dash datatable to be rounded, but i don’t seem to be able to get the “border-radius” in the css to apply to the datatable. Does anyone know how to do this?

I’ve currently got the datatable with id “Table_of_Data” within a section of id “datatable_container” with the following css

#Table_of_Data{
border-radius: 50%;
}

#datatable_container{
padding: 10px;
background-color: white;
border-radius: 10px;
border: 1px solid white;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

Selection_022
Selection_0221591×105 1.4 KB

1 Like
2

There’s two ways of doing this, one of which is broken right now…

The broken way
:warning: This will work once https://github.com/plotly/dash-table/issues/567 is closed, and released, probably as part of dash-table==4.3.0

        style_table={
            'border': '1px solid red',
            'borderRadius': '15px',
            'overflow': 'hidden'
        }

The unofficial way
This prop is to change styling of the table when no other API can do it.
Classes and attributes that are prefixed with dash- have more chances of being stable than those without the prefix, which are considered implementation details.

        css=[{
            'selector': '.dash-spreadsheet-container',
            'rule': 'border: 1px solid blue; border-radius: 15px; overflow: hidden;'
        }],
4 Likes
3

Cool! Thank you very much! I will probably wait until the first method is released.

Thanks!

4

Just confirming this has been fixed and will be in the next release (dash==1.3.0, dash-table==4.3.0)

5

Hi @Marc-Andre. I’m looking for a way to apply border-radius to each cell of dash table? Could you please help?

6

Thanks! Marc-Andre.
This helped me.

  • Leonard Topno