Skip to content

examples.md

Latest commit

 

History

History
106 lines (82 loc) · 19.3 KB

examples.md

File metadata and controls

106 lines (82 loc) · 19.3 KB
Raw

Examples

Documentation · Project overview

Browse the live example directory without installing anything. Source files are available in example/.

To run locally, install development dependencies with npm ci, run npm run build, then run npm run dev and open the example directory. Serve the pages over HTTP rather than opening HTML files directly. The examples require access to their CDN dependencies.

In-memory examples reset on page reload. Example 16 saves to its local Node.js server and retains records and attachments across page reloads until that server restarts. The other Ajax examples load static JSON and acknowledge writes without a persistent backend; their Refresh buttons restore the original rows. Newly added records receive a generated identifier within their table.

Ajax examples configure stable DataTables row identifiers so updates can find the same record after a reload. The multiple-table example prefixes identifiers to keep DOM IDs distinct. Client-generated identifiers and GET requests to static response files are demonstration techniques. Production applications should assign identifiers on the server, use appropriate write methods, and validate and authorize every operation.

Simulated save requests do not send row values in query strings. They call success() to accept the entered values locally after the static request completes. For a real persistence callback, see the PATCH example in the API reference.

CDN resources are convenient for these examples. For production deployments, manage dependencies locally or pin resources with matching Subresource Integrity metadata and a suitable Content Security Policy.

Choose by integration need

  • Start with a normal object table: use Example 02. Use Example 01 when your rows are arrays.

  • Load and save remote data: start with Example 03, then replace the simulated callbacks with the persistence callback contract. Example 05 adds independent tables.

  • Customize a row form: use Example 04 for field options, 06 for Select2 and date pickers, 07 for dependent selects, and 08 for validation.

  • Adapt the interface: use Example 09 for translation loading, 11 for Foundation, and 12 for custom action buttons and mobile row actions.

  • Attach files: use Example 10 for browser-side data URLs and attachment retention.

  • Edit directly in cells: use Example 13. Its native controls do not need Bootstrap, Foundation, Select2, or date picker plugins.

  • Combine custom controls with inline editing: use Example 14 for direct controls, local data updates, and explicit column exclusions.

  • Delete several rows: use Example 15 for multiple selection and the retained success dialog.

  • Save records and upload raw files: use Example 16 and its local server instructions.

  • Customize dialog layouts and deletion summaries: use Example 18 and the dialog guide.

  • Use optional native dialogs without a UI framework: use Example 19; keep a framework adapter when native dialogs are unavailable.

  • Validate and save with async functions: use Example 21 for synchronous and asynchronous validators, structured server errors, and correction and retry.

  • Observe lifecycle callbacks and events: use Example 20 for event order, opening and submission cancellation, failed saves, retries, refresh, and editor destruction.

  • Customize inline controls: use Example 17 for formatted values, explicit setters, blur saving, and the public API.

Try the features

For toolbar-based examples, select a row before choosing Edit or Delete. Add opens a new record form. Example 12 uses its own actions; Example 13 uses double-click cell editing.

Example What to try
01: Arrays Add, edit, and delete array rows; edit multiline text in the Position field.
02: Objects Edit named object fields and add a record with a generated identifier.
03: Ajax Save a change, see the submitted values in the table, then use Refresh to restore the static data.
04: Field options Change the on/off selection, enter a unique IPv4 address, and enter a single port from 0 to 65535. The read-only field remains unchanged. Also compare readonly and disabled values, sorted options, and add-form defaults.
05: Multiple tables Edit either table and verify the other table retains its data. Each table has its own actions and generated identifiers.
06: Select2 and dates Change the position, multiple friends, date, timestamp, and degree. Save and reopen the row to see the retained values.
07: Dependent fields Choose Italy or France and then a town from the loaded options. Germany hides and clears the town field. Failed option requests prevent saving until the country is changed and the options load successfully.
08: Validation Try an empty required name, a duplicate name or number, and a duplicate selection. Options 7 and 8 are initially unused. Salaries use grouped dollar notation such as $1,000 or $1,200,000.
09: Translations Open the add, edit, and delete dialogs to see Italian labels loaded from the translation file. The second table demonstrates partial language overrides with English fallbacks.
10: Files Attach a small file, save, and download its contents from the table. A later edit without a new file retains the attachment. Files are read as data URLs in browser memory; no file upload service is provided.
11: Foundation Add, edit, and delete rows through Foundation Reveal dialogs.
12: Custom actions Use Add record, click a row to edit, or choose its Delete action. On small screens, expand the row to access hidden columns and actions.
13: Cell editing Double-click to edit; Enter saves, Escape cancels, and Tab moves. Try Fail the next save to retry. The second table demonstrates numeric array sources.
14: Rendered controls Change select, number, checkbox, and textarea values directly. Try editable content, buttons, links, expandable details, and a custom switch. Double-click ordinary or bold task text to edit.
15: Multiple-row deletion Select multiple rows and delete them together. Successful dialogs remain open; close them to continue.
16: Server persistence and files Run the local server to create, edit, delete, upload, download, and reload real saved data. Try a duplicate name to see server validation.
17: Advanced inline editing Try blur saving, public edit controls, formatted numbers, checkboxes, and a function-based source with an explicit setter.
18: Dialog templates Compare Add and Edit layouts, validate an email, select one or several rows for deletion, and toggle the deletion summary.
19: Native dialogs Select rows, edit numeric/date/checkbox/textarea fields and Select2 skills, then reopen to verify raw values behind custom table renderers. Delete one or several rows with a text summary.
20: Lifecycle and events Watch event order, prevent opening, reject the name blocked, fail and retry a save, edit a cell, refresh, and destroy or re-enable the editor.

