If you need to apply for all tables then just add this code below in Custom wpDataTables CSS under the "Custom JS AND CSS" in main settings of wpDataTables. In this example we align the text in the center of the table, you can change the text-align to your desire by changing the word “center” to “left” or “right.

.wpDataTablesWrapper table.wpDataTable td, 
.wpDataTablesWrapper table.wpDataTable th,
.wpDataTablesWrapper table.wpDataTable td.numdata, 
.wpDataTablesWrapper table.wpDataTable th.numdata
{ text-align: center !important; }

This will be affected on all tables, but if you want just for specific one then insert this code on the CUSTOM CSS under Customize tab in table settings and you will use clases with id's for that table (Example if your table have id 1)

.wpDataTablesWrapper table.wpDataTable.wpDataTableID-1 td,
​.wpDataTablesWrapper table.wpDataTable.wpDataTableID-1 th,
.wpDataTablesWrapper table.wpDataTable.wpDataTableID-1 td.numdata,
​.wpDataTablesWrapper table.wpDataTable.wpDataTableID-1 th.numdata
{ text-align: center !important; }

From version 3.2 you have built-in option for hiding pagination and more. Now you are able to change the position of the pagination(right, left, and center) and there are six different layouts of the pagination available which you can set for each table. More on this link.

Just add this code in Custom wpDataTables CSS under the "Custom JS AND CSS" in main settings of wpDataTables.

.wpDataTablesWrapper .dataTables_paginate{display : none !important;}

This will be affected on all tables, but if you want just for specific one then insert this code on the page where is that table between the style tag (<style>Code here</style>).

<style>
.wpDataTablesWrapper .dataTables_paginate{display : none !important;}
</style>

To hide New, Edit or Delete button you can add one of this CSS in Custom CSS field on
wpDataTables settings page or directly on the page between<style>Your code</style> tags:

.DTTT_button_new {
display: none !important;
}

.DTTT_button_delete {
display: none !important;
}

.DTTT_button_edit {
display: none !important;
}

You can set this by inserting this CSS code in Custom wpDataTables CSS under the "Custom JS AND CSS" in main settings of wpdatatables.

@media screen and (min-width: 780px) {
   .wpDataTablesWrapper div.wdtscroll {
     overflow-x: initial !important;
   }
}

This will be affected on all tables, but if you want just for specific one then insert this code on page where is that table between the style tag.(<style>Code here</style>)

<style>
@media screen and (min-width: 780px) {
    .wpDataTablesWrapper div.wdtscroll {
      overflow-x: initial !important;
    }
}
</style>

Please note that Scrollable option should be turned on in the table settings.

For customization of layout for options Calculating totals, minimum, maximum and average cells in wpDataTables you can use this selectors:

.wdt-sum-cell,  /* for totals  */
.wdt-avg-cell,  /* for average */
.wdt-min-cell,  /* for minimum */
.wdt-max-cell,  /* for maximum */

Just add this code in Custom wpDataTables CSS under the "Custom JS AND CSS" in main settings of wpdatatables.

table.wpDataTable tbody tr td{
vertical-align:top !important;
}

That will be effected on all tables, but if you want for specific tables then insert this code between style tags on the page where is that table.

<style>
table.wpDataTable tbody tr td{
vertical-align:top !important;
}
</style>

Calculation Functions do not inherit the style you apply to font in wpDataTables settings, so to change the color of AVG, SUM, MIN and MAX, you need to add some custom CSS:

.wdt-sum-cell, .wdt-avg-cell, .wdt-min-cell, .wdt-max-cell {
color: red !important;
}

Just add this code below in Custom wpDataTables CSS under the "Custom JS AND CSS" in main settings of wpDataDables.

.wpdt-c .wpDataTablesWrapper table.wpDataTable thead {
display: none !important;
}

This will be affected on all tables, but if you want just for specific one then insert this code on the page where is that table between the style tag (<style>Code here</style>)

<style>
.wpdt-c .wpDataTablesWrapper table.wpDataTable thead {
display: none !important;
}
</style>

How can I style looks of the Table Tools buttons of a table?

You can use CSS class for each button.

.DTTT_button_print /* for print */
.DTTT_button_xls   /* for excel */
.DTTT_button_csv   /* for csv   */
.DTTT_button_copy  /* for copy  */
.DTTT_button_pdf   /* for pdf   */

You can insert your custom CSS for this buttons in Custom wpDataTables CSS under the "Custom JS AND CSS" in main settings of wpdatatables. If you want for specific tables then insert this code between style tags on the page where is that table.

If you don't want to offer options Prev, Next and Apply and add new in your edit modal, you can hide them with some simple CSS.

To hide them from all tables, use one of the following codes in Custom CSS field, found in Custom JS and CSS tab in main settings of wpDataTables:

.wdt-apply-edit-button {
display: none !important;
}

.wdt-prev-edit-button {
display: none !important;
}

.wdt-next-edit-button {
display: none !important;
}

If, on the other hand, you wish to use this only for certain tables in front-end, you can place one of these codes directly on the page between <style>Your code</style> tags.

This usually happens for MySQL-based tables with server-side processing turned on.

Please check if you have a complicated query with JOINs, calculated columns (for example, ” SELECT mycolumn*2 AS mycolumn2″), or some custom column aliases (e.g. “SELECT mycolumn AS ‘some/weird/name’). If this is the case, please either create a MySQL view (in PHPMyAdmin or similar MySQL DB manager) and build a wpDataTable based on this view.

From version 2.3 we implement feature that you can use multiply separate db connections for (MySQL,MSSQL and PostgreSQL) and for MySQL engine we are dynamically adding accent grave (`). If you use this accent grave (`) in your query, please remove it and searching and filtering will work fine.

You can check out the video and step by step guide on this YouTube link

1. Please check first if PHP version is at least 5.4 or newer. It is required for the proper running of wpDataTables.

2. The second thing to check is that there are no JS errors in the javascript console. Please check e.g. in Chrome JS console. Usually when we investigate such things we find out that some other plugin or theme are broken, and wpDataTables JS cannot execute.

3. Try to turn off option "Include bootstrap on front-end" in main settings of the plugin.

4. Please try to deactivate other plugins one by one and check if some of them are in conflict with wpDataTables.

5. Please try switching the theme to a different one and see if it helps.

