Data Table
Let visitors search and sort large tables of data.
Advanced data tables for Divi 5: table editor, CSV, Google Sheets, JSON or TablePress data with search, filters, sorting, pagination, totals, highlighting, rich cells, export and phone layouts.
Divi 5 module
Requirements
- Divi 5.0 or newer (theme or Divi Builder)
- 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
- Open the page in the Divi 5 Visual Builder.
- Click + to add a module and search for Data Table.
- Set it up in the Content tab, then style it in the Design tab.
Settings
Data Source
| Setting | What you can set |
|---|---|
| Source | Table editor, Pasted CSV, CSV file or Google Sheets link, JSON feed / REST API or TablePress table · Type the rows in the table editor, paste CSV, link a CSV file or a Google Sheet, read a JSON feed, or show a TablePress table. |
| Rows | The first line holds the column headings. Use the column menu to rename, add or hide columns. |
| 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 become CSV exports automatically. |
| JSON URL | For example https://example.com/wp-json/wp/v2/posts — or a path on this site like /wp-json/wp/v2/pages. |
| Records Path | Dot path to the list of records when it is not the top level (data.items). Leave empty to find it automatically. |
| Fields to Show | Comma-separated keys, in order. Nested keys with dots (title.rendered, address.city). Leave empty for all. |
| TablePress Table | — Choose a table — · Tables made with the TablePress plugin. |
| First Row Is the Header | On / off |
| Cache (minutes) | 0–1440 · How long a fetched file is kept before it is read again. 0 reads it on every visit. |
| Maximum Rows | 1–5000 |
Search, Sort & Pages
| Setting | What you can set |
|---|---|
| Search | A search box above the table. Multiple words must all match. |
| Search Placeholder | Text |
| Filter “All” Text | First choice in each column’s drop-down filter (turn filters on per column). |
| Sorting | Click a heading to sort. Numbers, dates and text each sort the right way. |
| Sort on Load by Column | A column number or heading. Leave empty to keep the source order. |
| Sort Direction | Ascending or Descending |
| Pagination | Page numbers, Previous / next, Load more button or None — show every row |
| Rows per Page | 1–500 |
| Rows-per-Page Menu | Choices visitors can pick from. Leave empty to hide the menu. |
| “Showing 1–10 of 57” Line | On / off |
| Show / Hide Columns Menu | On / off |
| Row Number Column | On / off |
| Totals Row Label | Shown when a column has a footer total. |
| No Results Text | Text |
Export
| Setting | What you can set |
|---|---|
| Export Buttons | CSV, Excel, JSON, Copy or Print · Download buttons above the table. |
| 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 with this label. Leave empty for separate buttons. |
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 · Per device: switch to Tablet or Phone view to choose. Phones stack rows as cards unless you pick otherwise · Per device. |
| Columns Kept When Collapsed | 1–8 · The rest open under the row with a + button. |
| Table Width When Scrolling | 0–2000 · Minimum table width before it scrolls sideways. Empty fits the screen · Per device. |
| Maximum Height | 0–1200 · The table scrolls inside this height with the header pinned. Empty for no limit · Per device. |
| Pin the First Column | On / off |
| Keep Cells on One Line | On / off |
| First Column as Row Headings | On / off |
| Caption | Describes the table for screen readers, and names printed or exported files. |
| Show the Caption | On / off |
Design tab: Table Colors, Table Box, Header, Rows, First Column, Caption, Search & Filters, Export & Menu Buttons, Pagination, Info Line, Badges, Bars & Stars, Totals Row or Text.
Column Settings (child module)
Column
| Setting | What you can set |
|---|---|
| Column (Number or Heading) | Which column these settings are for: its number (1, 2…) or its heading. |
| Rename Heading | Text |
| Shows As | Automatic, Text, Number, Currency, Percent, Date, Link (text|url or url), Email, … (14 in all) |
| Decimals | 0–6 |
| Prefix | For example $. |
| Suffix | For example “ kg”. |
| Date Format | PHP date format such as M j, Y. Leave empty to show the date as written. |
| Badge Colors | One per line: Active: #16a34a. |
| Link Text | For bare URLs. Leave empty to show the address. |
| Alignment | Automatic, Left, Center or Right |
| Width | For example 160px or 20%. |
Behavior
| Setting | What you can set |
|---|---|
| Sortable | On / off |
| Dropdown Filter | A drop-down of this column’s values above the table. |
| Footer Total | None, Sum, Average, Lowest, Highest or Count |
| Hide Column | Still searchable and exported. |
| Hide On | Desktop, Tablet or Phone |
Conditional Highlighting
| Setting | What you can set |
|---|---|
| Highlight When the Value | Never (no rule), Equals, Does not equal, Contains, Is greater than, Is less than or Is empty · Colour the row or the cell when this column’s value matches. Add another Column Settings item for more rules. |
| Value | Text |
| Highlight | The whole row or Just the cell |
| Background | Colour |
| Text Color | Colour |
| Bold | On / off |
Tips
- Settings marked Per device can be set separately for desktop, tablet and phone.
- Start with the Design choice — it changes the overall look the most; fine-tune the rest afterwards.
Troubleshooting
- Divi’s placeholderContent isn’t applied when a module is added through the store API in tests; a new table therefore falls back to the same sample rows as the table editor’s default (identical in PHP and the field default), so nothing is empty either way.
- The Google Sheets and JSON demos depend on those public URLs (cached for an hour). TablePress must stay active for section 5.
- On a pink highlighted row the “no” icon’s pale red circle blends into the row colour.
- Front end looks out of date? Clear Divi's static CSS cache and any page-caching plugin.
Related
- Also available for Elementor (Data Table).
- Works well with: Advanced Tabs, Event Calendar, PDF Viewer.