Meet Our New Innovation

Grab It at Flat 50% OFF

How to Use Happy Addons’ Advanced Data Table Widget

How to Use Advanced Data Table Widget in Elementor Websites (5 Simple Steps)

Are you facing trouble creating data tables on your Elementor website and looking for a smart solution to go on?

Check out Happy Addons’ new Advanced Table widget that helps you create tables by importing data from Google Sheets, Website Database, TablePress Plugin, CSV Import, and more are on the way.

Website building is becoming easier than ever before with the power of WordPress and Elementor.

In this complete guide, we’ll show you how to use Happy Addons’ Advanced Data Table widget to create a data table for your Elementor website.

Let’s get started:

Why Use The Happy Addons’ Advanced Data Table Widget

How to Use Happy Addons’ Advanced Data Table Widget

It’s important to choose the right Elementor addons whenever you work with an Elementor website. Happy Addons is one of the most suitable 3rd party addons that offer tons of widgets and features to build a stunning website.

Among these powerful widgets, the Advanced Data Table is an exclusive widget that helps to create and import responsive data tables on your website in minutes.

You can also add other Happy Features and advanced functionalities to the data table and make it more user-friendly for your users.

These are significant reasons to consider the Advanced Data Table widget for your website:

  • Allow better customization
  • Exclusive predesigned demo tables
  • Easy import option
  • WordPress table plugin support
  • Google sheet compatible
  • Show database table data
  • and many more

Seems interesting, right? Well, now let us guide you on how you can easily create a data table in your Elementor website using this widget.

How to Create a Data Table Using Happy Addons Advanced Data Table Widget

Before starting the tutorial, make sure you’ve successfully installed and used these below-mentioned plugins on your website.

Pre-requisites:

  • Elementor (Free)
  • Happy Addons (Free)
  • Happy Addons Pro

Learn everything about Elementor: How To Use Elementor (Step By Step Guide For Beginners)

Step 1: Create a New Page

To create a new page, you have to visit WordPress Dashboard –> Pages–> Add New. Wait for a while, you will get the page setting options.

Step 2: Add Happy Addons ‘Advanced Data Table’ Widget to Your Web Page

Find the ‘Advanced Data Table‘ widget in the search bar.

Then select the widget from the left side menu. Finally, drag and drop it onto the selected area.

Add Happy Addons 'Advanced Data Table’ Widget to Your Web Page

Step 3: Select Suitable Data Table

It’s time to select a suitable data table according to your needs. There are 4 different Table Types that you can use to create the table.

1. Google Sheets: You can use a Google Sheet to insert a table. To do this, you have to add Google API Key and set Google Sheet ID, and define the Google Sheets Range. That’s it.

2. TablePress: With the Happy Addons Pro Advanced Data Table widget, you can also create your data table using the TablePress plugin.

Check out the blog to compare the best WordPress table plugins side by side.

3. Database: Sometimes, you need to show data from your database using a table. To do this, you can choose the Database as your table type.

4. Import: You can easily Import any table on your Elementor website. You need to paste your table data in CSV format.

 Select Suitable Data Table

In this guide, we’ve used Google Sheets as the table type. Check out the below image.

Select Google Sheet as the data table

You can also set table’s Head and Row alignment.

Step 4: Customize Advanced Data Table Widget

You can customize your table settings. Go to the Content –> Settings and set your table in your own way.

You’ll get all these multiple settings options:

  • Enable Search
  • Enable Pagination
  • Enable Entries
  • Enable Export Table
  • Export as CSV file
  • Export Table
  • Allow Visitors to Export Table
  • Table Width for Horizontal Scroll
Advanced Data Table Settings

In the Style section, you’ll get 3 styling options to design the table.

  1. Common
  2. Table Head
  3. Table Row

Common Style

In the Style–> common, you can redesign the Search and Pagination styles. You can also change the search bar style using..

  • Padding
  • Border Radius
  • Border Type
  • Width
  • Color
  • Label Color
  • Input Background Color

And also redesign the table Pagination using..

  • Top Spacing
  • Space between
  • Padding
  • Unlinked values Border Radius
  • Border Type
  • Width
  • Color
  • Show Entries Color
  • Data Counter Color
  • Background Color
  • Color
Style Common Settings of Advanced-Data Table

Style Table Head

You can even give a stunning look to the Table Head. These are the styling options that will help you to do so.

  • Padding
  • Border Type
  • Width
  • Color
  • Typography
  • Background Color
  • Color
  • Sorting Icon Color
Style Data Table Head

Style Table Row

If you want to change the Table Row Style in your own style. You can use the below options.

  • Padding
  • Border Type
  • Width
  • Color
  • Typography
  • Background Color (Even)
  • Background Color (Odd)
  • Color (Even)
  • Color (Odd)
Style Advanced Data Table Row

Note: Don’t forget to off Remove Cache when you have done editing Google Sheet. And make sure to click the Apply button to update the changes on your web page.

Update Advanced Data Table Settings

Step 5: Use The Advanced Section to Add More Styles and Effects

In the default Elementor ‘Advanced‘ option, you’ll get more options to add motion effects, Happy Effectsbackground, and an option to make your page responsive as well.

Advanced Settings

Read this Document to know more about Advanced features and their uses.

Final Preview of The Web Page

After working with this handy widget, here is our final output.

Advanced-Data Table Widget Final Preview

Are You Ready to Use Advanced Data Table Widget

In this blog, we have shown how you can efficiently create a data table on your Elementor website. We also explained why you should use the Happy Addons Advanced Data Table widget to create and customize the data table.

Now, it’s time to create the data table for your site. Are you ready to go? Before the dive, make sure that you read the full documentation.

You can share this blog on your social channels if you like it.

And don’t forget to subscribe to your newsletter. It’s FREE!

Check out How To Utilize WooCommerce Product Table on Your Online Marketplace!

Share this post

Related Post

2 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *

offer
Day
Hrs
Mins
Secs