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.

Live Demo

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:

1. Table Heading → Defines column titles

2. Table Content → Adds rows and column data

3. 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) #

1. Click Add Item

2. Select Row

3. 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