How to Hide Table Headers in NiceGUI

in nicegui, you can hide the table header (the `

` row) by applying a custom quasar `table-header-class` prop—specifically using the built-in `hidden` css class via `.props('table-header-class=hidden')`.

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.