Please wait...

Video versionA video overview of the admin pages for wpDataTables

Tables BrowsewpDataTables browse page

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 pagewpDataTables general config

This page contains all the controls to configure the table settings, data and display.

Common table settings (Excel, CSV, Google Spreadsheet, XML, JSON and Serialized PHP Array-based tables)

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.

Common table settings (MySQL query-based tables)

  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

  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

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

wpDataTable ConstructorTable Constructor - Wizard for creating tables

Table Constructor page is a step-by-step wizard for creating wpDataTables. It allows to quickly create the table in WordPress back-end, import data from CSV, Excel or Google Spreadsheet, or to generate a query either to WordPress database (WPDB) or any MySQL table.

You can see more info on the sub-pages of Table Constructor in the documentation pages:

wpDataTables ChartsCharts Browse page

Charts Browse page lists all the charts generated with wpDataTables plugin and allows to quickly open any chart for editing.

The layout and behaviour of the page is similar to the Tables browse page (see above)

Create Chart WizardChart step-by-step creation wizard

Create Chart wizard is a step-by-step configurator for charts which allows to quickly generate a chart based on data from a wpDataTable.

Chart wizard has several screens (choosing the chart engine, choosing wpDataTable, choosing the data range for chart render, formatting and preview). You can see full tutorial on using it in this documentation section.

SettingswpDataTables plugin settings

Plugin settings page contains several tabs on which you can change some global parameters for the plugin such as number format (decimal and thousand separators), date and time format, decimal places, also the look and feel of the plugin – skin, color and style of different front-end elements.

You can see the full overview on the settings page in this documentation section.

AddonswpDataTables addons

wpDataTables addons page is a catalog of extra addons that can be installed on top of wpDataTables to have some extra functionalities.

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.