The Appearance selector supports system, light, and dark modes. See styling and themes for application customization.

The file example limits each attachment to 2 MiB through maxFileSize. This client-side check prevents unnecessary reads; an upload service must enforce its own limits.

Find the configuration

Open the HTML first to see stylesheet and script loading order, then read the table configuration. Each example page links directly to its configuration source. Example 04 keeps its configuration inside the HTML; the others use a separate JavaScript file.

Example Page and configuration What to reuse
01 HTML · JavaScript Numeric column sources and textarea fields for array rows.
02 HTML · JavaScript Named column sources, readonly IDs, and standard toolbar actions.
03 HTML · JavaScript ajax.dataSrc, rowId, and add, edit, and delete callbacks.
04 HTML (includes JavaScript) Hidden and readonly fields, select options, unique values, and input patterns.
05 HTML · JavaScript Separate table instances, callbacks, and prefixed row identifiers.
06 HTML · JavaScript select2, multiple, datetimepicker, display renderers, and degree.id.
07 HTML · JavaScript Country change handling, loading town options, request cancellation, and validation while loading.
08 HTML · JavaScript required, unique, uniqueMsg, and salary formatting constraints.
09 HTML · JavaScript language.altEditorUrl for editor translation loading.
10 HTML · JavaScript type: file, maxFileSize, download rendering, and preserving existing attachments.
11 HTML · JavaScript Foundation Reveal dependencies with the same public editor configuration.
12 HTML · JavaScript openAddDialog, openEditDialog, and openDeleteDialog, including Responsive child rows.
13 HTML · JavaScript inlineEdit, save callbacks, lifecycle events, and numeric array sources.
14 HTML · JavaScript Display renderers, delegated handlers, control detection, and explicit inline exclusions.
15 HTML · JavaScript Multiple-row deletion.
16 HTML · JavaScript Server persistence and files.
17 HTML · JavaScript Advanced inline editing.
18 HTML · JavaScript Independent templates, DOM deletion summaries, and render / close callbacks.
19 HTML · JavaScript Native dialog templates, typed values, Select2, DataTables Select, and custom display renderers.
20 HTML · JavaScript Lifecycle callbacks, event order, cancellation, retries, inline editing, refresh, and destruction.

| 21 | HTML · JavaScript | Promise persistence, field errors, custom validation, and retry. |

Adapt an example to your application

  1. Copy the relevant HTML dependencies and table configuration. Update relative paths for the AltEditor distribution and any JSON or translation files. Most dialog examples use Bootstrap 5; Example 11 uses Foundation. Load one dialog framework and the optional controls required by your form.
  2. Replace sample rows and column definitions together. Keep raw select values separate from their displayed labels. In Example 06, position and degree store option keys, friends stores an array of keys, and date values use the formats configured on the pickers. Renderers turn stored values into table text.
  3. Replace simulated persistence with your backend calls. Example 21 uses returned Promises; callback-style examples remain supported. Call success only after the server accepts the operation, and call error when it fails. Return a complete persisted row when passing a replacement to success. Do not pass the static acknowledgement JSON as a replacement row. Preserve stable identifiers when editing; let the server assign new identifiers.
  4. Keep feature-specific behavior that matters to your form. Example 07 prevents saving incomplete town options; Example 10 retains a file when no replacement is selected; Example 12 resolves actions in mobile child rows. For inline editing, follow the supported controls and save behavior.
  5. Style your application's table and page independently. The shared examples.css and theme.js files provide demonstration layout and the Appearance selector; they are not required by AltEditor. See styling and themes for the editor's stylesheet and customization options.

Example 09 translates editor messages into Italian. To use another included language, change the translation file URL using the language list. DataTables toolbar text, table messages, and browser-native validation have separate localization settings.

The live site follows the deployed default branch. For changes available only in your checkout, run the local examples and read the matching local source. The online guide links from example pages describe the develop branch.