Johann Heyne

Hi,

1. The following code should do the trick with the data-title…

$table = get_field( 'your_table_field_name' );

if ( $table ) {

    echo '<table border="0">';

        if ( $table['header'] ) {

            echo '<thead>';

                echo '<tr>';

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

                        echo '<th>';
                            echo $th['c'];
                        echo '</th>';
                    }

                echo '</tr>';

            echo '</thead>';
        }

        echo '<tbody>';

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

                echo '<tr>';

                    foreach ( $tr as $key => $td ) {

                        echo '<td data-title="' . $table['header'][ $key ]['c'] . '">';
                            echo $td['c'];
                        echo '</td>';
                    }

                echo '</tr>';
            }

        echo '</tbody>';

    echo '</table>';
}

2. Yes, the table field should work in a Flexible Content field.

Cheers,
Johann

Hi,

in general, it would be possible. But is a simple text input enough for every use case of the caption? The same issue already came up for the cells content. Requests like “caption should be required” or “caption should be Rich Text” are better to solve using an separate ACF field for editing the caption. The only point to include a caption input field option in the table field is to have that option visually bundled width the table field. Is it a good move to add a caption text option? What do you think?

Cheers,
Johann

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

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 7 years, 7 months ago by Johann Heyne.

Hello,

can you please give me some data:
Browser Name:
Browser Version:
Operating System:
WordPress Version:
ACF Version:

Thanks,
Johann

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

Hi, thanks a lot for the translation. I just released your translation in the version 1.2.5.

Cheers,
Johann

Hi, I am sorry, but I have no experience with Elementor. Do you visualized other field types on a dynamic field of an Elementor widjet? This should work the same with tables fields using the output table HTML code on https://wordpress.org/plugins/advanced-custom-fields-table-field/

Cheers,
Johann

Due to changes in the design of the plugin pages, my original suggestion that this plugin is an add-on has disappeared. I have corrected that now.