Expanding "DataTable" inside "Container"

[nastiliano]

Hello everybody,

Finally I have that I wanted.

A peculiar layout (3 screen divisions) with a central scrollable "DataTable", but for me is impossible to expand it now:

import flet as ft

def main(page: ft.Page):

    page.expand = True

    # GENERIC TABLE
    tbl_Gen = ft.DataTable(expand = True ,
                           heading_row_color = ft.colors.SURFACE_VARIANT ,
                           columns = [ft.DataColumn(ft.Text("ID")) ,
                                      ft.DataColumn(ft.Text("Name")) ,
                                      ft.DataColumn(ft.Text("Surname")) ,
                                      ft.DataColumn(ft.Text("Etc..."))]
                           )

    con_Tbl_Gen = ft.Container(alignment = ft.alignment.top_center ,
                               expand = True ,
                               margin = 20 ,
                               content = ft.Row(scroll = "ALWAYS" ,
                                                controls = [ft.Column(scroll = "ALWAYS" ,
                                                                      controls = [ft.Container(tbl_Gen)]
                                                                     )
                                                           ]
                                                )
                              )


    #GENERAL LAYOUT
    cnt = ft.Container(expand = True ,
                       content = ft.Container(ft.Column([ft.Card(expand = True ,
                                                                 content = ft.Container(alignment = ft.alignment.top_center ,
                                                                                        expand = True ,
                                                                                        margin = ft.margin.only(top = 20) ,
                                                                                        content = ft.Row(scroll = "ALWAYS" ,
                                                                                                        controls = [ft.Column(horizontal_alignment = 
ft.CrossAxisAlignment.CENTER ,
                                                                                                                              scroll = "ALWAYS" ,
                                                                                                                              spacing = 30 ,
                                                                                                                              controls =  [ft.Row([ft.Image(src=f"https://picsum.photos/500?random", width=500, height=500, fit=ft.ImageFit.NONE) ,                                                                                                                                                       ft.Image(src=f"https://picsum.photos/500?random", width=500, height=500, fit=ft.ImageFit.NONE)
                                                                                                                                                 ])
                                                                                                                                         ]
                                                                                                                             )
                                                                                                                   ]
                                                                                                        )
                                                                                       )
                                                                ) ,
                                                       
                                                           con_Tbl_Gen ,

                                                           ft.Card(expand = True ,
                                                                   content = ft.Container(alignment = ft.alignment.top_center ,
                                                                                          expand = True ,
                                                                                          margin = ft.margin.only(top = 20) ,
                                                                                          content = ft.Row(scroll = "ALWAYS" ,
                                                                                                           controls = [ft.Column(horizontal_alignment = 
ft.CrossAxisAlignment.CENTER ,
                                                                                                                                 scroll = "ALWAYS" ,
                                                                                                                                 spacing = 30 ,
                                                                                                                                 controls =  [ft.Row([ft.Image(src=f"https://picsum.photos/500?random", width=500, height=500, fit=ft.ImageFit.NONE)])
                                                                                                                                            ]
                                                                                                                                )
                                                                                                                      ]
                                                                                                          )
                                                                                        )
                                                                    )
                                                           ]
                                                          )
                                               )
                       )

    page.add(cnt)

ft.app(target = main)

Somebody can help me please??

Thank you very much.

Best regards.

[burhansvural]

Is there a working example you can show of what you want to do?

[burhansvural]

@nastiliano

When there are many rows in the datatable, hover the mouse over the datatable and turn the middle wheel of the mouse to see the data below.
At the same time, the horizontal scroll bar is already visible on the screen, so you can use it whenever you want.

import flet as ft


