Table

Package: @synapse-ui/table Selector: synapse-table Status: Stable

A data table with column sorting, pagination, striped rows, and a built-in empty/loading state.

Overview

Table renders a <table> element driven by a typed column definition and a generic data array. Sortable columns emit a sortChange event so you can sort server-side or client-side. Row clicks emit the raw data record for drill-down navigation.

Installation

npm install @synapse-ui/table @synapse-ui/theme

Basic Example

import { Component } from '@angular/core';
import { Table, TableColumn } from '@synapse-ui/table';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Table],
  template: ` <synapse-table [columns]="columns" [data]="users" [pageSize]="5" (sortChange)="onSort($event)" (rowClick)="onRowClick($event)" /> `,
})
export class DemoComponent {
  columns: TableColumn[] = [
    { key: 'name', header: 'Name', sortable: true },
    { key: 'email', header: 'Email', sortable: true },
    { key: 'role', header: 'Role', sortable: false },
  ];

  users = [
    { name: 'Alice', email: 'alice@example.com', role: 'Admin' },
    { name: 'Bob', email: 'bob@example.com', role: 'Editor' },
    { name: 'Charlie', email: 'charlie@example.com', role: 'Viewer' },
  ];

  onSort(event: SortEvent): void {
    console.log('Sort by', event.key, event.direction);
  }

  onRowClick(row: Record<string, unknown>): void {
    console.log('Row clicked', row);
  }
}

API Reference

Inputs

Input	Type	Default	Description
columns	TableColumn[]	[]	Column definitions
data	Record<string, unknown>[]	[]	Row data; each key maps to a TableColumn.key
loading	boolean	false	Shows a loading indicator in the table body
emptyText	string	'No data to display'	Message shown when data is empty
pageSize	number	10	Rows per page
striped	boolean	true	Alternate row background colors
hoverable	boolean	true	Highlight rows on hover

Outputs

Output	Payload	Description
sortChange	SortEvent	Emitted when the user clicks a sortable column header
rowClick	Record<string, unknown>	Emitted when the user clicks a data row

Types

interface TableColumn {
  key: string; // Property key in the data record
  header: string; // Column header label
  sortable?: boolean; // Whether this column is sortable (default: false)
  width?: string; // Optional CSS width (e.g. '200px', '20%')
}

type SortDirection = 'asc' | 'desc' | null;

interface SortEvent {
  key: string;
  direction: SortDirection;
}

Loading State

<synapse-table [columns]="columns" [data]="[]" [loading]="isLoading" />

Empty State

<synapse-table [columns]="columns" [data]="[]" emptyText="No results match your search" />

Server-side Sorting

onSort(event: SortEvent): void {
  this.myApiService
    .getUsers({ sortKey: event.key, sortDir: event.direction })
    .subscribe(data => this.users = data);
}

Pagination

Pagination is handled automatically. Adjust pageSize to control how many rows appear per page:

<synapse-table [columns]="columns" [data]="data" [pageSize]="20" />