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.

Most tools are also available if you right-click on the table.

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.

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“:

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 Tables. 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 Table, 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.

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!

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.

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:

• Create the tables manually or 
• Import the table data from Excel or CSV

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.

• 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 will 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, unless the first one is selected. If necessary, it switches to the previous page, and puts the data from this row in the front-end editor. Changes that were not saved will be discarded.
  • Next >> – selects the next row of the table, unless the last one is selected. If necessary, it switches the table to the next page, and puts the data from this row to the front-end editor inputs. Changes that weren’t saved will be discarded.
  • Apply and add new – saves the data from the editor in the current row, it doesn’t close the popup, but opens a new editor with the blank input fields.
  • OK – saves the data from the editor in the current row, and closes the editor popup.
  • Right top “X” button is equal to “Cancel” – this 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 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.

1. Go to your AUTOMAIT dashboard, Rules & Metrics
2. Click on Settings
3. Check the “Parse shortcodes” checkbox

1. Columns that can be used in the formula. Please note that only numeric (float and integer columns) can be used in formula columns.
2. Formula. The created formula itself.
3. Supported operators. Formulas in Tables support all arithmetic operators, brackets to define the calculation order, and trigonometric operators.
4. Preview button and preview section. Once you prepare the formula, you can click this button to see the result for the first 5 rows of your table to verify the calculation is correct.

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)).

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 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:

• Click&drag (Excel-like): click on a cell that you want to set as a range start, and move your mouse (e.g., diagonally) to the cell that you want to set as the range end. It will also override the columns you chose in the column range picker if the column set will be different.
• Use checkboxes above the columns and to the left of rows. All rows and columns that have checkboxes checked are for the range. Column range can be overridden with this option as well.

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:

• Chart width – The width of the chart
• Chart height – The height of the chart.
• Responsive width – If you tick this, chart width will always adjust to 100% of the width of the container
• Group chart – If you tick this checkbox, the values of the rows with the same label will be summed up and rendered as a single series. If you leave it unticked, all the rows will be rendered as a separate series.
• Background color – The background color for the tooltip.
• Border width – The pixel width of the outer chart border.
• Border color – The color of the outer chart border.
• Border radius – The corner radius of the outer chart border.
• Zoom type (Highcharts only) – This decides in which dimensions the user can zoom by dragging the mouse.
• Panning (Highcharts only) – Allows panning in a chart. This is best used with Pan key to combine zooming and panning.
• Pan key (Highcharts only) – Allows setting a key to switch between zooming and panning.
• Plot background color – The background color or gradient for the plot area
• Plot background image  (Highcharts only) – The URL for an image to use as the plot background.
• Plot border width – The pixel width of the plot area border.
• Plot border color – The color of the inner chart or plot area border.
• Font size (Chart.js and Google Charts only) – The default font size, in pixels, of all text in the chart.
• Font name (Chart.js and Google Charts only)- The default font face for all text in the chart.

In the “Series” category you can customize actual series options for series that are used in the chart:

• Label
• Color
• Curve type (Google Line Chart only, Chart.js Line and Area)
  
• 3D (Google Pie Chart only) – If true, a three-dimensional chart is displayed.

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:

• Grid
• Grid line style (Highcharts only) – The dash or dot style of the grid lines
• Horizontal axis label – Name of the horizontal axis
• Horizontal crosshair (Highcharts and Google Charts only)- Configures a horizontal crosshair that follows either the mouse pointer or the hovered point lines
• Horizontal axis direction  (Google Charts only)
  – The direction in which the values along the horizontal axis increase. Specify -1 to reverse the value order
• Vertical axis label – Name of the vertical axis
• Vertical crosshair – Configures a vertical crosshair that follows either the mouse pointer or the hovered point lines
• Vertical axis direction (Google Charts only) – The direction in which the values along the vertical axis increase. Specify -1 to reverse the order of the values
• Vertical axis min value – The minimum value of the axis
• Vertical axis max value – The maximum value of the axis
• Invert – Enables inverting the axes, so that the x axis is vertical, and the y axis is horizontal

The chart’s main title options:

• Show/Hide Chart title
• Title floating (Highcharts and Google Charts only)- When the title is floating, the plot area will not move to make space for it
• Title align  (Highcharts only) – The horizontal alignment of the title
• Subtitle  (Highcharts only) – The chart’s subtitle
• Subtitle align  (Highcharts only) – The horizontal alignment of the subtitle

Options for the tooltip that appears when the user hovers over a series or point:

• Enable/Disable Tooltip
• Background color (Highcharts and Chart.js only)  – The background color for the tooltip
• Border width (Highcharts only)  – The pixel width of the tooltip border
• Border color (Highcharts only) – The color of the tooltip border
• Border radius (Highcharts and Chart.js only) – The radius of the rounded border corners
• Shared tooltip (Highcharts and Chart.js only) – When the tooltip is shared, the entire plot area will capture mouse movement or touch events
• Value prefix (Highcharts only) – A string to prepend to each series’ y value
• Value suffix (Highcharts only) – A string to append to each series’ y value

The legend is a box containing a symbol and name for each series item or point item in the chart:

• Enable/Disable Legend (Highcharts and Chart.js only)
• Background color (Highcharts only) – The background color of the legend
• Title (Highcharts only) – A title to be added on top of the legend
• Layout (Highcharts only) – The layout of the legend items
• Align – The horizontal alignment of the legend box within the chart area
• Vertical align – The vertical alignment of the legend box
• Border width (Highcharts only) – The width of the drawn border around the legend
• Border color (Highcharts only) – The color of the drawn border around the legend
• Border radius (Highcharts only) – The border corner radius of the legend
• Legend position – The position of the legend. Possible values are ‘top’, ‘left’, ‘bottom’ and ‘right’

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):

• Enable/Disable Exporting
• Data labels – Add data labels to improve readability of the exported chart
• File name – The filename, without extension, to use for the exported chart
• Width – The width of the original chart when exported
• Button align – Alignment for the export button
• Button vertical align – The vertical alignment of the export button
• Button color – The color of the symbol’s stroke or line
• Button text – A text string to add to the individual button

Credits label in the lower right corner of the chart

• Enable/Disable Credits
• Credits href – The URL for the credits label
• Credits text – The text for the credits label

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.