Data Table Widget in Elementor #
The Elementor Data Table Widget helps you display structured data such as user lists, pricing details, comparison tables, contact records, or statistics in a clean, responsive, and visually appealing layout.
This widget is perfect when you want clarity, flexibility, and full design control—without writing any code.
How to Use the Data Table Widget #
The Data Table Widget allows you to display structured data in a clean, responsive table layout using a Row → Column system.
This widget is ideal for showing user lists, contact details, comparison data, or structured information with full design control.
Widget Structure Overview (Important to Understand First) #
The Data Table widget works with three core parts:
-
Table Heading → Defines column titles
-
Table Content → Adds rows and column data
-
Style Options → Controls table design
Before adding data, it’s important to understand Row and Column logic.
Understanding Row & Column Logic (Very Important) #
What is a Row?
-
A Row represents one complete data record
-
Example: One person, one item, one entry
Each horizontal line in the table is one row.
What is a Column?
-
A Column (col) is one cell inside a row
-
Each column holds one piece of data
Example inside a row:
-
Column 1 → Name (image + text)
-
Column 2 → Email
-
Column 3 → Age
Row–Column Rule (Must Follow)
⚠️ Each row must contain the same number of columns as the table heading
If your heading has:
Then every row must have exactly 3 columns in the same order.
Content Tab Settings #
1. Data Table Heading
This section defines the column titles shown at the top of the table.
Available Options
-
Heading Title – Column name (e.g. Name, Email, Age)
-
Show Icon – Enable or disable icon/image
-
Icon Type
-
Icon
-
Image
-
-
Image Upload (when Image is selected)
-
Background Color
-
Text Color
You can:
-
Add new headings
-
Duplicate headings
-
Remove headings
👉 The number of headings controls how many columns each row must have.
2. Table Content
This is where actual table data is added.
Content List Structure
The content list follows this exact pattern:
Adding a Row (Step-by-Step)
-
Click Add Item
-
Select Row
-
Inside that row, add required Column (col) item.
Column Settings (Inside Each Row)
Each column supports the following options:
-
Row / Column Selector
-
Row
-
Column
-
-
Content Type
-
Content
-
-
Show Icon (On/Off)
-
Content Title (Text value)
-
Icon Type
-
Icon
-
Image
-
-
Image Upload
-
Background Color
-
Text Color
Example Row Setup
Row 1
-
Column 1 → Image + Name
-
Column 2 → Email text
-
Column 3 → Age number
Row 2
-
Column 1 → Image + Name
-
Column 2 → Email text
-
Column 3 → Age number
This keeps the table aligned and clean.
Style Tab Settings #
The Style tab controls the appearance of every part of the table.
1. Table Box
Controls the main table container.
Options include:
-
Margin
-
Padding
-
Background Type
-
Width
-
Border Type
-
Border Radius
Use this to create card-style or boxed tables.
2. Table Border
Controls table border styling:
-
Border style
-
Border width
-
Border color
3. Table Header
Styles the heading row:
-
Background color
-
Text color
-
Typography
-
Alignment
-
Padding
4. Header Icon Style
Controls icons used in headings:
-
Icon size
-
Icon color
-
Spacing
5. Heading Image Style
Controls heading images:
-
Image size
-
Border radius
-
Spacing
6. Table Body
Controls all row content:
-
Background color
-
Text color
-
Typography
-
Row spacing
-
Alignment
7. Content Icon Style
Styles icons inside table cells:
-
Size
-
Color
-
Spacing
8. Content Image Style
Styles images inside table cells:
-
Image size
-
Border radius
-
Spacing
9. Button Style
If buttons are used inside table cells:
-
Background color
-
Text color
-
Hover styles
-
Padding
-
Border radius
Advanced Tab #
The Advanced tab provides:
-
Responsive visibility control
-
Custom CSS classes
-
Z-index
-
Motion effects
-
Custom positioning
Responsive Behavior #
✔ Fully responsive
✔ Works on desktop, tablet, and mobile
✔ Device-specific spacing and visibility supported
Video Tutorial #
Common Mistakes to Avoid #
❌ Adding fewer columns than headings
❌ Adding extra columns in one row only
❌ Changing column order in different rows
✔ Always keep column count and order consistent
Quick Reminder (For Users) #
One Row = One complete record
One Column = One data cell
Column count must match heading count
