1. Home
  2. Docs
  3. Happy Elementor Addons Pro
  4. Premium Widgets
  5. Advanced-Data Table

Advanced-Data Table

Well, Happy Addons recently introduced the Data Table widget ( in the Free version), where users could easily create a data table on to their Elementor site & give it a design whatever they want.

But now we’re thinking to add more advanced functions & features to our data table feature. That’s why we have released the Advanced-Data table widget for our users.

How To Use Advanced-Data Table

Here is how you can utilize the Advanced-Data table widget on your elementor site easily by the following steps:-

Step One:

First of all, you’ll need to drag the widget and paste it on the screen that we work.

Advanced-Data Table

Anyways, after selecting the widget, you’ll get the following options to start customizing this widget.

Advanced Data Table options

Step Two:

Here you can see, there four types of table options are available. To use each of these tables, you’ll need to perform individual activities.

Four types of tables that you can use:-

  • Google Sheet
  • TablePress
  • Database
  • Import

Google Sheet

Well, using the Google Sheet feature, you can directly use your Google Sheet data right on this widget. But in that case, you need to generate Google API keys and Google Client id. And then select the range that you want to show from your Google sheet.

So if you want to get the Google API keys, click here to get now!

Google Sheet

Here you can align your format. For example, heading & content alignment.

Now comes the important part. Enabling/disabling cache. If you want to update your data from the table, then first of all you should insert the information to your Google sheet.

Let’s say we’re changing the designation of Angelica Ramos, Cheif Executive officer to Chief Senior Officer.

And then come back to this page, and enable remove the cache. After sometimes you could see that the information you changed in your Google sheet, will appear here.

How to enable auto syncing

But Don’t forget to turn it off when you have done editing Google Sheet.

TablePress

To add data from TablePress, you need to install it on your WordPress site. After that, you can use it.

So first of all, you’ll need to create a table with TablePress and input the essential data on it. After selecting the table that you created, you could see the table here in the TablePress option.

Database

To use Database is so easy. Yes, while you choose Database option, you could find all the database option of your site. Then slightly pick up any one from the list. As a result, it will appear next to the window.

Import

This feature is so cool and easy to use. Only you need to put the table value and separate them by using a Comma.

So let’s see how to do it:-

Import Feature

Settings

Here are some of the basic settings that you can do or change. For example, enabling advanced search bar, pagination, entries, table name. And also you can allow your users to directly export your data if you enable the option.

Data table settings

Step Three:

Well, now it’s time to stylize the Advanced-Data table a bit. To do that tap on the Style button.

Stylize Data Table

Here you’ll get the style options one by one. And first of all the Search Bar to customize. For instance, you can change its padding, margin, border, colors, background color, page pagination space, and label color.

Customize Search Bar

Then slightly scroll down to the page, and you’ll find the pagination option to stylize. Similarly, you can change the color, background,

Advanced-Date Table

Now tap on the Table Head or header portion to customize. Similarly, you can change its margin, padding, border, border-radius, colors, typography etc.

Data Table Header

Again tap on the Table Row. Here you can stylize Table row. Like the previous item, here you can change padding, border, color (odd-even), background color.

Table Row

Step Four

If you want to add motion effects, happy effectsbackground, or make it responsive and more intriguing, click on ‘Advanced‘ to explore those options. the ‘Advanced‘ is a default feature of Elementor.

Give a read to this Document to know more about advanced features & functions.

Advanced Feature

So here is how the final design will look:-

Advanced-Data Table

That’s it!

Was this article helpful to you? Yes No

How can we help?