Styling the Export button in DataTable

Could you please suggest to add CSS to “Export” Button inside Dash Data table, i did try giving properties in style-table, but it just reflect on the table excluding the button
Please suggest

5 Likes

image

Looking to customize or add some css to these buttons.
Tried doing with CSS property using css selector:- but i could add only content and no margin or other css properties.

Please help.

I agree with @shefali2909! It would be great to have instructions in https://dash.plotly.com/datatable on how to customize the Export button.

Is it possible to change the position of the button? E.g. below the table instead above?

1 Like

Hi @sislvacl,
I failed to find a way to do anything with default buttons like Export or Toggle Button.
As they are within the data table components and are being controlled internally.
I tried the CSS property of data table for them, but to no avail.

Lets keep trying and see if we find some solution until there is some external feature supporting this.

1 Like

If you need something right now, you could use the Download component as shown here,

However, it would require some more work as compared to using the built-in export button.

1 Like

Hi Shefali2909,

I managed to style the export button by right-click -> inspecting it and seeing its html className is “export”. Then I created a export class in my CSS file and was able to move it, style it and change it just how I wanted.

.export{
    position: absolute;
    right: 50%;
    font-type: sans-serif;
    [...]
}

Those changes will be added to whatever element that has a class of “export”. I still wasn’t able to change its label or move it to another Div.
Hope it helps. Cheers!

5 Likes

Hi, I was dealing with the same issue and came up with sort of hacky but simple solution:

See:

Hi, i tried @Higgcz solution; the code that you have shown works, but when i try to use it on my own code, i keep getting this error:

Cannot read property ‘dummy-data’ of undefined

*(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)*
TypeError: Cannot read property 'dummy-data' of undefined

Im not very well versed in the javascript aspect especially since dummy-data was never defined anywhere, yet you are able to call it.

Also with regards to my code, my callbacks are separated in an index.py which renders page content by calling other files, so this might be another reason why the code might not work; is there a way around that?

I just added a export_btn.css file to my assets folder, I wanted a bootstrap 4 info button so I just copied all that goodness from an inspect of the button on a random page using bootstrap. For me the contents of the export_btn.css file is:

.export {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
1 Like

Dash gives it the class, export
image

Just tried it out real quick, with the external css idea.

Result:

image

How

  1. in your project folder, make a new directory called /assets
  2. In this folder, whenever you add .js or .css files, it will automatically apply them to your application.
  3. I made this file called extra.css and styled it :point_down:
    image

Official Docs

https://dash.plotly.com/external-resources

hi, does anybody managed to change the button label? I am working in another language and would like to change the label “Export”

Here is what I figured out after pegging off @Gustavo_Machado 's suggestion.
It looks like the dash-spreadsheet-menu class is the parent div. And when you inspect it, it shows up as a flex box. So, I styled the box as flex - then I styled the button. The CSS is below:

.dash-spreadsheet-menu {
margin: 1% 0 1% 0;
justify-content: center;
}

.export {
border-radius: 5px;
border: 2px solid lightgrey;
padding: 0 15px;
font-family: ‘Poppins-Bold’;
background-color:white;
transition:.75s;
}

.export:hover {
color:white;
box-shadow: 0px 1px 3px lightgrey;
background-color: lightgrey;
}

Managed to change label with setting in css
.export {
font-size: 0;
}
.export:before { content: “Your rext here”; font-size: 20px; }