DataTable Layout

Learn to manipulate the DataTable Layout, especially the height, pagination, and scroll.

An important skill when creating and editing DataTable components is to be able to adjust the layout as fits the needs of your app and data. Let’s learn some key properties that enable this customization:

Press + to interact

Height

When displaying data in Dash using the DataTable component, we are able to control the height of the table so that the data itself are neatly presented. When displaying the dataset, if the number of rows exceeds 250, then by default, pagination will come into play and allow us to view the dataset over multiple pages if we wish.

Pagination

Pagination (paging) seeks to divide large amounts of content into more manageable smaller parts. For example, you might be on an e-commerce website and want to buy a t-shirt from a popular website but might not want to view all 10,000+ options on one page. You would most likely rather have just a few options presented per page.

In the context of large datasets, this involves displaying a set number of rows per page and then navigation in the user interface, allowing the user to toggle between different pages to view different data. The ...