wpDataTables: Turning the Tables on Data Representation

Information displayed on websites isn’t usually limited to paragraph format. Sometimes, you want your data represented in clean tabular form especially if you’re looking to list or compare objects. This creates a need for an excel like structure that could be inserted into WordPress posts and pages.

Enter a comprehensive and detailed plugin developed for this very purpose- wpDataTables.

wpDataTables – A Data Representation and Management Plugin for WordPress

wpDataTables lets you create tables and charts on your WordPress website with content you can either manually fill with data or import from various data formats. All you need to do is feed the data to the plugin, the rest of the process will be carried out by the plugin itself.

Whether it is importing, filtering, sorting or highlighting data within tables, wpDataTables does it all.

You can create tables and insert them into any post or page of your website with just a few clicks without any coding knowledge.

An Example of Data Represented in a Table using wpDataTables

wpDataTables and its extensions use JavaScript libraries to add features like tabular data representation, pagination, filters, sorting, search etc. The plugin takes things a step ahead and lets you add customizations while applying the DataTable library features.

Here’s how you go about using the plugin:

Let’s say you wish to display employee information on your website.

• You need to begin by creating a table, and configuring the number of columns. The plugin provides you a settings page for each column.
• You can set attributes for each column like headers, values, type of filter, visibility on different platforms, etc.
• Once the table is configured you can import the employee information you wish to tabulate or add it manually.
• The plugin will automatically generate a shortcode which you can use to represent the table. This shortcode can be inserted in any page or post of your choice. You can also use the “wpDataTable” button in the editor panel to post the DataTable.

Here’s a Look at wpDataTable Features in Detail

1. Responsive Data Representation

wpDataTables creates responsive designs keeping in mind the responsiveness of WordPress sites.

All you need to do, to make your table responsive is to check ‘Responsive’ option on the table creation/edit page in WP dashboard, as shown in the image below:

You also have an option in the settings box for each column to show/hide the column in mobiles and tablets according to your discretion.

2. Advanced Filters and Search Options

The advanced filters and search options are tools which allow users to filter the data being represented on the frontend. Different parameters can be set to filter the content table where each filter has a different input type. Multiple filters can be applied at once to a single table.

The six filters available to be applied to tabular data are:

1. Text filter: Filters out the data using keywords or keyword fragments. The entire row with the keyword appears in the results.
2. Number filter: Filters out data using the numbers. Again the entire row the number cell is a part of, appears in the results.
3. Number Range filter: While the Number Filter sieves out exact numbers, the Range Filter lets you set a range so that rows falling within the particular number range can be displayed as the search result.
4. Date Range filter: If data you’ve entered is in the form of dates, you can filter data using the Date Range filter by entering the ‘From’ and ‘To’ dates.
5. Select Box Filter: Some of the filters are predefined by site creators to assist users. These filters appear as a drop-down menus in the front end. These filters are known as ‘values’ and can be defined by authors or are auto-filled by the values generated by the system.

3. Highlighting and Formatting of Data

Another exceptional feature of wpDataTables is conditional formatting to make a certain text more attentive and highlighting of relevant data. This is extremely useful in cases where there is much data to be mined through to find the one that’s relevant to you.

If similar data is grouped by color-coding or styled differently using custom CSS, it can make it easier for a user to distinguish huge amounts of data without any significant edits.

All you have to do is enable the conditional formatting section at the bottom of every column setting.

Conditional formatting involves defining ‘Rules’ for each column separately in the settings. Note: Each new rule has higher priority than the last one and will always override the last rule.

4. Data Representation as Charts

The wpDataTables also provides its users another great option to render data in the form of graphic charts using supported chart engines.

These Charts are created using data from the table itself. Just select the columns you wish to generate a chart of and enable the chart type in “Table Settings”. You can also open the Chart Wizard and pick a rendering engine, after which the plugin shows you a list of around 10+ chart types to pick from.

You need to define the ‘Row Range’ and the ‘Column Range’ for the chart.

A shortcode is generated after the settings are saved which can be added to the page or post of your choice.

5. Multiple Data Sources for Import

wpDataTables can be fed with the data from various data sources. The data sources included are as follows:

