Recast Table Builder for Advanced Custom Fields and Secure Custom Fields

Recast Table Builder for Advanced Custom Fields and Secure Custom Fields adds a custom field type for Advanced Custom Fields and Secure Custom Fields that lets editors build structured tables directly inside the WordPress admin area.

Features include:

• Add and remove rows and columns from the field UI.
• Use text cells in the field UI.
• Keep saved unsupported cells intact even if they are unavailable for editing.
• Store the table structure in a single ACF field value.
• Works with existing Advanced Custom Fields and Secure Custom Fields editing workflows.

This plugin requires Advanced Custom Fields or Secure Custom Fields to be installed and active.

Usage

1. Create or edit an ACF or SCF field group.
2. Add a new field and choose the Table field type.
3. Assign the field group to the post type, page, options page, or block where you want to use it.
4. Edit your content and add table headers, rows, and cell values in the Recast Table Builder for Advanced Custom Fields and Secure Custom Fields UI.
5. Save or update the post.

To render the saved table on the front end, fetch the field value with get_field() and pass it to the built-in helper recast_stf_render():

<?php
$table = get_field( 'my_table' );

if ( $table ) {
    echo recast_stf_render( $table );
}
?>

If your table field is stored on an options page, pass option as the second argument to get_field():

<?php
$table = get_field( 'my_table', 'option' );

if ( $table ) {
    echo recast_stf_render( $table );
}
?><h3>Styling Examples</h3>
Recast Table Builder for Advanced Custom Fields and Secure Custom Fields outputs a small set of default classes:

• .recast-table-builder-for-acf-scf-front
• .recast-table-builder-for-acf-scf-front__table
• .recast-table-builder-for-acf-scf-front__head
• .recast-table-builder-for-acf-scf-front__body
• .recast-table-builder-for-acf-scf-front__row
• .recast-table-builder-for-acf-scf-front__heading
• .recast-table-builder-for-acf-scf-front__cell

You can style those classes directly with CSS.

Example with CSS

.recast-table-builder-for-acf-scf-front {
    overflow-x: auto;
    margin-top: 1.5rem;
}

.recast-table-builder-for-acf-scf-front__table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border: 1px solid #d9dee5;
    border-radius: 14px;
    overflow: hidden;
}

.recast-table-builder-for-acf-scf-front__heading,
.recast-table-builder-for-acf-scf-front__cell {
    padding: 0.9rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e7ebf0;
}

.recast-table-builder-for-acf-scf-front__heading {
    background: #f5f7fa;
    font-weight: 700;
    color: #1f2937;
}

.recast-table-builder-for-acf-scf-front__cell {
    color: #334155;
}

.recast-table-builder-for-acf-scf-front__row:last-child .recast-table-builder-for-acf-scf-front__cell {
    border-bottom: 0;
}

.recast-table-builder-for-acf-scf-front__cell a {
    color: #0f5a78;
    text-decoration: underline;
}