how to make DataTable scrollable both vertically and horizontally in flet

Question

I'm using the flet library to make a desktop app, I could make it scrollable vertically by using

lv = ft.ListView(expand=1, spacing=10, padding=20, auto_scroll=True, horizontal=True)
lv.controls.append(dt)

but it doesn't scroll horizontally at all. Moreover, when horizontal is set to true, it doesn't scroll vertically, so I have to remove it to at least scroll vertically

That's a sample: Picture of software:

Code:

import flet as ft
def main(page: ft.Page):
    dt = ft.DataTable(
            columns=[
                ft.DataColumn(ft.Text("First name")),
                ft.DataColumn(ft.Text("Last name")),
                ft.DataColumn(ft.Text("Age"), numeric=True),
                ft.DataColumn(ft.Text("First name")),
                ....
            ],
            rows=[
                ft.DataRow(
                    cells=[
                        ft.DataCell(ft.Text("John")),
                        ft.DataCell(ft.Text("Smith")),
                        ft.DataCell(ft.Text("43")),
                        ft.DataCell(ft.Text("John")),
                        ...
                    ],
                ),
                ft.DataRow(
                    cells=[
                        ft.DataCell(ft.Text("John")),
                        ft.DataCell(ft.Text("Smith")),
                        ft.DataCell(ft.Text("43")),
                        ft.DataCell(ft.Text("John")),
                        ft.DataCell(ft.Text("Smith")),
                        ft.DataCell(ft.Text("43")),
                        ft.DataCell(ft.Text("John")),
                        ft.DataCell(ft.Text("Smith")),
                        ...
                    ],
                ),
            ],
        )
    
    lv = ft.ListView(expand=1, spacing=10, padding=20, auto_scroll=True, horizontal=True)
    lv.controls.append(dt)
    page.add(
        lv
    )

ft.app(target=main)

Answer 1

This sample code shows how to enable vertical and horizontal scrolling of datatable in flet python.

ft.Column([ft.Row([date_table], scroll= ft.ScrollMode.ALWAYS)], scroll= ft.ScrollMode.ALWAYS)

This line in below sample code makes that happen.

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)