Inline Editing of Tables in WordPress

Video versionA video overview of Inline Editing wpDataTables

WordPress inline editing

Inline editing option

Editing tables in a pop-up dialog is in most cases easy and intuitive; but not in all cases. For some tables, for example, those that may have more than 10 columns, or for some user scenarios where you need to edit only one field, inline editing is intuitive and easy; so, this inline-editing feature exists in wpDataTables as well!

To create an inline-editable table, it is first necessary to create and configure an editable table in a standard way.

Once the table is configured as editable, you will see an additional checkbox in the back-end. Tick it to enable inline editing.

When the checkbox is ticked, and the settings are saved, reload the table in the front-end or view your changes in table preview.

You still have the option to edit the table in the dialog, but when you double-click the cell you’ll get an in-line editor of the selected type. See the example at the screenshot on the right.

You can edit the cell value directly in the row. Simply click somewhere else in the table, or choose the value in drop-down, to save the value.

Inline editing in action

Popover tools

An additional feature is “popover tools”. This feature enables you to show the editable table control block as a popover above any row. To enable it, just tick this checkbox in the table settings:

Popover editing option

When this feature is enabled, you won’t see the “Add”, “New” and “Delete” buttons in their standard place (the top right corner above the table, in the TableTools block), but when you click on any table row, you will see a popover:

With these 2 features, you are always able to edit/delete/add a row, even if you show 100 or more rows in the single page.

Click here to experiment with front-end inline editable table, and click here to see the back-end setup.

Popover editing in action