Table

A semantic, styled data table.

Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00

import {
  BuiTableContainer, BuiTable, BuiTableHeader, BuiTableBody, BuiTableRow, BuiTableHead, BuiTableCell,
} from 'ng-blatui';

<div buiTableContainer variant="card">
  <table buiTable>
    <thead buiTableHeader>
      <tr buiTableRow><th buiTableHead>Name</th><th buiTableHead>Role</th></tr>
    </thead>
    <tbody buiTableBody>
      <tr buiTableRow><td buiTableCell>Ada</td><td buiTableCell>Admin</td></tr>
    </tbody>
  </table>
</div>

Striped

Name	Email	Role
Olivia Martin	[email protected]	Owner
Jackson Lee	[email protected]	Member
Isabella Nguyen	[email protected]	Member

<table buiTable class="[&_tbody_tr:nth-child(odd)]:bg-muted/50">
  …rows…
</table>

Selection

	Customer	Status	Amount
	Sofia Carter	Paid	$250.00
	Jackson Doe	Pending	$150.00

<tr buiTableRow data-state="selected" class="data-[state=selected]:bg-muted">
  <td buiTableCell><button buiCheckbox [checked]="true" aria-label="Select"></button></td>
  <td buiTableCell>Sofia Carter</td>
</tr>

Actions

Invoice	Status	Amount	Actions
INV001	Paid	$250.00

<td buiTableCell>
  <button buiButton variant="ghost" size="icon" aria-label="Row actions"><svg><!-- ⋯ --></svg></button>
</td>

Plain

Name	Role	Status
Ada Lovelace	Admin	Active
Grace Hopper	Editor	Active
Alan Turing	Viewer	Invited

<!-- omit variant="card" for a borderless table -->
<div buiTableContainer class="w-full">
  <table buiTable>… name / role / status …</table>
</div>

Comparison

Feature	Free	Pro	Enterprise
Projects	3	Unlimited	Unlimited
Audit logs	—
SAML & SCIM	—	—

<!-- tiers × features with checks and dashes -->
<table buiTable>
  <tr buiTableRow><td buiTableCell>Audit logs</td>
    <td buiTableCell class="text-center text-muted-foreground">—</td>
    <td buiTableCell class="text-center"><svg><path d="M20 6 9 17l-5-5" /></svg></td>
  </tr>
</table>