https://github.com/ascentspark/ngx-datatables-net
A modern Angular wrapper for DataTables.net supporting Angular 20 / 21 / 22.
https://github.com/ascentspark/ngx-datatables-net
angular angular-data-grids angular-datatables angular-table data-grid datatables datatables-net ngx signals standalone-components typescript zoneless
Last synced: 1 day ago
JSON representation
A modern Angular wrapper for DataTables.net supporting Angular 20 / 21 / 22.
- Host: GitHub
- URL: https://github.com/ascentspark/ngx-datatables-net
- Owner: ascentspark
- License: mit
- Created: 2026-06-15T02:29:37.000Z (22 days ago)
- Default Branch: main
- Last Pushed: 2026-06-24T20:42:40.000Z (13 days ago)
- Last Synced: 2026-06-24T22:03:19.555Z (13 days ago)
- Topics: angular, angular-data-grids, angular-datatables, angular-table, data-grid, datatables, datatables-net, ngx, signals, standalone-components, typescript, zoneless
- Language: TypeScript
- Homepage: https://ngx-datatables-net.ascentspark.com/
- Size: 419 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: docs/SECURITY.md
Awesome Lists containing this project
- fucking-awesome-angular - ngx-datatables-net - Angular wrapper for `DataTables.net` supporting Angular 20+. (Third Party Components / Data Grids)
- awesome-angular - ngx-datatables-net - Angular wrapper for `DataTables.net` supporting Angular 20+. (Third Party Components / Data Grids)
README
# ngx-datatables-net
An Angular wrapper for [DataTables.net](https://datatables.net), by
Ascentspark
### Signals, standalone components and zoneless change detection, without writing jQuery
[](https://www.npmjs.com/package/ngx-datatables-net)
[](https://www.npmjs.com/package/ngx-datatables-net)
[](https://angular.dev)
[](LICENSE)
**[🚀 Live demo](https://ngx-datatables-net.ascentspark.com)** ·
**[✏️ Edit in place](docs/EDIT-IN-PLACE.md)** [](docs/EDIT-IN-PLACE.md) ·
**[📦 npm](https://www.npmjs.com/package/ngx-datatables-net)** ·
**[📝 Changelog](CHANGELOG.md)**
---
[DataTables](https://datatables.net) 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 ``, 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](https://editor.datatables.net/), 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](https://ngx-datatables-net.ascentspark.com/features/edit-in-place)** ·
> **[Read the guide](docs/EDIT-IN-PLACE.md)**
## ✨ 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
```bash
npm install ngx-datatables-net datatables.net datatables.net-dt
```
Add the stylesheet for your chosen theme in `angular.json`:
```jsonc
"styles": [
"node_modules/datatables.net-dt/css/dataTables.dataTables.css",
"src/styles.scss"
]
```
## 🚀 Quick start
Register the providers once:
```ts
// 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:
```ts
// users.component.ts
import { Component, signal } from '@angular/core';
import { DtTableDirective, type ConfigColumns } from 'ngx-datatables-net';
@Component({
selector: 'app-users',
imports: [DtTableDirective],
template: `
NameEmail
`,
})
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 `` and give a column an `editor`. Double-click to edit; Enter
commits, Escape cancels, Tab moves to the next editable cell.
```ts
import { DtTableDirective, DtEditableDirective, type DtColumn } from 'ngx-datatables-net';
columns: DtColumn[] = [
{ 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](docs/EDIT-IN-PLACE.md)**.
## 📚 Documentation
Live demo and full docs for every feature, styling adapter and extension:
**[ngx-datatables-net.ascentspark.com](https://ngx-datatables-net.ascentspark.com)**
In this repo:
| Doc | What's inside |
| --- | --- |
| [Architecture](docs/ARCHITECTURE.md) | design notes and the zoneless bridge |
| [Edit in place](docs/EDIT-IN-PLACE.md) | the `[dtEditable]` directive in full |
| [Security](docs/SECURITY.md) | cell rendering and the XSS boundary |
| [Migration](docs/MIGRATION.md) | moving from the archived `angular-datatables` |
| [Changelog](CHANGELOG.md) | 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).
```bash
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](https://github.com/ascentspark/ngx-datatables-net/issues) 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](https://ascentspark.com). 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