如何在 NiceGUI 中隐藏表格表头（Table Header）

nicegui 默认表格会显示列标题（`

`），若需完全隐藏表头，可通过 `props` 方法注入 quasar 的 `table-header-class=”hidden”` 属性实现，无需修改列定义或使用 css 注入。

在 NiceGUI 中，ui.table 基于 Quasar Framework 的 组件构建，其样式与行为高度依赖 Quasar 的属性系统。虽然文档未显式列出 table-header-class 这一 prop，但它属于 Quasar 的原生支持属性，可直接通过 .props() 方法传入。

要隐藏表头（即不渲染

及其中所有

元素），只需在创建表格时添加：

ui.table(columns=columns, rows=rows, row_key='name').props('table-header-class=hidden')

⚠️ 注意：table-header-class=”hidden” 并非通过 css 隐藏（如 display: none），而是由 Quasar 内部逻辑识别后跳过表头渲染，因此更轻量、语义更清晰，且不会影响列宽自动计算或响应式行为。

✅ 正确示例（完整可运行）：

from nicegui import ui  columns = [     {'name': 'name', 'label': 'Name', 'field': 'name', 'required': True, 'align': 'left'},     {'name': 'age', 'label': 'Age', 'field': 'age', 'sortable': True}, ] rows = [     {'name': 'Alice', 'age': 18},     {'name': 'Bob', 'age': 21},     {'name': 'Carol'}, ]  # 隐藏表头的关键：使用 props 注入 table-header-class=hidden ui.table(columns=columns, rows=rows, row_key='name').props('table-header-class=hidden')  ui.run()

? 补充说明：

• 该方法不影响列排序（sortable: True）、筛选或行点击等交互功能；
• 若后续需动态切换表头显隐，可结合 table.element.update() 或使用 ui.timer + 状态变量控制（需手动触发重渲染）；
• 不推荐用 .classes(‘hidden’) 或自定义 CSS 覆盖，因可能干扰 Quasar 内部布局逻辑（如固定列、虚拟滚动等）。

总之，props(‘table-header-class=hidden’) 是 NiceGUI 中隐藏表格表头最简洁、兼容性最佳的官方推荐方式。