By default, the table’s height will expand in order
to render up to 250 rows.
After 250 rows, the table will display a pagination UI
which enables viewing of up to 250 rows at a time.
If you are using pagination, you can control the height by displaying
fewer rows at a time. Instead of 250 rows, you could display
10 rows at a time. By default and without wrapping,
each row takes up 30px. So 10 rows with one header would set the
table to be 330px tall. The pagination UI itself is around 60px tall.
In this example, the pagination is done natively in the browser: all of the data are sent up front to the browser and Dash renders new pages as you click on the buttons. You can also do pagination in the backend so that only 10 rows are sent to the browser at a time (lowering network costs and memory). This is a good strategy if you have more than 10,000-50,000 rows. [Learn about backend pagination](/datatable/callbacks).
If the table contains less than roughly 1000 rows,
one option is to remove pagination,
constrain the height, and display a vertical scrollbar.
If you have more than 1000 rows, then the browser will slow
down when trying to render the table. With more than 1000 rows, we
recommend switching to browser or server pagination (as above) or
virtualization (as below).
If you have more than ~1000 rows, then you could keep pagination at
the bottom of the table, constrain the height, and display a
You can also fix headers so that the table content scrolls but the
headers remain visible.
If a column header is wider than the data within that column and the
table’s container isn’t wide enough to display the headers,
then the column will be as wide as the data and the header text
will either be truncated (most browsers) or overflow onto the next column (Firefox).
This is a bug (plotly/dash-table#432).
The current workaround is to hide the overflow or
fix the width of the columns in pixels.
When using this workaround, you may run into a few of these issues:
Example of the wide-header limitation
If the headers are wider than the cells and the table’s
container isn’t wide enough to display all of the headers,
then the column headers will be truncated on most browsers or
will overflow on Firefox.
Workaround Option 1: Hiding the header overflow for Firefox users
(If you are not on Firefox, then this example will look the same as above)
Workaround Option 2: Fixing the width of the columns
As mentioned above, the browser has difficulty rendering thousands of
rows in a table. By rendering rows on the fly as you scroll,
virtualization works around rendering performance issues
inherent with the web browser.
All of the data for your table will still be sent over the network
to the browser, so if you are displaying more than 10,000-100,000 rows
you may consider using backend pagination
to reduce the volumne of data that is transferred over the network
and associated memory usage.
fixed_rowslimitations exist as mentioned above.