FV - Data Table

The FV - Data Table widget lets you display form submission data on the frontend of your website using a Form Vibes Data Profile.

Once you have created a Data Profile in Form Vibes, you can select it in the widget and display its submission data as a table. You can also override some of the profile settings for a specific table and customize how the table looks on the frontend.

First, open the page where you want to display the submission data in the Elementor editor.
Search for the FV - Data Table widget and drag it to the required section of the page.
Once added, you will find the widget settings under the Content and Style tabs.

Content Settings

The Content tab controls which Data Profile is displayed and lets you override some of its default settings.

General

Under General, you will find two options.

Data Profile: Select the Data Profile whose submission data you want to display in the table.
Override Default Settings: Enable this option to override the default settings of the selected Data Profile for this widget. When enabled, the Custom Settings section appears.

FV - Data Table General Settings

Custom Settings

Pagination: Enable or disable pagination for the data table.
Show Limit: Enable this option to show the limit control for the table.
Show Serial No: Enable this option to display a serial number column in the table.
Serial No Column Title: Enter the title you want to display for the serial number column.
Hide Expand Row: Enable this option to hide the row expand option from the table.
Expand Icon: Choose the icon used to expand a row and view additional submission details.
Collapse Icon: Choose the icon used to collapse an expanded row.

FV - Data Table Custom Settings

Style Settings

Header

The Header section lets you customize the appearance of the table header. You can configure separate styles for the Normal and Hover states.

Color: Set the text color of the table header.
Background Color: Set the background color of the header.
Typography: Customize the typography of the header text.
Alignment: Set the alignment of the header content.
Padding: Adjust the spacing inside the header cells.
Border Type: Choose the border style for the header.
Border Width: Set the width of the header border.
Border Color: Choose the color of the header border.
Border Radius: Adjust the corner radius of the header.

FV - Data Table Header Style Settings

Content

The Content section lets you style the rows and data displayed inside the table.

Table Style: Choose between Normal and Stripe table styles.
Column Max Width: Set the maximum width of the table columns.
Color: Set the text color of the table content.
Icon Color: Set the color of the icons displayed in the table.
Background Color: Set the background color of the table rows.
Alternate Row Background Color: Set a different background color for alternate rows (display when selecting Stripe as a table style).
Typography: Customize the typography of the table content.
Alignment: Set the alignment of the content inside table cells.
Padding: Adjust the spacing inside the table cells.
Border Type: Choose the border style for the table content.
Border Width: Set the width of the border.
Border Color: Set the border color.
Border Radius: Adjust the corner radius.

FV - Data Table Content Style Settings

Expand Section

The Expand Section controls the appearance of the additional information displayed when a table row is expanded.

Preview Expand Section: Enable this option to preview the expanded section while styling it in Elementor.
Background Color: Set the background color of the expanded section.
Width: Set the width of the detail area inside the expanded section.
Table Background Color: Set the background color of the details table inside the expanded section.
Detail Box Position: Set the position of the detail box to the left, center, or right.
Padding: Adjust the spacing around the expanded section content.

FV - Data Table Expand Section Style Settings

Use the Label and Value tabs to style the field labels and their submitted values separately.

Color: Set the text color.
Background Color: Set the background color.
Typography: Customize the text typography.
Alignment: Set the text alignment.
Padding: Adjust the spacing around the content.
Border Type: Choose the border style.
Border Width: Set the width of the border.
Border Color: Set the border color.

FV - Data Table Expand Section Label Settings

The Pagination section lets you customize the appearance of the pagination controls. Separate styling is available for Normal and Hover states.

Color: Set the text color of the pagination area.
Button Color: Set the text/icon color of the pagination buttons.
Button Background Color: Set the background color of the pagination buttons.
Border Type: Choose the border style for the pagination buttons.
Border Radius: Adjust the corner radius of the pagination buttons.

FV - Data Table Pagination Style Settings