Plugin / Advanced Custom Fields: Table Field

Johann Heyne

Frequently Asked Questions (FAQ)

To render the table fields data as an html table in one of your template files (page.php, single.php) you can start with the following basic code example: $table = get_field( 'your_table_field_name' ); if ( ! empty ( $table ) ) { echo ''; if ( ! empty( $table['caption'] ) ) { echo ''; } if ( ! empty( $table['header'] ) ) { echo ''; echo ''; foreach ( $table['header'] as $th ) { echo ''; } echo ''; echo ''; } echo ''; foreach ( $table['body'] as $tr ) { echo ''; foreach ( $tr as $td ) { echo ''; } echo ''; } echo ''; echo '
' . $table['caption'] . '
'; echo $th['c']; echo '
'; echo $td['c']; echo '
'; }
If the table has only one empty cell, then get_field() returns FALSE. get_field() returns NULL when a field is not stored in the database. That happens when a page is copied but not their fields content. You can check both with empty()… $table = get_field( 'your_table_field_name' ); if ( ! empty( $table ) ) { // $table is not FALSE and not NULL. // Field exists in database and has content. }
This is about displaying line breaks in the admin tables and getting line breaks as
when outputting the tables HTML. Converting Line Breaks for HTML Output To convert line breaks to
in tables HTML output the PHP function nl2br() can be used: For line breaks in table header cells replace… echo $th['c']; with… echo nl2br( $th['c'] ); For line breaks in table body cells replace… echo $td['c']; with… echo nl2br( $td['c'] ); Displaying Line Breaks in Editing Tables To display natural line breaks in the editing tables in the admin area, add the following styles to the admin area. .acf-table-header-cont, .acf-table-body-cont { white-space: pre-line; } One way to add these styles to the WordPress admin area is adding the following code to your functions.php file of the theme. add_action('admin_head', 'acf_table_styles'); function acf_table_styles() { echo ''; }
In general, its up to Elementor to support ACF field types on the Elementor widgets. All supported ACF fields by Elementor you can find here. But because the table field is not a native ACF field, the support for this field may never happen. For now 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( 'table-class' => '', 'field-name' => false, 'post-id' => false, ), $atts ); $table = get_field( $a['field-name'], $a['post-id'] ); $return = ''; if ( $table ) { $return .= ''; if ( ! empty( $table['caption'] ) ) { echo ''; } if ( $table['header'] ) { $return .= ''; $return .= ''; foreach ( $table['header'] as $th ) { $return .= ''; } $return .= ''; $return .= ''; } $return .= ''; foreach ( $table['body'] as $tr ) { $return .= ''; foreach ( $tr as $td ) { $return .= ''; } $return .= ''; } $return .= ''; $return .= '
' . $table['caption'] . '
'; $return .= $th['c']; $return .= '
'; $return .= $td['c']; $return .= '
'; } 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" table-class="my-table"] You also can insert a table from another page or post… [table field-name="your table field name" post-id="123" table-class="my-table"] Or you can insert a table from a ACF option page… [table field-name="your table field name" post-id="option" table-class="my-table"]
You can use the ACF PHP function update_field() to change a tables data. Example: adding a new row // the post ID where to update the table field $post_id = 123; // gets the table data $table_data = get_field( 'table', $post_id ); // defines the new row and its columns $new_row = array( // must define the same amount of columns as exists in the table // column 1 array( // the 'c' stands for content of the cell 'c' => 'Cell Content of Column 1', ), // column 2 array( 'c' => 'Cell Content of Column 2', ) ); // adds the new row to the table body data array_push( $table_data['body'], $new_row ); // saves the new table data update_field( 'table', $table_data, $post_id );
Since version 1.3.1 of the table plugin, the storing format of the table data changes from JSON string to serialized array for new or updated tables. The issue with JSON is because of third party plugins that do not properly applying wp_slash() to a post_meta value before updating with update_post_metadata(). This can break JSON strings because update_post_metadata() removes backslashes by default. Backslashes are part of the JSON string syntax escaping quotation marks in content. The table field plugin prevents broken JSON strings to save as a table field data and throws an error message that explains the issue. But this may also breaks the functionality of the third party plugin trying to update the table data. You could disable the JSON string check in the table field plugin using the following code in the wp-config.php file. But then the table JSON data are no longer protected from destroing by update_post_metadata(). Use the following code in wp-config.php only, if you understand the risk… define( "ACF_TABLEFIELD_FILTER_POSTMETA", false );

Ratings

4.9
49 reviews

Rating breakdown

Details Information

Version

1.3.9

First Released

28 Dec, 2014

Total Downloads

200,181

Wordpress Version

5.3 or higher

Tested up to:

5.3

Require PHP Version:

5.6 or higher

Tags

There is no tag found

Contributors

Languages

DIRECTORY DISCLAIMER

The information provided in this THEME/PLUGIN DIRECTORY is made available for information purposes only, and intended to serve as a resource to enable visitors to select a relevant theme or plugin. wpSocket gives no warranty of any kind, express or implied with regard to the information, including without limitation any warranty that the particular theme or plugin that you select is qualified on your situation.

The information in the individual theme or plugin displayed in the Directory is provided by the owners and contributors themselves. wpSocket gives no warranty as to the accuracy of the information and will not be liable to you for any loss or damage suffered by you as a consequence of your reliance on the information.

Links to respective sites are offered to assist in accessing additional information. The links may be outdated or broken. Connect to outside sites at your own risk. The Theme/Plugin Directory does not endorse the content or accuracy of any listing or external website.

While information is made available, no guarantee is given that the details provided are correct, complete or up-to-date.

wpSocket is not related to the theme or plugin, and also not responsible and expressly disclaims all liability for, damages of any kind, arising out of the use, reference to, or reliance on, any information or business listed throughout our site.

Keep Leading Your Followers!
Share it for them.