Components / Table

Table

Semantic native table primitives for readable, responsive data.

A list of recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
Total			$2,500.00

example.component.html

html

<div aevkoTableContainer label="Recent invoices">
  <table aevkoTable>
    <caption aevkoTableCaption>
      Recent invoices
    </caption>
    <thead aevkoTableHeader>
      <tr aevkoTableRow>
        <th aevkoTableHead scope="col">
          Invoice
        </th>
        <th aevkoTableHead scope="col">
          Amount
        </th>
      </tr>
    </thead>
    <tbody aevkoTableBody>
      <tr aevkoTableRow>
        <td aevkoTableCell>
          INV001
        </td>
        <td aevkoTableCell>
          $250.00
        </td>
      </tr>
    </tbody>
  </table>
</div>

Installation

npx aevko-ui@latest add table --yes

Source ownership

Customization

Style native table primitives directly, add alignment classes per column and compose any data source or Angular control flow without a table engine.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

API reference

Property or slot	Type	Default	Description
`aevkoTableContainer`	`component on div`	`required for overflow`	Keyboard-focusable responsive container with an accessible label.
`aevkoTable`	`component on table`	`required`	Native table root with collapsed borders and full width.
`aevkoTableHeader / Body / Footer`	`components on native groups`	`as needed`	Styled native row groups without changing semantics.
`aevkoTableRow`	`component on tr`	`required per row`	Native row with divider and hover feedback.
`aevkoTableHead`	`component on th`	`required per header`	Native column or row header; set scope for its relationship.
`aevkoTableCell`	`component on td`	`required per cell`	Native data cell with consistent spacing and alignment.
`aevkoTableCaption`	`component on caption`	`optional`	Visible description associated with the native table.

Accessibility contract

Accessibility

Included behavior

Native table elements preserve row and column relationships.
The overflow container is keyboard focusable and carries an accessible label.

Your responsibility

Write a useful caption, set scope on header cells and avoid using a table for visual layout.

Back to all components