Limited time
Fall Into Easy Savings
up to 50% Off
Grab the Deal
Limited time
Sign in
Help Center caret
  • en caret caret

Gutenberg and wpDataTables integration

wpDataTables Gutenberg Integration

The wpDataTables plugin integrates smoothly with the Gutenberg editor so you can add pre-built tables & charts to any post and page on your website. Just create your table using our table & charts plugin, add wpDataTables Chart or Table block, and when you hit “Publish” your fully interactive tables and charts appear right in the page or post.

Get wpDataTables now Get Gutenberg now
Gutenberg and wpDataTables integration

Why choose wpDataTables & Gutenberg to publish tables & charts?

Native block editor integration

The wpDataTables block is built specifically for Gutenberg, letting you insert tables and charts with just a few clicks with shortcodes or you can simply drag and drop them into the editor. Everything fits naturally into your page and post-building workflow.

Real time preview and customization

See exactly how your data will look before publishing. As you select tables or charts in the block, Gutenberg updates the preview live – so there are no surprises when you click publish.

Supports advanced table features

From Excel-like editable tables to column filtering, sorting and responsive layouts, wpDataTables gives you advanced features without requiring technical expertise. All of these features carry over smoothly into the Gutenberg block. wpDataTables also takes accessibility seriously, and that’s why we’re fully compliant with WCAG (Web Content Accessibility Guidelines).

Dynamic content with placeholders

Easily make your data dynamic by using placeholder variables (%VAR1%, %VAR2%) when you embed tables and charts via shortcodes in Gutenberg. This makes it simple to repurpose the same table across different posts with custom input values.

      What you’ll get with wpDataTables & Gutenberg integration

      Hassle-free table and chart embedding

      Insert any wpDataTable or wpDataChart directly into your post or page using Gutenberg blocks and shortcodes – no switching between editors.

      Excel-like table mode

      Need front-end editing or spreadsheet-style behavior? You can toggle Excel-like editing for supported tables in wpDataTables which makes it perfect for data-heavy workflows.

      Fully responsive layout

      Tables and charts added through Gutenberg are fully responsive and mobile friendly, so your data looks great on every screen size without extra configuration. Additionally, you can set up different versions of the same table/chart for mobile and desktop.

      Smart content reuse

      Reuse the same table across multiple pages with different configurations using Gutenberg’s built-in options and save time while keeping your content consistent.

      Build, manage and publish tables & charts with wpDataTables & Gutenberg integration

      01

      Create tables and charts from any data source

      Pull data from Excel, Google Sheets, CSV, MySQL, WP posts, and even custom queries. With wpDataTables, you generate interactive, searchable tables in minutes without manual work or coding. You can also create WooCommerce product tables and present products in a structured format that increases conversions.

      02

      Customize every detail without code

      Easily adjust column types, add conditional formatting, toggle visibility or apply filters and sorting right from the wpDataTables interface. These settings carry over, so when you insert the table via Gutenberg editor – it has all the features you need.

      03

      Add charts that sync with your data

      Build responsive, real-time charts using Google Charts, Highcharts, Highchart Stock, ApexCharts, or Chart.js. Each chart can be linked to a data source and dynamically updates when the data changes.

      04

      Enable front-end editing and user interaction

      Let users edit table cells, add new entries, import or export data – all from the front end. Whether you need a collaborative spreadsheet or a customer-facing product list, wpDataTables gives you the tools to make it work.

      05

      Publish instantly with Gutenberg block

      Once your table or chart is ready, add it to your post or page using the dedicated wpDataTables shortcodes. Just pick your table, insert shortcode and hit publish.

      Build custom tables & charts with wpDataTables in minutes

      Get wpDataTables Get Gutenberg

      You can easily create tables and publish them on any post and page using Gutenberg editor and shortcodes.

      Learn how to create and publish tables & charts with Gutenberg editor

      FAQs about Gutenberg Editor integration for wpDataTables

      Can users edit table data from the front end?

      If front-end editing is enabled for a table, users can add, update, and delete data directly on the published page for tables that have server-side processing.

      Are the tables and charts responsive on mobile?

      Yes, all tables and charts added through Gutenberg are fully responsive and mobile-friendly once you enable responsive and choose whether you want mobile/tablet or both.

      Can I edit table settings after inserting it in Gutenberg?

      Yes, you can edit different features like display options, layout mode, placeholders, and the table will automatically update on the live page/post.