DataTable Allows For Columns & Rows Text to Come Out of Cells When Resizing Horizontally

[AaronCatolico]

Question

I have just begun using the DataTable for the first time and noticed that when resizing the window/page horizontally or on the x axis, the DataTable allows for the columns and rows ft.Text to come outside of the cells during resizing.

If you take the code below, then resize the form/window to make it smaller horizontally, you'll quickly see how the ft.Text comes out of the cells/lines after making the window smaller. Try resizing the window down to about 300 in width to see what I'm referring to.

How do we fix this issue?

Code sample

import flet as ft

def main(page: ft.Page):
    page.padding=60
    page.window_width=900
    page.window_height=350
    page.window_center()
    page.add(
        ft.DataTable(
            border=ft.border.all(1, '#333333'),
            columns=[
                ft.DataColumn(ft.Text("First name")),
                ft.DataColumn(ft.Text("Last name")),
                ft.DataColumn(ft.Text("Age"), numeric=True),
                ft.DataColumn(ft.Text("Address")),
                ft.DataColumn(ft.Text("Email Address")),
            ],
            rows=[
                ft.DataRow(
                    cells=[
                        ft.DataCell(ft.Text("John")),
                        ft.DataCell(ft.Text("Smith")),
                        ft.DataCell(ft.Text("43")),
                        ft.DataCell(ft.Text("7128 Ryedale ct., Sarasota, FL")),
                        ft.DataCell(ft.Text("[email protected]")),
                    ],
                ),
                ft.DataRow(
                    cells=[
                        ft.DataCell(ft.Text("Jack")),
                        ft.DataCell(ft.Text("Brown")),
                        ft.DataCell(ft.Text("19")),
                        ft.DataCell(ft.Text("7128 Ryedale ct., Sarasota, FL")),
                        ft.DataCell(ft.Text("[email protected]")),
                    ],
                ),
                ft.DataRow(
                    cells=[
                        ft.DataCell(ft.Text("Alice")),
                        ft.DataCell(ft.Text("Wong")),
                        ft.DataCell(ft.Text("25")),
                        ft.DataCell(ft.Text("7128 Ryedale ct., Sarasota, FL")),
                        ft.DataCell(ft.Text("[email protected]")),
                    ],
                ),
            ],
        ),
    )

ft.app(target=main)

Error message

No error message, just datatable gui not looking proper.

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[FeodorFitsner]

Put table into a clipping Container:

import flet as ft


def main(page: ft.Page):
    page.padding = 60
    page.window_width = 900
    page.window_height = 350
    page.window_center()
    page.add(
        ft.Container(
            ft.DataTable(
                border=ft.border.all(1, "#333333"),
                columns=[
                    ft.DataColumn(ft.Text("First name")),
                    ft.DataColumn(ft.Text("Last name")),
                    ft.DataColumn(ft.Text("Age"), numeric=True),
                    ft.DataColumn(ft.Text("Address")),
                    ft.DataColumn(ft.Text("Email Address")),
                ],
                rows=[
                    ft.DataRow(
                        cells=[
                            ft.DataCell(ft.Text("John")),
                            ft.DataCell(ft.Text("Smith")),
                            ft.DataCell(ft.Text("43")),
                            ft.DataCell(ft.Text("7128 Ryedale ct., Sarasota, FL")),
                            ft.DataCell(ft.Text("[email protected]")),
                        ],
                    ),
                    ft.DataRow(
                        cells=[
                            ft.DataCell(ft.Text("Jack")),
                            ft.DataCell(ft.Text("Brown")),
                            ft.DataCell(ft.Text("19")),
                            ft.DataCell(ft.Text("7128 Ryedale ct., Sarasota, FL")),
                            ft.DataCell(ft.Text("[email protected]")),
                        ],
                    ),
                    ft.DataRow(
                        cells=[
                            ft.DataCell(ft.Text("Alice")),
                            ft.DataCell(ft.Text("Wong")),
                            ft.DataCell(ft.Text("25")),
                            ft.DataCell(ft.Text("7128 Ryedale ct., Sarasota, FL")),
                            ft.DataCell(ft.Text("[email protected]")),
                        ],
                    ),
                ],
            ),
            clip_behavior=ft.ClipBehavior.HARD_EDGE,
        )
    )


ft.app(target=main)

[holvi-mikael]

I would suggest that this be the default behavior, as I would probably not have discovered clip_behavior without prior exposure.

[AaronCatolico]

Also, say that I have the height of the table to 150, how do we add the horizontal and vertical scroll bars to it?

P.S.
Thanks for the answer above as well.

[AaronCatolico]

I would suggest that this be the default behavior, as I would probably not have discovered clip_behavior without prior exposure.

That or at least leave the ft.Container with the 'clip_behavior' example back in the documents to prevent anyone new from running into the same exact issue when testing the DataTable for the first time.