How to receive DataTable events embedded in Tab Widget

[bfrench4255]

I'm trying to embed DataTables within Tabs Widget and I can't seem to capture events on the DataTables. I have set show_checkbox_column=True, and have implemented a function to capture on_select_changed on the DataRows. However, the on_select_changed never seems to fire when the DataTable is embedded in a Tab.

The only event I see from the Tabs Widget is on_change, and it only fires when the selected index on the Tab changes. How do I capture DataTable events within a Tab?

Thanks!

[FeodorFitsner]

Could you share a code sample reproducing the issue please?

[bfrench4255]

The DataTable is based on the Styled DataTable example in the Flet DataTable documentation. Just embedded into a Tab.

import flet as ft

def main(page: ft.Page):
    def row_select(e):
        print('row_select on DataRow called...')

    data_table = ft.DataTable(
        width=700,
        bgcolor="yellow",
        border=ft.border.all(2, "red"),
        border_radius=10,
        vertical_lines=ft.border.BorderSide(3, "blue"),
        horizontal_lines=ft.border.BorderSide(1, "green"),
        sort_column_index=0,
        sort_ascending=True,
        heading_row_color=ft.colors.BLACK12,
        heading_row_height=100,
        show_checkbox_column=True,
        divider_thickness=0,
        column_spacing=200,
        columns=[
            ft.DataColumn(
                ft.Text("Column 1")
            ),
            ft.DataColumn(
                ft.Text("Column 2"),
                tooltip="This is a second column",
                numeric=True
            ),
        ],
        rows=[
            ft.DataRow(
                [ft.DataCell(ft.Text("A")), ft.DataCell(ft.Text("1"))],
                selected=True,
                on_select_changed=row_select,
            ),
            ft.DataRow([ft.DataCell(ft.Text("B")), ft.DataCell(ft.Text("2"))]),
        ],
    )

    tabs = ft.Tabs (
        tabs = [
            ft.Tab (
                text="Tab",
                content=data_table,
            )
        ],
    )

    page.add (
        tabs
    )

    page.update()

ft.app(target=main)

[FeodorFitsner]

The solution is to add expand=True to Tabs control:

import flet as ft


def main(page: ft.Page):
    def row_select(e):
        print("row_select on DataRow called...")

    data_table = ft.DataTable(
        width=700,
        bgcolor="yellow",
        border=ft.border.all(2, "red"),
        border_radius=10,
        vertical_lines=ft.border.BorderSide(3, "blue"),
        horizontal_lines=ft.border.BorderSide(1, "green"),
        sort_column_index=0,
        sort_ascending=True,
        heading_row_color=ft.colors.BLACK12,
        heading_row_height=100,
        show_checkbox_column=True,
        divider_thickness=0,
        column_spacing=200,
        columns=[
            ft.DataColumn(ft.Text("Column 1")),
            ft.DataColumn(
                ft.Text("Column 2"), tooltip="This is a second column", numeric=True
            ),
        ],
        rows=[
            ft.DataRow(
                [ft.DataCell(ft.Text("A")), ft.DataCell(ft.Text("1"))],
                selected=True,
                on_select_changed=row_select,
            ),
            ft.DataRow([ft.DataCell(ft.Text("B")), ft.DataCell(ft.Text("2"))]),
        ],
    )

    tabs = ft.Tabs(
        tabs=[
            ft.Tab(
                text="Tab",
                content=ft.Column([data_table]),
            )
        ],
        expand=True,
    )

    page.add(tabs)


ft.app(target=main)