如何使用NiceGUI框架创建带筛选功能的表格？

以下是完整的可运行示例代码，实现了针对表格任意列值的全局筛选功能：

from nicegui import ui, reactive

# 1. 准备示例数据（替换成你的业务数据）
original_data = [
    {'id': 1, 'name': 'Alice', 'department': 'Engineering', 'salary': 80000},
    {'id': 2, 'name': 'Bob', 'department': 'Marketing', 'salary': 75000},
    {'id': 3, 'name': 'Charlie', 'department': 'Engineering', 'salary': 90000},
    {'id': 4, 'name': 'Diana', 'department': 'HR', 'salary': 65000},
]

# 2. 定义响应式变量，用于跟踪筛选状态和结果
filtered_data = reactive(original_data.copy())
filter_keyword = reactive('')

# 3. 筛选逻辑：遍历所有列，检查是否包含关键词（不区分大小写）
def update_filter():
    keyword = filter_keyword.lower().strip()
    if not keyword:
        filtered_data.clear()
        filtered_data.extend(original_data)
        return
    # 逐行检查每一列的值是否匹配关键词
    filtered = [
        row for row in original_data
        if any(str(value).lower().__contains__(keyword) for value in row.values())
    ]
    filtered_data.clear()
    filtered_data.extend(filtered)

# 4. 创建UI元素
with ui.column():
    # 筛选输入框，绑定关键词变化到筛选函数
    ui.input(placeholder='输入任意列的值进行筛选...', on_change=lambda e: setattr(filter_keyword, 'value', e.value))
    # 监听关键词变化，自动触发筛选（0.2秒防抖避免频繁触发）
    ui.timer(0.2, update_filter)

    # 渲染表格，使用筛选后的数据源
    ui.table(
        columns=[
            {'name': 'id', 'label': 'ID', 'field': 'id'},
            {'name': 'name', 'label': '姓名', 'field': 'name'},
            {'name': 'department', 'label': '部门', 'field': 'department'},
            {'name': 'salary', 'label': '薪资', 'field': 'salary'},
        ],
        rows=filtered_data,
        row_key='id',
    )

ui.run()

关键部分解释 #

• 响应式变量：filtered_data 和 filter_keyword 是NiceGUI的响应式变量，值变化时UI会自动更新，这是NiceGUI核心的状态管理方式。
• 全局筛选逻辑：update_filter 函数遍历每一行的所有列值，转小写后做模糊匹配，确保任意列的内容都能被筛选到。
• 防抖处理：0.2秒的定时器防抖，避免用户输入过程中频繁触发筛选，平衡实时性和性能。
• 表格联动：表格的rows参数直接绑定filtered_data，筛选结果更新后表格会自动刷新内容。

扩展优化建议 #

• 若需要精确匹配，可将__contains__替换为==，并去掉大小写转换逻辑。
• 要实现单列独立筛选，可为每个列字段创建单独的响应式关键词，修改筛选逻辑为针对指定列匹配。
• 处理大量数据时，建议搭配分页功能，避免一次性渲染过多行导致UI卡顿。

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