If you are using separate MySQL connection option to connect to MySQL database, you can test if connection can actually be established with “Test MySQL settings” button.
If connection can’t be established, first please make sure that all entered values needed for connection are correct.
Also make sure that MySQL server is allowing remote connections and that MySQL user that you are trying to connect with is allowed to connect from your sites host(IP address).

From 2.3 version of our plugin there is an option to add more than one separate database connection. Now every table can have its own separate database connection, so tables can pull data from multiple databases and servers.

The 403 Forbidden error is an HTTP status code which means that accessing the page or resource you were trying to reach is absolutely forbidden for some reason. Our suggestion is to check your server log and see if there are some errors and also if you have some security plugins please try to deactivate it and see if it will work after that. Also, check if the mod_security is turn-on on your server.

If you get this error  for admin-ajax.php in Console of the browser please check do you have some firewall or some security (some plugin or turn on mod_security) on a server that causes not finding WordPress native file admin-ajax.php, that we used for ajax calls.

We suppose that your server is on Bluehost. If the answer is yes, you have to add some code in
file ../wp-content/plugins/wpdatatables/source/class.wdttools.php around line 205 you will  find this line of code:

curl_setopt($ch, CURLOPT_REFERER, site_url());

and after it add:

curl_setopt( $ch, CURLOPT_IPRESOLVE, CURL_IPRESOLVE_V4);

This fix should resolve the issue that is related with Bluehost. Your code should looks like below.

curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
curl_setopt($ch, CURLOPT_USERAGENT, $agent);
curl_setopt($ch, CURLOPT_REFERER, site_url());
curl_setopt( $ch, CURLOPT_IPRESOLVE, CURL_IPRESOLVE_V4);

You are probably getting this error because you have formatting in that spreadsheet. Can you please remove that formatting from a file, because when you make wpDataTables you can adjust the look of the table and arranged data how you want. Please note that merge cells can also produce this issue because at the moment they are not supported in wpDataTables.

You can find minimum requirements in our documentation on this link.

You have some conflict with theme or other plugin. Please insert this in Custom wpDataTables CSS under the "Custom JS AND CSS" in main settings of wpdatatables.

.wpdt-c .modal{ width: inherit !important ; background-color: initial !important; }

If you get grey screen when you try to edit or add new data in wpdatatables(like on image) you have some conflict with theme or some other plugin.

Try to add this code in the custom CSS field in wpdatatables settings page

.wpdt-c .modal-backdrop{ z-index: 0 !important; }

or

.modal-backdrop{ z-index: 0 !important; }

Hello all wpDataTables users!

This issue can occur for several reasons:

1. You've copied the URL from the "Publish to the web" modal that pops up when you publish the spreadsheet:These links are recognized easily because they all contain "2PACX":After the spreadsheet is published, just close that modal window that opens up, and copy the URL from the browser's address bar and paste it into wpDataTables corresponding URL field when creating a table linked to an existing Google Spreadsheet file:
2. You don't have ZipArchive installed on your server, or you're using an older version of ZipArchive. Please reach out to your hosting provider and ask them to either install or update the ZipArchive.
3. The data in the Google Spreadsheet file is not structured correctly. Please remember that wpDataTables cannot import tables from other sources that contain merged cells; sub-headers; multiple empty rows below the first row. Also, keep in mind that the first row in your Google Spreadsheet file needs to contain column headers and that all data should be entered in columns below those headers.
4. Applying any formatting in the file, like custom collation, Google Spreadsheet formulas, IMPORTRANGE functions, custom colors, etc. may cause an issue like this.
5. If the Google account from which you've created the Spreadsheet is a part of a business (G-Suite), publishing may be allowed, but due to security measures it is not visible (accessible) from wpDataTables.

You can find more details in our documentation about Creating Tables in WordPress from Google Spreadsheets

When you are moving on live site from local or stage site we can suggest to use Plugin Duplicator. We use it and it's working fine, because he will transfer all the files and also the tables to database.

Because Internet Explorer didn't stick to the guidelines established by World Wide Web Consortium the organization that establishes standards for web technologies, it often would display web pages in ways that made them look entirely different from other browsers Opera, Chrome or Firefox.

Please try to find this file ../wp-content/plugins/wpdatatables/source/class.wpdatatable.php and around line 2794 find this line:

$returnData .= $this->isFixedLayout() ? "table.wpDataTable { table-layout: fixed !important; }\n" : '';

after that line add this line of code:

$returnData .= $this->isFixedLayout() ? "table.wpDataTable thead th { width: 100% !important;}\n" : '';

413 Request Entity Too Large errors occur when the request body is larger than the server is configured to allow. Here’s how you can fix it, depending on your web server:

