[Enhancement] - Add limit to DataTable column length

[nelson-python]

Question

Note: I am using Flet version: 0.84.0.

We notice that a DataTable:

https://flet.dev/docs/controls/datatable/

...has a row maximum and minimum height:

data_row_max_height - The maximum height of each row (excluding the row that contains column headings).
data_row_min_height - The minimum height of each row (excluding the row that contains column headings).

...but has no column maximum and minimum length.

The lack of a column maximum is especially problematic, as a column will expand indefinitely to accommodate the contents of a DataCell (see code example below).

Ideally, we'd like at least some sort of maximum length.

If the contents exceed the maximum, the contents should ideally be truncated with something like ellipses "...":

If the usage of ellipses isn't possible, at the very least, the text should be word-wrapped (up to the data_row_max_height).

I understand that a DataCell can contain a container, which will perform word-wrapping if text exceeds that container's limits.

However, that eventually gets cut off by the DataRow:

In other words, there is no clean solution (that I can find) that deals with large amounts of DataTable data.

This seems like an oversight on the DataTable design and should be rectified before Flet 1.0.

Thank you,
Nelson

Code sample

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.DataTable(
            columns=[
                ft.DataColumn(label=ft.Text("Name")),
                ft.DataColumn(label=ft.Text("Role")),
            ],
            rows=[
                ft.DataRow(
                    cells=[
                        ft.DataCell(ft.Text("Alice")),
                        ft.DataCell(ft.Text("This is a long string which may create problems")),
                    ]
                ),
                ft.DataRow(
                    cells=[
                        ft.DataCell(ft.Text("This is yet another long string which may create problems")),
                        ft.DataCell(ft.Text("Designer")),
                    ]
                ),
            ],
        ),
    )

ft.run(main)

Error message

No response

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

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

[ndonkoHenri]

Hi Nelson — this is a real gap in DataTable, but it's inherited from Flutter: Flutter's built-in DataColumn has no width property, so ft.DataTable has nothing to plumb through. Columns auto-size to content, and that's it.

For this exact use case, use flet-datatable2. Its DataColumn2 control adds:

• fixed_width — absolute pixel width
• size — relative size (S/M/L)

Combined with Text(overflow=ELLIPSIS, max_lines=1), you get the ellipsis behavior from your screenshot:

import flet as ft
import flet_datatable2 as ftd


def main(page: ft.Page):
    page.add(
        ftd.DataTable2(
            expand=True,
            columns=[
                ftd.DataColumn2(
                    label="Name",
                    fixed_width=120,
                ),
                ftd.DataColumn2(
                    label="Role",
                    fixed_width=160,
                ),
            ],
            rows=[
                ft.DataRow(
                    cells=[
                        ft.DataCell(ft.Text("Alice")),
                        ft.DataCell(
                            ft.Text(
                                "This is a long string which may create problems",
                                overflow=ft.TextOverflow.ELLIPSIS,
                                max_lines=1,
                            )
                        ),
                    ]
                ),
                ft.DataRow(
                    cells=[
                        ft.DataCell(
                            ft.Text(
                                "This is yet another long string which may create problems",
                                overflow=ft.TextOverflow.ELLIPSIS,
                                max_lines=1,
                            )
                        ),
                        ft.DataCell(
                            ft.Text(
                                "Head of Engineering at Google and Microsoft, with over 20 years of experience in software development and leadership.",
                                overflow=ft.TextOverflow.ELLIPSIS,
                                max_lines=2,
                            )
                        ),
                    ]
                ),
            ],
        ),
    )


ft.run(main)

Let me know if it satisfies your needs.

[nelson-python]

Hello @ndonkoHenri,

Your solution works, thank you.

That being said, why is DataTable2 not simply DataTable?

In other words, why not default to DataTable2 (also ensuring it is part of Flet), given that it is superior to DataTable?

The beautiful thing about Flet is that it abstracts a lot of the implementation details associated with Flutter.

Many other people will have similar questions in the future (regarding the lack of features of DataTable); in my opinion, it would make sense to simply use DataTable2's feature set.

Regards,
Nelson