---

DataTables turns a plain HTML table into an interactive one: sorting, search, pagination, and a large set of extensions. ngx-datatables-net lets you drive it from Angular without writing any jQuery. Add a directive to a <table>, bind your options and data as signal inputs, and read events and state back as signals. Standalone, zoneless-ready, SSR-safe, and escaped by default.

🅰️ Built the modern Angular way. Signals, standalone components and zoneless change detection, on top of DataTables' non-jQuery constructor API. Your only peer dependencies are Angular and DataTables: no zone.js, rxjs or jquery required of your app. The original angular-datatables was archived in 2025 and never moved past NgModule + Zone.js + dtTrigger; this is a clean-sheet rebuild for Angular 20 to 22. (DataTables uses jQuery internally, so it still ships in the bundle as a transitive dependency, but you never write or configure it.)

🆓 Built-in inline editing, an alternative to the paid version

DataTables' own inline editing ships only in Editor, a commercial paid extension. The [dtEditable] directive gives you double-click edit-in-place for free (MIT): text, textarea, number, date, checkbox, select, multiselect and custom editors, with validation, keyboard navigation and optional pessimistic async saving, all through the non-jQuery API and written the Angular way.

→ Try the live demo  ·  Read the guide

✨ Why ngx-datatables-net

• No jQuery in your code. Built on the DataTables non-jQuery API; jQuery stays a transitive dependency you never touch.
• Signals, not subjects. Assign a new array to dtData and the table reconciles itself, with no manual redraw trigger to remember. Events come back as Angular outputs; selection and the underlying Api are exposed as signals.
• Free edit-in-place. The [dtEditable] companion directive gives you inline editing without the commercial Editor licence (see the callout above).
• Safe by default. Output is escaped unless you opt in; a DomSanitizer-backed renderer is provided for trusted HTML.
• Every extension works. Buttons, Select, Responsive, FixedHeader/Columns, Scroller, RowGroup, SearchPanes, ColumnControl and more: pass the config straight through.
• Four styling adapters. DataTables default, Bootstrap 5, plus Tailwind and Material themes authored by us (DataTables ships neither).
• Standalone & zoneless. Initialises in the browser only, so it is safe under SSR.

📦 Install

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

Add the stylesheet for your chosen theme in angular.json:

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

🚀 Quick start

Register the providers once:

// app.config.ts
import { provideDataTables, withOptions, withSafeDefaults } from 'ngx-datatables-net';
import { withDefaultStyling } from 'ngx-datatables-net/dt';

providers: [
  provideDataTables(withDefaultStyling(), withSafeDefaults(), withOptions({ pageLength: 10 })),
];

Then use the directive on a table:

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

@Component({
  selector: 'app-users',
  imports: [DtTableDirective],
  template: `
    <table dtTable [dtData]="users()" [dtColumns]="columns" class="display">
      <thead>
        <tr><th>Name</th><th>Email</th></tr>
      </thead>
    </table>
  `,
})
export class UsersComponent {
  users = signal([{ name: 'Ada', email: 'ada@example.com' }]);
  columns: ConfigColumns[] = [{ data: 'name' }, { data: 'email' }];
}

To reload the table later, set a new array on the users signal. That is the whole loop.

✏️ Edit in place (free, no Editor licence)

Add [dtEditable] to the same <table> and give a column an editor. Double-click to edit; Enter commits, Escape cancels, Tab moves to the next editable cell.

import { DtTableDirective, DtEditableDirective, type DtColumn } from 'ngx-datatables-net';

columns: DtColumn<User>[] = [
  { data: 'name',   title: 'Name',   editor: { type: 'text', validate: v => String(v).trim() ? null : 'Required' } },
  { data: 'role',   title: 'Role',   editor: { type: 'select', options: ROLES } },
  { data: 'skills', title: 'Skills', editor: { type: 'multiselect', options: SKILLS } },
];

Editors: text, textarea, number, date, checkbox, select, multiselect, custom. Bind [dtSave] to persist before the cell is written (sync, Promise or Observable). The cell shows a busy state and, on failure, stays open with an inline error for retry. Full details in the Edit in place guide.

📚 Documentation

Live demo and full docs for every feature, styling adapter and extension: ngx-datatables-net.ascentspark.com

In this repo:

Doc	What's inside
Architecture	design notes and the zoneless bridge
Edit in place	the [dtEditable] directive in full
Security	cell rendering and the XSS boundary
Migration	moving from the archived angular-datatables
Changelog	dated release notes

🔢 Versions

One package major per Angular major. Install the one that matches your app.

Package	Angular	npm tag
22.x	22	latest
21.x	21	ng21
20.x	20	ng20

🗺️ Roadmap

🚧 Work in progress for upcoming releases. All built on free DataTables (no commercial extensions required), no firm dates yet, and pull requests are very welcome.

	Feature	What's coming
🗂️	Master / detail rows	Expandable detail rows and nested sub-grids, driven by Angular templates
🗃️	Row grouping	Group headers with expand / collapse and aggregation helpers, on top of RowGroup
📋	Clipboard	Excel-style copy and paste, for the whole table and for cell ranges
🔲	Cell selection	Select individual cells and rectangular ranges, building on the Select extension

Following the same approach as edit-in-place: modern Angular (signals, standalone, zoneless), and free alternatives to features that are otherwise paid in other grids.

🛠️ Working on this repo

Node is pinned in .nvmrc (Angular 22 needs Node 22.22.3 or newer).

nvm use
npm install

npx ng build ngx-datatables-net      # build the library
npx ng serve demo --port 4287        # run the demo
npx ng test ngx-datatables-net       # unit tests
npx playwright test                  # end-to-end tests

🤝 Help keep it healthy

We genuinely try to keep this library current, bug-free and secure, and honestly the best way to get there is together. If something breaks, please open an issue so we can look into it. If you can fix a bug or add something useful, pull requests are very welcome, big or small. An open-source library stays dependable only when people use it, tell us what's broken, and pitch in now and then, so thank you in advance for anything you send our way. 💛

👋 About

We are Ascentspark. We have used datatables.net across our Angular projects and kept writing the same wrapper code to make it feel at home in modern Angular. This is that code, tidied up and shared, in case you are looking for an Angular wrapper too.

License

MIT