Dynamic Table element in Max Addons for Bricks Builder lets you create flexible, responsive tables using multiple data sources: Custom Data, WordPress Query and Google Sheets.
In this tutorial, we’ll learn how to display WordPress content in a table using Query Source. This is useful for creating tables that automatically update when your content changes.
Display WordPress Content in a Table Using Query Source#
Step 1: Activate the Dynamic Table Element#
- Go to WP Dashboard >> Bricks >> Max Addons >> Elements.
- Locate the Dynamic Table element.
- If it’s not active, click the toggle to activate it and then click Save Changes.
Step 2: Add the Dynamic Table to a Page#
- Open an existing page or create a new one using the Bricks Builder editor.
- In the Bricks element search bar, type “dynamic table”.
- Add the element to your page.
- Make sure the element has a “MAX” label in the top-left corner.
- Once added, you’ll see customization options under two tabs:
- Content Tab: configure table data and functionality
- Style Tab: customize the design, colors, and typography
Step 3: Configure Content Tab Options#
When you add the Dynamic Table element, a basic table structure will appear. You can customize it using the following sections.
GENERAL#
General section controls the overall behavior of the table.
- Source: Choose where your data comes from:
- Custom: manually add your own header, rows, and cells.
- Query: pull content dynamically from WordPress. (We’ll use this for our table.)
- Google Sheets: connect and display spreadsheet data.
- Sortable Table: Enable this to allow users to sort columns by clicking on headers. This works for text, numbers, or dates.
- Stack at Breakpoint: Control how your table behaves on smaller screens: Never, Desktop, Tablet Portrait, Mobile Landscape and Mobile Portrait.
DYNAMIC CONTENT#
Dynamic Content section is where you define the content that will populate your table from WordPress. By default, there are three predefined items (these correspond to table headers):
- Item 1
- Item 2
- Item 3
Click on an item to open its settings:
- Column Heading: Define the header text or select dynamic data (e.g., Post Date).
- Column Data: Define the cell content, either as static text or dynamic data. For example, use {post_date} to automatically pull the post date.
- Link: Make the data clickable if needed.
- Icon Type: Add an icon for visual emphasis.
To add more columns, click + ADD ITEM. This allows you to build a table with multiple dynamic columns.
Step 4: Display Your WordPress Content#
Once all items are set, your table will automatically pull the content from your WordPress posts, pages, or custom post types. The table will update dynamically as new content is added or existing content is modified.
Example: Display WordPress Posts in a Table#
Let's create a table with the following columns: | Post Title | Post Date | Author |
1: Add the Dynamic Table Element#
Once you add the "dynamic table" to your page. Go to the Content tab, expand the General section, and set Source to Query.
2: Add Dynamic Columns#
Column 1: Post Title
- Expand Item 1 under Dynamic Content.
- Set Column Heading to Post Title.
- Set Column Data to {post_title}: this will automatically pull the title of each post.
- Optionally, add a Link to make the title clickable (link to the post page).
Column 2: Post Date
- Expand Item 2.
- Set Column Heading to Post Date.
- Set Column Data to {post_date}: this will pull the published date of each post.
- Format the date if needed using WordPress date format options.
Column 3: Author
- Expand Item 3.
- Set Column Heading to Author.
- Set Column Data to {post_author}: this will pull the author’s display name.
3: Add More Posts (Optional)#
The table automatically fetches all posts based on the Query settings. You don’t need to add rows manually; each post will be displayed as a new row in the table.
4: Style Your Table#
- Switch to the Style tab.
- Customize headers, rows, cells, icons, and buttons to match your site design.
- Make sure the table is responsive and readable on all devices.
Result#
Your table will now dynamically display all posts with:
- Column 1: Post Title (clickable)
- Column 2: Post Date
- Column 3: Author
Visitors can sort the table by clicking on column headers, and the table will automatically update when new posts are published.
That’s it! Using Query Source, you can create dynamic, responsive, and automatically updated tables, saving time and ensuring your data remains accurate and up-to-date.