ngx-datatables-net

Get started in five steps

New to Angular? First create an app: npm install -g @angular/cli then ng new my-app. Run every command below inside that project folder.

1. 1

   Install the packages

   ngx-datatables-net is the wrapper. datatables.net is the underlying library, and datatables.net-dt is its default theme.

   Pick the line that matches your Angular version. The package API is the same across all three, so everything below works unchanged.

   Angular 22 Angular 21 Angular 20

   npm install ngx-datatables-net@22 datatables.net datatables.net-dt

2. 2

   Add the table stylesheet

   Open angular.json, find your app's "styles" array, and add the DataTables theme so the table looks right.

   "styles": [
     "node_modules/datatables.net-dt/css/dataTables.dataTables.css",
     "src/styles.scss"
   ]

3. 3

   Register it in your app

   In src/app/app.config.ts, add the two providers below to the providers array. withSafeDefaults() escapes cell text so user data cannot inject HTML.

   import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
   import { provideDataTables, withSafeDefaults } from 'ngx-datatables-net';
   import { withDefaultStyling } from 'ngx-datatables-net/dt';
   
   export const appConfig: ApplicationConfig = {
     providers: [
       provideZonelessChangeDetection(),
       provideDataTables(withDefaultStyling(), withSafeDefaults()),
     ],
   };

4. 4

   Add a table to a component

   Import DtTableDirective, put your rows in a signal, describe the columns, and add dtTable to a <table>.

   import { Component, signal } from '@angular/core';
   import { DtTableDirective, type ConfigColumns } from 'ngx-datatables-net';
   
   @Component({
     selector: 'app-people',
     imports: [DtTableDirective],
     template: `
       <table dtTable [dtData]="people()" [dtColumns]="columns"
              class="display" style="width:100%">
         <thead>
           <tr><th>Name</th><th>Role</th><th>City</th></tr>
         </thead>
       </table>
     `,
   })
   export class PeopleComponent {
     people = signal([
       { name: 'Ada Lovelace', role: 'Engineer', city: 'London' },
       { name: 'Linus Torvalds', role: 'Maintainer', city: 'Portland' },
     ]);
     columns: ConfigColumns[] = [
       { data: 'name', title: 'Name' },
       { data: 'role', title: 'Role' },
       { data: 'city', title: 'City' },
     ];
   }

5. 5

   Run it

   Start the app with ng serve. You now have a sortable, searchable, paged table. To load different data later, just set a new array on the people signal. There is no manual refresh step.