• Apache: Set the LimitRequestBody directive in either your httpd.conf file or a local .htaccess file. (https://stackoverflow.com/a/3719358/1688568)
• Nginx: Set the client_max_body_size directive in nginx.conf (http://www.cyberciti.biz/faq/linux-unix-bsd-nginx-413-request-entity-too-large/)

Cherry plugin cause this issue because it is using jquery version 1.7.2. Our plugin is based on the WordPress built-in version of jquery which is 1.12. You can deactivate jQuery that is included with Cherry framework and request a compatible version for WordPress from the Google CDN. Here are the instructions:

You have to make folder called site-specific-plugin-adjust-cherry-jquery and in it make file site-specific-plugin-adjust-cherry-jquery.php with content:

<?php
/*
Plugin Name: Update jQuery Cherry framework
Description: Deactivate jQuery that is included with Cherry framework and request a compatible version for WordPress from the Google CDN
*/
/* Begin Adding Functions Below This Line */

// Remove themes old version of jQuery and load a compatible version add_action('wp_enqueue_scripts', 'update_jquery_for_cherry_framework', 11);
function update_jquery_for_cherry_framework() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', false, false, true);
    wp_enqueue_script('jquery');
}
/* Stop Adding Functions */

- Upload to wp-content/plugins using your preferred SFTP or FTP client. FileZilla and Cyberduck are free options that are available for multiple platforms.
- Go to WP-admin (your WP dashboard) --> Plugins. Then locate the plugin in the list and click on Activate.

Note: this will not install through WP-admin --> Plugins. It must be manually installed as described above.

By default WordPress does not allow this. Reason is: logged out user has no ID (id is 0), and no permissions/capabilities enabled for him.

A solution would be to create an actual user that will be used as a single user for all logged-out users, and copy his ID (e.g. id = 100).

Then you can add a simple hook to identify logged out users as User with ID 100. To do this you can use a hook like this:

    function set_loggedout_id( $user_id ){
       if( empty( $user_id ) ){
          $user_id = 100;
       }
       return $user_id;
    }
            
    add_filter( 'determine_current_user', 'set_loggedout_id', 999, 1 );

Basically, it "tells" WordPress to replace the empty ID of a logged out user with a value of 100.
Then you can allow uploading for this user.

By default, WordPress Media Library (used for attachments) allows file uploads only for users who have the upload_files capability. So, everyone who doesn't have this capability (e.g. a subscriber) will receive an error on trying to upload a file.

To add this capability to subscribers you can e.g. use the User Role Editor plugin. Just enable the upload_files capability for the users which need it and it will work.

Other option is to add this capability dynamically via a hook. To do this you can add e.g. this code to your theme's functions.php:

            function give_permissions( $allcaps, $cap, $args ) {
                $allcaps['upload_files'] = true;
                return $allcaps;
            }
            add_filter( 'user_has_cap', 'give_permissions', 0, 3 );     

Basically, it enables the upload_files capability to everyone - but you can extend this logic to allow it only for certain users at certain moments.

• Please check is there are no JS errors in the javascript console. Please check e.g. in Chrome JS console. Usually when we investigate such things we find out that some other plugin or theme are broken, and wpDataTables JS cannot execute.
• Try to turn off option Include bootstrap on front-end in main settings of plugin.
• Please try switching the theme to a different one and see if it helps.
• Feel free to open a support ticket, providing us with the URL of the page so we could tell why does it happen.

If your PostgreSQL is installed on Ubuntu 18.04 server, and you're receiving the following error:

"wpDataTables could not connect to postgresql server. postgresql said: There was a problem with your SQL connection - could not find driver"

You may need to install PGSQL driver by following these steps:

[sudo] apt-get install php-pgsql

Then uncomment pgsql and pdo-pgsql extentions in php.ini and restart Apache with the following command:

[sudo] /etc/init.d/apache2 restart

If you have an SSL certificate, and you're having issues with tables linked to Google Spreadsheets, or if you're creating tables linked to JSON files which require authorization, instead of modifying the code of wpDataTables (which would be overwritten with every update), you can use our hook "wpdatatables_curl_get_data".

For JSON files, please take a look at the commented example for authentication. The custom code should be added to functions.php file of your theme, or the child theme.

function filterCURLOptions($data, $ch, $url){
    //
    // $data (null) is set to null if there are available filter
    //
    // $ch cURL handle returned by curl_init().
    //
    // $url (string) is URL of existing source(JSON, Google Sheet or PHP serialized array)
    //
    // Here you will insert your logic, because there are different JSON authentication
    // https://www.php.net/manual/en/function.curl-setopt.php
    //
    // Please note that this function is used for creating tables from JSON,Google sheets and PHP serialezed array
    // So you will need to filter it with some if statement based on $url parametar
    // 
    // Useful links
    //
    // https://stackoverflow.com/questions/30426047/correct-way-to-set-bearer-token-with-curl
    // https://stackoverflow.com/questions/60183353/php-how-to-make-a-get-request-with-http-basic-authentication
    // https://stackoverflow.com/questions/44331346/php-api-call-with-curl-and-authentication/44332142
    // https://stackoverflow.com/questions/2140419/how-do-i-make-a-request-using-http-basic-authentication-with-php-curl
    
    // Your code....
   
    return $data;
}
add_filter('wpdatatables_curl_get_data','filterCURLOptions', 10, 3);

The following code is an example which is used for SSL of Google Spreadsheets:

function filterCURLOptions($data, $ch, $url){
        curl_close($ch);
        $new_ch = curl_init();
        $timeout = 5;
        $agent = 'Mozilla/5.0 (Windows NT 6.2; WOW64; rv:17.0) Gecko/20100101 Firefox/17.0';
        curl_setopt($new_ch, CURLOPT_URL, $url);
        curl_setopt($new_ch, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($new_ch, CURLOPT_SSL_VERIFYHOST, false);
        curl_setopt($new_ch, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($new_ch, CURLOPT_CONNECTTIMEOUT, $timeout);
        curl_setopt($new_ch, CURLOPT_USERAGENT, $agent);
        curl_setopt($new_ch, CURLOPT_REFERER, site_url());
        curl_setopt($new_ch, CURLOPT_FOLLOWLOCATION, true);
        $data = curl_exec($new_ch);
            if (curl_error($new_ch)) {
                $error = curl_error($new_ch);
                curl_close($new_ch);
                wp_die($error);
            }
            if (strpos($data, '')) {
               wp_die(__('wpDataTables was unable to read your Google Spreadsheet, probably it is not published correctly. 
 You can publish it by going to File -> Publish to the web ', 'wpdatatables'));
            }
            $info = curl_getinfo($new_ch);
            curl_close($new_ch);
            if ($info['http_code'] === 404) {
                return NULL;
            }
   
    return $data;
}
add_filter('wpdatatables_curl_get_data','filterCURLOptions', 10, 3);

This will work for tables made from Google Spreadsheets (regular method, not tables created with Google Sheets API), JSON files and Serialized PHP Arrays.

First option would be to click on “Column settings” buttons which you can find in header of every column in “Table preview and columns setup” section.
After that Column settings modal will open and, under “Display” tab, you can find “Visible on front-end” option.

Second option would be to click on “Complete column list” button  to open a modal where you can quickly access some column settings.
In the modal you can click on show/hide icon to toggle visibility for each column.

It is recommended that if you don’t need certain columns to remove it from data source or select query for mysql tables if possible.
It will speed up loading of the page and result in more clear look of column setup section.

We guess you created tables with server-side processing where this option is disabled. The reason for this is that when it is turn on with server-side processing, row grouping works, but other features of the plugin can have unexpected behavior.

In wpDataTables 2.1 and higher, additional settings for URL link columns are available:

1. You can configure how the link should be opened - in the new tab or in the same tab.
2. This option allows you to display the link as a button.
3. You can set the button display text.
4. You can set the button CSS class.

In wpDataTables column settings for every column there are text fields “Cell content prefix” and “cell content suffix”.
Values from those text fields will be used for adding text before or/and after every cell content in a column.
This feature uses CSS for displaying entered text, therefore sorting of the columns will not be affected.

If you have a column which contains more than 10 values, you may need to search through the filter to find the correct filtering option. This happens because the number of possible values to load is set to "10", and if you want to show more data in that column's filter you need to open column settings, go to Data tab, and change the "Number of possible values to load" from "10" to "All", and you'll be able to see all entries.

License depends on subscription plan that you purchase:

Basic - Full plugin that can be used only for one domain or project.

If your multiple sites are sub-sites of the same domain, and apply to the same project, you can use one license.

Pro - Full plugin that can be used for 3 domains.

Developer - Full plugin that can be used on unlimited number of domains.

The prices for these licenses can be found here, and they are based on either a yearly subscription, or a lifetime purchase (depending on what you choose) and all licenses include support and monthly updates the whole time the subscription lasts, unlimited tables, unlimited charts, conditional formatting and separate database support.

If you cancel subscription after one year, plugin will still work properly and you will have all your settings. You will not receive new updates and you won't be able to submit tickets with our customer support.

Included support covers help with bugs and general inquiries for the plugin features, but not writing custom code.
As you're developing some custom solution if you need our assistance we can offer you our paid customization service.

Please note that standard support does not include:

- Customization services;
- Installation services;
- Writing MySQL queries;
- Writing advanced CSS;
- Resolving and debugging third-party software and hardware issues;
- Preparing files and tables;
- Skype, Teamviewer calls, Remote sessions or etc.
Support with such requests can be provided on a paid basis.

Requirements and flow for the customization:
- Customer request some custom work by providing detailed instructions about it and temporary WordPress admin credentials (if there is some example)
- Our development team will estimate the price and time which depends on the complexity of the request and business logic of company is this will be implement in core of plugin
- After the agreement, we are proceeding to the payment via PayPal
- After received payment, customer provide us temporary WordPress admin credentials​ and we start working on that request

You can take a look at our store https://store.tms-plugins.com/login where you can find your purchase code. When you make purchase of our plugin, you receive email with credentials for our store  which you can use for login.

There is no built in option, but you can use wpdatachart callbacks. Every chart exposes several options that customize its look and feel. Charts usually support custom options appropriate to that visualization. You can use it for adding options that are available in Highcharts API. In this callback in method wpDataChartsCallbacks 15 is id of the chart which you want to change colors.We used hex color codes with some random colors, but you can change it for your needs. There are six of them(if you have six series) if you had it more then you have to add more colors in colors array, separated with comma(except last one). On the end insert this script above shortcode of your chart on page.

<script type="text/javascript">
jQuery(window).on('load',function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[15] = function(obj){
        obj.options.plotOptions.pie = {
            colors: [
                    '#50B432',
                    '#ED561B',
                    '#DDDF00',
                    '#24CBE5',
                    '#64E572',
                    '#FF9655'
            ],
            dataLabels: {
                    format: '{point.name}{point.percentage:.1f} %'
           }
        }
    }
});
</script>

There is no built-in option, but you can use wpdatachart callbacks. Every chart exposes several options that customize its look and feel. Charts usually support custom options appropriate to that visualization. You can use it for adding options that are available in Highcharts API. In this callback in method wpDataChartsCallbacks 19 is the ID of the chart which you want to change. Insert this script above shortcode of your chart on the page.

<script type="text/javascript">
jQuery(window).on('load',function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[16] = function(obj){
        obj.options.plotOptions = {
            series: {
                     dataLabels: {
                        enabled: false
                     }
            },
            pie: {
                  allowPointSelect: true,
                  cursor: 'pointer',
                  dataLabels: {
                       enabled: false
                  },
                  showInLegend: true
            }
        };
    };
});
</script>

There is no built-in option, but you can use wpdatachart callbacks. Every chart exposes several options that customize its look and feel. Charts usually support custom options appropriate to that visualization. You can use it for adding options that are available in Google Api. In this callback in method wpDataChartsCallbacks 83 is the ID of the chart which you want to change colors. We used hex color codes with some random colors, but you can change it for your needs. There are six of them (if you have six series), if you had it more then you have to add more colors in colors array, separated by a comma (except last one). On the end insert this script above shortcode of your chart on the page.

<script type="text/javascript">
jQuery(window).on('load',function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[83] = function(obj){
        obj.options.colors = [
                     '#50B432',
                     '#ED561B',
                     '#DDDF00',
                     '#24CBE5',
                     '#64E572',
                     '#FF9655'
        ],
     obj.options.pieSliceText = "percentage"
    }
});
</script>

There is no built-in option, but you can use wpdatachart callbacks. Every chart exposes several options that customize its look and feel. Charts usually support custom options appropriate to that visualization. You can use it for adding options that are available in Chart.js API. In this callback in method wpDataChartsCallbacks 82 is the ID of the chart for which you want to change colors. We used hex color codes with some random colors, but you can change it for your needs. There are six of them (if you have six series), if you had it more then you have to add more colors in colors array, separated by a comma (except last one). On the end insert this script above shortcode of your chart on the page.

<script type="text/javascript">
jQuery(window).on('load',function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[82] = function(obj){
        obj.options.data.datasets[0].backgroundColor = [
                                                        '#50B432',
                                                        '#ED561B',
                                                        '#DDDF00',
                                                        '#24CBE5',
                                                        '#64E572',
                                                        '#FF9655'
        ]
    }
});
</script>

Highcharts do not inherit the number format you set up in wpDataTables, and there are no built-in options to change the number format in the chart, but you can use wpdatachart callbacks. Every chart exposes several options that customize its look and feel. Charts usually support custom options appropriate to that visualization. You can use it for adding options that are available in Highcharts API.

In this example we will show you how to use Highcharts.setOptions to change the decimal separator from point ( . ) to a comma ( , ). In the callback, you can see how to change the number of decimal places after the separator ( , ) from default 2 to 3. We use the method wpDataChartsCallbacks where 93 is the id of the chart for which we want to apply these settings.

<script type="text/javascript">
jQuery(window).on('load',function(){
    Highcharts.setOptions({
        lang: {
            decimalPoint: ','
        }
    });
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[93] = function(obj){
        obj.options.tooltip = {
            pointFormat: "Distance: {point.y:.3f} km"
        };
    };
});
</script>

If you add a prefix or a suffix to values in the table, they won't be carried over to the chart. This is the default behavior of the chart engine, but you can use wpdatachart callbacks to get them to display. Every chart exposes several options that customize its look and feel. Charts usually support custom options appropriate to that visualization. You can use it for adding options that are available in Highcharts API.

In this example we will show you how to use Highcharts.setOptions to add these labels on a chart which has two Y axes.

<script type="text/javascript">
jQuery(window).on('load',function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[94] = function(obj){
        obj.options.yAxis[0] = {
           labels: {
             format: '$ {value}'
           }
        }
        obj.options.yAxis[1] = {
           opposite: true,
           labels: {
             format: '{value} %'
           }
        }
    }
});
</script>

