Data Table

Pro

Playground

<base-data-table
  [columns]="columns"
  [data]="users"
  sortable
  [striped]="true"
  [bordered]="true"
  [pageable]="true"
  [hoverable]="true"
  [selectable]="false"
  [resizable]="false">
</base-data-table>

Basic Table

Define [columns] as an array of TableColumn objects and pass [data] as an array of objects.

Column Configuration

Columns support key, label, sortable, width, and align ('left' | 'center' | 'right').

Loading State

Set [loading]="true" to show skeleton rows while data loads. The data table will render animated placeholder rows matching your column count.

Styling Options

Empty State

When data is empty, a friendly message is shown. Customize it with emptyMessage.

Error

Keep the table shell and put the failure in an alert above it. Reuse emptyMessage when the request returned no rows after an error retry.

Row selection

Set selectable and bind [(selected)] to an array of rowKey values (defaults to id). Header checkbox selects the current page. selectionChange emits the selected row objects.

Column resize

Set resizable and drag the right edge of a header. Lock a column with resizable: false on the column definition. Initial widths come from column.width.

Server page and sort

Set serverSide so the table does not slice or sort locally. Pass the current page in data, the full count in totalItems, and reload from pageChange / sortChange.

Virtualize

Set virtualize for large in-memory lists. Rows are windowed inside a fixed-height viewport. Pair with rowHeight matching the rendered row.

Installation

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

npx base-ui-cli add data-table

npx -y base-ui-mcp

// Install: npx base-ui-cli add data-table
// Paths are relative to aliases.components (default: src/app/components)
import { DataTableComponent } from './data-table/data-table.component';

@Component({
  selector: 'app-your-component',
  imports: [
    DataTableComponent
  ],
  template: `...`
})
export class YourComponent {}