in nicegui, you can hide the table header (the `
To remove the header row (e.g., “Name” and “Age” labels) from a ui.table, you don’t need to modify column definitions or subclass components — NiceGUI leverages Quasar’s underlying table API, which supports styling headers via the table-header-class property.
The simplest and most reliable approach is to chain .props('table-header-class=hidden') onto your ui.table() call:
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'},
]
# Hide the header row entirely
ui.table(columns=columns, rows=rows, row_key='name').props('table-header-class=hidden')
ui.run()✅ Why this works:
- table-header-class is a Quasar table prop accepted by NiceGUI’s ui.table.
- hidden is a standard utility class in Quasar (and widely supported in modern browsers) that applies display: none !important, effectively removing the section from rendering.
⚠️ Important notes:
- This hides only the header — columns, sorting behavior, and data rows remain fully functional.
- If you later need conditional visibility (e.g., toggle header on/off), you can bind the prop dynamically using ui.table(...).props(f'table-header-class={"hidden" if hide_header else ""}').
- Avoid setting columns=[] or omitting label — doing so may break row rendering or cause unexpected layout issues. Always define columns as intended; header visibility is purely a presentation concern.
This method is lightweight, framework-native, and requires no custom CSS — making it ideal for clean, maintainable UIs in NiceGUI applications.