Percentage is being automatically added to Google Pie charts tooltips, and there is no built-in option to remove it. However, you can use wpDataChart callbacks to tweak this. Charts usually support custom options appropriate to that visualization. You can use it for adding options that are available in Google Api. In this callback in method wpDataChartsCallbacks 83 is the ID of the chart we want to remove the percentage from the tooltips.

<script type="text/javascript"&gt
jQuery(window).on('load',function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[96] = function(obj){
        obj.options.tooltip = {
                    text: 'value'
        }
        obj.options.pieSliceText = "none"
    }
});
</script>

Hover over the slices in the chart to see the change.

From plugin version 5.3, horizontal bar chart is available as option in chart wizard.

By default chart engine's behavior, column chart cannot be inverted, so X axis becomes Y axis and vice versa. That's where wpDataCharts Callbacks come in again. Every chart exposes several options that customize its look and feel. Charts usually support custom options appropriate to that visualization. You can use it for adding options that are available in Charts.js API.

In this example, we look at Global Smartphone Shipments (in millions of units) since Q3 2018, until Q3 2019. Initially, the chart would come up like this:

To make the chart display the bars horizontally, you need to enter the following callback in HTML format above the chart's shortcode, like this:

<script type="text/javascript">
jQuery(window).on('load',function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; } 
    wpDataChartsCallbacks[95] = function(obj) { 
        obj.options.type = 'bar';
        obj.options.options.indexAxis = 'y';
    };
});
</script>

