Dynamic Table element in Max Addons for Bricks Builder allows you to create flexible, responsive tables in different ways. You can use Custom Data, WordPress Query, and Google Sheets.
In this tutorial, we’ll learn how to create a table with custom data in Bricks Builder.
Create a Table With Custom Data#
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 button to activate it and then hit 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.
Since we’re creating a Custom Data Table, the Source must be set to Custom in the General section.
Step 3: Content Tab Options#
When you add the Dynamic Table element, a simple table structure will appear. You can fully customize it using the following sections.
General#
- Source: Choose where your data comes from. Options are:
- Custom: manually add your own header, rows, and cells. (We’ll use this for our table)
- Query: pull data dynamically from WordPress.
- Google Sheets: connect and display spreadsheet data.
- Sortable Table: Enable this option to allow users to sort columns by clicking on the header. Great for organizing data alphabetically, numerically, or by custom logic.
- Stack at Breakpoint: Decide how the table should behave on smaller screens. Options include: Never, Desktop, Tablet Portrait, Mobile Landscape, and Mobile Portrait.
HEADER#
Header section allows you to define the columns of your table. By default, you’ll see 3 predefined columns:
- Header Column #1
- Header Column #2
- Header Column #3
Each column includes the following settings:
- Text: Set the label or name for the column (e.g., “Product Name”, “Price”).
- Icon Type: Add an icon next to the header text (optional).
- Width: Define the column width for better layout control.
- Disable Sorting: If sorting is enabled, you can disable it for specific columns (useful for columns with images or buttons).
- Attributes: Add custom attributes for advanced use cases.
You can also:
- Add more header columns for additional data points.
- Remove unnecessary columns if you need fewer.
BODY#
Body section lets you add and manage rows and their cell content.
- By default, you get 1 predefined row (Row 1).
- Each row contains cells, which map to the header columns.
To build your table:
- Click + ADD ROW to create more rows.
For each row, open its settings and click + Add CELL to populate the data.
Options for each row:
- Cells: Click + ADD CELL to add a new cell (this creates data for the corresponding column).
- Text Type: Define the type of text (plain text, HTML, etc.).
- Link: Add links inside the cell. You can link to: Internal Post/Page, Taxonomy, Media, Lightbox Image, and External URL
- Show Button: Enable this to add a clickable button inside the cell.
- Icon Type: Add an icon to the cell for visual enhancement.
SEARCH#
Add a search bar to your table to help visitors quickly locate the information they need.
Options include:
- Enable Search Form: Toggle it on to display the search bar.
- Width & Alignment: Control the size and position of the search bar.
- Placeholder & Colors: Customize the placeholder text, typography, and colors.
- Styling: Adjust background, borders, margin, and padding to match your design.
PAGINATION#
For tables with a lot of data, enable pagination to split content across multiple pages.
Options include:
- Enable Pagination: Turns on pagination.
- Rows Per Page: Set the number of rows displayed per page.
- Buttons Count: Define the number of pagination buttons to display at once.
- Next/Previous Buttons: Enable/disable navigation buttons and customize their text.
- Summary: Show a summary like “Showing 1–10 of 50 results” with customizable text.
STYLING SECTIONS#
The following sections let you fine-tune the design of your table:
- Header Style: Adjust padding, typography, background, and borders for table headers.
- Rows Style: Apply striped rows, and customize odd/even row colors, borders, and text.
- Cells Style: Control padding, typography, background, and borders of table cells.
- Icon Style: Manage spacing, typography, and image size for icons inside the table.
- Button Style: Style buttons with typography, background, border, and shadow options.
That’s it! You’ve successfully created a Custom Data Table using the Dynamic Table element in Max Addons for Bricks Builder.
By setting the Source to Custom, you can manually control your table’s headers, rows, and cells while still taking advantage of powerful features like sorting, search, pagination, and advanced styling.
This gives you full flexibility to build tables for pricing, product lists, schedules, comparisons, or any custom data you want to present on your website.