Flet – DataTable

DataTable 元件就是一個表格，用來展現資料時使用，當你有資料需要用表格來顯示時，它將是你最好的選擇:

以下為一個 DataTable 的範例:

# Flet - DataTable
# 2024-08-23
# https://github.com/lcc728/flet/blob/main/ex_datatable.py

import flet as ft

def main(page: ft.Page):
    page.title = "Data Table"
    page.add(
        ft.DataTable(
            width=600,
            bgcolor=ft.colors.CYAN_50, 
            border=ft.border.all(2,"Blue"),
            border_radius=10,
            horizontal_lines=ft.BorderSide(1, "pink"),
            vertical_lines= ft.BorderSide(1, "pink"),
            data_row_color= ft.colors.BLUE_300,
            heading_row_color = ft.colors.YELLOW_100,
            columns=[
                ft.DataColumn(ft.Text("姓名")),
                ft.DataColumn(ft.Text("電話")),
                ft.DataColumn(ft.Text("地址"), numeric=True),
            ],
            rows=[
                ft.DataRow(
                    cells=[
                        ft.DataCell(ft.Text("張三")),
                        ft.DataCell(ft.Text("0912-...-...")),
                        ft.DataCell(ft.Text("台北市...")),
                    ],
                ),
                ft.DataRow(
                    cells=[
                        ft.DataCell(ft.Text("李四")),
                        ft.DataCell(ft.Text("0987-...-...")),
                        ft.DataCell(ft.Text("新北市...")),
                    ],
                ),
                ft.DataRow(
                    cells=[
                        ft.DataCell(ft.Text("王五")),
                        ft.DataCell(ft.Text("0921-...-...")),
                        ft.DataCell(ft.Container(content= ft.Text("台中市..."), alignment=ft.alignment.center)),
                    ],
                ),
            ],
        ),
    )

ft.app(target=main)

• width : 設定表格的寬度
• bgcolor: 表格的背景色，在此例中你無法看出效果
• border: 表格框線的寬度與顏色
• border_radius: 表格四個角的圓角半徑
• horizontal_lines:表格水平線的寬度與顏色
• vertical_lines: 表格垂直線的寬度與顏色
• data_row_color:表格列的顏色，這個設定會覆蓋 bgcolor 的設定
• heading_row_color: 表格標題欄(第一列) 的顏色，這個設定會覆蓋 bgcolor 的設定
• columns : 表格標題欄的內容，每一個格子以 ft.DataColumn 來顯示資料
• rows: 除了標題欄外的所有表格, 每一列會以 ft.DataRow 來表示，DataRow 含有一個 cell， cell 裡會以 ft.DataCell 來顯示每格的資料

ft.DataCell 並沒有提供 alignment 的屬性，所以最後一格，為了要置中對齊，在 DataCell 中刻意放了一個 container 好實現這個效果

還有許多的屬性我們沒有介紹，請自行參考官網的說明

執行結果:

SourceCode: https://github.com/lcc728/flet/blob/main/ex_datatable.py