Tables can be created from AUTOMAIT dashboard without pre-defining any data source, by describing the table structure and filling in the values in cells manually through an editor. To do this, you can use the Table Creation Wizard, it also allows importing CSV, Excel or Google Spreadsheets data to editable Tables. Table data for tables created this way will be stored in the database, will always be editable, and can utilize the benefits of server-side processing.
‘Simple tables’ can be anything but simple, though, as you can now merge cells, style each cell differently, add star ratings to cells, and so much more.
Until now, creating manual tables was the simplest process in the plugin – you would choose the number of columns, column types, editor input type, predefined values, and so on.
With simple tables, we’ve simplified the process, so to create this table you need to choose the first option on the list – „Create a simple table from scratch“, and click on Next in the bottom right corner.
The next step is to define the table’s name, number of columns and number of rows.
Unlike Manual tables, you don’t need to define column types or choose editor input types for these tables, as Simple tables accept everything, and you’re able to rearrange columns and rows with a simple drag and drop feature. We’ll get to that later on.
After you choose your table’s name and set up the number of columns and rows, simply click on „Generate table“ button, and you’ll be taken to your new, empty table, like the one you see on the left.
You’re welcome to style the table as you want, even before adding content in it, but for this example, we’ll add some AMD and Intel processors’ specifications.
Table Preview – Below every table, you will see how the table will look like on front-end on desktops, tablets and mobile devices. Previews are not live, so when you format the table, you’ll need to click on “Save Changes” in the top right section of the screen in order to see the changes in the preview windows.
Just like all other table types, Simple tables have table settings tabs above the table: Edit Data, Display, and Responsive. This new table type doesn’t have many settings in there (that’s partly why we named them “Simple” tables), but we’ll introduce each tab to you, one by one, in the section below.
Edit Data tab is where you edit the table’s contents, formatting and style. Above the table, you can see available table tools. Most of you understand these tools, but we’ll break them down real quick, in order to help all newbies diving into tables.
|Manufacturer||Model||Speed||No. of cores||Technology|
|AMD||Ryzen 9 3900XT||3.8GHz||12||7nm|
|AMD||Ryzen 7 3800XT||3.9GHz||8||7nm|
There are no limitations to this, so you can play around with background and text colors – formatting each cell individually:
|Manufacturer||Model||Speed||No. of cores||Technology|
|AMD||Ryzen 9 3900XT||3.8GHz||12||7nm|
|AMD||Ryzen 7 3800XT||3.9GHz||8||7nm|
Also, as you can see in the table above, all cells are currently aligned to the middle both vertically and horizontally, so let’s continue explaining available table tools.
A: Word wrap into new lines of the same cell
B: Overflow over next cell(s)
C: Clip – cut off the text when it reaches the cell’s border with …
Most tools are also available if you right-click on the table.
An advantage of this table type is the ability to reorder and resize rows and columns freely. To reorder them, simply click on rows or columns you wish to move, and you’ll see the cursor change to a hand. Then you can drag and drop the selection, as shown in the GIF below:
Table can be navigated through using keyboard shortcuts as well:
Arrow Up ↑ – move to the cell above the current active cell (if it exists)
Arrow Down ↓ – move to the cell below the current active cell (if it exists)
Arrow Left ← – move to the cell on the left of the current active cell (if it exists)
Arrow Right → – move to the cell on the right of the current active cell (if it exists)
Tab – move to the cell on the right side of the current active cell (if it exists)
Tab + Shift – move to the cell on the left side of the current active cell (if it exists)
Home – Move to the first cell in a row
End – Move to the last cell in a row
Ctrl + Home – move to the first cell in a column
Ctrl + End – move to the last cell in a column
Ctrl + A – select all
Shift + Arrow Up ↑ – extend selection of the cell above
Shift + Arrow Down ↓ – extend selection of the cell underneath
Shift + Arrow Right → – extend selection of the cell on the right
Shift + Arrow Left ← – extend selection of the cell on the left
Shift + Home – select all cells in the row to the left, including the current cell
Shift + End – select all cells in the row to the right, including the current cell
Ctrl + Shift + Home – select all cells in the column to the top including the current cell
Ctrl + Shift + End – select all cells in the column to the bottom including the current cell
Enter – open/close cell editor
F2 – open cell editor
Esc – cancel editing and close cell editor
Backspace – empty cell
Delete – empty cell
Ctrl + C – copy cell‘s content
Ctrl + X – cut cell‘s content
Ctrl + V – paste cell‘s content
Ctrl + Enter – fill all selected cells with edited cell‘s value
Ctrl + Z – undo
Ctrl + Y – redo
The “Display” tab provides 4 options.
The “Responsive” tab also provides 4 options.
Enabling the responsive mode basically pivots columns into rows. If you don’t enable the option to use the first row as table header, each cell will be located in a separate row.
When column headers are enabled, on tablets and mobiles the table is split into 2 columns and as many rows as there are columns, only repeated for every new row in the table. For example, when Responsive mode and column headers are enabled, the table will look like this on tablets and mobiles.
Also, when this is enabled, „Scrollable“ and „Limit table width“ check-boxes will be disabled. These two features work just like in any other Table, so if you enable „Scrollable“, „Limit table width“ will disappear, and if you enable „Limit table width“ a new option – „Word Wrap“ will be enabled, and „Scrollable“ will disappear from the page.
Horizontal scroll allows you to scroll through the table horizontally, which may come in handy for larger tables.
Limit Table Width sets the table’s width to fit the page, widget or the container in which the table is added.
When vertical scroll is enabled, you will be able to set its height on the page.
The number defined here is in pixels, so there‘s no need to add „px“ at the end.
To add these tables on front-end, you can use the shortcode next to the title:
Or you can use blocks in classic and Gutenberg editors, or within page builders:
One of most common uses of Tables is to create tables, and fill them with data taken from the AUTOMAIT dashboard, 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 AUTOMAIT dashboard, go to Tables -> Create a Table, choose the second option “Create a table manually”, and click “Next“:
You will be shown the wizard step that will assist you to create the table structure (Note: if during any step, you notice that you’ve made a mistake, click “Previous” and go back):
Going through the elements in detail:
Column type options:
Let’s configure an example table and fill it in with some data.
We use this configuration for columns (a dummy clients table):
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.
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).
That’s it! Not complicated at all!
In this tutorial, we will learn how to create editable tables from an Excel or CSV imported data, or from a Google Spreadsheet using DataTables WordPress plugin. Let’s watch a live demo of the imported table first, and then go through the steps needed to create it.
In many cases, you might have an initial file with the table data, but this table needs to be regularly updated (e.g. if it is a price list, a catalog, etc.). wpDataTables has two options here for you:
In this tutorial, we will learn how to create a editable tables from an Excel or CSV imported data, or from a Google Spreadsheet. Let’s watch a live demo of the imported table first, and then go through the steps needed to create it.
|Company||Phone number||Creation date||Sector|
|Cursus In Incorporated||(002) 45726441||25/11/2003||IT|
|Adipiscing Company||(00606) 7742008||22/09/2005||IT|
|Adipiscing Lacus Corporation||(05646) 4683131||08/07/2008||IT|
|Pede Company||(04752) 4145339||24/12/2007||IT|
|Ut Cursus Luctus Institute||(068) 40241523||02/01/2002||IT|
|Felis Limited||(001) 91497961||13/07/2004||IT|
|Sit Amet Industries||(087) 17370346||15/01/2013||IT|
|Non Arcu Vivamus Associates||(0406) 82754651||21/05/2015||IT|
|Blandit Congue In Limited||(07333) 6155072||02/08/2010||IT|
|Tortor Company||(035889) 956803||04/04/2008||IT|
Go to Rules & Metrics -> Create a Table and choose Create a table by importing data from data source option.
The next step will be to locate the file you want to import using the WordPress Media Library. Click on the “Upload” button to open the Media Library and choose your CSV or Excel file:
We will use this CSV file to create an editable table. You can download it and use it as well. Importing Excel files is also supported (XLS, XLSX).
To get from Excel to AUTOMAIT, you can either upload the file using the Media Library, or browse the file that was previously uploaded. After selecting the file click the “Choose file” button.
If you want to use a Google Spreadsheet first you need to prepare the table data in a Google Spreadsheet. Then Go to File -> Publish to the web and click “Publish”. Copy this link from your browser since you will use it in Tables and paste it in “Input file path or URL”.
Now, Tables will need to “take a look” at the source to initialize the table structure before we can create the actual Table. To do this, click “Next”. Tables will initialize the column metadata and show you the pre-import table setup screen:
In this screen, you can configure the columns that will be imported, reorder the columns, or skip some columns during the import. You can also change the data type, and even add more columns.
The table name input will be used for Table name that will help you to identify it later, and can optionally be displayed in the page above the table.
To reorder the columns during the import, drag & drop the column blocks with the mouse.
To remove (ignore) some columns during the import, just click the “trash can” button in the top right of the column block.
To add a column, click the “Add column” button after the column blocks.
For each column you can redefine/define:
Column header – this is a header that will be shown above each column.
Type – this is a single selectbox that defines the column data type, editor input type for the back-end (and front-end) editor, and the filter type.
Default value. This is an optional input, where you can define a default value of the column which will be pre-filled in the editor inputs, and in the filter inputs (which 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.
Data preview shows the data preview (first 4 cells) for the initialized columns. Data preview does not show up for manually added column blocks.
To create the Table, click the “Create table” button. A dropdown will appear, where you can choose whether you prefer to open the table in the standard editor, or in an Excel-like editor. After choosing one, the Table will be generated, and you will be redirected to the back-end editor.
There are 2 primary ways to create editable Tables:
Tables created manually with Table Constructor are back-end editable by default; to allow front-end editing, simply open the “Editing” tab in the table configuration settings, click the “Allow editing” option, and click the “Apply” button (the ID column and the table name will be pre-configured for this type of tables by default).
Your front-end users will then be able to edit the table data.
When the table is saved, and inserted in the post or page, the look of the table in the front-end is slightly different from that of a typical non-editable table. You’ll see three new buttons in the TableTools section of the table (or just these three if you didn’t enable TableTools for this Table).
Manual tables will be always editable on the table configuration page, and you will always see these three buttons independently from the “Allow editing” feature.
It is also possible to select a row in the table by clicking on it. When you do so, the row will become highlighted (you can change the highlight color along with other table colors in the table settings page).
To make editing possible, you need to choose editor input types for the columns we want to allow users to edit. For this, you need to open the column configuration panel by clicking on “Column settings” button or by clicking the “Complete column list” button which enables you to open the column configuration for each column you want to make editable. Then, you need to make a selection in “Editor input type” dropdown under the “Editing” tab.
When the editor input types are chosen and saved, you can return to the table front-end (open the post or page where you inserted the table), 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.
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 which tells you which field is problematic and what you need to change.
While the data saving is in progress, you will see an overlay indicating that the process is going on in the background. If the data is sent correctly, you will see a success message.
For many cases, it is useful to calculate a sum, average, minimum and maximum of all the values for a given column. For example, total sales within a month, the total price of products in an order, calculating maximum profit, minimum wage, average grade etc. the Decision Manager supports a sum / totals, average, minimum and maximum row for numeric columns, see this table as an example, and try to filter it by a date range to see how the totals recalculate:
|∑ = 54,387||∑ = 55,148||∑ = 57,774||∑ = 52,211|
|Avg = 543.87||Avg = 551.48||Avg = 577.74||Avg = 522.11|
|Min = 105||Min = 108||Min = 106||Min = 104|
|Max = 997||Max = 967||Max = 1,000||Max = 984|
Adding all these features is simple. In the column settings, click on the Data tab and check the Calculate checkboxes for the selected column you want to calculate these functions.
If these checkboxes are checked for at least one row, a functions row will appear in the bottom.
Functions are recalculated on table redraw (i.e. when you filter).
Also take note of the shortcode below each calculated function.
By pasting the shortcode, you can display the results of the functions somewhere outside the table, or you can paste this code in a cell belonging to another table.
To achieve this you will need to check the Parse shortcodes option on the wpDataTables Settings page.
If your dataset used for Table creation is not comprehensive – if for example, it shows only the price without VAT tax, or you need a column showing a result of calculation based on other columns’ cell values, you can use the formula (calculated) columns.
See this table: “Tax” and “Difference” columns do not exist in the dataset. They are calculated “on the fly” using the formula columns feature.
|Region||Type||Net cost||Catalog cost||Tax||Difference|
After you click the “Add formula a column” button, you will see a popup formula constructor. It has a fixed name ‘formula_1’, ‘formula_2’, etc. – depending on the amount of formulas that you added.
The formula constructor popup has several main elements:
Additionally, there is an explanation text on the top.
You can use columns (values for each cell will be inserted), or number values. Only numeric columns are allowed (non-numeric will be parsed as 0). Basic math operations and brackets are supported. Example: col1*((col2+2)-col3*sin(col4-3)).
To calculate the “Tax” column in the above example, we can simply use the catalog cost column value, multiply it by some number, and click “Save“.
Now let’s change the displayed header of the formula column. To do that, click the button for column settings.
Enter the new value in the “Displayed header” input in the first tab column setting and click apply.
If you want to change the formula for a calculation you can go to the “Data” tab and click on the “Open Formula Editor” button.
After you click on THE “Open Formula Editor” button, the formula constructor popup will appear. You can use it to adjust the formula that is used for calculation.
Formula columns can be easily deleted by clicking the “Delete” button in the column header area in the live table preview.
There are several limitations when using formula columns in Tables:
See the steps needed to create a responsive chart in AUTOMAIT using the Chart Creation Wizard of the Decision Manager, a very easy step-by-step generator.
On each step you can go back to change the settings. In the “Formatting and preview” step, you can see a live chart preview, so you can check if you’re satisfied with the look of the chart before saving it and inserting it to a WordPress post or page. You can see the current step in the upper part of the screen in the breadcrumbs.
To open the Chart Creation Wizard, open your AUTOMAIT dashboard and go to Rules & Metrics -> Create a Chart, where you will define a chart name that will help you to identify it later, and choose one of the render engines – Google Charts, Highcharts or Chart.js.
When you choose the rendering engine, the Decision Manager will show a list of possible chart types, the list varies depending on the engine. For this example, we will use the Highcharts area chart. After you choose the chart, click Next to go to the next step.
On the “Data source” step you will need to define the table that will be used as the data source for the new chart. This is done with a simple selectbox.
On the “Data range” step, you will need to provide the data range for the future chart. This consists of several blocks. The first block is the Column range picker.
In the column range picker, you can select the table columns that will be used in the future chart. In the left container you can see a list of all the columns that the table has, with their names and data types. The items of this list can be clicked to be selected; also, there are “Select all” and “Deselect all” shortcuts above them. The right container represents the list of columns that will be used in the chart. The items in this list can be drag&dropped for reordering. Add all, Add selected, Remove selected, Remove all buttons are between the two containers. These allow adding columns to the chart or removing them. The right container also displays hints if an incorrect amount or incorrect type of columns for the chosen chart type was selected (e.g., it shows that there are not enough columns added for the selected chart type).
Next block is the Row range picker block:
The Decision Manager allows you to choose not only the columns that will be used in the chart in the WordPress front-end, but also the rows. By default, it is set to “All rows“, but you can choose individual rows or row ranges as well. For this, choose “Pick range” in the dropdown, and click on the “Range picker…” button that appears.
When you click on the “Range picker…” button, the row range picker popup will appear.
Range picker shows the data of your table, and you can select the cells that you would like to use in the chart there.
There are 2 options to pick a range:
When you’re done, click “OK“, and the range will be saved (see the hint below the dropdown which will show the number of selected rows).
The last option on this step is the “Follow table filtering” checkbox. It is available only if you choose to use “All rows” in the “Row range” selectbox.
When the data range is chosen, you can click Next to proceed. The next step is “Formatting and preview“. Changes that are made on the chart are instantly visible on the chart that is rendered on the right side of the screen. The formatting step is divided into categories representing different chart elements.
In the first category you can change basic chart options like:
In the “Series” category you can customize actual series options for series that are used in the chart:
The “Axes” section describes chart axes options; the X(H) axis or category axis and the Y(V) axis or value axis. Options that are available for axes are:
The chart’s main title options:
Options for the tooltip that appears when the user hovers over a series or point:
The legend is a box containing a symbol and name for each series item or point item in the chart:
The “Exporting” category defines the exporting module that allows your users to download the chart as PDF, PNG, JPG or SVG vector images (Highcharts only):
Credits label in the lower right corner of the chart
You can experiment with the settings and click Next to see the chart preview. If you’re not satisfied, you can always go back and change these settings:
When you’re satisfied with the preview, click Next again so your chart will be saved in the WordPress database, and a shortcode will be generated for you. Click on the shortcode button, and the shortcode will be directly saved to your clipboard.
To insert the chart in a page you simply copy the generated shortcode, and insert it in your page where you need it.