DataTable - Row Height

Dash Python
1

Is there a way to shrink the row height, i.e. – reduce the top / bottom padding between cell contents and row top / bottom border to give it more of an Excel feel?

1 Like
2

I’ve made multiple attempts to achieve this outcome using changes to padding and borders etc. without success. The row height would not shrink below 30px.

The solution that finally worked for me was this:

css=[{‘selector’: ‘.dash-spreadsheet tr’, ‘rule’: ‘height: 10px;’}],

2 Likes
3

Thanks for this tip. Works like a charm. And if you want to distinguish between table
header and body you can even do that:

    css=[
        {"selector": ".dash-spreadsheet tr th", "rule": "height: 15px;"},  # set height of header
        {"selector": ".dash-spreadsheet tr td", "rule": "height: 75px;"},  # set height of body rows
    ]
2 Likes
4

The option I prefer is changing the .CSS

/* reduce row height */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr{
    min-height: 20px;
    height: 20px;
}
/* reduce header height */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr:first-of-type{
    min-height: 25px;
    height: 25px;
}