Free
Pro

Table

The Base UI (Angular) table is a free set of directives on native HTML table parts: caption, thead, tbody, tfoot, tr, th, and td. Copy it in with the CLI and compose a static or lightly interactive grid. For sort, page, select, resize, or serverSide, use Pro data-table.

When to use

  • Simple invoices, settings summaries, and docs tables of static or mapped rows.
  • When you want a real HTML table (caption, header, footer) without a Pro dependency.

When not to use

  • Admin grids that need sort, pagination, row selection, or column resize — that is data-table.
  • Non-tabular layout — use card, definition lists, or a stacked flex column.

Install with npx base-ui-cli add table.

freenew

Invoices

Directives attach to native <table> parts so the browser table model stays intact. Wrap the table in an overflow container when the grid is wider than the page. For sort, page, select, or resize, use data-table (Pro).

A list of recent invoices.
InvoiceStatusMethodAmount
INV-001PaidCard$250.00
INV-002PendingPayPal$150.00
INV-003UnpaidBank transfer$350.00
Total$750.00

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add table

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add table
// Paths are relative to aliases.components (default: src/app/components)
import { TableBodyDirective, TableCaptionDirective, TableDirective, TableFooterDirective, TableHeadDirective, TableHeaderDirective, TableRowDirective, TableTdDirective } from './table/table.directives';

@Component({
  selector: 'app-your-component',
  imports: [
    TableBodyDirective,
    TableCaptionDirective,
    TableDirective,
    TableFooterDirective,
    TableHeadDirective,
    TableHeaderDirective,
    TableRowDirective,
    TableTdDirective
  ],
  template: `...`
})
export class YourComponent {}

API for table — generated from JSDoc in the library source.

API reference for table
APIMemberTypeDefaultDescription
caption[base-table-caption]—— — Native `<caption>` for .
caption[base-table-caption]classstring''Extra classes merged via `cn()`.
table[base-table]—— — Styled native `<table>`. Compose with `base-table-header`, `base-table-body`, `base-table-row`, `base-table-head`, `base-table-cell`, and `base-table-caption`. For sort, page, select, or resize, use Pro `data-table`.
table[base-table]classstring''Extra classes merged via `cn()`.
tbody[base-table-body]—— — Native `<tbody>` for .
tbody[base-table-body]classstring''Extra classes merged via `cn()`.
td[base-table-cell]—— — Native `<td>` for . Not the Pro data-table cell template (`baseTableCell`).
td[base-table-cell]classstring''Extra classes merged via `cn()`.
tfoot[base-table-footer]—— — Native `<tfoot>` for .
tfoot[base-table-footer]classstring''Extra classes merged via `cn()`.
th[base-table-head]—— — Native `<th>` for .
th[base-table-head]classstring''Extra classes merged via `cn()`.
thead[base-table-header]—— — Native `<thead>` for .
thead[base-table-header]classstring''Extra classes merged via `cn()`.
tr[base-table-row]—— — Native `<tr>` for .
tr[base-table-row]classstring''Extra classes merged via `cn()`.