DataTables AltEditor

Add row dialogs and cell editing to DataTables 2.x. AltEditor supports array and object data, nested fields, validation, asynchronous saves, custom dialog templates, translations, and light and dark themes.

Try the live examples · Documentation · Changelog · Contributing

See it in action

Row editing with Select2 and date fields. Open this example.

Preview inline editing

Double-click a cell, then save with Enter or cancel with Escape. Try keyboard navigation and failed-save recovery.

Screenshots show the included examples; table and page styling belongs to the examples. AltEditor styles remain scoped to its own controls and dialogs.

Async saves and validation

Use Promise-returning CRUD callbacks, structured fieldErrors, and editorValidate for synchronous or asynchronous field checks. Existing success/error callbacks remain supported. Read the guide or try Example 21.

Requirements

• DataTables >=2.1.0 <3 and jQuery >=1.8 <4.0.0. Examples use DataTables 2.3.8 and jQuery 3.7.1; choose versions supported by your optional plugins. See jQuery compatibility for the known jQuery 4 limitations.
• For row dialogs: Bootstrap 5, Bootstrap 4, or Foundation Reveal 6. Bootstrap 3 compatibility is best effort. Optional native dialogs are available through dialog.framework: 'native'; see dialog configuration.
• For toolbar actions: DataTables Buttons and Select. Programmatic methods accept explicit row selectors without these extensions.
• Inline editing uses native controls and does not require a dialog framework.
• Use a current browser supported by DataTables 2.x. Internet Explorer is unsupported. ES2015 source syntax does not imply support for older CSS engines; see styling requirements.

Get started

Download a GitHub release or clone the repository and copy the tracked dist/ files into your application. This project is distributed through GitHub; there are currently no plans to publish it to the npm registry. Node.js is only needed for development and building local archives.

Load jQuery, DataTables, and your dialog framework before AltEditor. Load the editor stylesheet after the framework stylesheet:

<link rel="stylesheet" href="dist/dataTables.altEditor.min.css" />
<script src="dist/dataTables.altEditor.min.js"></script>

<table id="people"></table>

const table = new DataTable('#people', {
  data: [{ id: 'alice', name: 'Alice', age: 30 }],
  rowId: 'id',
  columns: [
    { data: 'name', title: 'Name', required: true },
    { data: 'age', title: 'Age', type: 'number', min: 0 },
  ],
  altEditor: { inlineEdit: true },
});

table.altEditor().openEditDialog('#alice');

Run this script after the table element and dependencies have loaded. This example opens a row dialog and also enables double-click cell editing. For dialogs only, use altEditor: true. Without persistence callbacks, changes are kept in the current table and disappear when data reloads.

Both new DataTable() and jQuery initialization work. To add toolbar buttons, load Buttons and Select and add these DataTable options:

const toolbarOptions = {
  select: 'single',
  layout: {
    topStart: {
      buttons: [
        { name: 'add', text: 'Add' },
        { name: 'edit', text: 'Edit' },
        { name: 'delete', text: 'Delete' },
      ],
    },
  },
};

Pass these options together with data, columns, and altEditor when constructing the table. Example 2 includes the complete page and script.

For server persistence, configure onAddRow, onEditRow, and onDeleteRow. Return a Promise with the saved row, or call success(persistedRow) or error(errorValue) when your request finishes. Stable rowId values preserve update targets across reloads. See the callback contract and PATCH example; server-side validation and authorization remain application responsibilities.

Customize dialogs

Use altEditor.dialog.templates.add and .edit for independent form layouts. Generated fields keep their validation and save behavior. Configure dialog.deleteDetails to display selected records, and use lifecycle callbacks to initialize custom presentation. See the dialog guide and complete template example. Existing configurations need no changes.

Choose an example

Browse all live examples or open a specific feature below. Start with Example 02 for object-based row dialogs, Example 03 for persistence callbacks, or Example 13 for cell editing. The example guide maps integration needs to demos, links to each configuration file, and explains how to adapt the simulated operations.

No.	Feature	Live demo	Code
01	Array rows	Open example	Source
02	Object rows	Open example	Source
03	Ajax persistence	Open example	Source
04	Field options	Open example	Source
05	Multiple tables	Open example	Source
06	Select2 and date pickers	Open example	Source
07	Dependent selects	Open example	Source
08	Validation	Open example	Source
09	Translations	Open example	Source
10	File attachments	Open example	Source
11	Foundation dialogs	Open example	Source
12	Custom action buttons	Open example	Source
13	Cell inline editing	Open example	Source
14	Rendered controls	Open example	Source
15	Multiple-row deletion	Open example	Source
16	Server persistence and files	Open example	Source
17	Advanced inline editing	Open example	Source
18	Custom dialog templates	Open example	Source
19	Optional native dialogs	Open example	Source
20	Lifecycle and event callbacks	Open example	Source
21	Async persistence and validation	Open example	Source

Examples 03, 05, 06, 07, and 10 use static Ajax responses. Example 16 includes a local Node.js server for real persistence and file uploads; GitHub Pages only shows its setup instructions. Refresh restores the static examples' original data. The Appearance selector provides system, light, and dark modes. Examples require internet access for CDN dependencies.

Find the documentation

I want to…	Read
Configure fields, callbacks, files, or public methods	Configuration and API
Enable cell editing and keyboard navigation	Inline editing
React to saves, errors, and dialog lifecycle	Events
Override styles or enable dark mode	Styling and themes
Support keyboard and assistive technology users	Accessibility
Translate labels and messages	Translations
Upgrade an existing v3 integration	Migration guide
Diagnose common integration problems	Troubleshooting
Validate fields and show server errors	Persistence and validation

Readable and minified UMD files are available with source maps. AMD consumers map jquery and datatables.net; CommonJS usage is described in Configuration and API.

Contributing and support

Include a small reproduction with synthetic data when reporting a bug. Pull requests should describe the change and relevant verification; see CONTRIBUTING.md.

Follow the Code of Conduct. Report security concerns through the Security Policy, keeping vulnerability details out of public issues.

Buy Me A Coffee

If AltEditor helps your work, you can support its maintenance.

License

MIT. See LICENSE for terms and contributor attribution, and CHANGELOG.md for release history.