Advanced Data Table
Let visitors search and sort large tables of data.
Data tables from typed rows, CSV, Google Sheets, JSON feeds or TablePress, with search, filters, sorting, pagination, totals, highlighting and CSV/Excel/JSON export.
Elementor widget
Requirements
- Elementor 3.5 or newer
- WordPress 6.2 or newer
- PHP 7.4 or newer
- Licence: Pro ($2 / year) — add it to the cart in Moduly
Add it to a page
- Edit the page with Elementor.
- In the widget panel, search for Advanced Data Table. Our widgets sit in the Moduly category and carry the Moduly badge.
- Drag it onto the page.
- Set it up in the Content tab, style it in the Style tab, and use Advanced for spacing, motion and visibility.
Settings
Data Source
| Setting | What you can set |
|---|
| Source | Typed rows, Pasted CSV, CSV file or Google Sheets link or JSON feed / REST API |
| Column Headings | Separate headings with |. |
| Rows | each item: Cells |
| CSV | Paste from a spreadsheet. Comma, semicolon, tab or | are detected. |
| Link | A public .csv file, a Media Library CSV, or a Google Sheet shared as “Anyone with the link can view” (or published to the web). Sheet links are turned into CSV exports automatically. |
| JSON URL | Link |
| Records Path | Dot path to the list of records when it is not the top level. Leave empty to find it automatically. |
| Fields to Show | Comma-separated keys, in order. Nested keys with dots (title.rendered). Leave empty for all. |
| First Row Is the Header | On / off |
| Cache (minutes) | How long a fetched file is kept before it is read again. 0 reads it on every visit. |
| Maximum Rows | Number |
Columns
| Setting | What you can set |
|---|
| Column Settings | each item: Column (number or heading), Rename Heading, Shows As, Decimals, Prefix, Suffix, Date Format, Badge Colours, Link Text, Alignment, … (16 in all) |
Conditional Highlighting
| Setting | What you can set |
|---|
| Rules | each item: Column (number or heading), When the Value, Value, Highlight, Background, Text Color or Bold |
Search, Sort & Pages
| Setting | What you can set |
|---|
| Search | On / off |
| Placeholder | Text |
| Filter “All” Text | Text |
| Sorting | On / off |
| Sort on Load by Column | Text |
| Direction | Ascending or Descending |
| Pagination | None — show every row, Page numbers, Previous / next or “Load more” button |
| Rows per Page | Number |
| Let Visitors Choose | Choices for the “rows per page” menu. Leave empty to hide it. |
| “Showing 1–10 of 57” Line | On / off |
| Show / Hide Columns Menu | On / off |
| Row Number Column | On / off |
| Totals Row Label | Text |
| No Results Text | Text |
Export
| Setting | What you can set |
|---|
| Buttons | CSV, Excel, JSON, Copy or Print |
| Export | The rows that match the search and filters or Every row |
| File Name | Text |
| Menu Label | Put the export buttons in one drop-down menu with this label. |
Layout & Responsive
| Setting | What you can set |
|---|
| Design | Clean lines, Striped, Bordered grid, Floating rows or Minimal |
| Narrow-Screen Layout | Scroll sideways, Stack rows as cards or Collapse extra columns |
| Columns Kept When Collapsed | The rest open under the row with a + button. |
| Table Width When Scrolling | 300–2000 |
| Maximum Height | 150–1200 · The table scrolls inside this height with the header pinned to the top. |
| Pin the First Column | On / off |
| Keep Cells on One Line | On / off |
| First Column as Row Headings | On / off |
| Caption | Text |
| Show the Caption | On / off |
Style tab: design controls for Table, Header, Rows, Search, Filters & Buttons, Pagination & Info or Badges, Bars & Totals — colours, typography, spacing, borders and hover states.
Tips
- Start with the Design choice — it changes the overall look the most; fine-tune the rest afterwards.
Troubleshooting
- Floating-rows design: the rounded right end sits on the hidden “+” column, so the right corners look square.
- The Google Sheets and JSON demos depend on those public URLs staying up (cached for an hour).
- TablePress was installed and left active for the demo.
- Changes not showing on the live page? Regenerate CSS in Elementor → Tools → Regenerate CSS & Data and clear any page cache.
- Also available for Gutenberg (Advanced Data Table).
- Works well with: Advanced Tabs, Bar Chart, Data Table.
