Advanced Custom Fields: Table Field

Hi,

in general, its up to Elementor to support ACF field types on the Elementor widgets. Under the link https://docs.elementor.com/article/381-elementor-integration-with-acf you can see all supported ACF fields in Elementor for now. But because the table field is not a native ACF field, the support may never happen.

The way to go is using the Elementors 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 ) {

    $a = shortcode_atts( array(
        'field-name' => false,
        'post-id' => false,
    ), $atts );

    $table = get_field( $a['field-name'], $a['post-id'] );

    $return = '';

    if ( $table ) {

        $return .= '<table border="0">';

            if ( $table['header'] ) {

                $return .= '<thead>';

                    $return .= '<tr>';

                        foreach ( $table['header'] as $th ) {

                            $return .= '<th>';
                                $return .= $th['c'];
                            $return .= '</th>';
                        }

                    $return .= '</tr>';

                $return .= '</thead>';
            }

            $return .= '<tbody>';

                foreach ( $table['body'] as $tr ) {

                    $return .= '<tr>';

                        foreach ( $tr as $td ) {

                            $return .= '<td>';
                                $return .= $td['c'];
                            $return .= '</td>';
                        }

                    $return .= '</tr>';
                }

            $return .= '</tbody>';

        $return .= '</table>';
    }

    return $return;
}

add_shortcode( 'table', 'shortcode_acf_tablefield' );

Then use the shortcode in a Elementors shortcode widget like this, to insert a table from the current page or post…
[table field-name="your table field name"]

You also can insert a table from another page or post…
[table field-name="your table field name" post-id="123"]

Or you can insert a table from a ACF option page…
[table field-name="your table field name" post-id="option"]

Cheers,
Johann

• This reply was modified 6 years, 4 months ago by Johann Heyne.