Table element for Bricks is very useful for showing product comparisons, office schedules, or restaurant menus. It's multipurpose and has many customization options.
How to Use Table Element#
To add the Table element to the page and start using it, please follow the following steps:
- Step 1: Go to WP Dashboard -> Bricks -> Max Addons -> Elements and make sure that the Dynamic Table element is activated here. If it is not active, click on the button in front of it and then click on the Save Changes button.
- Step 2: Now edit your page using Bricks and search for Dynamic Table. Drag and drop it to a desired position on the page and start using it.
Element Options#
Table element is an advanced element and has many options that are arranged in 11 sections.
- General
- Header
- Body
- Search
- Pagination
- Header Style
- Rows Style
- Cells Style
- Icon Style
Let's go through each section in detail.
General#
General section has options to control general settings for the table.
- Source: You can choose a data source for your table content. Either you can manually add Custom content or choose Query to fetch data automatically from WordPress posts.
- Sortable Table: When this option is enabled, a dropdown is shown to sort the table contents. You can also sort the table by clicking on the header of each column.
- Stack at breakpoint: This option enhances the responsiveness of your tables on different devices. You can specify a breakpoint at which your table will switch from its standard horizontal layout to a stacked, vertical layout.
Header#
In the Header section, you can create a header for the table. You can change the header title, choose icon, and define attributes.
Body#
Body is the main part of the table. Here, you can add the main content to the table.
How to add rows and columns to the table?
Search#
Toggle on this option to display a search form above your table. Once you enable the search you can, you can personalize the placeholder color, typography, background color, border, box-shadow, margin and more.
Pagination#
Toggle this option to display pagination on the table. If you enable this option, you can further customize the table's layout by setting rows per page and controlling pagination buttons to streamline navigation. You can also customize the 'Next' and 'Previous' button text and enable summaries to provide users with a clear overview of their data position.
Header Style#
If you are showing a header on the table, you can change the styling for it in this section. Options like background, border, box shadow, padding and text align are available.
Rows Style#
Row styling options apply to table rows. With the Striped Rows option, you can apply different styles to even and odd rows.
Cells Style#
Cells styling options apply to table columns. All the basic styling options are available here.
Icon Style#
You can change icon spacing, typography, and width in case of an icon image.