Basic table

import { Component, signal } from '@angular/core';
import { DtTableDirective, type Api, type ConfigColumns } from 'ngx-datatables-net';

interface Employee {
  id: number;
  name: string;
  position: string;
  office: string;
}

@Component({
  selector: 'app-basic',
  imports: [DtTableDirective],
  template: `
    <table dtTable class="display" style="width:100%"
           [dtData]="data()" [dtColumns]="columns"
           (dtInit)="onInit($event)"
           (dtRowClick)="onRowClick($event.row)">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
        </tr>
      </thead>
    </table>`,
})
export class BasicComponent {
  columns: ConfigColumns[] = [
    { data: 'id', title: 'ID' },
    { data: 'name', title: 'Name' },
    { data: 'position', title: 'Position' },
    { data: 'office', title: 'Office' },
  ];

  data = signal<Employee[]>([
    { id: 1, name: 'Ada Lovelace', position: 'Engineer', office: 'London' },
    { id: 2, name: 'Linus Torvalds', position: 'Maintainer', office: 'Portland' },
  ]);

  onInit(api: Api<Employee>) {
    // escape hatch: the full DataTables Api for imperative calls
  }

  onRowClick(row: Employee) {
    // row is the typed Employee that was clicked
  }
}