Create searchable, sortable tables and populate with dynamic data from ACF, Metabox, Custom posts or any custom WP Query that you use through Bricks’ Query loop feature.
Dynamic Table – 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. For each column, add in the dynamic tag for the subfield to output. (Like you would usually in Bricks if looping through a repeater, and using the subfield dynamic tag on a text element to output the field)
Static Table – Add rows/cells manually
With the static option, instead of setting just the columns and then allowing the query loop to populate the rows, you instead manually add the rows (and the cells for each row) inside of the settings.
Here we set up what data we want to show.
For each column, add a column heading and set a width if needed. If the column is going to be showing data that is numbers (and needs to be sorted as numbers rather than alphabetically) then enabled ‘column data is numbers’.
If using dynamic data – Use the ‘column data’ setting to add in the dynamic tag for the data you wish to show. (it’s the same process as if using the query loop inside a container to show dynamic content) For example, if using a post query, then using the post_title dynamic tag would show all of the post titles in that column.
If adding manually – Once you’ve set the correct number of columns, go to the ‘Rows/Cells’ tab where you add in your rows and populate the cells. Click ‘add row’ to add a new row, inside each row you can ‘add cell’ to add a new cell for the number of columns you have. The cells can be populated with simple text or there’s the option for a WYSIWYG editor if you need to add some HTML or custom styling.
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.
Choose to have all the columns stack to create a more mobile-friendly vertical layout. The table will rearrange itself at the chosen breakpoint with the column labels on the left and the values of each cell on the right.
Stack columns vertically at breakpoint – Choose the breakpoint where the table with stack (and below)
Row gap – Separate each column data with a gap.
Column label widths – Depending on the labels, you may wish to some widths.
Note – any other styling is inherited from the other settings for the table. For eg if you wish to change the background of the table header when it is stacked, just go to that breakpoint and go back to the table header settings.