Table

npm install @a13y/angular

import { Component } from '@angular/core';
import { AccessibleTableComponent } from '@a13y/angular';

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

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [AccessibleTableComponent],
  template: `
    <accessible-table
      [data]="users"
      [columns]="columns"
      caption="User list"
      [selectable]="true"
      [sortable]="true"
      (selectionChange)="onSelectionChange($event)"
      (sort)="onSort($event)">
    </accessible-table>
  `
})
export class DemoComponent {
  users: User[] = [
    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Editor' }
  ];

  columns = [
    { key: 'name', label: 'Name', sortable: true },
    { key: 'email', label: 'Email', sortable: true },
    { key: 'role', label: 'Role', sortable: false }
  ];

  onSelectionChange(selectedIndices: number[]) {
    console.log('Selected rows:', selectedIndices);
  }

  onSort(event: { column: string; direction: 'asc' | 'desc' | null }) {
    console.log('Sort:', event);
  }
}