【Flet】DataTableでスクロールしたい

概要

Fletを試していてちょっと躓いたところがあったので備忘録として記載します。
データ表を表現しようと、FletのコントロールであるDataTableを使おうとしたのですが長い表になるとスクロールできませんでした。
スクロールできるようにする方法を簡単な例で説明いたします。

結論

スクロール可能なコントロールの中に配置しないといけないそうです。
Fletではスクロール可能なコントロールが決まっているようです。

簡単な例で説明

Pythonバージョン：3.10.10
Fletバージョン：0.22.1

DataTableをそのまま配置するとスクロールできません

スクロールバーが表示されず、全データ見ることができないです。

コード例

import flet as ft

# DataTableのcolumns向けにリストを整形する関数
def get_data_table_columns(header):
    return [ft.DataColumn(ft.Text(t)) for t in header]

# DataTableのrows向けに2次元リストを整形する関数
def get_data_table_rows(data):
    converted_rows = []
    for row in data:
        cells = [ft.DataCell(ft.Text(str(t))) for t in row]
        converted_rows.append(ft.DataRow(cells=cells))
    return converted_rows

def main(page: ft.Page):
    page.window_width = 600
    page.window_height = 600

    # 表示したいヘッダとデータを用意
    header = ["ヘッダA", "ヘッダB", "ヘッダC"]
    data = [[f"データA{str(i+1)}", f"データB{str(i+1)}", f"データA{str(i+1)}"] for i in range(100)]

    data_table = ft.DataTable(
        columns=get_data_table_columns(header),
        rows=get_data_table_rows(data)
    )

    page.add(data_table)


ft.app(target=main)

Columnコントロールに入れてスクロールできるようになります

ColumnコントロールにDataTableを配置し、スクロールとexpandを設定するとスクロールができるようになります。

コード例

import flet as ft

# DataTableのcolumns向けにリストを整形する関数
def get_data_table_columns(header):
    return [ft.DataColumn(ft.Text(t)) for t in header]

# DataTableのrows向けに2次元リストを整形する関数
def get_data_table_rows(data):
    converted_rows = []
    for row in data:
        cells = [ft.DataCell(ft.Text(str(t))) for t in row]
        converted_rows.append(ft.DataRow(cells=cells))
    return converted_rows

def main(page: ft.Page):
    page.window_width = 600
    page.window_height = 600

    # 表示したいヘッダとデータを用意
    header = ["ヘッダA", "ヘッダB", "ヘッダC"]
    data = [[f"データA{str(i+1)}", f"データB{str(i+1)}", f"データA{str(i+1)}"] for i in range(100)]

    data_table = ft.DataTable(
        columns=get_data_table_columns(header),
        rows=get_data_table_rows(data),
    )

    # ColumnコントロールにDataTableを配置、
    # スクロール設定と拡大設定をしておきます
    col = ft.Column(
        controls=[data_table],
        scroll=ft.ScrollMode.ALWAYS,
        expand=True
    )
    
    page.add(col)


ft.app(target=main)

最後に

同じところで困っている人の手助けになればと思います。