1. Home
  2. Docs
  3. Dynamic Contents
  4. Data Table

Data Table SA Element

SA Data Table is going to help you design a well-structured & flexible table with lots of customization options with ease. You are able to display comparison or statistical data using this element. Besides, it allows you to create amazing comparison tables as well. Here in this tutorial, you’re going to learn how to use the Data Table element into Elementor Page Builder. So let’s get straight into it:


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Data Table Element

 

»Content

 

Header

⇒Enable Table Sorting: Enable Table Sorting option to sort your table elements alphabetically or numerically.

Adding the Items:

From the Header section, you can select the first row of your table. Enter your preferred Column Names.

⇒Column Span: Set the column span to increase its width.

⇒Enable Header Icon: Enable the header icon here and then customize and add an icon to the header.

⇒CSS Class & ID: Add your own CSS Class or ID to each of the Columns.

⇒Add Item: Use the ‘+Add Item’ button to add more columns to the data table.

 

Content

Adding the Contents:

To add data entries, first, make sure the first entry is a Row entry. Afterward, fill up the row by inserting Columns entry. Make sure the number of Column entries after the First-Row entry matches the number of Header columns.

⇒Row Type: Set the row type.

⇒Col Span: Change the col span if you want.

⇒Row Span: Change the row span if you want.

⇒Content-Type: Choose a Content-Type & modify it.

⇒Link: Add a link or URL. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link.

⇒Add Item: Use the ‘+Add Item’ button to add more content to the data table.

 


»Style

 

General Style

⇒Width: Customize the data table width for different dimensions.

⇒Alignment: Set the alignment either left, right or center.

 

Header Style

⇒Header Border Radius: Set the border radius of the header.

⇒Padding: Set the padding value for the top, right, bottom and left around the header for different dimensions. You can link the values together or customize them individually.

⇒Color: Add a custom color to the header text of the data table for both normal and hover view.

⇒Background Color: Add a custom background color to the data header for both normal and hover.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the header for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border for normal view.

⇒Typography: Set the typography options for the header text.

⇒Title Alignment: Set the title alignment either left, right or center.

 

Content Style

‘Content Style’ allows you to adjust the data entry fields in general. However, you can definitely keep separate layouts for even and odd entries.

⇒ODD Cell

→Color: Add a custom color to the ODD cell contents.

→Background Color: Add a custom background color to the ODD cell contents.

 

⇒Even Cell

→Color: Add a custom color to Even cell contents.

→Background Color: Add a custom background color to Even cell contents.

 

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the content for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Padding: Set the padding value for the top, right, bottom and left around the content for different dimensions. You can link the values together or customize them individually.

⇒Typography: Set the typography options for the content text.

⇒Link Color:

→Text Color: Add a custom color to the link text for both normal and hover view.

→Content Alignment: Set the content alignment either left, right or center.

 

Responsive Options

By enabling the ‘’Responsive Table’ option, your table will be automatically responsive to small screens.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Data Table Element.


Was this article helpful to you? Yes No

How can we help?