Datatable overflowing onto multiple pages

Dash Python
1

Hi there,

I am trying to implement an A4 size report that has a Datatable on it. The number of rows the datatable will vary depending on the report and in a normal web page dashboard with user intractability, this isn’t an issue as the table can be restricted to a page size of 10 rows for example and then you can scroll through the pages.

However with the restricted A4 size, all the rows in the table will need to be visible. Right out the box, this is an issue as the page size is restricting the view of many rows when the table is big.

So I was wondering is there a neat way to make the datatable overflow onto another page or would i need to access the row numbers for the table and duplicate the table onto multiple pages?

Many thanks,
Tom

2

Hello Tom,

Do you have any elements that are below the table, or just the table?

3

Hi @jinnyzor there might be a page footer on there as well.

4

Can you provide an MRE with a similar layout, so that we can test?

I have a feeling that simply allowing it to overflow will cause it to look funky.

5

Can you clarify what “MRE” means? I assume you mean either just code or a test app?

Thank you,
Tom

6

Here you go:

7

@jinnyzor my example works here with dash_design_kit components. The sample data here generates 30 rows, but is cut off at 21. I would like the other rows to overflow onto another page. The section page only acts as a bookend for the report and I don’t think is the issue.

import dash
from dash import html
import dash_design_kit as ddk
import pandas as pd

app = dash.Dash()


# this functtion is here because it is only used for thtis example, but you wouldn't need it to distribute the table rows in your own apps
def section_page(title, bg_color="var(--accent)"):
    """
    A helper function to generate a full color page with a title
    @param title: The title
    @param bg_color: The color for the page. By default, the accent color from ddk.
    """
    section = ddk.Page(
        [
            html.Div(
                title,
                style={
                    "marginTop": "2in",
                    "fontSize": "40px",
                    "fontWeight": "bold",
                    "text-align": "center",
                },
            ),
        ],
        style={"backgroundColor": bg_color, "color": "#fff"},
    )

    return section

table_page = ddk.Page(
                html.Div(
                    children=
                        [
                        ddk.DataTable(
                            columns=[
                                {"name": ["", "Year"], "id": "year"},
                                {"name": ["City", "Montreal"], "id": "montreal"},
                                {"name": ["City", "Toronto"], "id": "toronto"},
                                {"name": ["City", "Ottawa"], "id": "ottawa"},
                                {"name": ["City", "Vancouver"], "id": "vancouver"},
                                {"name": ["Climate", "Temperature"], "id": "temp"},
                                {"name": ["Climate", "Humidity"], "id": "humidity"},
                            ],
                            data=[
                                {
                                    "year": i,
                                    "montreal": i * 10,
                                    "toronto": i * 100,
                                    "ottawa": i * -1,
                                    "vancouver": i * -10,
                                    "temp": i * -100,
                                    "humidity": i * 5,
                                }
                                for i in range(30)
                            ],
                            style_header={
                                    'text-align': 'center',
                                },
                            merge_duplicate_headers=True,
                        )
                    ]
                )
)


# Create the final layout
app.layout = ddk.App(
        ddk.Report(
            orientation='horizontal',
            children=[
            section_page("Title of the report"), # all the pages that you want to put before the table pages
            table_page,
            section_page("End of the report") # all the pages that you want to put after the table pages
            ]
        )
    )


if __name__ == "__main__":
    app.run_server(debug=True)
8

I’ll have to check later, but I think you should be able to pass ‘height’:’fit-content’ to the style of the tables div, and I think it should grow to be the same size.

Pro tip, if you want this only when printing, you’ll need to do this in a style sheet as you can use a print query to apply this setting.