Your TableKit Elementor Widget Support Guide

Did you know that you can create a table in the Gutenberg editor and then display the same table in Elementor?

You can doubt it, but it’s really possible!

With the right table builder like TableKit, you can create a table in Gutenberg and display it in Elementor with the original design, layout, and formatting.

In this complete guide, you’ll learn how to prepare a table in the Gutenberg editor and display it inside Elementor with so much ease. 

What Is TableKit for Elementor?

TableKit é um WordPress table-building solution designed specifically for the Gutenberg Block Editor. It enables users to create everything from simple content tables to advanced data tables, WooCommerce product tables, and dynamic post tables.

O TableKit Elementor Widget extends this functionality by allowing those Gutenberg-created tables to be displayed directly within Elementor pages.

Why Use TableKit with Elementor?

• Create tables once and use them across multiple editors.
• Maintain consistent styling between Gutenberg and Elementor.
• Eliminate the need to rebuild tables manually.
• Manage updates from a single source.
• Improve workflow efficiency for content teams and developers.

Imagine you’re running an online store and have created a detailed product comparison table using TableKit in Gutenberg.

Instead of recreating that same table in Elementor:

1. Build the table once.
2. Save it in TableKit.
3. Insert it anywhere in Elementor using the TableKit widget.

When you update the original table, those changes are reflected wherever the table is displayed, reducing maintenance effort significantly.

Create a Table Inside Gutenberg Editor

Before you create your table inside the Gutenberg editor, make sure that you install and activate TableKit.

Clique aqui for a full TableKit installation and activation guide

After installing TableKit, the next step is creating your first table. 

Step 1: Open a Page 

Create a new page or edit an existing one in Gutenberg. Navigate to Pages > Add New, or you can open an existing page where you want the table to live.

Step 2: Add the Table 

Once you’re in the editor, add your table to get started. In this tutorial, we’ll make use of the table template. Click the (+) and search for the table builder. Then select Choose and you’ll be directed to different table templates.

Step 3: Customize the Table

TableKit offers various customization options. You can add additional controls and this will allow you to adjust the column gap, margin, and padding.

Moreover, you can add a background image to your image to elevate the aesthetic appeal of your table. 

Simply play with the settings and style to get the desired look of your table. 

Step 4: Preview and Publish the Table

After designing the table, review the layout for adjustment. Once everything is set, either save or publish the page.

The table becomes available for use throughout your website in the TableKit.

How to Show Tables in Elementor Editor

One of the most powerful features of TableKit is its Elementor integration.

Once you’ve created a table in Gutenberg, you can display it in Elementor without recreating it. The original structure, content, and styling remain intact.

Step 1: Open Elementor Page

Open a new page in Elementor. Navigate to Páginas > Adicionar novo. Then open the page in Elementor editor by clicking “Edit with Elementor” option.

Step 2: Find the TableKit Widget and Drag 

Procurar TableKit Widget within the Elementor widget panel. Drag the widget into your preferred section. 

Step 3: Select Your Table

Inside the widget settings, open the table selection dropdown. All available TableKit tables will appear in the list. Choose the table you previously created in Gutenberg. 

Step 4: Preview and Publish the Page

The selected table immediately appears inside Elementor with the same design and formatting as the Gutenberg version.

Então clique Atualizar ou Publicar to make the table live on the Elementor page.

Are you interested in creating tables in WordPress? Follow the guides below? ⬇️⬇️
How to Create a WordPress Data Table
How to Create a WordPress Post Table

Perguntas frequentes

Is TableKit compatible with Elementor?

Yes. TableKit includes a dedicated Elementor Widget that allows tables created in Gutenberg to be displayed directly inside Elementor pages.

Do you need to recreate tables inside Elementor?

No. You only need to create the table once in Gutenberg. The same table can then be selected through the TableKit Elementor Widget.

Will my table styling remain the same?

Yes. TableKit preserves the original table structure and styling when displayed in Elementor.

Can you use shortcodes instead of the Elementor Widget?

Absolutely. TableKit supports shortcodes that can be inserted into Elementor’s Shortcode widget.

Can you create WooCommerce product tables with TableKit?

Yes. TableKit supports WooCommerce product tables along with data tables, post tables, and standard content tables.

Is TableKit beginner-friendly?

Yes. The plugin is designed with a visual interface that allows beginners to build and customize tables without coding knowledge.

Pensamento final

O TableKit Elementor Widget bridges the gap between Gutenberg and Elementor by allowing you to create a table once and display it anywhere on your website. Whether you’re building pricing tables, product comparisons, business reports, or dynamic data tables, TableKit eases the entire process.

If you’re looking for a more efficient way to handle tables in WordPress, TableKit’s Elementor integration is a feature worth incorporating into your workflow.