Phox Table is a spreadsheet-style table builder for Breakdance. Type your data in, pull rows from any post type, or show a live Google Sheet. Visitors can sort columns, search, filter, page through rows and export to CSV.
A gym comparison, a coffee list you can sort and search, WooCommerce products, a project tracker and a live Google Sheet. Click a column heading to sort, and type in a search box to filter the rows.
Header Column on the first column, sub-heading rows merged across all four columns, true/false cells for ticks and crosses, and a footer row for the price.
| Summit Gym | Off-Peak | Standard | All Access |
|---|---|---|---|
| Gym floor | |||
| Opening hours | 10am to 4pm | 6am to 10pm | 24 hours |
| Free weights and machines | ✓ | ✓ | ✓ |
| Personal training | ✗ | 1 session a month | 4 sessions a month |
| Classes | |||
| Group classes | ✗ | ✓ | ✓ |
| Book classes ahead | — | 7 days | 14 days |
| Extras | |||
| Sauna and steam room | ✗ | ✗ | ✓ |
| Guest passes | None | 2 a month | 4 a month |
| Per month | £19 | £32 | £45 |
Enable Column Sorting, Enable Search Box, Per-Column Filters, Show CSV Export Button and Enable Pagination (6 rows per page). Click a column heading to sort, or type in the boxes to filter.
| Coffee | Origin | Process | Roast | Tasting notes | Our score | 250g |
|---|---|---|---|---|---|---|
| Kochere | Ethiopia | Washed | Light | Jasmine, lemon, bergamot | £11.50 | |
| La Esperanza | Colombia | Washed | Medium | Red apple, caramel, cocoa | £9.80 | |
| Kiambu AA | Kenya | Washed | Light | Blackcurrant, grapefruit | £12.40 | |
| Cerrado | Brazil | Natural | Dark | Hazelnut, dark chocolate | £8.20 | |
| Huehuetenango | Guatemala | Washed | Medium | Plum, brown sugar, almond | £9.60 | |
| Sidama Natural | Ethiopia | Natural | Light | Blueberry, strawberry jam | £12.00 | |
| Santa Barbara | Honduras | Honey | Medium | Peach, honey, milk chocolate | £9.40 | |
| Aceh Gayo | Sumatra | Wet-hulled | Dark | Cedar, spice, molasses | £8.90 | |
| Tarrazu | Costa Rica | Honey | Medium | Orange, toffee, walnut | £10.20 | |
| Kirinyaga | Kenya | Natural | Light | Cherry, hibiscus, cola | £12.80 | |
| Northside Espresso | Blend | Mixed | Dark | Chocolate, cherry, praline | £8.50 |
Data Source: Dynamic, Post Type: product, ordered by price. Columns map to the featured image, title, product category, the _price field and a button to the product page.
| Product | Category | Price | ||
|---|---|---|---|---|
 | Goldfish Food Flakes | Fish Food | £2.99 | View product |
 | Harringtons Lamb Dog Food | Dog Food | £5.99 | View product |
 | Wagg Active Goodness Dog Food | Dog Food | £9.50 | View product |
 | Naturo Dog Food | Dog Food | £10.00 | View product |
 | Cat Pouches | Cat Food | £12.99 | View product |
 | Adult Wet Cat Food | Cat Food | £13.99 | View product |
 | Canagan Chicken Dog Food | Dog Food | £17.99 | View product |