def main(page: ft.Page):
    page.expand = True
    # page.scroll=ft.ScrollMode.ALWAYS

    # GENERIC TABLE
    tbl_Gen = ft.DataTable(
        expand=True,
        show_bottom_border=True,
        heading_row_color=ft.colors.RED,
        border=ft.border.all(5, ft.colors.BLACK),
        width=800,
        height=180,
        columns=[
            ft.DataColumn(ft.Text("ID")),
            ft.DataColumn(ft.Text("Name")),
            ft.DataColumn(ft.Text("Surname")),
            ft.DataColumn(ft.Text("Etc..."))
        ]
    )

    con_Tbl_Gen = ft.Container(
        alignment=ft.alignment.top_center,
        expand=True,
        margin=20,
        content=ft.Row(
            scroll=ft.ScrollMode.ALWAYS,
            controls=[
                ft.Column(
                    width=800,
                    height=180,
                    scroll=ft.ScrollMode.ALWAYS,
                    controls=[
                        ft.Container(
                            width=800,
                            height=180,
                            padding=5,
                            bgcolor=ft.colors.GREEN_300,
                            content=tbl_Gen
                        )
                    ]
                )
            ]
        )
    )

    # GENERAL LAYOUT
    cnt = ft.Container(
        expand=True,
        content=ft.Container(
            ft.Column(
                controls=[
                    ft.Card(
                        expand=True,
                        content=ft.Container(
                            alignment=ft.alignment.top_center,
                            expand=True,
                            margin=ft.margin.only(top=20),
                            content=ft.Row(
                                scroll=ft.ScrollMode.ALWAYS,
                                controls=[
                                    ft.Column(
                                        horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                                        scroll=ft.ScrollMode.ALWAYS,
                                        spacing=30,
                                        controls=[
                                            ft.Row(
                                                controls=[
                                                    ft.Image(
                                                        src=f"https://picsum.photos/500?random",
                                                        width=500,
                                                        height=500,
                                                        fit=ft.ImageFit.NONE),
                                                    ft.Image(
                                                        src=f"https://picsum.photos/500?random",
                                                        width=500,
                                                        height=500,
                                                        fit=ft.ImageFit.NONE
                                                    )
                                                ]
                                            )
                                        ]
                                    )
                                ]
                            )
                        )
                    ),
                    con_Tbl_Gen,
                    ft.Card(
                        expand=True,
                        content=ft.Container(
                            alignment=ft.alignment.top_center,
                            expand=True,
                            margin=ft.margin.only(top=20),
                            content=ft.Row(
                                scroll=ft.ScrollMode.ALWAYS,
                                controls=[
                                    ft.Column(
                                        horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                                        scroll=ft.ScrollMode.ALWAYS,
                                        spacing=30,
                                        controls=[
                                            ft.Row(
                                                controls=[
                                                    ft.Image(
                                                        src=f"https://picsum.photos/500?random",
                                                        width=500,
                                                        height=500,
                                                        fit=ft.ImageFit.NONE
                                                    )
                                                ]
                                            )
                                        ]
                                    )
                                ]
                            )
                        )
                    )
                ]
            )
        )
    )
    page.add(cnt)


ft.app(target=main)

[nastiliano]

Hello @burhansvural !

I'd want to expand my central table.

Exactly like this, but in my layout scheme:

import flet as ft
import string
async def main(page: ft.Page):
    alphabets_upper = string.ascii_uppercase
    alphabets_lower = string.ascii_lowercase
    date_table = ft.DataTable(
        columns=[
            ft.DataColumn(ft.Text("Sl. No."), numeric= True),
            ft.DataColumn(ft.Text("Alphabet_Upper")),
            ft.DataColumn(ft.Text("Alphabet_Lower")),
            ft.DataColumn(ft.Text("Simply a column"), numeric= True),
            ft.DataColumn(ft.Text("Simply a column"), numeric= True),
            ft.DataColumn(ft.Text("Simply a column"), numeric= True),
            ft.DataColumn(ft.Text("Simply a column"), numeric= True),
            ft.DataColumn(ft.Text("Simply a column"), numeric= True),
            ft.DataColumn(ft.Text("Simply a column"), numeric= True),
            ft.DataColumn(ft.Text("Simply a column"), numeric= True),
            ft.DataColumn(ft.Text("Simply a column"), numeric= True),
            ft.DataColumn(ft.Text("Simply a column"), numeric= True),
            ft.DataColumn(ft.Text("Simply a column"), numeric= True),
            ft.DataColumn(ft.Text("Simply a column"), numeric= True)
        ],
        rows=[ft.DataRow(cells= [ft.DataCell(ft.Text(str(i+1))), 
                                 ft.DataCell(ft.Text(alphabets_upper[i])), 
                                 ft.DataCell(ft.Text(alphabets_lower[i])),
                                 ft.DataCell(ft.Text(str(i*i))),
                                 ft.DataCell(ft.Text(str(i*i))),
                                 ft.DataCell(ft.Text(str(i*i))),
                                 ft.DataCell(ft.Text(str(i*i))),
                                 ft.DataCell(ft.Text(str(i*i))),
                                 ft.DataCell(ft.Text(str(i*i))),
                                 ft.DataCell(ft.Text(str(i*i))),
                                 ft.DataCell(ft.Text(str(i*i))),
                                 ft.DataCell(ft.Text(str(i*i))),
                                 ft.DataCell(ft.Text(str(i*i))),
                                 ft.DataCell(ft.Text(str(i*i)))]) for i in range(len(alphabets_upper))]
)
    column = ft.Column(
        controls=[
            ft.Container(content= ft.Column([ft.Row([date_table], scroll= ft.ScrollMode.ALWAYS)], scroll= ft.ScrollMode.ALWAYS), 
expand= 2), 
            ft.Container(ft.Text('Anything'), expand= 1),
            ft.Container(ft.Text('Anything'), expand= 0)
        ]
    )
    await page.add_async(ft.SafeArea(column, expand= True))
ft.app(target=main)

Expanded and scrollable in the middle of the page.
Thanks !!!

[burhansvural]

Please mark it as the answer if the problem is solved thanks to the code I published. Your joy makes me happy.

[nastiliano]

Hello!

Mmm....nope

Your code does the same as mine.

The table appears unexpanded.

Thanks

[burhansvural]

I am aware of this, I just prepared it quickly in this way so that you can have a place in your mind for the subject you want. If you cannot continue, I will write the rest as code later.

[nastiliano]

Hello,

Ok, thanks, but your code doesn't solve me anything (I say this in a good sense) I mean, I tried a lot of combinations but I can't have an expanded table inside a "complex" layout.

Thanks again.