ngx-signal-table

A signal-based, UI-agnostic table state library for Angular.

Features

• Full Signal Support: Built with Angular Signals for fine-grained reactivity.
• UI Agnostic: Bring your own UI (Material, Bootstrap, Tailwind, etc.).
• Auto State Management: Handles pagination, sorting, and filtering automatically.
• Backend Ready: Seamless integration with any data source (Observable or Promise).
• Race Condition Handling: Automatic request cancellation using RxJS switchMap.

Installation

npm install ngx-signal-table

Usage

1. Define your data structure

interface User {
  id: number;
  name: string;
}

2. Initialize the Table in Component

@Component({...})
export class AppComponent {
  // Inject your API service
  private api = inject(ApiService);

  // Initialize Table State
  table = new SignalTable<User>({
    fetcher: (request) => this.api.getUsers(request),
    initialPageSize: 10,
    debounce: 300
  });
}

3. Use Signals in Template

<!-- State -->
<div *ngIf="table.loading()">Loading...</div>
<div>Total: {{ table.total() }} | Page: {{ table.pageIndex() + 1 }} of {{ table.pageCount() }}</div>

<!-- Data -->
<tr *ngFor="let item of table.data()">
  <td>{{ item.name }}</td>
</tr>

<!-- Actions -->
<th (click)="table.setSort('name', 'asc')">Name</th>
<button (click)="table.setPage(table.pageIndex() + 1)">Next</button>
<input (input)="table.updateFilter({ search: $event.target.value })">

API

Configuration

| Property | Type | Description | |----------|------|-------------| | fetcher | (req: TableRequest) => Observable<TableResponse<T>> | Function to fetch data | | initialPageSize | number | Default: 10 | | initialSort | SortState | Default: none | | initialFilter | FilterState | Default: empty | | debounce | number | Debounce time in ms (Default: 200) |

Signals (Read-Only)

• data: Signal<T[]>
• loading: Signal<boolean>
• error: Signal<any>
• total: Signal<number>
• pageCount: Signal<number>
• pageIndex: Signal<number>
• pageSize: Signal<number>
• sort: Signal<SortState>
• filter: Signal<FilterState>

Methods

• setPage(index: number)
• setPageSize(size: number)
• setSort(column: string, direction: 'asc' | 'desc' | '')
• setFilter(filter: FilterState) (Replaces entire filter)
• updateFilter(partial: FilterState) (Merges with existing)
• refresh() (Manually re-trigger fetch)