For a chart that has this many bars, it's recommended to change the default chart's height in the creation wizard. So with the height set to 800px, and the callback seen above applied, the chart finally looks like this:

We created a Sandbox site so that you could try our WordPress table plugin before you buy it. It has a number of pre-defined WordPress tables illustrating the plugin features, and you're free to create a table in WordPress and see how the plugin works.

Also is available free wpDataTables Lite version of the plugin. While some of the premium features are reduced, wpDataTables Lite is still quite a handy tool which would allow you to quickly create tables in WordPress from different sources: Excel, CSV, JSON, XML and Serialized PHP array.

Tables can be filtered with a query string that consists of “wdtColumnFilter[KEY]” value pairs where KEY is a zero-based numerical index of the column you would like to filter or initial column header. For example:

?wdt_column_filter[1]=Asia&wdt_column_filter[country]=Thailand

Values passed from URL will be used as default filter values, therefore “Advanced filtering” option needs to be enabled on table edit page.

If you need to pre-filter the table via global search just open the page adding a key to the URL:

?wdt_search=filtervalue

Where ‘filtervalue’ is the value you would like to insert into the filtering field. This would pre-filter the table via global search.

If you like to have invisible columns in filters, that can be achieved by enabling “Filter in form” option in table edit page.
“Filter in form” option will create filters as a separate section from the table and additionally show filters for all hidden columns.
You can choose which column filter will be visible/hidden by unchecking/checking the "Add a filter for this column" button in the column settings for the desired column.

In order to show column filters in a table, you have “Render advanced filter” option where you can choose options “In the header” and “In the footer” on the wpDataTables Settings page.

If you need to show column filters outside of the table you can do that with option Filter in form. To use it you need to go to the “Sorting and Filtering” tab in the table settings, first enable “Advanced column filters”, and then enable the “Filter in form”.

"Advanced filter in a widget" (in WordPress sidebar) is one more way with which you can use column filters outside of the table. This way you can define the region of the page where to render the filtering form. More about this and about Advanced filters you can find on this link.

For showing and hiding column filters is responsible “Advanced column filters” option on the table settings page.
You can also hide each column filter in column settings by unchecking the “Add a filter for this column” button in Filtering tab for desired column.
By checking or unchecking this settings check box and saving, table will show or hide column filters.

If you have a column which contains more than 10 values, you may need to search through the filter to find the correct filtering option. This happens because the number of possible values to load is set to "10", and if you want to show more data in that column's filter you need to open column settings, go to Data tab, and change the "Number of possible values to load" from "10" to "All", and you'll be able to see all entries.

Yes you can do that by changing some code. Open file ../wp-content/plugins/wpdatatables/source/class.wpdatatable.php and around line 3315 you will find this:

'orientation' => 'portrait',

Just replace it with this:

'orientation' => 'landscape',

When customizing wpDataTables for your own usage, you might find that the default position of those elements is not quite to your liking. You have to modify some code in the core of the plugin.

Example to move info block above the table is to edit the plugin file. In file ../wp-content/plugins/wpdatatables/source/class.wpdatatable.php around line 3515 find:

$obj->dataTableParams->sDom = "BT'clear'>{$showRowsPerPage}{$globalSearch}{$scrollable}{$infoBlock}{$pagination}";

and replace it with:

$obj->dataTableParams->sDom = "B{$infoBlock}T'clear'>{$showRowsPerPage}{$globalSearch}{$scrollable}{$pagination}";

If you want info block at the top and bottom of the grid, replace it with:

$obj->dataTableParams->sDom = "B{$infoBlock}T'clear'>{$showRowsPerPage}{$globalSearch}{$scrollable}{$infoBlock}{$pagination}";

each letter stands for the different block. Our plugin is based on Datatables jQuery plugin and more details about DOM positioning can be found on this link.

Note: If you make these changes, they will be overwritten with the next update, so you will need to make the changes again.

The Cryptocurrencies rank table is a manual table, so we start by creating a manual table with 10 columns (one integer, and 9 string-type columns). We're using the "Aqua" skin for our tables, but you're welcome to try other skins as well.

The table settings are:

Display tab:

Sorting and Filtering tab:

Editing tab:

Table Tools tab:

Placeholders tab is not being used in this case, so whatever data you have in those fields should not be changed.

