See video version of the tutorial

There are 2 main ways to create editable wpDataTables:

  • Table Constructor: create tables manually (see details here) or import the table data from Excel or CSV (see details here)
  • Create a MySQL based wpDataTable and configure it as editable.

Tables created manually with Table Constructor are back-end editable by default; to allow front-end editing you would need just open this wpDataTable settings in WordPress admin, tick the checkbox “Front-end editing“, and click “Save” (the ID column and the table name will be pre-configured for this type of tables by default).

Editable Tables in WordPress

Then your front-end users would already be able to edit the table data.

For creating MySQL-based editable tables which you already prepared in your MySQL DB server the algorithm is a little bit more complicated.

First you would need to create a table on MySQL side, and a MySQL-query based wpDataTable; the steps for this are described in this tutorial.

Then, when the table is created, you would need to tick the “Front end editing / Make table editable editable from the front-end” checkbox, provide the table name once again in the “MySQL table name” input and check if wpDataTables guessed the ID column correctly in the “ID column for editing” selectbox (if the column name is “id” or “ID” or similar it will usually guess correctly).

It is necessary to provide the name once again for a couple of reasons: first of all it is not always possible to parse it from the query; and secondly – sometimes you would like to send the changes to a different table rather from the one used in the query. After you define these settings don’t forget to press the “Save table” button.

Please note: If you use a column with non-unique values as an ID column, it might happen that when you save the settings on the front-end, not only one column will be edited, but multiple columns. It makes sense to make the ID columns invisible (untick the “Visible” checkbox for this column), not to confuse the users since IDs are usually not human-readable.

The best practice for ID columns is to set them up on MySQL side as auto increment integers.

When the table is saved, and inserted in the post or page, the outlook of the table in the front-end is slightly different from a usual non-editable table. You can notice that there are three new buttons in the TableTools section of the table (or just three if you didn’t enable TableTools for this wpDataTable):

Creating editable tables in WordPress with wpDataTables

Also it becomes possible to select a row in the table by clicking it, it will become highlighted (you can change the highlight color along with other table colors in the table settings page):

Creating editable tables in WordPress front-end

To make editing possible we need to choose editor input types for the columns that we want to allow users to edit. For this we need to go back to wpDataTables back-end, open the wpDataTable that we want to make editable, and make a selection in columns blocks for “Editor input type” dropdowns. Possible input types are fully explained in this section.

When the editor input types are chosen and saved, you can go to table front-end (open the post or page where you inserted the table) once again, choose any row, and click “edit“; or click “new” to create a new entry. You will see an editor popup. The popup is responsive, so it will work correctly on mobile and tablet devices as well:

Front-end MySQL editor for WordPress
  • In the left side of the editor popup you will see the names of the columns;
  • On the right side of the editor popup you sill see the editor inputs for the cells;
  • On the bottom side you will see the control and navigation buttons:
    • Cancel – discards all changes and closes the editor popup;
    • << Prev – selects the previous row of the table (if not the first one is selected), if necessary switches to the previous page, and puts the data from this row in the front-end editor. Changes will be discarded, if they weren’t saved.
    • Next >> – selects the next row of the table (if not the last one is selected), if necessary switches the table to the next page, and puts the data from this row to the front-end editor inputs. Changes will be discarded, if they weren’t saved.
    • Apply – saves the data from the editor in the current row, but doesn’t close the popup.
    • OK – saves the data from the editor in the current row, and closes the editor popup.
    • Right top “X” button is equal to “Cancel” – discards all unsaved changes and closes the popup

When you click “Save” or “OK” data is first validated and then sent to MySQL engine. If the data is invalid, or MySQL returns an error you will see an error message and the problematic fields will be highlighted:

Saving MySQL data from WordPress front-end

While the data saving is in progress you will see an overlay that indicates that the process is going on in the background. If the data is sent fine you will see a success message.

Editing MySQL tables from WordPress

Please read the next documentation section to see full details on how to configure columns in the editable table correctly.

Please take a note on some limitations of editing tables with wpDataTables

  • Only one MySQL table can be edited at a time. Queries from multiple tables with joins cannot be used for editable feature, since SQL UPDATE and INSERT statements are generated automatically, and for now there is no way to update multiple tables – but we are working on this.
  • Only MySQL tables or tables created with first 2 options of Table Constructor can be edited – I know this is kind of obvious, but after a number of requests I had to put this here as well.
  • Server-side processing MUST be turned on for front-end editing – but it will turn on automatically if you forget to enable it.
  • MySQL views cannot be edited properly – only one of the underlying tables can in case you pass the proper ID.

Never miss new features!

Join 2000+ newsletter subscribers

Never miss notifications about new cool features, promotions, giveaways or freebies - subscribe to our newsletter! We send about one mail per month, and do our best to keep our announcements interesting.

We never spam or disclose your address to anyone.