Table

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>

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

<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>

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

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

<!-- 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>