Data Table (Divi)

Advanced tables for Divi 5. Rows come from Divi’s own table editor, pasted CSV, a CSV file or Google Sheets link, a JSON feed or TablePress. Visitors search, filter, sort, page and export; you add totals, badges, bars, stars and highlighting from Column Settings items. Each section names the settings that make it — resize the window to see the phone layouts.

1. Team directory — the table editor

Source: Table editor. Column Settings: Started as a date (M j, Y), Salary as currency with an average, Status as badges with a filter, Team with a filter, Email as a link. Row numbers, the columns menu and all five export buttons. Phones stack the rows as cards.

2. Inventory — a CSV file with rich cells

Source: CSV file link (read from the Media Library folder, no HTTP). Photo as images, Price as currency, Stock with a sum, Sell-through as progress bars, Rating as stars, Featured as yes/no icons, Status as badges. Highlighting: rows with no stock turn red, stock under 10 turns amber. Export sits in one “Export” menu. Striped design; phones collapse the extra columns under a + button.

3. A live Google Sheet — floating rows and “Load more”

Source: a public Google Sheet link, turned into a CSV export and cached for an hour. Four filters, the Floating rows design, Load more after 6 rows.

4. A JSON feed — nested fields

Source: JSON feed (jsonplaceholder.typicode.com/users). Fields to Show: name, email, address.city, company.name, website. Minimal design, sorted by name, previous / next paging.

5. A TablePress table

Source: TablePress table “Coffee origins”. Bordered grid, sorted by Score (highest first), Process as dot badges, first column as row headings.

6. Five designs, three badge styles

Layout & Responsive → Design, and Badges, Bars & Stars → Badge Style. Same pasted CSV in each.

Striped

Design: Striped, badge style: solid.

Floating rows

Design: Floating rows, badge style: soft.

Minimal

Design: Minimal, badge style: solid.

7. 30 orders in a 420 px box

Maximum Height 420 px (the header stays pinned), Pin the First Column, Keep Cells on One Line and a 1100 px scroll width, so it scrolls both ways on small screens. Revenue total, per-page menu, Show All.

8. Plans compared — styled with the Design tab

Pasted CSV. Design tab: an indigo header with white 13 px bold text, roomy 18 px rows, a rounded table box with a shadow, first column as row headings, the caption shown above.

9. Dark leaderboard

Table Colors on a dark surface, cyan accent, striped rows; Win rate as bars, Rating as stars, Qualified as icons, top three highlighted; page numbers and a Region filter.

10. Departures board

Pasted CSV, first column as row headings, amber highlight on delayed trains, red on cancelled ones, no search or paging — a finished, glanceable board.

11. Searching with no results

The No Results Text is shown when nothing matches — try searching “zeppelin”. Search placeholder, “All” filter text and the rows-per-page menu are all your own words.