Ninja Tables Dynamic Data Filter

The Ninja Tables is a freemium WordPress plugin which is one of the bests table plugin right now which allows anyone to build any type of HTML table with its powerful column builder very easily. This plugin has a very nice and user friendly interactive UI to build an HTML table even without knowing anything about HTML or CSS.

In this article, I’m going to demonstrate how one can change the data for a specific table on the fly using the ninja_tables_get_public_data filter hook given by the plugin.

While this plugin is built keeping the non-developers on mind, basically those who use the WordPress as a CMS to run and manage their own websites but it also provides some meet for developers as well and I’m going to discuss just about that.

To modify the table data all you need to add the ninja_tables_get_public_data filter hook in your theme’s functions.php file or in a plugin. For example, you can use something like the following in your functions.php file:

function filterTableData($originalData, $tableId) {
    // Modify the data and return it...
}

add_filter('ninja_tables_get_public_data', 'filterTableData', 10, 2);

Well, that was just the basic idea. I’ll now going to show the full implementation with some insights. So, let’s say we have some HTML tables created with “Ninja Tables” and we want to modify the data with the posts from wp_posts table if our “Ninja Tables” table id is 5 and also assume that, it has title, status, url and post_type as column keys. In this case, I’m going to build a very simple plugin for the sake of this article.

At first, let’s create a new PHP file in wp-content/plugins directory of your WordPress installation. Then, add the following meta information at the very beginning of the file:

To build any WordPress plugin it is necessary to add that meta information at the top of the plugin file. To learn more about that follow the link. Now we’ll write some code to implement the plugin which will do the real job for modifying the table data on the fly. So, just copy and paste the following code in the plugin file, right after the meta information you’ve added earlier:

// Die if accessed directly
!defined('ABSPATH') && die;

// Declare the class if not already declared
if (!class_exists( 'NinjaTablesDynamicData')) {

	class NinjaTablesDynamicData {

		/**
		 * Construct the class and add
		 * hook for modifying the data
		 */
		public function __construct()
		{
			add_filter(
				'ninja_tables_get_public_data', // plugin hook
				array($this, 'filterData'), // callback method
				10, // priority
				2 // number of parameters the callback will receive
			);
		}
		


		/**
		 * Check if the id is 5, if yes then modify the data and retuen
		 * the modified data, otherwise just return the original data.
		 * 
		 * @param array $originalData
		 * @param int $tableId
		 * @return array
		 */
		public function filterData($originalData, $tableId)
		{
			// Reference the global $wpdb global variable
			global $wpdb;


			// return the original data if table id is not 5
			if ($tableId != 5) {
				return $originalData;
			}


			// Fetch 10 records from the wp_posts table
			$table = $wpdb->prefix . 'posts';
			$posts = $wpdb->get_results("SELECT * FROM {$table} LIMIT 10");


			// Map our column keys with post property
			$modifiedData = array_map(function($post) {
				$link = get_permalink($post);
				return array(
					'title' => ucwords($post->post_title),
					'status' => ucfirst($post->post_status),
					'url' => "View",
					'post_type' => ucfirst($post->post_type)
				);
			}, $posts);


            // return the data
			return $modifiedData;
		}
	}



	/**
	 * Initialize the plugin
	 */
	add_action('plugins_loaded', function () {
        // Initialize the class
        return new NinjaTablesDynamicData;
	});
}

Well, that’s all for the plugin. If you done everything right then it should work. Now, All you need to activate the plugin from your plugins page and you should create a page (if not already created) where you need to put the short code for that table and in this case it should be [ninja_tables id="5"]. Now if you save and open the page then it’ll show you the modified data instead of the static data you inserted from the admin panel in that table.

The code is self documented but still I think that, it requires some sort of explanation, specially the use of array_map(...) function where I’ve prepared the new data. So let’s review the code here:

// Map our column keys with post property
$modifiedData = array_map(function($post) {
	$link = get_permalink($post);
	return array(
		'title' => ucwords($post->post_title),
		'status' => ucfirst($post->post_status),
		'url' => "View",
		'post_type' => ucfirst($post->post_type)
	);
}, $posts);

In this case, I’m using the PHP's array_map function to loop through the result I’ve received from wp_posts table. Here, in each iteration I’m constructing a new array from each record to display it as a single row in my HTML table. Since my hypothetical HTML table has four columns and whose keys are title, status, url and post_type so I’m setting the new value for each column in the loop and returning the newly created array to be displayed as a single row in my HTML table. That’s it.

ProTip:

If you need to get the column information of any table while modifying the data then you may call the ninja_table_get_table_columns($tableId) function which will give you every bit of information about each column of the table in an array which will also include the “name” (display name of the column), “key” (key of the column) and many useful information the column that you might need.

Hope it helped and if you have any questions then please ask me on the comment section, I’ll be happy to answer if I can. Thanks!