See video version of the tutorial

First use case of wpDataTables table constructor is a possibility to create a table and fill it in from WordPress admin panel without having any pre-existing data source (Excel, CSV, Google Spreadsheet, MySQL DB or anything else). The created table will be stored in MySQL, and you will be able to edit it at an any later point, or make editable from the front-end.

Let’s go through the table creation process together, and we will explain all options along the way.

To start creating a table manually, you need to open your WordPress admin panel, go to wpDataTables -> wpDataTable Constructor, choose the first option “I would like to prepare structure and input all the data manually” and click “Next“:

Creating WordPress tables with a wizard

You will see the wizard step that helps you to create table structure (note: if you at any step noticed that you made a mistake you can just click “Previous” and go back):

Creating wpDataTables with Table Constructor

Let’s go through all elements in detail:

  1. Table name input – here you can define a table name that will help you to identify this table among other wpDataTables. Can be redefined at any time later.
  2. Column number input – here you can provide the number of columns that your table will have (e.g. just put 10 if you plan to have 10 columns). Another option to change the column numbers is to just add them with a + button (element #9) or remove with X button (element #8). You can add or remove columns later when the table is already created.
  3. Column block – such blocks represent columns of your future table; one block stands for one column.
  4. Column header – in this input you can define the header that will be identify the column and be visible in the frontend.
  5. Column type – this input helps you to define with only one selection the data type of the column, filter type for this column, and the editor input type. Possible options:
    • One-line string. This is the most “simple” text type, suitable for short strings, the generated column will have a “string” (“text”) data type, one-line text input filter type, and one-line text input editor input type in the editor.
    • Multi-line string. This is another option for a text type, suitable for longer strings, the generated column will have a string data type, one-line text input filter type, and multi-line editor (“memo”) input type.
    • One-line selectbox. This is an option for columns, where cells can have one of several possible options as a value at a time (e.g. colors: “red”, “green”, “blue”). The generated column will have a string data type, a select box filter, a select box editor input.
    • Multi-line selectbox. This is an option for columns, where cells can have several of possible options as a value at a time (e.g. purchased modules: module 1, module 2, module 3). The generated columns will have a string data type, a select box filter, a multi-selectbox editor input.
    • Integer. This is an option for integer numeric columns. The generated column will have an integer data type, a number filter, and a text/numeric editor input.
    • Float. This is an option for float numeric columns. The generated column will have a float data type, a number filter, and a masked text/numeric editor input.
    • Date. This is an option for date columns. The generated columns will have a date data type, a date range filter, and a datepicker editor input.
    • URL link. This is an option for URL link columns. The generated columns will have an URL link data type, a text filter, and a text editor input with URL validation.
    • E-mail link. This is an option for E-mail columns. The generated columns will have an e-mail link data type, a text filter and a text editor input type with E-mail address validation.
    • Image. This is an option for image columns. The generated columns will have an Image data type, no filter, and a text editor input.
    • Attachment. This is an option for attachment columns. The generated columns will have a “URL link data type”, no filter, an a “Browse media library” input to attach files.
  6. Default value. This is an optional input, here you can 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 quickly removes a column block. Might be more convenient then changing the column number with an input.
  9. “+” / Add column block button. This button quickly adds one more column block.
  10. Create the table and open in editor. This is basically a “save” button: it creates the table on MySQL side, creates a wpDataTable and opens a back-end editor, where 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: one-line string
  2. Sector, type: one-line selectbox, possible values: “Architecture, Business Consulting, Construction, Technology, IT”
  3. Yearly revenue, type: float
  4. Client since, type: date
Creating tables with wpDataTables Table Constructor

When you are finished with configuring the table, click “Create the table and open in editor”. The table will be generated and the back-end editor will open.

The back-end editor is basically a table preview, where you can also enter new rows, delete rows, edit rows; also you can add new columns and remove existing ones. We will not stop here on the back-end editor description, please see this documentation section for the full overview of the back-end editor where it is explained how to fill in the data.

Edit tables in WordPress

We entered some 20 entries with the back-end table editor. See how the table looks now “live”:

Dummy clients table

wdt_IDCompany nameSectorYearly revenueClient since
1Black TurtleArchitecture10.000.000,0029 May 2011
2Clockwork OrangeBusiness Consulting3.000.000,0001 May 2003
3Theodore ConsultingTechnology11.000.000,0017 May 2004
4White Wing IndustriesBusiness Consulting1.250.000,0018 May 2006
5Twinkles Inc.IT8.000.000,0001 May 2006
6The Large CompanyConstruction7.000.000,0001 Jun 2015
7Non-Standard ProductionConstruction3.900.000,0005 Jun 2007
8Jailbreak MachineryIT27.500.000,0001 Jun 2001
9Infinite Scroll ManiacsIT20.000.000,0028 May 1996
10Thebest Construction AgencyConstruction90.000.000,0001 May 1996
wdt_IDCompany nameSectorYearly revenueClient since

When you filled in some values in the table, the procedure of inserting it in your post or page is simple. Open (or create 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 table that you just created.

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

Inserting manually created pages in WordPress posts or pages

That’s it! Not so complicated, is it?

The next thing to read is either the back-end editor in detail, or initializing tables from existing CSV or Excel files with the Table Constructor.

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.