See video version of the tutorial

This chapter will give an overview on all of plugin’s back-end (WP Admin) pages, all the settings, checkboxes, inputs, selectboxes, and everything else you might see there.

Tables browse page

Click to view the full image

wpDataTables admin Overview page is the default page which is opened when you open wpDataTables in wp-admin panel. It is used to list all the existing tables in your WordPress DB.

Tables overview page is using standard WordPress table admin interface which you can also see in the Pages or Posts admin page.

It has the following elements:

1. Add new button – this button opens the page for creating a new wpDataTable.

2. Table titles column – this column lists the titles of the tables which you previously created. You will see a “No tables” label when you open it first. By clicking one of the titles you will open the table editor.

3. Table types column – in this column you can see which data source was used to create each particular column. Data sources can be: MySQL, XLS, CSV, XML, Serialized PHP array, and JSON.

4. Shortcodes column – in this column you can see the shortcodes for each table, so you can easily copy&paste them to your WordPress pages or posts.

5. Functions column – in this column you can click on the “Duplicate” button to create a duplicate of the table, or “Edit data” to open the back-end editor for tables created with the Table Constructor.

Add from data source

This page is used to create new wpDataTables from an already existing data source: this means, with this page you can create a wpDataTable if you already prepared the data in MySQL table, Google Spreadsheet, Excel file, CSV, JSON, XML, or a serialized PHP array.

Please refer to this documentation section for all the details and live examples, here we will give just a brief overview.

General setup  (Google Spreadsheet, XML, CSV, Excel, JSON, Serialized PHP Array)

Click to view the full image

The general setup section in case for Excel, Google Spreadsheet, CSV, XML, JSON or Serialized PHP array contains the following elements:

1. Table title – a text input field where you can provide a title for your table. This title will be later displayed in the overview page (see description above), and above the table itself in the front-end.

2. Show table title – this checkbox defines whether the table title would be visible on the page.

3. Table type – a dropdown selectbox where you can choose one of the supported data sources: Excel file, Google Spreadsheet, CSV file, XML, JSON, or serialized PHP array.

4. Input file or URL – a text input box used to specify the input file location. For Google Spreadsheets and for serialized PHP arrays you would need to provide a direct URL to the file which returns the serialized array; for Excel, CSV, XML or JSON you would need to press the “Upload file” button, which would open the WordPress media uploader.

In the media uploader you can either upload a file, or locate a file that you already uploaded at some point in the past. Supported extensions will be adjusted depending on your choice. Then just press the “Use in table” button so the file link would be inserted in the input.

See the full documentation on Excel-based tables, Google Spreadsheet-based tables, CSV-based tables, XML-based tables, JSON-based tables, Serialized PHP array-based tables.

General setup  (MySQL-based wpDataTables)

General setup section looks slightly different in case of MySQL table type.

Click to view the full image

1. Table title – a text input field where you can provide a title for your table. This title will be later displayed in the overview page (see description above), and above the table itself in the front-end.

2. Show table title – this checkbox defines whether the table title would be visible on the page.

3. Table type – a dropdown selectbox where you can choose one of the supported data sources (MySQL in this case).

4. MySQL query – an editor input with SQL syntax highlight where you can input/edit the query that will return data for your wpDataTable.

Please keep in mind that you should not use “SORT BY” section in the query, since wpDataTables has its own sorting mechanism.

5. Placeholders – this button opens a table which controls the placeholders – special variables that you can use in the query to place different values in the query in the runtime. See this documentation section for the full explanation of the placeholders.

There are several other options for making the tables editable, see this documentation section for the full explanation, demos and tutorials.

Additional settings

The additional settings block allows you to configure all the features for the table in general.

Click to view the full image

1. Table title – a text input field where you can provide a title for your table. This title will be later displayed in the overview page (see description above), and above the table itself in the front-end.

2. Show table title – this checkbox defines whether the table title would be visible on the page.

3. Table type – a dropdown selectbox where you can choose one of the supported data sources (MySQL in this case).

4. MySQL query – an editor input with SQL syntax highlight where you can input/edit the query that will return data for your wpDataTable.

1. Server-side processing. This checkbox is enabled only for MySQL-based tables; it enables the server-side processing feature. This feature means that only several rows (10 by default) will be fetched from the server at a time, and each time you switch to the next page, or sort by some column, or search, or filter the table, it will send an AJAX request to the server, return  and render the same amount of rows again. It makes sense for large datasets, smaller ones would work even slower. This is also mandatory for the tables with front-end editing.

See this documentation section for more details

2. Responsive. This feature enables responsiveness for the table, which means that it will be displayed differently on desktops and mobile devices. If your WordPress theme supports responsiveness it makes sense to enable this feature. See this documentation section for all the details.

3. Hide table until completely loaded. If this checkbox is enabled, the table content won’t be visible on the page while it’s initializing. Makes sense to enable it for large file-based tables (Excel, CSV, Google Spreadsheet, etc.)

4. Advanced filtering. This feature enables a possibility to have an individual filter for each column. The filter can be rendered below the column, in the header of the column, in a form above the table, or in the widget which you can put whereever you need. See this documentation section for more details.

