Datatable - Rounded corners

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

border-radius: 50%;

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

1 Like

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

The broken way
:warning: This will work once is closed, and released, probably as part of dash-table==4.3.0

            '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.

            'selector': '.dash-spreadsheet-container',
            'rule': 'border: 1px solid blue; border-radius: 15px; overflow: hidden;'

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


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

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

Thanks! Marc-Andre.
This helped me.

  • Leonard Topno