Signal-driven reload

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

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

@Component({
  selector: 'app-live',
  imports: [DtTableDirective],
  template: `
    <button type="button" (click)="reload()">Reload</button>
    <button type="button" (click)="addRow()">Add row</button>

    <table dtTable class="display" style="width:100%"
           [dtData]="data()" [dtColumns]="columns">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
        </tr>
      </thead>
    </table>`,
})
export class LiveComponent {
  columns: ConfigColumns[] = [
    { data: 'id', title: 'ID' },
    { data: 'name', title: 'Name' },
  ];

  data = signal<Person[]>([
    { id: 1, name: 'Ada Lovelace' },
    { id: 2, name: 'Linus Torvalds' },
  ]);

  // Set a NEW array reference and the table reloads itself
  // (clear + rows.add + draw), keeping the current page and sort.
  reload() {
    this.data.set([{ id: 3, name: 'Grace Hopper' }]);
  }

  addRow() {
    this.data.update((rows) => [{ id: rows.length + 1, name: 'New person' }, ...rows]);
  }
}