5. Filter in form. Enabling checkbox will put the filter in a form that is separated from table, or in a widget, which you can put in a sidebar, footer, or wherever your table allows. See this documentation section for more details.

6. Table tools. Checking this checkbox will enable table tools block for the table frontend (export to CSV, export to Excel, export to PDF, print view). See this documentation section for more details.

7. Enable sorting. Checking this checkbox would allow sorting the data in the tables by clicking on the header of each column in ascending and descending order. See this documentation section for more details.

8. Limit table layout. By default the table in the front-end is as wide as it is needed by the content, and may exceed the parent container width. This checkbox forces the table to fit in the parent container. This checkbox must be checked if you want to set the widths for the columns. See this documentation section for more details.

9. Word Wrap. Checking this checkbox will make the words wrap and extend the cells height if the content does not fit in one line. See this documentation section for more details.

10. Display length. In this dropdown you can choose whether you want to display 10, 25, 50, 100 or all table entries in the front-end by default.

11. Save table. This button saves the table settings and enables the preview and Step 2 if this is a new table. Please note that if you changed the data source or MySQL query for MySQL-based tables, you will also need to configure settings in Step 2 once again.

12. Preview. This button enables preview mode: a popup with the table will appear when you click on it, so you could see how the table will look in the front-end.

13. Close. This button cancels all the changes that you did (after a confirmation) and opens the overview page.

Column settings

When you table structure was read from the data source (or if you defined it manually in the Table Constructor), you will be able to define settings per each column individually.

Click to view the full image

1. Original column header. In this part you will see the original column heading from the input data source – MySQL table column name, or heading from Google Spreadsheet, Excel or CSV file. This label cannot be changed within wpDataTables, it is used to identify the original source column.

2. Displayed header. This is the header that will be shown in the frontend. E.g. if your original MySQL column name is “usr1_from” you can put here “User one from” and this new name will be shown in the frontend table.

3. CSS class(es).  Here you can define one or more CSS classes (separated with a space) which will be applied to all of the cells in this column. This can be used for making style changes – changing the font, align, or anything else that CSS allows.

4. Possible values. This is an optional input field. Here you can provide all the possible values for the column. These values will be used in dropdown filter (see documentation section 5.3 for more details), and also can be used in front-end editor for the dropdown input type (see documentation section 7.2 for more details).

5. Default values. Here you can define the default value for the column. This default value will be then used as a pre-defined filter value for this column, and if the table is editable – as a pre-filled value for the editor input for this column.

6. Filter type. This dropdown is only visible if you set the advanced filtering enabled in Step 1. Here you can choose how to display the filter for this particular column: none, text, number, number range, date range, select box, or checkbox.  See documentation section 5.3 for more details on filtering.

7. Column type. This dropdown defines the data type in the column; which reflects in rendering and the sorting rules for the column. In most of the cases the column type will be defined correctly on the table create step, but you can change them if you like. See documentation chapter 6 for more info on different column types.

8. Hide on tablets. This checkbox is only visible if you set the responsive feature enabled for this table. If this checkbox is checked this column will not be visible on tablets. See documentation section 5.2 for more information about responsive tables.

9. Hide on phones. This checkbox is only visible if you set the responsive feature enabled for this table. If this checkbox is checked this column will not be visible on mobile devices. See documentation section 5.2 for more information about responsive tables.

10. Group column. This radio button is used to select a column which will be used as a column for row grouping. Only one column can be chosen for grouping; for ungrouping please choose the button (14). Please note that grouping does not work correctly with TableTools so you would need to decide which extensions you prefer. See the demo on row grouping here ; check documentation section 6.8 for more info on column grouping.

11. Default sort column. These two radio buttons are used to define which column will be used for initial sorting, in other words, when the table opens in the front-end it will be sorted in ascending or descending order by the column that you define. By default it will be sorted by first column ascendingly.

12. Column position. This input field displays the current index of the column (zero-based). It can be also used to define the column order manually, but it’s easer to just drag& drop the columns around.

13. Width. This input can be used to specify the column width in eiter percents or pixels: but please keep in mind that you need to set the Limit table layout checkbox as enabled if you decide to do so, or these settings will be ignored.

14. Display text before. Here you can define some text that will be shown in front of each cell’s value for this column. This is very useful for currency columns. You can just put “$” here, and leave the column type as float – and each value will be shown as “$23.40”, and the sorting, searching, etc. will still work.

15. Display text after. Same as “Display text before”, but the text will be shown after each cells’s value. You can put e.g. “%” here, to have percentage column.

16. Color. This is a color picker. If you pick a color here, the column will have this color in the front-end.

17. Visible. This checkbox defines if this column will be visible in the front-end. Please keep in mind, that invisible column still are present in the page, so if e.g. you are querying a database, and choose to show 5 columns out of 15, other 10 are still present in browser’s memory. So it is better not to query only columns you might need (e.g. “SELECT column1, column2, column3 FROM table” instead of “SELECT * FROM table”).

 

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.