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“:
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):
Let’s go through all elements in detail:
- 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.
- 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.
- Column block – such blocks represent columns of your future table; one block stands for one column.
- Column header – in this input you can define the header that will be identify the column and be visible in the frontend.
- 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.
- 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.
- 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.
- “X” / Remove column block button. This button quickly removes a column block. Might be more convenient then changing the column number with an input.
- “+” / Add column block button. This button quickly adds one more column block.
- 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):
- Company name, type: one-line string
- Sector, type: one-line selectbox, possible values: “Architecture, Business Consulting, Construction, Technology, IT”
- Yearly revenue, type: float
- Client since, type: date
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.
We entered some 20 entries with the back-end table editor. See how the table looks now “live”:
Dummy clients table
|wdt_ID||Company name||Sector||Yearly revenue||Client since|
|1||Black Turtle||Architecture||10.000.000,00||29 May 2011|
|2||Clockwork Orange||Business Consulting||3.000.000,00||01 May 2003|
|3||Theodore Consulting||Technology||11.000.000,00||17 May 2004|
|4||White Wing Industries||Business Consulting||1.250.000,00||18 May 2006|
|5||Twinkles Inc.||IT||8.000.000,00||01 May 2006|
|6||The Large Company||Construction||7.000.000,00||01 Jun 2015|
|7||Non-Standard Production||Construction||3.900.000,00||05 Jun 2007|
|8||Jailbreak Machinery||IT||27.500.000,00||01 Jun 2001|
|9||Infinite Scroll Maniacs||IT||20.000.000,00||28 May 1996|
|10||Thebest Construction Agency||Construction||90.000.000,00||01 May 1996|
|wdt_ID||Company name||Sector||Yearly revenue||Client 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).
That’s it! Not so complicated, is it?
- Creating non-editable tables from Excel files (Add from Data Source)
- Creating non-editable tables from Google Spreadsheets (Add from Data Source)
- Creating non-editable tables from CSV files (Add from Data Source)
- Creating tables based on MySQL queries (Add from Data Source)
- Creating editable tables based by importing data from Excel, CSV or Google Spreadsheets