Gravity Forms integration - wpDataTables Tables and Charts Plugin (2024)

The first thing you need to do to createa Gravity Form-based wpDataTable is to prepare a Gravity Form, andadd at least one form entry in it. In this tutorial we will create a wpDataTable based on a dummy “Seminar Feedback Form” form that has 15 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: “Event Name“, “Event Venue“, “Date“, “Group/Association Name”, “Do you think this venue is appropriate?“, “Did you receive all the information you required?“, “How would you rate any workshops attended?“, “Would you like to attendee any further Conference?“, although it is not required to show all of them in the table.

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 Fieldsand 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 Fieldsare 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 “Event Name“, “Event Venue“, “Date“, “Group/Association Name”, “Do you think this venue is appropriate?“, “Did you receive all the information you required?“, “How would you rate any workshops attended?“, “Would you like to attendee any further Conference?“, and “Entry Date” from the Common Fields category.

From version 1.1 there is an option to use Server-side processing with Gravity form based tables. This allows you to create a table from the form which has hundreds of thousands of entries. To find out more information about server-side processing please visit – LINK

Under DATA SOURCE tab you will find two more options:

1. Server-Side Processing,or Lazy Loading– This switch defines whether the complete table data will be included in thepage all at once, or if it will be loaded on request, with the sorting/filtering to be processed by server. You can read more information about this featurehereandhere.
2. Auto-refresh interval– If set to a value different from 0, tables will auto-refresh after each XX seconds interval.

Purchase now

1. To allow front-end editing, simply open the “Editing” tab in the table configuration settings, click the “Allow editing” option, and click the “Apply” button. From standard editing features in wpDataTables for Gravity based you can use:
2. Popover edit block – When this feature is enabled, you won’t see the “Add”, “New” and “Delete” buttons in their standard place (the top right corner above the table, in the TableTools block), but when you click on any table row, you will see a popover. More on this link.
3. Editor roles– This allows you to select which WordPress user roles will be allowed to edit this table.
4. Users see and edit only their own data– If this switch is enabled, every user will only see the rows that he/she entered.
5. Show all rows in back-end –if “Users see and edit only their own data” is enabled, it will be shown this option that allow to users see all data for this table in admin area. (Available from 2.7 version)
6. Edit buttons to be displayed on the front-end – Allows you to include only certain editing buttons on the front-end, by select them from this drop-down. Leave unchecked to show all buttons.

7. Show duplicate button – If this option is enabled, Duplicate edit button will be available in table Edit buttons. This options is unchecked by default. More info on this link.

After clicking on theNEW button, you will see an editor popup. The popup is responsive, so it will work correctly on mobile and tablet devices as well.

Multi-page forms will also work for adding new entries.

Please keep in mind that we are using Gravity own form for adding new and editing entry functionality.

Each Gravity form-based wpDataTable receives an extraGravitysettingstab on the table configuration page, along with several additional table settings. These will allow you to narrow the range of form entries to be displayed in wpDataTable – by status and by date.

1. Filter by status – You can toggle this optionto show/hide entries that are deleted by the administrator.
2. Filter by user– If you choose this option, the user will be able to see only their own entries in the table. This is the same option as Users see and edit only own dataon Editing tab and allow you to filter the table by the user for non-editable tables.
3. By choosing one of the two possible filtering logic options in the Filter by date select-box, you can filter entries by their date. It is possible to choose between Filter by date rangeand Filter by last X time period options, or you can leave this drop-down empty if you don’t want to filter form entries that are displayed in the table.

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 Gravity wpDataTable 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). To add wpDataTable shortcodes on the page, please check out the section forAdding wpDataTables shortcodes on the page.

Purchase now