如何用Pandas DataFrame填充Flet DataTable并实现行编辑删除

核心思路 #

1. 填充数据：从Pandas DataFrame提取表头和行数据，转换为Flet DataTable支持的DataColumn和DataRow结构，同时复制数据到独立列表以解除与原DataFrame的关联。
2. 编辑与删除：基于独立的本地数据列表操作，通过切换单元格内的文本/输入框实现编辑，点击删除按钮直接修改本地列表后刷新表格。

完整实现代码 #

import flet as ft
import pandas as pd

# 示例DataFrame
df = pd.DataFrame({
    "Column A": ["Cell 1", "Cell 3"],
    "Column B": ["Cell 2", "Cell 4"]
})

def main(page: ft.Page):
    page.title = "可编辑的Flet DataTable"
    
    # 复制DataFrame数据到本地列表，彻底解除关联
    table_data = df.values.tolist()

    # 构建表格表头
    columns = [ft.DataColumn(ft.Text(col)) for col in df.columns]
    # 添加操作列
    columns.append(ft.DataColumn(ft.Text("操作")))

    # 定义表格更新函数
    def refresh_table():
        rows = []
        for row_idx, row_values in enumerate(table_data):
            # 构建每行的单元格
            cells = []
            for col_idx, cell_value in enumerate(row_values):
                # 文本显示组件
                text_display = ft.Text(cell_value)
                # 编辑输入框组件
                edit_input = ft.TextField(
                    value=cell_value,
                    visible=False,
                    on_blur=lambda e, r=row_idx, c=col_idx: save_edit(e, r, c)
                )

                # 切换编辑状态的函数
                def toggle_edit(e):
                    text_display.visible = False
                    edit_input.visible = True
                    edit_input.focus()
                    page.update()

                # 封装成可点击编辑的单元格
                data_cell = ft.DataCell(
                    content=ft.Column([text_display, edit_input]),
                    on_tap=toggle_edit
                )
                cells.append(data_cell)
            
            # 添加删除按钮单元格
            delete_btn = ft.IconButton(
                icon=ft.icons.DELETE_OUTLINE,
                on_click=lambda e, r=row_idx: delete_selected_row(r)
            )
            cells.append(ft.DataCell(delete_btn))
            
            rows.append(ft.DataRow(cells=cells))
        
        # 更新表格行数据
        data_table.rows = rows
        page.update()

    # 保存编辑内容到本地列表
    def save_edit(e, row_idx, col_idx):
        new_value = e.control.value
        table_data[row_idx][col_idx] = new_value
        # 切换回文本显示
        e.control.visible = False
        e.control.parent.controls[0].visible = True
        e.control.parent.controls[0].value = new_value
        page.update()

    # 删除指定行
    def delete_selected_row(row_idx):
        del table_data[row_idx]
        refresh_table()

    # 初始化DataTable组件
    data_table = ft.DataTable(columns=columns, rows=[])
    # 首次加载表格数据
    refresh_table()

    page.add(data_table)

if __name__ == "__main__":
    ft.app(target=main)

关键细节说明 #

• 解除关联：通过table_data = df.values.tolist()将DataFrame的数据复制到独立列表，后续所有编辑/删除操作仅修改这个本地列表，不会影响原DataFrame。
• 编辑功能：每个单元格包含Text（显示）和TextField（编辑）两个组件，点击单元格切换为输入框，失去焦点后保存修改并切回文本显示。
• 删除功能：每行末尾添加删除按钮，点击后直接从本地列表移除对应行，再调用refresh_table()重新渲染表格。

内容的提问来源于stack exchange，提问作者Oxtux