After installing and activating the Gravity Forms integration for wpDataTables plugin, “Gravity Form” will appear natively as a table type in the wpDataTables plugin. You will be able to create wpDataTables based on your Gravity Form entries using the “Create a table linked to an existing data source” page.
The first thing you need to do to create a Gravity Form-based wpDataTable is to prepare a Gravity Form, and add at least one form entry in it. In this tutorial we will create a wpDataTable based on a dummy “Build A Pizza” form that has 3 entries. Each form field will be shown as a wpDataTable column, and each form entry will render one row in the wpDataTable. On the left side you can see a dummy form that will be used in this tutorial.
Form fields that can be displayed in wpDataTable as columns are: “Your Name“, “Your Phone Number“, “Is This Pick Up or Delivery?“, “Delivery Date“, “Delivery Time“, “Delivery Address“, “Product Name“, “Select Your Size“, “Select Your Crust“, “Choose Your Toppings”, “Instructions or Additional Comments” and “Your Order Total” although it is not required to show all of them in the table.
When the form and entries are ready, you can begin creating a wpDataTable based on it. First, go to wpDataTables -> Create a Table, choose “Create a table linked to an existing data source” option, and click “next”.
Set a name for your new wpDataTable to help you find the table later; then choose “Gravity Form” as the Input data source type. After you choose “Gravity Form” as a table type, a new selectbox “Choose a Gravity Form” will appear. With this selectbox, you can choose a form, that will provide entries as data for your new table. In this tutorial we will use the “Build A Pizza” form.
After this step you will see a selectbox “Choose fields to show as columns” that allows you to choose the form fields you will use as columns. Using this selectbox, you can choose form fields that will be used in the table. Fields are separated in two categories: Form Fields and Common fields.
Form Fields are fields that were added in the process of creating a Gravity Form. Here, the fields are: “Your Name“, “Your Phone Number“, “Is This Pick Up or Delivery?“, “Delivery Date“, “Delivery Time“, “Delivery Address“, “Product Name“, “Select Your Size“, “Select Your Crust“, “Choose Your Toppings”, “Instructions or Additional Comments” and “Your Order Total“.
Common Fields are the default metadata fields that exist for every Gravity Form entry, and can be added in every Gravity Form based wpDataTable. These fields are always same: “Entry Date“, “Entry Id“, “User” and “User IP“.
As mentioned above, it is not required to add all these fields to create a wpDataTable – just choose the ones you would like to show in the table. In this example we will add “Your Name“, “Your Phone Number“, “Is This Pick Up or Delivery?“, “Delivery Date“, “Delivery Time“, “Delivery Address“, “Select Your Size“, “Select Your Crust“, “Choose Your Toppings”, “Your Order Total“, and “Entry Date” from the Common Fields category.
Once you’ve selected the fields/columns you want to show in the table, click Apply, and a wpDataTable will be created and displayed in the “Table preview and columns setup” card. You can see in the image on the left that the new wpDataTable has 11 columns: 10 columns created from Form Fields, and one created from Common Fields (“Entry Date”). Each row represents one form entry that was previously added in the form.
Each Gravity form-based wpDataTable receives an extra Gravity settings tab on the table configuration page, along with several some additional table settings. These will allow you to narrow the range of form entries to be displayed in wpDataTable – by status and by date.
You can toggle Show form deleted records to show/hide entries that are deleted by the administrator.
By choosing one of the two possible filtering logic options in the Filter by date selectbox, you can filter entries by their date. It is possible to choose between Filter by date range and Filter by last X time period options, or you can leave this dropdown empty if you don’t wish to filter form entries that are displayed in the table.
Filter by date range – If you select this option, two input fields (“From” and “To”) will be displayed by the Filter by date selectbox. By choosing several date values in these datetimepicker input fields, wpDataTable rows will be updated by date range once entries have been added to the form.
Filter by last X time period – If you choose this option, two additional input fields will be displayed by the Filter by date selectbox. In the first field, you can add a number of periods (e.g., 30), and in the second field, you can choose between (Day(s), Week(s), Month(s) and Year(s)). By selecting “30 Day(s)” for example, you will filter and display in the wpDataTable only those entries that were added in last 30 days in the Gravity Form that is used as the data source for this wpDataTable.
At this point, the table is prepared. But to improve its usability, we need to define some additional settings for the table and its columns. In this case we defined these settings as:
1. Enabled Limit table width checkbox and disable Table title checkbox on “Display” tab.
2. Set the Filter type for “Created at” as “DateTime range”.
3. Add “$” character in Cell content suffix input field for “Your total order” column.
When the configuration of your Gravity form-based wpDataTable is finished, you simply need to insert it in your post or page.
To open or create a new WordPress post or page, place the cursor in the position where you would like to insert your table, click the “Insert a wpDataTable” button in the MCE editor panel, and choose the CSV-based table that you prepared.
Or, if you prefer to do things manually, you can just copy&paste the wpdatatable shortcode (you can find it in the wpDataTables browse page, or in wpDataTable edit page).