1. First Column ( "#" ) - Only this column is an integer column, which is used as the default sorting column for the table. When creating the column, you need to enter a different name, though (in our case it's "rd"), because "#" cannot be stored in the database, so simply set the displayed header to "#":

Settings for this column are:

Display tab:

• "Visible on front-end" enabled
• "Column width" set to "100"

Sorting tab - Like mentioned before, this column is used as the default sorting column for the table:

Filtering for this column is enabled, and we added a label to the filter - "Position":

Editing has been enabled, and Editor-input type is set to "One-Line edit", so you can enter data in back-end when creating the table.

There is no Conditional Formatting applied to this column.

2. Second column ( "Name" ) - This is a string column which requires some work. First, we open column settings and apply the following in the Display tab:

Here we've defined the column width to be 200px (please note that this is only possible if you enable Limit table width in table settings above the table), and added a CSS class "cripto-div", which is used to vertically center the cells of this column. To define the CSS class, you will need to go to wpDataTables settings/Custom JS and CSS/Custom CSS, and add the following to the Custom CSS field:

.cripto-div {
   vertical-align: middle;}
.cripto-div span {font-size: 16px;font-weight: 600;margin-left: 5px;vertical-align: top !important;margin-top: 6px;}

The cryptocurrencies' icons are all stored in a single .png file, which you can access on this link. You need to add a CSS class in Custom CSS field to be able to access the image:

.cripto-sprite {display: inline-block;margin: 0 2px;background-image: url(https://wpdatatables.com/wp-content/uploads/2018/12/cripto-sprite.png);width: 16px;height: 16px;}
.cripto-sprite{
    background-image: url(https://wpdatatables.com/wp-content/uploads/2019/02/Artboard.png);
    background-repeat: no-repeat;
    background-size:160px;
    width: 32px;
    height: 32px;
    margin-left:0 !important;
}

To access these icons individually, and add them in rows you need to add a CSS class which would locate the icon's position in that .png file - to specify the coordinates, so to speak. To do that, you need to add a new class for every cryptocurrency. For example, the icon coordinates for Bitcoin are accessed with the following CSS:

.cripto-1{background-position: -734px -207px;}

Since we have 20 cryptocurrencies in that table, the full coordinates CSS which you need to add in Custom CSS field would look like this:

.cripto-1{background-position: -734px -207px;}
.cripto-1{background-position: -734px -207px;}
.cripto-2{background-position: -176px -64px;}
.cripto-3{background-position: -734px -48px;}
.cripto-4{background-position: -416px -639px;}
.cripto-5{background-position: -176px -96px;}
.cripto-7{background-position: -16px -96px;}
.cripto-8{background-position: -638px -557px;}
.cripto-9{background-position: -238px -160px;}
.cripto-10{background-position: -464px -623px;}
.cripto-11{background-position: -638px -399px;}
.cripto-12{background-position: -192px -655px;}
.cripto-13{background-position: -16px -336px;}
.cripto-14{background-position: -304px -639px;}
.cripto-15{background-position: -400px -687px;}
.cripto-16{background-position: -32px -80px;}
.cripto-17{background-position: -480px -463px;}
.cripto-18{background-position: -128px -687px;}
.cripto-19{background-position: -718px -64px;}
.cripto-20{background-position: -702px -395px;}

.cripto-1 {
background-position: 0 0;
}
.cripto-2 {
background-position: -32px 0;
}
.cripto-3 {
background-position: -64px 0;
}
.cripto-4 {
background-position: -96px 0;
}
.cripto-5 {
background-position: -128px 0;
}
.cripto-6 {
background-position: 0 -32px ;
}
.cripto-7 {
background-position: -32px -32px;
}
.cripto-8 {
background-position:  -64px -32px;
}
.cripto-9 {
background-position: -96px -32px;
}
.cripto-10 {
background-position:-128px -32px;
}
.cripto-11 {
background-position: 0 -64px;
}
.cripto-12 {
background-position: -32px -64px;
}
.cripto-13 {
background-position: -64px -64px;
}
.cripto-14 {
background-position:  -96px -64px;
}
.cripto-15 {
background-position:  -128px -64px;
}
.cripto-16 {
background-position: 0 -96px;
}
.cripto-17 {
background-position:  -32px -96px;
}
.cripto-18 {
background-position:  -64px -96px;
}
.cripto-19 {
background-position: -96px -96px;
}
.cripto-20 {
background-position: -128px -96px;
}

Then, when you edit the first row, you need to enter the following code, so the image is pulled and added in front of "Bitcoin" in that row:

<div class="cripto-1 cripto-sprite"></div>Bitcoin

Which would look like this in the edit modal:

So, to apply this for each row individually, you should add them in the edit modal one at a time using the lines of code below:

<div class="cripto-1 cripto-sprite"></div>Bitcoin
<div class="cripto-2 cripto-sprite"></div>XRP
<div class="cripto-3 cripto-sprite"></div>Ethereum
<div class="cripto-4 cripto-sprite"></div>Bitcoin Cash
<div class="cripto-5 cripto-sprite"></div>Stellar
<div class="cripto-6 cripto-sprite"></div>EOS
<div class="cripto-7 cripto-sprite"></div>Tether
<div class="cripto-8 cripto-sprite"></div>Litecoin
<div class="cripto-9 cripto-sprite"></div>Bitcoin SV
<div class="cripto-10 cripto-sprite"></div>TRON
<div class="cripto-11 cripto-sprite"></div>Cardano
<div class="cripto-12 cripto-sprite"></div>IOTA
<div class="cripto-13 cripto-sprite"></div>Monero
<div class="cripto-14 cripto-sprite"></div>Binance Coin
<div class="cripto-15 cripto-sprite"></div>Dash
<div class="cripto-16 cripto-sprite"></div>NEM
<div class="cripto-17 cripto-sprite"></div>Ethereum Classic
<div class="cripto-18 cripto-sprite"></div>NEO
<div class="cripto-19 cripto-sprite"></div>Waves
<div class="cripto-20 cripto-sprite"></div>Zcash

That covers the creation of the second column, and filling out its data.

3. Columns 3 - 10 all have the same CSS class applied to them - "aligncentarcell". Go ahead, and apply this class in column settings for columns 3 - 10:

This class aligns the text horizontally in the center, using the following CSS:

.wpDataTablesWrapper table.wpDataTable td.aligncentarcell, 
.wpDataTablesWrapper table.wpDataTable th.aligncentarcell
{ text-align: center !important; }

With this, you will have completed the custom setup of columns #3, #4 and #6 ( "Symbol", "Market Cap" and "Circulating Supply" ).

Third column ( "Symbol" ) - column settings:

Display tab:

• "Visible on front-end" enabled

Data tab: keeps default settings.

Sorting tab: Sorting is allowed.

Filtering tab: Filtering is allowed, filter type set to "Checkbox", with no labels applied, no exact filtering, no pre-defined filter values, and filters are rendered in modal form.

Editing tab: One-line edit.

There is no Conditional Formatting applied to this column.

Fourth column ( "Market Cap" ) and sixth column ( "Circulating Supply" ) - columns settings are the same:

Display tab:

• "Visible on front-end" enabled
• "Hide on mobiles" enabled
• "Hide on tablets" enabled

Data tab: keeps default settings.

Sorting tab: Sorting is allowed.

Filtering tab: Filtering is allowed, filter type set to "Text", with no labels applied, no exact filtering, no pre-defined filter values, and filters are rendered in modal form.

Editing tab: One-line edit.

There is no Conditional Formatting applied to these columns.

4. Since we already saved the "aligncentarcell" CSS class for the Fifth Column ( "Price" ), we need to add some Conditional Formatting to it. It uses only one rule:

This rule tells the table to call the "blue-text" CSS class when the cell value contains a dot ( . ). The CSS you need to apply in Custom CSS field is:

.blue-text{color: #0083c2  !important;}

The same CSS class will be used for the seventh column, but we'll get to that after we go through settings for the fifth column:

Display tab:

• "Visible on front-end" enabled
• "Hide on mobiles" enabled
• "Hide on tablets" enabled

Data tab: keeps default settings.

Sorting tab: Sorting is allowed.

Filtering tab: Filtering is allowed, filter type set to "Text", with no labels applied, no exact filtering, no pre-defined filter values, and filters are rendered in modal form.

Editing tab: One-line edit.

5. The seventh column ( "Volume" ) has settings similar to the "Price" column, but with a comma ( , ) instead of a dot ( . ) applied in the conditional formatting rule, so:

This rule tells the table to call the "blue-text" CSS class when the cell value contains a comma ( , ). Since the CSS class is already entered, there's no need to repeat the process.

Display tab:

• "Visible on front-end" enabled
• "Hide on mobiles" enabled
• "Hide on tablets" enabled

Data tab: keeps default settings.

Sorting tab: Sorting is allowed.

Filtering tab: Filtering is allowed, filter type set to "Text", with no labels applied, no exact filtering, no pre-defined filter values, and filters are rendered in modal form.

Editing tab: One-line edit.

6. Columns #8, #9 and #10 ( "% 1h", "% 24h" and "$ 7d" ) have the same set up with only one difference:

Custom column width of "90" is applied in the Display tab when you access the column settings for columns #8 and #10, while column #9 has the custom width set to "100". All other settings are the same for these three columns - there are a couple of Conditional Formatting rules applied:

These rules tell the table to paint the values of a cell in red if there is a minus sign ( - ) present in that cell, and to paint the values in green if the sign is not present. So, we need to add a couple more CSS classes:

.red-text{color: #d94040 !important;}
.green-text{color: #009e73 !important;}

Same column settings apply to all three columns:

Display tab:

• "Visible on front-end" enabled
• "Hide on mobiles" enabled
• "Hide on tablets" enabled

Data tab: keeps default settings.

Sorting tab: Sorting is allowed.

Filtering tab: Filtering is allowed, filter type set to "Text", with no labels applied, no exact filtering, no pre-defined filter values, and filters are rendered in modal form.

Editing tab: One-line edit.

That completes the creation of the Cryptocurrencies rank table, and if you followed the tutorial closely, you should have the same table in your database now.

All pricing tables shown on the Pricing examples page are Simple Tables. Example #3 is created by adding this in 3 cells:

Cell 1:

<div class="panel">
<h3 class="h2">STARTER</h3>
<ul class="list-unstyled">
<li class="price"><span class="h3 color-primary">$49</span></span></li>
</ul>
<p class="website">1 Webiste / YEAR</p>
<ul class="features list-unstyled">
<li><div class="checkmark checkmark-black"></div>Plugin Updates</li>
<li><div class="checkmark checkmark-black"></div>100+ Templates</li>
<li><div class="checkmark checkmark-black"></div>55+ Field Types</li>
<li><div class="checkmark checkmark-black"></div>PRO Actions</li>
<li><div class="checkmark checkmark-black"></div>Conditional Logic</li>
<li><div class="checkmark checkmark-black"></div>Calculated Fields</li>
<li><div class="checkmark checkmark-black"></div>Extend with Add-Ons</li>
<li><div class="checkmark checkmark-black"></div>Professional Support</li>
<li></li>
</ul>
<a href="https://wpdatatables.com/pricing" target="_blank" class="button primary full">Buy now</a>
</div>

Cell 2:

<div class="panel middle">
<div class="panel middle">
<h3 class="h2 middle">FREELANCE<span class="best-value">Best Value</span></h3>
<ul class="list-unstyled">
<li class="price"><span class="h3 color-middle">$99</span></li>
</ul>
<p class="website">10 Webistes / YEAR</p>
<ul class="features list-unstyled">
<li><div class="checkmark checkmark-white"></div>Plugin Updates</li>
<li><div class="checkmark checkmark-white"></div>100+ Templates</li>
<li><div class="checkmark checkmark-white"></div>55+ Field Types</li>
<li><div class="checkmark checkmark-white"></div>PRO Actions</li>
<li><div class="checkmark checkmark-white"></div>Conditional Logic</li>
<li><div class="checkmark checkmark-white"></div>Calculated Fields</li>
<li><div class="checkmark checkmark-white"></div>Extend with Add-Ons</li>
<li><div class="checkmark checkmark-white"></div>Professional Support</li>
<li></li>
</ul>
<a target="_blank" href="https://wpdatatables.com/pricing" class="button primary full">Buy now</a>
</div>

Cell 3:

<div class="panel">
<h3 class="h2">PROFESSIONAL</h3>
<ul class="list-unstyled">
<li class="price"><span class="h3 color-primary">$299</span></li>
</ul>
<p class="website">1000 Webistes / YEAR</p>
<ul class="features list-unstyled">
<li><div class="checkmark checkmark-black"></div>Plugin Updates</li>
<li><div class="checkmark checkmark-black"></div>100+ Templates</li>
<li><div class="checkmark checkmark-black"></div>55+ Field Types</li>
<li><div class="checkmark checkmark-black"></div>PRO Actions</li>
<li><div class="checkmark checkmark-black"></div>Conditional Logic</li>
<li><div class="checkmark checkmark-black"></div>Calculated Fields</li>
<li><div class="checkmark checkmark-black"></div>Extend with Add-Ons</li>
<li><div class="checkmark checkmark-black"></div>Professional Support</li>
<li></li>
</ul>
<a href="https://wpdatatables.com/pricing" target="_blank" class="button primary full">Buy now</a>
</div>

This gives you the not-so-pretty simple table:

To get the appearance of the table you see on this page, you need to add some custom CSS to the page on the front-end:

#wpdtSimpleTable-177 td .panel {
    background-color: #FFFFFF;
    border: none;
    display: block;
    height: 100%;
    padding: 20px;
    border-radius: 24px;
    position: relative;
    color: #000000;
    box-shadow: 0 25px 18px -11px rgba(0, 0, 0, .1);
    transition: all .35s;
    margin:0;
}
#wpdtSimpleTable-177 td .panel:hover {
    transition: all .35s;
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 25px 18px -11px rgba(0, 0, 0, .1);
}
#wpdtSimpleTable-177 td .panel.middle {
    background-color: #091d70;
    border: none;
    color: #fff;
    display: block;
    height: 100%;
    padding: 20px;
    position: relative;
}
#wpdtSimpleTable-177 td h3.h2 {
    margin: 0 !important;
    font-weight: 700;
    font-size: 20px;
    padding: 10px;
    line-height: 60px;
    letter-spacing: 3px;
    color: #000000;
}
#wpdtSimpleTable-177 td h3.h2.middle {
    color: #FFFFFF;
}
#wpdtSimpleTable-177 td .h3 {
    font-size: 98px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -4px;
    color: #003180;
}
#wpdtSimpleTable-177 td .h3.middle {
    font-size: 68px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -4px;
}
#wpdtSimpleTable-177 td ul {
    margin: 0 0 20px;
}
#wpdtSimpleTable-177 td .list-unstyled {
    list-style: none;
    padding-left: 0;
}
#wpdtSimpleTable-177 td .price {
    margin-top: 20px;
    text-align: center;
    color: #003180;
}
#wpdtSimpleTable-177 td .price .color-middle {
    color: #FFFFFF;
}
#wpdtSimpleTable-177 .checkmark-black,
#wpdtSimpleTable-177 .checkmark-blue,
#wpdtSimpleTable-177 .checkmark-white {
    margin-right: 20px;
}
#wpdtSimpleTable-177 .website {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0;
    mix-blend-mode: normal;
    opacity: .8;
    margin-top: 52px;
    margin-bottom: 32px !important;
}
#wpdtSimpleTable-177 td .button {
    margin: 32px auto 16px;
    background: #008cff;
    color: #fff;
    line-height: 1;
    padding: 2rem 4rem;
    display: block;
    cursor: pointer;
    box-shadow: none;
    transition: all .35s;
    font-size: 2rem;
    border: none;
    overflow: visible;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    border-radius: 28px;
}
#wpdtSimpleTable-177 td .features {
    display: table;
    margin: 0 auto;
    text-align: left;
}
#wpdtSimpleTable-177 td .features li {
    font-size: 16px;
    opacity: .8;
}
#wpdtSimpleTable-177 {
    border-collapse: separate;
    border-spacing: 20px;
}
#wpdtSimpleTable-177 td {
    border: none !important;
    box-shadow: 0 20px 50px 0 rgba(28, 9, 80, .07);
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    background-color: transparent;
    height:auto;
}
#wpdtSimpleTable-177 .best-value {
    color: #af7a22;
    background-color: #ffd850;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    vertical-align: middle;
    text-align: center;
    letter-spacing: normal;
    max-width: 82px;
    margin-left: 5px;
    margin-right: auto;
    margin-top: 7px;
    padding: 2px 6px;
    border-radius: 13px;
}
@media only screen and (max-width: 1440px) {
    #wpdtSimpleTable-177 .best-value {
        position: absolute;
        top: -5px;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        text-align: center;
    }
    #wpdtSimpleTable-177 td .h3 {
        font-size: 60px;
    }
    #wpdtSimpleTable-177 td h3.h2 {
        font-size: 15px;
    }
    #wpdtSimpleTable-177 td .features li {
        font-size: 14px;
    }
    #wpdtSimpleTable-177 td .h2.middle {
        position: relative;
    }
    #wpdtSimpleTable-177 .website {
        font-size: 15px;
    }
    #wpdtSimpleTable-177 .checkmark-black,
    #wpdtSimpleTable-177 .checkmark-blue,
    #wpdtSimpleTable-177 .checkmark-white {
        margin-right: 20px;
        margin-left: 0px;
    }
    #wpdtSimpleTable-177 td .panel,
    #wpdtSimpleTable-177 td .panel.middle {
        padding:10px;
    }
    #wpdtSimpleTable-177 td .button {
        padding: 1rem 3rem;
        font-size: 2rem;
    }
    #pricing-table-example-three .wdt-res-wrapper.active{
        max-height: initial;
    }
    #wpdtSimpleTable-177.bt td .button {
        padding: 3rem;
        font-size: 4rem;
    }
    #wpdtSimpleTable-177.bt tr{
        border:none;
    }
    #wpdtSimpleTable-177.bt td {
        margin-bottom: 20px;
    }
}

Just make sure to replace the #wpdtSimpleTable-177 with the actual ID of your table.

Yes you can. From Version 1.1, which is released 13.07.2018, Gravity integration for wpDataTables has:

      1.)    Server-side processing for large tables – if a gravity form has more than 3000-5000 entries, this feature allows to add lazy loading to the table.

      2.)   Front-end editing for Gravity Forms-based tables – using this feature you can edit the Gravity forms entries directly from wpDataTables (a standard Gravity editor will appear in a popup).

Note: Please use with wpDataTables 2.2.3+ only!