[Question] Horizontal scrolling on list view

[vindevoy]

Question

I have created a datatable, put that into a list view and added data with several rows and columns so that I have an overflow both on the columns as the rows.

Using the list view control, I have vertical scroll bars, but no horizontal scroll bars. I need both as some of my columns remain hidden.

Code sample

import flet as ft
import pandas as pd


def test_list_view_scroll_bars():
    def main(page: ft.Page):
        dataframe = pd.read_json("https://raw.githubusercontent.com/vega/vega-datasets/next/data/movies.json")
        column_names = dataframe.columns.tolist()
        rows = dataframe.to_dict("records")
        rows = rows[:50]  # That's enough

        datatable = ft.DataTable(columns=[ft.DataColumn(ft.Text(c)) for c in column_names],
                                 rows=[ft.DataRow(cells=[ft.DataCell(ft.Text(row[col]))
                                                         for col in column_names]) for row in rows],
                                 expand=True)
        list_view = ft.ListView(controls=[datatable], spacing=0, padding=0, auto_scroll=False, expand=True)
        table_panel = ft.Container(content=list_view, alignment=ft.alignment.top_center, expand=True)  
        # The container is here because in my real application, I also have sidebars, top and bottom bar 

        page.add(table_panel)

    ft.app(target=main, view=ft.AppView.FLET_APP)

Error message

No error message, but no scrollbars.  If you have a very big screen (wide-screen) you can open the window horizontally and see that columns are hidden.

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

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

[ndonkoHenri]

You could wrap your table in a scrolling Row.

[vindevoy]

I tried this, but did not manage to do so. I don't get the scrollbars. Actually, I get nothing.

I updated the code as follows and tried with all the ScrollModes.

datatable = ft.DataTable(columns=[ft.DataColumn(ft.Text(c)) for c in column_names],
                         rows=[ft.DataRow(cells=[ft.DataCell(ft.Text(row[col]))
                                                 for col in column_names]) for row in rows],
                         expand=True)
datarow = ft.Row(controls=[datatable], scroll=ft.ScrollMode.ALWAYS)
# list_view = ft.ListView(controls=[datarow], spacing=0, padding=0, auto_scroll=False, expand=True)
table_panel = ft.Container(content=datarow, alignment=ft.alignment.top_center, expand=True)

[ndonkoHenri]

This should have been caused by the expands. Try expanding the Row too.

[vindevoy]

Datatable (expand False or True) in Row (expand True) => horizontal bars, no vertical bars
Datatable in Row in Column (expand = True) => Blank screen
Datatable in ListView in Row => Blank screen

Datatable (must be expand = False) in Row (must be expand = False) in Column (must be expand = True) ==> THIS WORKS, but the horizontal scroll bar is only visible when I scroll completely down, otherwise, it's not visible.

Then, adding the Container again, I must put this one also on expand True.

The only inconveniance remains: no scrollbar to scroll horizontally when I am on my top record. I must scroll down completely before I can scroll horizontally.

def main(page: ft.Page):
    dataframe = pd.read_json("https://raw.githubusercontent.com/vega/vega-datasets/next/data/movies.json")
    column_names = dataframe.columns.tolist()
    rows = dataframe.to_dict("records")
    rows = rows[:50]  # That's enough

    datatable = ft.DataTable(columns=[ft.DataColumn(ft.Text(c)) for c in column_names],
                             rows=[ft.DataRow(cells=[ft.DataCell(ft.Text(row[col]))
                                                     for col in column_names]) for row in rows],
                             expand=False)
    datarow = ft.Row(controls=[datatable], scroll=ft.ScrollMode.ALWAYS, expand=False)
    datacol = ft.Column(controls=[datarow], scroll=ft.ScrollMode.ALWAYS, expand=True)
    table_panel = ft.Container(content=datacol, alignment=ft.alignment.top_center, expand=True)

    page.add(table_panel)

ft.app(target=main, view=ft.AppView.FLET_APP)

With a listview it also works, if I put the row in the listview:

def main(page: ft.Page):
    dataframe = pd.read_json("https://raw.githubusercontent.com/vega/vega-datasets/next/data/movies.json")
    column_names = dataframe.columns.tolist()
    rows = dataframe.to_dict("records")
    rows = rows[:50]  # That's enough

    datatable = ft.DataTable(columns=[ft.DataColumn(ft.Text(c)) for c in column_names],
                             rows=[ft.DataRow(cells=[ft.DataCell(ft.Text(row[col]))
                                                     for col in column_names]) for row in rows],
                             expand=False)
    datarow = ft.Row(controls=[datatable], scroll=ft.ScrollMode.ALWAYS, expand=False)
    listview = ft.ListView(controls=[datarow], auto_scroll=False, expand=True)
    table_panel = ft.Container(content=listview, alignment=ft.alignment.top_center, expand=True)

    page.add(table_panel)

ft.app(target=main, view=ft.AppView.FLET_APP)