In general, its up to the page builder plugins to support ACF field types. But because the table field is not a native ACF field, the support for this field may never happen in page builders.
For now the way to go is using a shortcode. Elementor provides for example a shortcode widget. Before you can use a shortcode to display a table fields table, you have to setup a shortcode in functions.php. The following code does this. You can modify the table html output for your needs.
function shortcode_acf_tablefield( $atts ) { $param = shortcode_atts( array( 'field-name' => false, 'subfield-name' => false, 'post-id' => false, 'table-class' => '', ), $atts ); $class = new class( $param ) { public $atts; public $field_names; public $field_data = ''; public $html = ''; public function __construct( $atts ) { if ( is_string( $atts['subfield-name'] ) ) { $atts['field-name'] = $atts['subfield-name']; } if ( ! is_string( $atts['field-name'] ) ) { return ''; } $this->atts = $atts; $this->field_names = explode( '/', $this->atts['field-name'] ); $this->subfield( 0 ); } private function may_get_table_html( $data ) { if ( isset( $data['body'] ) ) { $return = '<table class="' . $this->atts['table-class'] . '">'; if ( ! empty( $data['caption'] ) ) { echo '<caption>' . $data['caption'] . '</caption>'; } if ( $data['header'] ) { $return .= '<thead>'; $return .= '<tr>'; foreach ( $data['header'] as $th ) { $return .= '<th>'; $return .= $th['c']; $return .= '</th>'; } $return .= '</tr>'; $return .= '</thead>'; } $return .= '<tbody>'; foreach ( $data['body'] as $tr ) { $return .= '<tr>'; foreach ( $tr as $td ) { $return .= '<td>'; $return .= $td['c']; $return .= '</td>'; } $return .= '</tr>'; } $return .= '</tbody>'; $return .= '</table>'; $this->html .= $return; } } private function subfield( $level = 0, $data = null ) { if ( isset( $data['body'] ) ) { $this->may_get_table_html( $data ); return; } else if ( ! isset( $this->field_names[ $level ] ) ) { return; } else if ( $data === null ) { if ( $this->atts['subfield-name'] === false ) { $data = get_field( $this->field_names[0], $this->atts['post-id'] ); } else { $data = get_sub_field( $this->field_names[0] ); } } else if ( isset( $data[ $this->field_names[ $level ] ] ) ) { $data = $data[ $this->field_names[ $level ] ]; } // repeater/group field if ( is_array( $data ) && isset( $data[0] ) && ! isset( $data[0]['acf_fc_layout'] ) ) { if ( is_numeric( $this->field_names[ $level + 1 ] ) ) { if ( isset( $data[ $this->field_names[ $level + 1 ] ] ) ) { $this->subfield( $level + 1, $data[ $this->field_names[ $level + 1 ] ] ); } } else { foreach( $data as $key => $item ) { $this->subfield( $level + 1, $item ); } } } // flexible content field else if ( is_array( $data ) && isset( $data[0] ) && isset( $data[0]['acf_fc_layout'] ) ) { foreach( $data as $key => $item ) { if ( $item['acf_fc_layout'] === $this->field_names[ $level + 1 ] && isset( $item[ $this->field_names[ $level + 2 ] ] ) ) { $this->subfield( $level + 2, $item[ $this->field_names[ $level + 2 ] ] ); } } } // table field else { $this->subfield( $level + 1, $data ); } } }; return $class->html; } add_shortcode( 'tablefield', 'shortcode_acf_tablefield' );
Then use the shortcode with the corresponding shortcode options of the Page Builder.
Getting a table field from the current page or post…
[tablefield field-name="table_field_name"]
Getting a table field from a group field…
[tablefield field-name="group_field_name/table_field_name"]
Getting a table field from a repeater field…
[tablefield field-name="repeater_field_name/table_field_name"]
Getting a table field from a specific repeater field item…
[tablefield field-name="repeater_field_name/item_index/table_field_name"]
Getting a table field from a flexible content field…
[tablefield field-name="flexible_content_field_name/layout_name/table_field_name"]
You can also get a table field from any kind of nested fields like in this example, where the table field is part of a layout of an flexible content field, that is a subfield of a repeater field, that is a subfield of a group field…
[tablefield field-name="group_field_name/repeater_field_name/flexible_content_field_name/layout_name/table_field_name"]
Getting a table field from inside a group, repeater or flexible content field loop…
[tablefield subfield-name="table_field_name"]
Getting a table field from another page or post…
[tablefield field-name="table_field_name" post-id="123"]
Getting a table field from a ACF option page…
[tablefield field-name="table_field_name" post-id="option"]
Adding a CSS class to the table HTML element…
[tablefield field-name="table_field_name" table-class="my-table-style"]