Playground / Team directory
Local demoOD

A LITTLE DATA. A LOT OF POSSIBILITY.

Meet your next
editing experience.

A familiar team directory. A flexible editing engine.
Try real changes, from a single cell to the whole team.

SAMPLE WORKSPACEYours to explore. Resets on reload.
Team members8
Good people, great work
Departments4
Better together
Annual payroll$870,000
Updates as you edit

The team 8 members

A little room for everyone to do their best work.

Powered by DataTables
Click a salary to edit in place
Sample team members. Select members for batch editing or click a salary to edit it in place.
Member Department Office Annual salary Status Actions
Showing 8 membersSample data · Stored in memory

TAKE IT FOR A SPIN

Small interactions. Big possibilities.

Behind the interaction

LIVE

Real editor events, as they happen.

  1. Ready when you are

    Make a change to see the editor in action.

    Now
Validate. Save. Reflect in your interface.

ONE ENGINE. YOUR POSSIBILITIES.

Bring your data.
Keep your interface.

This page connects the public editor packages to a real DataTables host. Dialogs, inline forms and asynchronous office options share one editing runtime.

Explore the standalone example
your-app.ts 
// A small API. Room to make it yours.
const editor = createEditor({
  fields,
  identity: member => member.id,
  persistence,
});

editor.attach(dataTablesHost(table, { identity }));
editor.use(dialog({ fields }));
editor.edit(member);