tr

The tr element defines a row of cells in a table. Vanilla Breeze adds data attributes for row states like selection, highlighting, and expandable detail rows.

Description

The <tr> (table row) element is a container for a horizontal group of cells. Each row must contain at least one <th> or <td> element, and all rows in a table should have the same number of cells (accounting for colspan).

Vanilla Breeze applies hover effects to rows within <tbody> and provides data attributes for common row states: selection, highlighting, disabling, and expandable detail rows.

When to Use

  • Every table row: All rows of data, headers, and footers require tr elements
  • Grouping cells: Each horizontal set of related data goes in one row
  • Header rows: In <thead>, rows typically contain <th> elements
  • Data rows: In <tbody>, rows typically contain <td> elements (with optional <th scope="row">)

Examples

Basic Table Rows

Rows contain cells that align with the table's column structure. Hover over rows to see the built-in highlight effect.

Row States

Vanilla Breeze provides data attributes for common row states. These work with both static tables and the <data-table> component.

Row Hover Effect

Rows in <tbody> receive a hover effect automatically to help users track data across columns. This is applied by default in Vanilla Breeze and requires no additional attributes.

Selectable Rows

Add data-selectable to indicate a row can be selected. Combine with data-selected to mark the current selection. The <data-table> component manages selection state automatically.

Expandable Rows

Use data-expandable on the trigger row and data-state-expanded or data-state-hidden on the detail row. Detail rows are typically full-width with colspan.

VB Data Attributes

Attribute Purpose Applied To
data-selected Marks a row as selected (primary subtle background + outline) <tr> in <tbody>
data-disabled Reduces opacity and disables pointer events <tr> in <tbody>
data-highlight Applies a warning-subtle background highlight <tr> in <tbody>
data-selectable Indicates the row is interactive and can be selected <tr> in <tbody>
data-expandable Marks a row as having an expandable detail row <tr> in <tbody>
data-state-hidden Hides a detail row (display: none) <tr> detail row
data-state-expanded Shows a detail row with a sunken background <tr> detail row

CSS Reference

Valid Parent Elements

The <tr> element must be a child of one of these elements:

Parent Purpose Typical Content
<thead> Header rows <th scope="col"> cells
<tbody> Data rows <td> and optional <th scope="row">
<tfoot> Footer/summary rows <td> cells with totals/summaries

Accessibility

  • Consistent cell count: All rows should have the same number of cells (accounting for colspan)
  • Row headers: Use <th scope="row"> when the first cell identifies the row
  • Screen reader navigation: Users can navigate row by row through table data
  • Implicit role: <tr> has an implicit ARIA role of row
  • Disabled rows: When using data-disabled, also add aria-disabled="true" for assistive technology
  • Selected rows: When using data-selected, also add aria-selected="true" for assistive technology

Related

  • <th> - Header cells within rows
  • <td> - Data cells within rows
  • <thead> - Header row group
  • <tbody> - Body row group
  • <tfoot> - Footer row group
  • <table> - The table container
  • <data-table> - Interactive table component with built-in sorting, filtering, and row selection
↑