Introducing PrimeReact v11-alpha 🎉Discover Now

TreeTable Theming

TreeTable shares the same theme surface as DataTable — tokens, CSS classes, and pass-through targets are identical.

TreeTable is DataTable with treeMode enabled, so it inherits every theme token, CSS class, and pass-through target from the DataTable theme.

See DataTable Theming for the full reference.

Tree-specific parts#

These are the parts you'll most likely customise when theming TreeTable:

  • DataTable.RowToggle — the chevron button on the first column (data-part="row-toggle").
  • DataTable.RowToggleIndicator — the icon slot, matched by match="expanded" and match="collapsed".
  • Row-level _treeLevel drives the default left padding via CSS. Override per-level spacing by styling on the aria-level="<n+1>" attribute rendered on <tr>.