See video version of the tutorial

This chapter will give an overview of the front-end look of the plugin: the table itself, additional input and filtering elements.

Front-end of wpDataTables or wpDataCharts is, apparently, a table or/and a chart, with additional front-end controls.

Let’s see a live wpDataTable and then go through all of its sections and controls to explain what is what.

Build tables like this within minutes



Table

Click to view the full image

You can see the generated table frontend view when you open a post or page to which you inserted the shortcode in WordPress frontend. This is the main plugin view. Column headings and order are taken from the settings you provide in the back-end (see this documentation section for more info on configuring the columns).

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 uncheck the checkbox in 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. Global table search field. This input field allows front-end users to filter the table contents by some value; the algorithm searches 33 within all cells, and shows a row if at least one of the cells contains the value entered in the search field. If the table does not use serverside processing feature, it will also search by multiple parts, e.g. input “Asia 12” will search by both values in all cells. In tables with server-side processing this is not implemented because of performance reasons.

4. TableTools block. This block contains buttons for 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.

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.

Table tools

Click to view the full image

Table tools is a third-party library, based on a Flash engine, which allows users to have some extra features on the table frontend: 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.

1. Copy to clipboard – this button allows front-end users to copy the data from the table to the clipboard. An important limitation: for tables with server-side processing feature enabled only the visible rows will be copied. So if you need to copy all rows you would first need to select “Show: all rows” feature in the number of entries selector.

2. Export to PDF – this button creates a PDF file with the data from the table. There’s a same limitation here: only visible rows will be exported from a table with server-side processing feature enabled. Also please keep in mind that Row Grouping does not combine with Export to PDF feature, so if you have grouping columns, they will still be rendered as usual columns in PDF.

3. Export to CSV – this button creates a CSV file with data from the table. Only visible rows will be exported if the table has server-side processing feature enabled. Row grouping does not reflect in the resulting CSV file.

4. Print view – this button hides everything on the page except for the table so that the table can be printed.

5. Export to Excel – this button creates an Excel file with data from the table Only visible rows will be exported if the table has server-side processing feature enabled. Row grouping does not reflect in the resulting Excel file. Please note: the generated file is not a “real” XLS, it’s a CSV with XLS extension, but most Excel installations will handle it correctly.

Filter block

Click to view the full image

Advanced filtering block is a block where filter inputs per each individual column are rendered. You can define a filter type per each column (see documentation this documentation section for the details). Different filter input types produce different filtering behavior.

1. Checkbox filter – this filter type outputs a button on the frontend. When user clicks this button he gets a popup window, where he can choose one ore more values for the column. Only the rows that contain these values in the filtered column will be visible in the table.

2. Dropdown filter – this filter type outputs a dropdown selectbox. Users can choose one value per column, only the rows that contain these values in the filtered column will be visible in the table.

3. Text filter – this filter type renders a simple text input, where frontend users can type whatever they want. Only the rows, where the cells of the filtered column contain the text which user typed in will be then shown in the table.

4. Number filer – this filter type renders an input element where users can type in different numbers. Only the rows, where the cells of the filtered table contain this exact number will be shown in the table.

5. Number filter (see previous one)

6. Date range filter – this filter type renders two datepicker inputs. Users can choose a starting date and (or) ending date. This filter works correctly only on column date types. The rows where the date value of the filtered column is between the starting and ending date will be then shown on the table.

7. Number range filter – this filte type renders two number input elemetns. There user can specify the minimum and (or) maximum number values for the column. The rows where the number value in this column lies between these two numbers will be displayed in the table.

Frontend editor

Click to view the full image

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 a different look of the TableTools block: instead of PDF, CSV and Copy buttons you will get a 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: save the entry, but do not close the dialog.
  • OK: save the entry and close the editing dialog

Charts


Charts (wpDataCharts) are also a part of wpDataTables front-end. There are not much elements (see this documentation section for the full details):

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.

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.