1. Home
  2. Docs
  3. Happy Elementor Addons Free
  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.

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.

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

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.

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 Effectsbackground, 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!

Was this article helpful to you? Yes No

How can we help?