/ Plugin Category

/ Content Management

/ Document Management & Downloads

/ Table Field Add-on for ACF and SCF

Table Field Add-on for ACF and SCF

By Johann Heyne

Content Management / Document Management & Downloads

Reviewed by Abdul Hameid

Trusted WordPress expert with 20+ years of experience evaluating plugins for the WP ecosystem.

Table Field Add-on for ACF and SCF Review - In-Depth Analysis

Enhance your Advanced Custom Fields with a Table Field Add-on. Easily create and edit tables with various features.

Performance Overview

WPS Score

7.26/10

User Rating

4.9/5 (based on 59+ reviews)

Active Installations

50,000+

Update Frequency

Average It is calculated using the weighted average of same category plugins.

Security Score

5 / 10 (Medium Risk) It is calculated using the weighted average of all versions.

What It Does

The Table Field plugin is an Add-on that enhances the functionality of the Advanced Custom Fields plugin and the Secure Custom Fields plugin with easy-to-edit tables.

This plugin requires either the Advanced Custom Fields plugin or the Secure Custom Fields plugin!

The table field works with the ACF repeater and flexible field types and supports ACF Blocks for Gutenberg.

Features include optional table headers and captions, support for ACF Gutenberg blocks, adding and removing table columns and rows, and drag-and-drop functionality for reordering.

Translations are available in English, German, Danish, and Polish. You can also contribute your language to the plugin.

There is a Pro version available that offers additional features such as custom default tables, minimum and maximum row and column settings, and improved editing functionalities.

Comparing to Alternatives

This plugin has no close direct alternative in its category, making it a unique solution for adding table fields to ACF and SCF.

Top alternatives

Strengths

Highly rated with a 4.9 out of 5 average score
Clean, simple, and flexible table field solution
Good integration with ACF and SCF
Active support and updates
Works well for headless CMS setups

Weaknesses

Lacks built-in WPGraphQL support
Requires manual code adjustments for some advanced use cases
Has had security vulnerabilities in the past, though fixed
Limited frontend display options out of the box

User Sentiment Analysis

With 93.2% of ratings at 5 stars and very few low ratings, users generally express high satisfaction with this plugin.

Positive highlights

"Clean, Nice looking and functioning" - telltec
"Great Integration" - jf9xcsdd
"Amazing! Brilliant function for a table, making it more streamline for the end user" - paradavid
"Works fine for headless CMS" - jrbalbin
"Good day, excuse me, how can I show this table in the frontend?" - foxizor (indicates interest in frontend usage)

Common complaints

Weaknesses

No native WPGraphQL support requiring manual code tweaks
Frontend display requires additional work or customization
Past security issues with stored XSS vulnerabilities

Who Should Use This?

Best for

Developers and site builders who need a reliable and flexible table field integration with ACF or SCF, especially those comfortable with some custom coding for advanced features.

Not ideal for

Users seeking out-of-the-box frontend table display or native WPGraphQL support without customization, or those concerned about past security vulnerabilities despite fixes.

Pricing & Value

Free version includes

The free version offers a robust table field solution integrated with ACF and SCF, suitable for most standard use cases.

Pro version (29 - 119 USD / year)

Premium features typically include enhanced support, additional customization options, and possibly extended compatibility, though specifics are not clearly promoted.

Final Verdict

Table Field Add-on for ACF and SCF stands out as a highly rated and unique plugin for adding table fields, praised for its clean design and integration. It suits developers who can handle some customization and value a flexible solution without direct alternatives.

However, users should be aware of past security vulnerabilities that have been addressed and the lack of native frontend display and WPGraphQL support, which may require additional development effort. Overall, it offers excellent value for those needing this specific functionality.

Other Notable Features

Here are a few other notable features of this free Table Field Add-on for ACF and SCF plugin.

Table Field

Advanced Custom Fields

Secure Custom Fields

Screenshots

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 '<table>';          if ( ! empty( $table['caption'] ) ) {              echo '<caption>' . $table['caption'] . '</caption>';         }          if ( ! empty( $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 $td ) {                          echo '<td>';                             echo $td['c'];                         echo '</td>';                     }                  echo '</tr>';             }          echo '</tbody>';      echo '</table>'; }

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 <br> when outputting the tables HTML.

Converting Line Breaks for HTML Output

To convert line breaks to <br> 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 '<style>     .acf-table-header-cont,     .acf-table-body-cont {         white-space: pre-line;     }   </style>'; }

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"]

You can use the ACF PHP function update_field() to change a tables data.

Notice

Make sure that the number of entries in the header array matches the number of cells in the body rows.
The array key ‘c’ stands for the content of the cells to have the option of adding other cell setting in future development.
The table data obtained by get_field() are formatted and differ by the original database data obtained by get_post_meta().

Example of changing table data using get_field() and update_field()

// the post ID where to update the table field $post_id = 123;  $table_data = get_field( 'my_table', $post_id );  $table_data = array(     'use_header' => true, // boolean true/false     'caption' => 'My Caption',     'header' => array(         0 => array(             'c' => 'A',         ),         1 => array(             'c' => 'B',         ),     ),     'body' => array(         0 => array(             0 => array(                 'c' => 'The content of first cell of first row',             ),             1 => array(                 'c' => 'The content of second cell of first row',             ),         ),         1 => array(             0 => array(                 'c' => The content of first cell of second row',             ),             1 => array(                 'c' => 'The content of second cell of second row',             ),         ),     ) );  update_field( 'my_table', $table_data, $post_id );

Example of adding a new row

// the post ID where to update the table field $post_id = 123;  // gets the table data $table_data = get_field( 'my_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( 'my_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 );

Since version 1.3.32, you can configure the UI sanitizing options.

Ensure you create a dedicated admin script for configuring the table field plugin in your theme and enqueue it correctly. This is required so that the hook can be registered in the plugin after the plugin initialization and before the plugin script functionalities are executed.

Create a file in your theme at the path /js/table-field-config.js.

Than enqueue that script in your themes functions.php file with the following action.

add_action( 'admin_enqueue_scripts', function() {      wp_enqueue_script(         'table-field-config', // Table field config script handle         get_template_directory_uri() . '/js/table-field-config.js', // Path to the script in the theme         array('acf-input-table'), // Required, ensures that the script is loaded and executed at the correct time         '1.0', // Version of the script         true // Required to be correctly placed in the script queue     ); });

The sanitization of the table fields UI is handled by DOMPurify.
Use the following table field hook in your table field config script to modify the DOMPurify options.

ACFTableField.addFilter( 'core', 'sanitize_html', function( options ) {      // DOMPurify Options, @see: https://github.com/cure53/DOMPurify?tab=readme-ov-file#can-i-configure-dompurify      options.ADD_ATTR = ['target']; // For instance, the target attribute can be permitted      return options; });