• MySQL query: You can generate tables directly from MySQL, providing real-time data. This method is perfect for large databases.
• Google Spreadsheet: This is an extremely popular data source as tables created here are on an online platform where they can be shared, edited, automatically saved on Google Drive, without the need to download any software prerequisites.
• CSV file: A .CSV file- a simple and lightweight data source- can be created using any software like MS Excel, OpenOffice, LibreOffice, Google Spreadsheet etc., and uploaded into the DataTable.
• Excel file: Data can be extracted from a .XLS or .XLSX file created in Excel.
• XML file: A structured .XML file with a single root node and same structured child nodes can be used to function as rows and their attributes as cells.
• Serialized PHP array: Data returned by a PHP file can be used to generate a table.
• JSON file: Data from a JSON file accessible through a URL, can be uploaded into your wpDataTable.

6. Winning Feature: Table Constructor

wpDataTables was developed to make data representation in table format quick and easy. For this purpose, developers have equipped the plugin with a setup wizard called Table Constructor to assist you set-by-step in setting up tables. You can either input data in a table manually, import existing data, or create a table based on your current site content or database.

The Table Constructor makes generating tables thoroughly customizable right from column number, data type, default value etc.

BONUS: Altering the Data of wpDataTable Dynamically!

Now, while data representation is seamlessly handled by the wpDataTables plugin, there may be a case when you might need to alter the content based on your needs.

Here’s how you can go about it!

The Master Filter

The wpDataTable has a master filter – wpdatatables_filter_initial_table_construct– which can be used to alter the data being represented.

This filter is applied to the table object after data is read from a source and columns are generated. It can be used for creating a new table type. This filter has a parameter which contains the entire data passed through the data source. The values can be fetched with the help of this object.

Getting data of rows in a table:

function wdm_get_rows($tbl)
{
    $allDataRows = $tbl->getDataRows();
    // perform operations here
}
add_filter('wpdatatables_filter_initial_table_construct', 'wdm_get_rows', 10, 1);

This code fetches all the data which in the rows of the table. In similar way you can fetch column content too.

Getting data of columns in table:

function wdm_get_columns($tbl)
{
    $allDataColumns = $tbl->getColumns();
    // perform operations here
}
add_filter('wpdatatables_filter_initial_table_construct', 'wdm_get_columns', 10, 1);

When we alter the data in our function, we have to set that data into the parameter again so that the parameters return the altered data for representation. Since several parameters are protected, there aren’t enough methods in the WPDataTable class to set these private values.

We can however write our own methods to set private variables as follows:

/**
* $target = the object in which the data is to be set
* $newVal = the modified value which is to be set
* $prop = the property of object for which the value is to be set
**/
function wdm_set_values($target, $newVal, $prop)
{
    $obj = new WPDataTable();
    $refObject = new ReflectionObject($obj);
    $refProperty = $refObject->getProperty($prop);
    $refProperty->setValue($target, $newVal);
    $refProperty->setAccessible(true);
    $refProperty->setValue($target, $newVal);
    return $target;
}

The above example sets the data rows of a table and can be called using the function below:

wdm_set_values($tbl, $modifiedDataRows, '_dataRows');

The Master Column filter

The master column filter – wpdatatables_filter_columns_metadata – can be used to alter column data dynamically. This filter has an array which functions as a parameter and which contains all the metadata of columns. This filter can be used to return the modified column array and can be used as follows:

function wdm_columns_meta($column_array)
{
    // logic to filter the column array
    return $column_array;
}
add_filter('wpdatatables_filter_columns_metadata', 'wdm_columns_meta', 10, 1);

Conclusion

In conclusion, wpDataTables functions as a complete solution for all your tabular needs. The plugin creates responsive tables, and charts and functions as a Data Manager for your content. You can use it to display price lists, catalogs, yellow pages like directories and for any and all complex analysis and comparisons.

Priced at $35 it comes with comprehensive documentation, predefined filters and action hooks and a 6-month support with added features on request. All this combined with handy functionality make this plugin worth every penny!

Let me know your thoughts and suggestions in the comment section below!

• WordPress Plugins
• With tags: wpDataTables

Share:

• Ketan V

Please note, some of the links in this blog post might be affiliate links. This means if you go on to purchase a product using such a link, we receive a small commission (at no additional cost to you). This helps us support the blog and produce free content. We only recommend products we work with or love. Thank you for your support!