Create searchable, sortable tables and populate with dynamic data from ACF, Metabox, Custom posts or any custom WP Query that you use through Brick’s Query loop feature.
Using Query Loop
The dynamic table element hooks into Bricks’ query loop feature to allow the content in the table rows to be populated by either post data, or ACF repeaters, Metabox, etc. Anything that the Query loop supports can be output in rows in the table.
Set up your loop and choose how many rows in total using the Query loops ‘posts per page’ setting.
Columns / Dynamic Data
Here we set up what data we want to show.
For each column, add a heading for the table header and set up the ‘column data’. The column data uses Bricks’ dynamic data dropdown, where you can choose any of the available dynamic tags. (it’s the same process as if using the query loop inside a container to show dynamic content)
Min-width – Each column has the option to define a width. This is the minimum width the column will take up, useful if the autowidth is cutting of some content and you need to ensure this doesn’t happen.
Column data as numbers – Enable if this column is displaying numbers, this will ensure the column is sorted by the value rather than alphabetically, which is the default.
Sortable columns – Enable if you want the user to be able to click the column heading to sort the data by that column.
Resizable columns – Enable if you want the user to be able to resize the columns from the browser.
Prevent Text Wrap – Enable if you wish for all text to remain on one line.
Cell overflow – Set the ‘overflow’ property for the cells within the table. Default is auto.
Each part of the header can be styled in the table header tab. Use Bricks’ psuedo states option to enable all the styles for hover/focus etc if needed.
A search field can be enabled above the table where the user can search for something specific inside of the table.
Table Footer / Pagination
Pagination – If there are a lot of rows, you can enable pagination and set how many rows will show per page.
All the text and styles of the pagination and the footer can be styled also from inside this tab.
Can I add in custom PHP into the table? – You can by using Bricks’ dynamic tag, ‘echo’. This is a built in feature of Bricks. Any custom function you add inside a code snippet, can be output into the table using that dynamic tag. Skip to the ‘advanced’ heading in the Dynamic Data documentation.