How to create WordPress DataViews using PHP

DataViews are an exciting new JavaScript component that is native to WordPress, starting in 6.5. While easy to install using npm, they are not simple to set up if you want to use the library with your own plugin and data source.

Considerations when integrating DataViews into your plugin

The DataViews component accepts arbitrary arrays of data, JSON-formatted: you pass this data into the data property. But using DataViews isn’t as simple as calling wp_localize_script() and passing the data value: you need to also define the fields to display, set the formatting of the values, the filters you want to enable, sorting, what actions (edit, delete, view) are available, what happens when those actions are called.

In addition, loading all the CSS and JavaScript files required to make the view look correct can be complicated and unstable; for example, some of the packages are only loaded when the Gutenberg plugin is loaded.

We are making using DataViews simple with DataKit

As long-time WordPress developers, we want to manage our data structures using PHP with a simple, powerful API. That’s where DataKit comes in.

DataKit adds a PHP abstraction layer that wraps  @wordpress/dataviews in an easy-to-use, modern PHP API. It provides common-sense default field types and simplifies the rendering process.

A delightfully-simple new way to integrate with DataViews

We asked ourselves what we would want from a better way to render DataViews, and the answer included a straightforward PHP API that included field types, multiple data source support, and easy filtering.

What does an example of using DataViews with PHP look like?

If you want to show a CSV of your own data, you upload the file to your site and then you’re ready to:

• Instantiate a data source. In the example below, we are using a CSV. DataKit will come with many data sources, making it simple to create DataViews using data from form plugins, WordPress posts and pages, CRM data, and more.
• Create a DataView:
  • Define the View ID. This allows the View to be referenced in a shortcode or block.
  • Set the fields that are to be displayed in the View.
  • Pass the data source object.
  • Define default sorting.

$csv_data_source = new CsvDataSource( 'oscar-winners-data.csv' );
$oscar_winners   = DataView::table(
	'oscar-winners', // This is the View ID.
	[
		TextField::create( '3', 'Actor name' )->not_hideable(),
		NumberField::create( '1', 'Year' ),
		TextField::create( '4', 'Movie title' )->not_sortable(),
		NumberField::create( '2', 'at age' )->hidden(),
	],
	$csv_data_source,
	Sort::desc( '1' ), // Sort by year, latest first.
);

// Register the DataView with the data view manager.
do_action( 'datakit/view/register', $oscar_winners );

// Use as [datakit id='oscar-winners']

Note how easy it is to define field types. You have a fully functional DataView table, created in 13 lines of code.

We’re finishing the PHP API

As DataKit matures, we will be releasing full developer documentation and other integrations. We are so excited about DataViews being bundled in WordPress. They have a bright future, and DataKit is the best way to take advantage of this new functionality.

Not comfortable with PHP? You will be able to build DataViews using a point-and-click interface with DataKit.

Interested in staying updated with DataKit?

Sign up for early access, starting July 2024.