{"id":51377206,"url":"https://github.com/ascentspark/ngx-datatables-net","last_synced_at":"2026-07-05T21:00:32.844Z","repository":{"id":365422125,"uuid":"1269695454","full_name":"ascentspark/ngx-datatables-net","owner":"ascentspark","description":"A modern Angular wrapper for DataTables.net  supporting Angular 20 / 21 / 22.","archived":false,"fork":false,"pushed_at":"2026-06-24T20:42:40.000Z","size":429,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-24T22:03:19.555Z","etag":null,"topics":["angular","angular-data-grids","angular-datatables","angular-table","data-grid","datatables","datatables-net","ngx","signals","standalone-components","typescript","zoneless"],"latest_commit_sha":null,"homepage":"https://ngx-datatables-net.ascentspark.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ascentspark.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"docs/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-15T02:29:37.000Z","updated_at":"2026-06-24T20:41:58.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ascentspark/ngx-datatables-net","commit_stats":null,"previous_names":["ascentspark/ngx-datatables-net"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ascentspark/ngx-datatables-net","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ascentspark%2Fngx-datatables-net","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ascentspark%2Fngx-datatables-net/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ascentspark%2Fngx-datatables-net/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ascentspark%2Fngx-datatables-net/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ascentspark","download_url":"https://codeload.github.com/ascentspark/ngx-datatables-net/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ascentspark%2Fngx-datatables-net/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35168795,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-05T02:00:06.290Z","response_time":100,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-data-grids","angular-datatables","angular-table","data-grid","datatables","datatables-net","ngx","signals","standalone-components","typescript","zoneless"],"created_at":"2026-07-03T14:00:27.944Z","updated_at":"2026-07-05T21:00:32.837Z","avatar_url":"https://github.com/ascentspark.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Data Grids"],"readme":"\u003cdiv align=\"center\"\u003e\n\n# ngx-datatables-net\n\nAn Angular wrapper for [DataTables.net](https://datatables.net), by\n\u003ca href=\"https://ascentspark.com\" target=\"_blank\" rel=\"noopener\"\u003eAscentspark\u003c/a\u003e\n\n\u003ca href=\"https://ascentspark.com\" target=\"_blank\" rel=\"noopener\"\u003e\u003cimg src=\"https://cdn.ascentspark.com/assets/images/asc-logo-full.svg\" alt=\"Ascentspark\" height=\"40\"\u003e\u003c/a\u003e\n\n### Signals, standalone components and zoneless change detection, without writing jQuery\n\n[![npm version](https://img.shields.io/npm/v/ngx-datatables-net.svg?color=dd0031)](https://www.npmjs.com/package/ngx-datatables-net)\n[![downloads](https://img.shields.io/npm/dm/ngx-datatables-net.svg)](https://www.npmjs.com/package/ngx-datatables-net)\n[![Angular 20 · 21 · 22](https://img.shields.io/badge/Angular-20%20%C2%B7%2021%20%C2%B7%2022-dd0031.svg)](https://angular.dev)\n[![license MIT](https://img.shields.io/npm/l/ngx-datatables-net.svg?color=3b82f6)](LICENSE)\n\n**[🚀 Live demo](https://ngx-datatables-net.ascentspark.com)** \u0026nbsp;·\u0026nbsp;\n**[✏️ Edit in place](docs/EDIT-IN-PLACE.md)** [![new](https://img.shields.io/badge/new-22.2.0-dd0031?style=flat-square)](docs/EDIT-IN-PLACE.md) \u0026nbsp;·\u0026nbsp;\n**[📦 npm](https://www.npmjs.com/package/ngx-datatables-net)** \u0026nbsp;·\u0026nbsp;\n**[📝 Changelog](CHANGELOG.md)**\n\n\u003c/div\u003e\n\n---\n\n[DataTables](https://datatables.net) turns a plain HTML table into an interactive one: sorting,\nsearch, pagination, and a large set of extensions. **`ngx-datatables-net`** lets you drive it from\nAngular without writing any jQuery. Add a directive to a `\u003ctable\u003e`, bind your options and data as\nsignal inputs, and read events and state back as signals. Standalone, zoneless-ready, SSR-safe, and\nescaped by default.\n\n\u003e **🅰️ Built the modern Angular way.** Signals, standalone components and zoneless change detection,\n\u003e on top of DataTables' **non-jQuery** constructor API. Your only peer dependencies are Angular and\n\u003e DataTables: no `zone.js`, `rxjs` or `jquery` required of your app. The original `angular-datatables`\n\u003e was archived in 2025 and never moved past `NgModule` + `Zone.js` + `dtTrigger`; this is a clean-sheet\n\u003e rebuild for Angular 20 to 22. (DataTables uses jQuery internally, so it still ships in the bundle as\n\u003e a transitive dependency, but you never write or configure it.)\n\n\u003e ## 🆓 Built-in inline editing, an alternative to the paid version\n\u003e\n\u003e DataTables' own inline editing ships only in **[Editor](https://editor.datatables.net/), a\n\u003e commercial paid extension**. The `[dtEditable]` directive gives you **double-click edit-in-place\n\u003e for free** (MIT): text, textarea, number, date, checkbox, select, multiselect and **custom**\n\u003e editors, with validation, keyboard navigation and optional pessimistic async saving, all through\n\u003e the non-jQuery API and written the Angular way.\n\u003e\n\u003e **→ [Try the live demo](https://ngx-datatables-net.ascentspark.com/features/edit-in-place)** \u0026nbsp;·\u0026nbsp;\n\u003e **[Read the guide](docs/EDIT-IN-PLACE.md)**\n\n## ✨ Why ngx-datatables-net\n\n- **No jQuery in your code.** Built on the DataTables non-jQuery API; jQuery stays a transitive\n  dependency you never touch.\n- **Signals, not subjects.** Assign a new array to `dtData` and the table reconciles itself, with\n  no manual redraw trigger to remember. Events come back as Angular outputs; selection and the\n  underlying `Api` are exposed as signals.\n- **Free edit-in-place.** The `[dtEditable]` companion directive gives you inline editing without\n  the commercial Editor licence (see the callout above).\n- **Safe by default.** Output is escaped unless you opt in; a `DomSanitizer`-backed renderer is\n  provided for trusted HTML.\n- **Every extension works.** Buttons, Select, Responsive, FixedHeader/Columns, Scroller, RowGroup,\n  SearchPanes, ColumnControl and more: pass the config straight through.\n- **Four styling adapters.** DataTables default, Bootstrap 5, plus Tailwind and Material themes\n  authored by us (DataTables ships neither).\n- **Standalone \u0026 zoneless.** Initialises in the browser only, so it is safe under SSR.\n\n## 📦 Install\n\n```bash\nnpm install ngx-datatables-net datatables.net datatables.net-dt\n```\n\nAdd the stylesheet for your chosen theme in `angular.json`:\n\n```jsonc\n\"styles\": [\n  \"node_modules/datatables.net-dt/css/dataTables.dataTables.css\",\n  \"src/styles.scss\"\n]\n```\n\n## 🚀 Quick start\n\nRegister the providers once:\n\n```ts\n// app.config.ts\nimport { provideDataTables, withOptions, withSafeDefaults } from 'ngx-datatables-net';\nimport { withDefaultStyling } from 'ngx-datatables-net/dt';\n\nproviders: [\n  provideDataTables(withDefaultStyling(), withSafeDefaults(), withOptions({ pageLength: 10 })),\n];\n```\n\nThen use the directive on a table:\n\n```ts\n// users.component.ts\nimport { Component, signal } from '@angular/core';\nimport { DtTableDirective, type ConfigColumns } from 'ngx-datatables-net';\n\n@Component({\n  selector: 'app-users',\n  imports: [DtTableDirective],\n  template: `\n    \u003ctable dtTable [dtData]=\"users()\" [dtColumns]=\"columns\" class=\"display\"\u003e\n      \u003cthead\u003e\n        \u003ctr\u003e\u003cth\u003eName\u003c/th\u003e\u003cth\u003eEmail\u003c/th\u003e\u003c/tr\u003e\n      \u003c/thead\u003e\n    \u003c/table\u003e\n  `,\n})\nexport class UsersComponent {\n  users = signal([{ name: 'Ada', email: 'ada@example.com' }]);\n  columns: ConfigColumns[] = [{ data: 'name' }, { data: 'email' }];\n}\n```\n\nTo reload the table later, set a new array on the `users` signal. That is the whole loop.\n\n## ✏️ Edit in place (free, no Editor licence)\n\nAdd `[dtEditable]` to the same `\u003ctable\u003e` and give a column an `editor`. Double-click to edit; Enter\ncommits, Escape cancels, Tab moves to the next editable cell.\n\n```ts\nimport { DtTableDirective, DtEditableDirective, type DtColumn } from 'ngx-datatables-net';\n\ncolumns: DtColumn\u003cUser\u003e[] = [\n  { data: 'name',   title: 'Name',   editor: { type: 'text', validate: v =\u003e String(v).trim() ? null : 'Required' } },\n  { data: 'role',   title: 'Role',   editor: { type: 'select', options: ROLES } },\n  { data: 'skills', title: 'Skills', editor: { type: 'multiselect', options: SKILLS } },\n];\n```\n\nEditors: `text`, `textarea`, `number`, `date`, `checkbox`, `select`, `multiselect`, `custom`.\nBind `[dtSave]` to persist before the cell is written (sync, `Promise` or `Observable`). The cell\nshows a busy state and, on failure, stays open with an inline error for retry. Full details in the\n**[Edit in place guide](docs/EDIT-IN-PLACE.md)**.\n\n## 📚 Documentation\n\nLive demo and full docs for every feature, styling adapter and extension:\n**[ngx-datatables-net.ascentspark.com](https://ngx-datatables-net.ascentspark.com)**\n\nIn this repo:\n\n| Doc | What's inside |\n| --- | --- |\n| [Architecture](docs/ARCHITECTURE.md) | design notes and the zoneless bridge |\n| [Edit in place](docs/EDIT-IN-PLACE.md) | the `[dtEditable]` directive in full |\n| [Security](docs/SECURITY.md) | cell rendering and the XSS boundary |\n| [Migration](docs/MIGRATION.md) | moving from the archived `angular-datatables` |\n| [Changelog](CHANGELOG.md) | dated release notes |\n\n## 🔢 Versions\n\nOne package major per Angular major. Install the one that matches your app.\n\n| Package | Angular | npm tag |\n| ------- | ------- | ------- |\n| `22.x`  | 22      | `latest` |\n| `21.x`  | 21      | `ng21`  |\n| `20.x`  | 20      | `ng20`  |\n\n## 🗺️ Roadmap\n\n\u003e 🚧 **Work in progress for upcoming releases.** All built on **free** DataTables (no commercial\n\u003e extensions required), no firm dates yet, and pull requests are very welcome.\n\n| | Feature | What's coming |\n| :-: | --- | --- |\n| 🗂️ | **Master / detail rows** | Expandable detail rows and nested sub-grids, driven by Angular templates |\n| 🗃️ | **Row grouping** | Group headers with expand / collapse and aggregation helpers, on top of RowGroup |\n| 📋 | **Clipboard** | Excel-style copy and paste, for the whole table and for cell ranges |\n| 🔲 | **Cell selection** | Select individual cells and rectangular ranges, building on the Select extension |\n\nFollowing the same approach as edit-in-place: modern Angular (signals, standalone, zoneless), and\nfree alternatives to features that are otherwise paid in other grids.\n\n## 🛠️ Working on this repo\n\nNode is pinned in `.nvmrc` (Angular 22 needs Node 22.22.3 or newer).\n\n```bash\nnvm use\nnpm install\n\nnpx ng build ngx-datatables-net      # build the library\nnpx ng serve demo --port 4287        # run the demo\nnpx ng test ngx-datatables-net       # unit tests\nnpx playwright test                  # end-to-end tests\n```\n\n## 🤝 Help keep it healthy\n\nWe genuinely try to keep this library current, bug-free and secure, and honestly the best way to get\nthere is together. If something breaks, please\n[open an issue](https://github.com/ascentspark/ngx-datatables-net/issues) so we can look into it. If\nyou can fix a bug or add something useful, pull requests are very welcome, big or small. An\nopen-source library stays dependable only when people use it, tell us what's broken, and pitch in\nnow and then, so thank you in advance for anything you send our way. 💛\n\n## 👋 About\n\nWe are [Ascentspark](https://ascentspark.com). We have used datatables.net across our Angular\nprojects and kept writing the same wrapper code to make it feel at home in modern Angular. This is\nthat code, tidied up and shared, in case you are looking for an Angular wrapper too.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fascentspark%2Fngx-datatables-net","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fascentspark%2Fngx-datatables-net","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fascentspark%2Fngx-datatables-net/lists"}