Table | Angular Components

import { NeuTableComponent, NeuTableExpandDirective } from '@neural-ui/core/table';
import type { NeuTableColumn } from '@neural-ui/core/table';

ID	Name	Email	Role	Status	Joined
1	Ana García	user1@neural.io	Admin	Active	2020-01-01
2	Luis Martínez	user2@neural.io	Editor	Inactive	2021-02-02
3	Sofía López	user3@neural.io	Viewer	Pending	2022-03-03
4	Carlos Ruiz	user4@neural.io	Developer	Active	2023-04-04
5	Elena Torres	user5@neural.io	Manager	Inactive	2024-05-05
6	David Sánchez	user6@neural.io	Admin	Pending	2020-06-06
7	Marta Díaz	user7@neural.io	Editor	Active	2021-07-07
8	Pablo Fernández	user8@neural.io	Viewer	Inactive	2022-08-08
9	Laura Gómez	user9@neural.io	Developer	Pending	2023-09-09
10	Javier Moreno	user10@neural.io	Manager	Active	2024-10-10
11	Ana García	user11@neural.io	Admin	Inactive	2020-11-11
12	Luis Martínez	user12@neural.io	Editor	Pending	2021-12-12
13	Sofía López	user13@neural.io	Viewer	Active	2022-01-13
14	Carlos Ruiz	user14@neural.io	Developer	Inactive	2023-02-14

import { NeuTableComponent, NeuTableExpandDirective } from '@neural-ui/core/table';

const columns: NeuTableColumn[] = [
  { key: 'id',     header: 'ID',   width: '60px', sortable: true },
  { key: 'name',   header: 'Name', sortable: true },
  { key: 'status', header: 'Status', type: 'badge',
    badgeMap: {
      active:   { label: 'Active',   variant: 'success' },
      inactive: { label: 'Inactive', variant: 'default' },
    }
  },
];

// The URL changes automatically:
// ?q=ana&sort=name&sortDir=asc&page=2
@Component({
  imports: [NeuTableComponent, NeuTableExpandDirective],
  template: `
    <neu-table
      title="Users"
      [columns]="columns"
      [data]="users"
      [pageSize]="10"
      [pageSizeOptions]="[5,10,25,50]"
      [sortable]="true"
      [searchable]="true"
      [selectable]="true"
      [exportable]="true"
      [resizableColumns]="true"
      exportScope="auto"
      exportFileName="users"
      [expandable]="true"
      (selectionChange)="onSelect($event)"
    >
      <ng-template neuTableExpand let-row>
        <p>Details for {{ row.name }}</p>
      </ng-template>
    </neu-table>
  `
})
export class UsersComponent {
  users = inject(UserService).getAll();
  onSelect(rows: User[]) { console.log(rows); }
}