NiceGUI使用指南

目录

• 连接dataframe
  • 1. 使用 ui.table 展示 DataFrame 数据
  • 2. 使用 nicegui-tabulator 展示 DataFrame 数据
    • 3. 使用 aggrid 展示 DataFrame 数据

官方指南：https://nicegui.io/documentation #很全，很好，有范例（这一点比Streamlit强）

连接dataframe

在 NiceGUI 中连接和展示 pandas.DataFrame 的数据，可以通过多种方式实现，例如使用 ui.table 或第三方组件如 nicegui-tabulator 和 aggrid。
以下是几种常见的实现方式和示例代码：

1. 使用 ui.table 展示 DataFrame 数据

ui.table 是 NiceGUI 提供的一个简单表格组件，可以直接绑定 DataFrame 数据。

import pandas as pd
from nicegui import ui

# 创建一个示例 DataFrame
df = pd.DataFrame({
    'Name': ['Alice', 'Bob', 'Charlie'],
    'Age': [25, 30, 35],
    'City': ['New York', 'Los Angeles', 'Chicago']
})

# 将 DataFrame 转换为字典格式，方便 ui.table 使用
table_data = df.to_dict(orient='records')

# 创建表格
ui.table(columns=[{'name': col, 'label': col} for col in df.columns], rows=table_data)

ui.run()

2. 使用 nicegui-tabulator 展示 DataFrame 数据

nicegui-tabulator 是一个功能更强大的表格组件，支持更多高级功能，如排序、筛选和分页。

from nicegui_tabulator import tabulator
from nicegui import ui

# 创建一个示例 DataFrame
df = pd.DataFrame({
    'Name': ['Alice', 'Bob', 'Charlie'],
    'Age': [25, 30, 35],
    'City': ['New York', 'Los Angeles', 'Chicago']
})

# 将 DataFrame 转换为字典格式
table_data = df.to_dict(orient='records')

# 配置表格
table_config = {
    "height": 205,
    "layout": "fitDataFill",
    "pagination": "local",
    "paginationSize": 10,
    "movableColumns": True,
    "resizableRows": True,
    "data": table_data,
    "columns": [
        {"title": "Name", "field": "Name", "width": 150, "headerFilter": "input"},
        {"title": "Age", "field": "Age", "hozAlign": "left", "formatter": "progress"},
        {"title": "City", "field": "City"},
    ],
}

# 创建表格
tabulator(table_config).on_event("rowClick", lambda e: ui.notify(e))

ui.run()

3. 使用 aggrid 展示 DataFrame 数据

aggrid 是另一个强大的表格组件，支持丰富的功能，如行选择、过滤和样式化。

import pandas as pd
from nicegui import ui

# 创建一个示例 DataFrame
df = pd.DataFrame({
    'Name': ['Alice', 'Bob', 'Charlie'],
    'Age': [25, 30, 35],
    'City': ['New York', 'Los Angeles', 'Chicago']
})

# 将 DataFrame 转换为字典格式
table_data = df.to_dict(orient='records')

# 配置 aggrid
columns_agrid = [
    {"headerName": "Name", "field": "Name", "maxWidth": 120},
    {"headerName": "Age", "field": "Age", "filter": "agNumberColumnFilter", "floatingFilter": True},
    {"headerName": "City", "field": "City"},
]

# 创建 aggrid
grid = ui.aggrid({
    "defaultColDef": {"flex": 1},
    "columnDefs": columns_agrid,
    "rowData": table_data,
    "rowSelection": "multiple",
    "pagination": True,
    "paginationPageSize": 10,
    "suppressRowClickSelection": True,
    "paginationPageSizeSelector": [3, 6, 8, 10],
}).classes("h-full")

# 添加事件监听
grid.on("cellClicked", lambda event: ui.notify(f'Cell value: {event.args["value"]}'))

ui.run()

总结
如果需要简单展示数据，可以使用 ui.table。
如果需要更强大的功能（如排序、筛选、分页），可以使用 nicegui-tabulator。
如果需要更高级的表格功能（如行选择、过滤、样式化），可以使用 aggrid。
根据你的需求选择合适的组件即可。