How to create editable tables manually in WP Admin

One of most common uses of wpDataTables is to create tables, and fill them with data taken from the WordPress admin panel, without accessing or having any pre-existing data source available (Excel, CSV, Google Spreadsheet, MySQL DB, etc.). The editable table you create will be stored in MySQL, and you will be able to edit it at an any later time, or make it available for editing from the front-end.

We’ll go through the table creation process together, and explain all the available options as we proceed.

To start creating a table manually, open your WordPress admin panel, go to wpDataTables -> Create a Table, choose the second option “Create a table manually”, and click “Next“:

Going through the elements in detail:

1. Table name input – here you can define a table name that will enable you to identify this table among any other wpDataTables. This table name can be redefined at any later time.
2. Number of columns input – provide the number of columns that your table will have (e.g. enter 10, if you plan to have 10 columns). Another option you can use to change the column numbers is to add them with the + button (element #9) or remove them with the X button (element #8). You can always add or remove columns later, after the table has been created.
3. Column block – column blocks represent columns of your future table; one block stands for one column.
4. Column header – with this input, you define the header that will identify the column; it will be visible in the frontend.
5. Column type – this input defines the data type of the column, the filter type for the column, and the editor input type.
6. Editor predefined value. This is an optional input, that allows you to define a default value of the column which will be pre-filled in the editor inputs, and in the filter inputs (this can be disabled). If the column type is One-line selectbox, or Multi-line selectbox, and some possible values are defined (see point #7), this input will become a dropdown of the possible values.
7. Possible values. This is a “taggable” input, which appears only for One-line selectbox and Multi-line selectbox types. Here you can define all the possible values, separating them with a comma.
8. “X” / Remove column block button. This button removes a column block. Using it can be more convenient than changing the column number with an input.
9. Add column button. This button adds one more column block.
10. Create the table. This is a dropdown button with options to choose an editor type. After choosing one, it creates the table on the MySQL side, creates a wpDataTable, and opens the chosen editor type, from which you can start editing the table data.

Let’s configure an example table and fill it in with some data.

We use this configuration for columns (a dummy clients table):

1. Company name, type: a one-line string
2. Sector, type: a one-line selectbox, possible values are: “Architecture, Business Consulting, Construction, Technology, IT”
3. Yearly revenue, type: float
4. Client since, type: date

When you have finished configuring the table, click “Create the table”. A dropdown will open with options to open the table in a standard editor or an Excel-like editor.

If you have an older version of WordPress (prior to WordPress 5), you will have this editor by default, but if you updated your website to WordPress 5+, you can still use this editor with the help of the Classic Editor Plugin.

Once you’ve filled in some values in the table, the procedure of inserting it in your post or page is simple. Open (or create a new) post or page, place the cursor in the position where you would like to insert the table, click the “Insert a wpDataTable” button in the editor, and locate the newly-created table.

Another option is to copy&paste the table shortcode manually (you can see it in the back-end editor).

If you are using Gutenberg editor, Elementor, or WPBakery page builder, you can check out the section for Adding wpDataTables shortcodes on the page.