1. Home
  2. Docs
  3. Happy Elementor Addons Fr...
  4. Widgets
  5. Data Table

Data Table

How To Use Data Table Widget of Happy Elementor Addons

Using a data table on the website is a difficult task if you don’t have any coding ideas or knowledge. However, the data table widget of Happy Elementor Addons will solve this problem. Because it will enable you to create some remarkable data table for your website. Only you need to have patience & full concentration to use this widget.

So let’s get started:-

Step One:

First, add the widget from the left sidebar of your Elementor page screen. Just select the widget and drag it to the marked area.

Data Table Widget

Step Two:

After adding the widget, you’ll see a default data table format. From here you can start designing your table.

Step Two

Next, click on the ‘Table Head‘ tab. This tab is the most important part. Because it will help you to add the column header. So after clicking on this tab, you’ll see the default header. So customize it and give your preferred header name.

Step 03

Also, you can edit in details by tapping on each section. For example, color span, using an icon, custom style, etc.

Step 04

Next, tap on the ‘ROW‘ button. From here you can add rows as many as you want. Here you’ll get default ROW section for every time you add a new ROW. It’s called ‘ROW Starts’.

Happy Addons Widget

So before adding a ROW, make sure you name it ‘ROW Starts‘. And it will be identified as the individual ROW section. Let’s have a look.

Data Table Widget

Okay, next, we’ll add another ‘ROW’. So let’s see how to add a new ROW and other items.

  1. First, add a new ‘ROW
  2. Choose ‘Column
  3. Give a title on it
  4. Do the same procedure for the rest of the parts
  5. That’s it!

Data Table Widget

Suppose, if you want to merge any ROWs or columns, you can do it easily. In that case, we’ll be going to merge ‘Happy Addons’ table head into one table.


To do that, first of all, select the head. Then type 2 in the column span, as we are merging two columns into one. That’s it.

Note: If you want to merge two rows into one, then do the same procedure, but in that time you need to select ‘Row Span‘.


Step Three:

Well, to stylize the table, tap on the ‘Style‘ option. From here, you can change the color of each Row and Column, background color, text size, color margin, padding, and more.

Stylize widgets

After clicking on the ‘Table Head‘, you’ll get the options for changing its color, size, typography, margin, padding, border, border type, and more.

Stylize items

Next, you follow the same process to stylize the ‘Table Row‘ section as well as. For example, background color, font color, text size, and more.

Style Data section

Step Four:

If you want to add motion effects, Happy Effects, background, or make the page responsive, 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 and its uses.

Data table widget

So after finishing all the editing procedures, click on the publish button. And your final preview will be:-

Final preview of Data table

That’s It!

Enhancement in Data Table in Version v3.7.1 – 18 October 2022

You can now enable the scrolling option for your mobile responsive view. To enable that, navigate the Setting Tab and toggle the “Enable Scroll View” button. Enabling the switch will activate horizontal scrolling on a responsive view.


You can enable or disable the Word Break option to separate words.

For example, if you have two or more words in a column, then you can either show them in a line, or you can separate them from one word under another.

With Word Break:

image2 1

Without Word Break:

image3 1

The final output will be:


How can we help?