To participate in the demonstration you will need:

• Javascript enabled
• A modern browser

All examples given are written with babel loaders to support es6 (stage-0) and JSX syntax.

Simple Example

This is the simplest implementation of React-Object-Table, an editable list of strings.

To allow editing, the table requires an onUpdate handler (refer to source code below).

Even this simple example supports:

• Single cell editing
• Familiar navigation and completion hotkeys such as the arrow keys and tab/enter
• Multi column or row copy-paste (except on Firefox, where the required events do not exist)

Loading ...

More Feature-Filled Example

This example demonstrates:

• Read-only columns
• A more complex update handler
• The ability to add rows (handled outside the scope of React-Object-Table)
• Row-level action handlers
• A very basic custom renderer

Loading ...

Customisation Example

This example demonstrates:

• A more exciting custom renderer
• A custom editor widget
• Cell input validation (age column, confirmed to be positive integer in a reasonable range)
• Very basic validation error exception handling

Loading ...