Table Widget

The Table widget requires a repeater field either on the current page, page draft (post etc) or on an option page. The supported sub fields are extensive.

The main difference from other Repeater Field based widgets in Advanced Elements is that there are no field selection drop downs. The widget uses dynamic tags to display the repeater field data.

Example video

Widget

You find it easiest by searching for ACF Table in the Elementor Search Widget …  field:

Elementor search widget field

Drag the following widget icon into your section to add the widget.

Configuration

After adding the widget to your section/column the following settings are shown.

First select the repeater field to use as a base for your table.

Add column

Next step is to add your column. Press the “Add Item” button to add a new column. (The text “Add Item” is hardcoded in Elementor and can of writing not be changed.)

Configure column

When you have added a column you need to configure it.

There are 3 main fields that you need to configure.

  • Heading
  • Type (Supported types Text, link, image, rating)
  • And cell value. This changes depending on chosen “Type”. Default is text.
Clicking “Add Item” adds new fields to configure the table column.

Heading

Heading is just a plain text field, it supports dynamic tags but most common is to just enter the column heading manually.

Type

  • Text: Text field is supposed to be used with a dynamic tag.
  • Link: With Link comes to fields Text and URL. These support dynamic tags.
  • Rating: This requires an ACF range field to function.

Display Conditions

One good feature of the ACF Table widget is the support of display conditions. Display conditions enables you to decide if a column should be shown or not to the visitor. For example this enables you to show one column to signed in users and another to just visitors. Cell conditions makes it possible for you to decide if cell data should be shown or not.

Styles

You can style the heading quite extensively.

Body

The Body section have the same settings as the Head section.

Simple example

Updated on June 9, 2020

Was this article helpful?

Related Articles