Progress bar, badge and true/false cells, sortable by date and number. Responsive Mode: Priority columns, so Due hides on tablets and Lead and Signed off hide on phones.
| Stage | Progress | Status |
|---|---|---|
| Measured survey | 100% | Done |
| Planning application | 100% | Done |
| Structural drawings | 80% | On track |
| Kitchen extension | 45% | At risk |
| Loft conversion | 20% | On track |
| Garden landscaping | 0% | Not started |
Data Source: Google Sheet, First Row Is Headers on, cached for 15 minutes. Horizontal scroll, Sticky Header and Sticky First Column. The scroll area is capped at 420px with a line of custom CSS so the header can stick.
| ID | Name | Department | Role | Start Date | Status | Hours | Rate (£) | Monthly Cost (£) |
|---|---|---|---|---|---|---|---|---|
| 1001 | John Smith | Marketing | Manager | 03/01/2024 | Active | 160 | 35 | 5600 |
| 1002 | Sarah Jones | Sales | Executive | 15/02/2024 | Active | 152 | 28 | 4256 |
| 1003 | Michael Brown | Development | Developer | 22/03/2024 | Active | 168 | 42 | 7056 |
| 1004 | Emily Wilson | Support | Advisor | 10/04/2024 | On Leave | 144 | 24 | 3456 |
| 1005 | David Taylor | Finance | Accountant | 01/05/2024 | Active | 160 | 38 | 6080 |
| 1006 | Laura White | HR | Coordinator | 12/06/2024 | Active | 156 | 30 | 4680 |
| 1007 | Chris Green | Operations | Supervisor | 18/07/2024 | Inactive | 160 | 32 | 5120 |
| 1008 | Olivia Harris | Marketing | Designer | 05/08/2024 | Active | 150 | 31 | 4650 |
| 1009 | James Walker | Development | QA Engineer | 19/09/2024 | Active | 162 | 34 | 5508 |
| 1010 | Sophie Hall | Sales | Account Manager | 11/10/2024 | Active | 158 | 36 | 5688 |
| 1011 | Daniel Young | Support | Technician | 27/11/2024 | Active | 160 | 26 | 4160 |
| 1012 | Emma King | Finance | Analyst | 08/01/2025 | Active | 164 | 39 | 6396 |
| 1013 | Matthew Scott | Development | Developer | 14/02/2025 | Active | 168 | 43 | 7224 |
| 1014 | Chloe Adams | HR | Recruiter | 03/03/2025 | On Leave | 148 | 29 | 4292 |
| 1015 | Ryan Baker | Operations | Coordinator | 21/04/2025 | Active | 160 | 27 | 4320 |
Build it on the canvas, then choose what visitors can do with it.
Drop Phox Table onto your page and pick a data source: Manual, Dynamic or Google Sheet.
Click Edit Table on the canvas to open the spreadsheet editor, map columns to post fields, or paste a Google Sheet link.
Switch on sorting, search, filters, pagination or CSV export, pick a responsive mode and style it.
Everything a data table needs, set up in the Breakdance editor.
Add and remove rows and columns in a grid on the canvas, and edit each cell in place.
Text, rich text, image, button, icon, badge, star rating, progress bar and true/false.
Query any post type and map each column to a post field, a custom field or a taxonomy.
Paste the link to a shared Google Sheet. The table reads it and keeps a copy for the minutes you choose.
Click a heading to sort. Each column sorts as text, number, date or currency.
Add a search box above the table and a filter box under each column heading.
Split long tables into pages with a set number of rows per page.
Show an Export CSV button so visitors can download the rows they have filtered.
Stack rows into cards, scroll sideways or hide low-priority columns on tablets and phones.
Keep the heading row and the first column in view while the table scrolls.
Span cells across columns and rows, and add sub-heading and footer rows.
Style the header, body, stripes, hover colour, inner lines, footer and the search controls.
Any time information reads better in rows and columns.
Compare memberships, packages or product options with ticks and crosses.
Show WooCommerce products with images, prices and a button to each product.
Let customers search and sort long lists of items.
Show progress bars and status badges for each stage of a job.
Keep a staff list or timetable in a Google Sheet and show it live.
Publish technical specs or results that visitors can filter and download.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Table Data | ||
| Data Source | Manual (Table Builder), Dynamic (Query posts) or Google Sheet (Live). | Manual |
| Table Structure | Columns, rows and cells, edited with the Edit Table button on the canvas. | 3 example rows |
| Dynamic Query | ||
| Post Type | The post type to list, one post per row. | post |
| Number of Rows | How many posts to show. | 10 |
| Order By | Date, Title, Menu Order, Random, Meta Value (text) or Meta Value (number). | Date |
| Order By Meta Key | The custom field to sort by when ordering by a meta value. | — |
| Order | Ascending or Descending. | Descending |
| Google Sheet | ||
| Sheet URL | Link to a Google Sheet that anyone with the link can view, or a sheet published to the web. | — |
| First Row Is Headers | Use the first sheet row as the column headings. | On |
| Cache (minutes) | How long to keep a copy of the sheet before reading it again. | 15 |
| Row Limit | Maximum rows to show. 0 shows them all. | 0 |
| Options | ||
| Caption | A caption shown above the table. | — |
| Responsive Mode | Stack to cards, Horizontal scroll, Priority columns (hide) or None. | Stack to cards |
| Switch At Breakpoint | Where cards mode starts: 1119px, 1023px, 767px or 479px. | Phone Portrait |
| Card Title Column # | Which column becomes the title of each card. | 1 |
| Sticky Header | Keeps the heading row in view as the table scrolls. | Off |
| Sticky First Column | Keeps the first column in view when scrolling sideways. | Off |
| Enable Column Sorting | Click a heading to sort by that column. | On |
| Enable Search Box | Adds a search box above the table. | Off |
| Search Placeholder | Placeholder text in the search box. | Search… |
| Per-Column Filters | Adds a filter box under each column heading. | Off |
| Show CSV Export Button | Adds an Export CSV button above the table. | Off |
| Enable Pagination | Splits the rows into pages. | Off |
| Rows Per Page | Rows on each page. | 25 |
| Table | ||
| Width | Width of the table. | — |
| Background Color | Background of the table. | — |
| Cell Padding | Space inside each cell. | 12px |
| Cell Alignment | Left, Center or Right, used when a column or cell has no alignment of its own. | Left |
| Outer Borders | Radius, border and shadow of the table. | — |
| Cell Typography | Colour, alignment and font for all cells. | — |
| Header | ||
| Background Color | Background of the heading row. | #310467 |
| Typography | Colour, alignment and font of the headings. | — |
| Body | ||
| Striped Rows | Alternate the row colours. | Off |
| Odd Row Color / Even Row Color | The two stripe colours. | — |
| Row Hover Color | Row colour on hover. | — |
| Typography | Colour and font of body cells. | — |
| Header Column | ||
| Background Color / Text Color | Colours for columns marked as a header column. | — |
| Footer | ||
| Background Color / Typography | Colours and font for footer rows. | — |
| Inner Lines | ||
| Horizontal Lines / Vertical Lines | Lines between rows and between columns. | Off |
| Line Color / Line Thickness | Colour and thickness in pixels of the inner lines. | — |
| Search / Sort UI | ||
| Accent Color | Colour of the sort arrow, focused inputs and the export button. | — |
| Input Background / Input Border Color | Colours of the search and filter boxes. | — |
| Spacing | ||
| Margin Top / Margin Bottom | Space above and below the table. | — |
Select the element in Breakdance and click the Edit Table button on the canvas. A spreadsheet editor opens where you add rows and columns, set cell types and merge cells.
The sheet must be viewable by anyone with the link, or published to the web. No API key is needed. Changes show on your site once the cache time has passed.
Yes. In Dynamic mode each column can read a post field (title, date, excerpt, image, link and more), a custom field or a taxonomy, with number, currency, prefix and suffix formatting.
Choose a responsive mode. Cards turns each row into a card with the column names as labels, Horizontal scroll lets the table scroll sideways, and Priority columns hides the columns you mark for tablet or phone.
The heading row and every row that matches the current search and filters, including rows on other pages.
The table sits in its own scroll area, so the header sticks inside that area. Give the scroll area a fixed height (the Google Sheet demo uses 420px) so the rows scroll under the header.
Phox Table is included with Phox Elements, along with 140+ other premium elements for Breakdance.