Content · Elementor
Data Table widget for Elementor
A table you edit in the widget: rows, columns, and basic styling. For a saved table reused across pages, see the Data Table Builder extension.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
A table you edit in the widget: rows, columns, and basic styling. For a saved table reused across pages, see the Data Table Builder extension.
render() writes HTML data attributes: data-custom-pagination, data-entry-info, data-row-pagination, data-rows-per-page, data-table, data-table-export, data-table-script, data-table-sorting.
Some inspector controls are marked Pro in PHP (eicon-pro-icon / king-addons-pro-control). Those need King Addons Pro, not Elementor Pro.
The widget script reads data attributes: data-custom-pagination, data-entry-info, data-row-pagination, data-rows-per-page, data-table, data-table-export, data-table-sorting, data-table-type-custom.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Data Table”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Data Type”, “Show Export Buttons (Pro)”, “Show Search (Pro)”, “Show Sorting (Pro)”. Style and Content tabs are listed on this page.
When to use it
- A comparison of plans.
- A spec sheet.
- A schedule.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| General — Data Type | Options: Custom; CSV (Pro). |
| General — Show Export Buttons (Pro) | Switcher inspector control (`enable_table_export`). |
| General — Show Search (Pro) | Switcher inspector control (`enable_table_search`). |
| General — Show Sorting (Pro) | Written to the `data-table-sorting` HTML attribute in render(). |
| General — Show Pagination (Pro) | Written to the `data-custom-pagination` HTML attribute in render(). When this switch is on, render() outputs Swiper pagination. |
| General — Equal Column Width | Switcher inspector control (`equal_column_width`). |
| General — Table Row Index | Written to the `data-row-pagination` HTML attribute in render(). Passed through to Swiper pagination. |
| General — Prevent Word Wrap | Switcher inspector control (`white_space_text`). |
| Repeater Table Header — Title | Text inspector control (`table_th`). |
| Repeater Table Header — Media | Switcher inspector control (`header_icon`). |
| Repeater Table Header — Media Type | Options: Icon; Image. |
| Repeater Table Header — Media Position | Options: Left; Right; Top; Bottom. |
| Repeater Table Header — Select Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Repeater Table Header — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Repeater Table Header — Image Size | Writes CSS (width, height) onto the widget’s front-end markup. (min 0, max 100). |
| Repeater Table Header — Icon Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Repeater Table Header — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Repeater Table Header — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Repeater Table Header — Col Span | Numeric control (default 1, min 1). |
| Repeater Table Header — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Header — Repeater Table Header | Repeater rows; render() loops each item to build the list or slides. |
| Repeater Table Rows — Row Type | Options: Row; Column. |
| Repeater Table Rows — Content | Textarea inspector control (`table_td`). |
| Repeater Table Rows — Content URL | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Repeater Table Rows — Media | Switcher inspector control (`td_icon`). |
| Repeater Table Rows — Media Type | Options: Icon; Image. |
| Repeater Table Rows — Media Position | Options: Left; Right; Top; Bottom. |
| Repeater Table Rows — Select Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Repeater Table Rows — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Repeater Table Rows — Image Size | Writes CSS (width, height) onto the widget’s front-end markup. (min 0, max 100). |
| Repeater Table Rows — Icon Size | Writes CSS (i, font-size) onto the widget’s front-end markup. (min 1, max 100). |
| Repeater Table Rows — Icon Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Repeater Table Rows — Show Tooltip (Pro) | Switcher inspector control (`content_tooltip`). |
| Repeater Table Rows — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Repeater Table Rows — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Repeater Table Rows — Background Color (Hover) | Writes CSS `background-color` onto the widget’s front-end markup. |
| Repeater Table Rows — Col Span | Numeric control (default 1, min 1). |
| Repeater Table Rows — Row Span | Numeric control (default 1, min 1). |
| Repeater Table Rows — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Content — Repeater Table Rows | Repeater rows; render() loops each item to build the list or slides. |
| General — Table Min Width | Writes CSS (min-width, width) onto the widget’s front-end markup. (min 0, max 1500). |
| General — Border | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| General — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| General — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| General — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 200). |
| General — Transition Duration (seconds) | Writes CSS (transition-duration, transition-property) onto the widget’s front-end markup. (default 0.3, min 0, max 5). |
| Header (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Header (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Header (Hover) — Color | Writes CSS (th, color, cursor) onto the widget’s front-end markup. |
| Header (Hover) — Background Color | Writes CSS (th, background-color) onto the widget’s front-end markup. |
| Header — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} th`. |
| Header — Icon Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (min 1, max 70). |
| Header — Sorting Icon Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (min 1, max 70). |
| Header — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Header — Image Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Header — Icon Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Header — Alignment | Writes CSS (th, text-align) onto the widget’s front-end markup. Options: Left; Center; Right. |
| Content (Normal) — Color | Writes CSS (tr, color) onto the widget’s front-end markup. |
| Content (Normal) — Background Color | Writes CSS (tr, background-color) onto the widget’s front-end markup. |
| Content (Normal) — Color (Even Row Td Color) | Writes CSS (tr, color) onto the widget’s front-end markup. |
| Content (Normal) — Background Color (Even Row Td Bg Color) | Writes CSS (tr, background-color) onto the widget’s front-end markup. |
| Content (Hover) — Color | Writes CSS (tr, td, color, fill) onto the widget’s front-end markup. |
| Content (Hover) — Background Color | Writes CSS (tr, background-color, cursor) onto the widget’s front-end markup. |
| Content (Hover) — Color (Even Row Td Color Hover) | Writes CSS (tr, king-addons-table-text, color, td, king-addons-table-td-pag, fill) onto the widget’s front-end markup. |
| Content (Hover) — Background Color (Even Row Td Bg Color Hover) | Writes CSS (tr, background-color, cursor) onto the widget’s front-end markup. |
| Content — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} td, {{WRAPPER}} i.fa-question-circle`. |
| Content — Icon Size | Writes CSS (i, font-size, height, width, span) onto the widget’s front-end markup. (min 1, max 70). |
| Content — Image Size | Writes CSS (width, height) onto the widget’s front-end markup. (min 1, max 150). |
| Content — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Content — Image Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Content — Image Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Content — Icon Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Content — Alignment | Writes CSS (td, text-align) onto the widget’s front-end markup. Options: Left; Center; Right. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
Which Data Table options need King Addons Pro?
Controls marked with the Pro icon in this widget’s PHP. King Addons Pro is a separate license from Elementor Pro.
How do I add Data Table in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Data Table”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related content widgets
Accordion
Collapsible panels for FAQs, policies, and long answers. One heading per panel; the body stays hidden until the visitor opens it.
Advanced Blog Posts Carousel
A carousel of blog posts with image, title, and meta — lighter than a full magazine grid.
Advanced Callout Box
A note, tip, or warning box with an icon and optional button.
Advanced Card Carousel
A carousel of cards you fill yourself (image, text, button) — not a post query.
Charts
Bar, line, pie, or radar charts from values you enter in the widget.
Content Ticker
A scrolling ticker of posts or custom items for headlines and announcements.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Data Table after you activate it.