How to Embed Table on Frontend of your website?

Displaying tables on the frontend of your website is an excellent way to share structured data with your visitors. Whether it’s showcasing product reviews, tracking sales, or displaying user-generated content, embedding tables makes information accessible and visually appealing. With FlowMattic, you can easily add advanced, filterable tables to any page on your website without relying on expensive plugins.

Step-by-Step Guide to Embed a Table Using a Shortcode

Here’s how you can use the FlowMattic shortcode to display a table on the frontend:

1. Get the Table Name and Database:

   • Navigate to the Tables Admin Screen in FlowMattic.

   • Locate the name of the table you want to embed and note the database it’s stored in (e.g., “local” or an external database).

2. Copy the Shortcode: Use the following shortcode format:
   [flowmattic_table table_name="Product Reviews" database="local" filter_column="product_id" filter_value="4"]
   Replace the parameters (explained below) to fit your specific requirements.

3. Add the Shortcode to a Page:

   • Open the WordPress Page Editor (Gutenberg, Classic Editor, or your preferred page builder).

   • Paste the shortcode into the desired section of the page.

   • Save or publish the page to display the table on your website.

4. Preview the Table:

   • Visit the page on your website to ensure the table is displayed correctly and filters are applied as intended.

Understanding the Shortcode Parameters

The shortcode comes with several parameters to customize the table display:

• table_name:

  • The name of the table you want to embed.

  • Example: "Product Reviews".

  • Get this value from the Tables Admin Screen.

• database:

  • Specifies the database where the table is stored.

  • Example: "local" for WordPress database or the name of an external database connected to FlowMattic.

• filter_column:

  • Filters the table data based on a specific column.

  • Example: "product_id" to filter by a column named “Product ID.”

• filter_value:

  • The value in the column to filter the table by.

  • Example: "4" to display rows where the “Product ID” column has a value of 4.

By adjusting these parameters, you can tailor the table display to meet your needs, such as showing only specific rows or filtering data dynamically.

Conclusion

Embedding tables on the frontend of your website using FlowMattic is simple, flexible, and powerful. You don’t need to invest in expensive table plugins to showcase advanced tables with dynamic filtering. With FlowMattic’s shortcode functionality, you can easily share critical data with your visitors while maintaining full control over how it’s displayed. Whether for e-commerce, analytics, or content presentation, FlowMattic has you covered!