Please wait...

wpDataTables Front-End Overview

Video versionA video overview of the wpDataTables front-end sections

Table elements overviewControl elements of a table rendered in the front-end of WordPress site

wpDataTables Front-end Overview
  1. Table title. If you have set a title on the table edit page, you will see it here in a
    <h3> HTML element. You can disable the showing of title on the page if you do not want it here, just disable the corresponding switch in the ‘display’ tab of table settings.
  2. Selector for number of entries. This is a dropdown selectbox, where the front-end user can choose how many rows does he want to have in the table. If you specify a number of rows in the table edit page in the plugin back-end, this value will be pre-selected by default.
  3. TableTools block. This block contains buttons for Column Visibility toggle, CSV, Excel, PDF export, also copy to clipboard function and print view. See section below for more details about TableTools extension. If the table is editable, the Add new, Edit and Delete buttons are also inserted in this block. If “Clear filters” feature is enabled it will render Clear filters button as well.
  4. Global table search field. This input field allows front-end users to filter the table contents by some value. The algorithm searches within all cells, and shows only rows where at least one of the cells contains the value entered in the search field. If the table does not use server-side processing feature, it will also search by multiple parts, e.g. input “Asia 12” will search by both values “Asia” and “12” in all cells. In tables with server-side processing this is not implemented because of implied performance burden.
  5. Active (sorted) column. The column that is slightly highlighted is the current active column, which means that the table data is sorted by the values from this column in ascending or descending order. You can see the direction of the small triangle near the column heading: up means ascending order, down means descending. Sorting rules depend on the column type that you have provided, see documentation section 6 for more info on column types and features.
  6. Sorting trigger button. The same triangle can be used to activate the sorting on a different column, or change the sorting direction. If you press control when clicking on the sorting trigger button you can sort by two columns.
  7. Advanced filtering block. The advanced filtering block is visible if you enabled advanced filtering for the table in the back-end (see this documentation section for more details on the table setup). Each column gets a separate filtering input, which allows users to filter the table data by the values in this column. See this documentation section for detailed overview of the advanced filtering block.
  8. Info section. In this section you can see how many rows does the table have, and which rows are currently shown. 9. Pagination controls. Using this controls user scan navigate through pages. Each page contains as many rows as the user defines per each table.
  9. Pagination. The default page control that refers to numbering pages in a table.

Table ToolsExport tools for table

Table tools are a set of useful features built on a set of JS libraries, which allow users to have some extras on the table frontend: toggle columns visibility, copy the table content to the clipboard, export the table content to a PDF, CSV or an Excel file, or just to hide everything except for the table on the page, to get a print view. See this documentation section for more info about TableTools library. When you create an editable table, the editing controls are also rendered in the TableTools block. See this documentation section  for more info on editable tables.

Front-end editorA popup dialog for editing table data

Front-end editor is available only for MySQL-based tables with front-end editing and server-side processing feature enabled. If you configure the front-end editing for the table you get additional tables in the TableTools block: Edit, New and Delete buttons. Also it will be possible to select rows in the table by clicking them.

When a row is selected, or when you click on the “New” button, you will get the editor popup. The exact look of the popup will depend on the table that you created and configured.

  1. Column names – in the left side you will see the column names. For each column a separate entry will be rendered.
  2. Editor inputs – To the right of each column name the editor inputs will be rendered. Exact look of each input will depend on the configuration that you define for it. Please see documentation chapter 7 for detailed information and instructions on all possible input types and front-end table editing in general.
  3. Front-end editor navigation and control – in this area users can see different buttons that allow the to navigate through table entries and control the editing process:
    • Cancel: revert all changes and close the editing gialog
    • Prev & Next: navigate between the rows in the table. Also switches the pages of the table.
    • Apply and add new: save the entry, but do not close the dialog.
    • OK: save the entry and close the editing dialog.

Please note that apart from editing through a popup dialog wpDataTables also supports inline editing and Spreadsheet / Excel-like editing.

wpDataTables Configurating Editable Tables

ChartsCharts rendered by Google Charts, HighCharts and Chart.js

Charts (wpDataCharts) are also a part of wpDataTables front-end. There are not much elements:

  1. Title – you can remove it from the page if you don’t need it.
  2. Axes – the chart axes (e.g. Date, Hits for this example) are customizable and you can define your own labels for them.
  3. Series – series are the the main data representing element of charts. Their outlook depend on the rendering engine and the chart type that you choose – these can be columns, bars, lines, areas, pie slices, etc.
  4. Legend – legend shows the chart series names, and also can be used to toggle them for the Highcharts rendering engine. Can be removed in the chart settings.
  5. Grid. Grid below the axes can be toggled in the chart settings.

There are also other features in charts that can be customized (depending on the library that you choose) – see the documentation on creating charts for more details.

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.