How to Set Up Status Badges in a WordPress Table

Updated July 2026 • 6 min read • By Fahad Murtaza • By Fahad Murtaza

Status badges turn raw text values like "Pending" or "Approved" into color-coded labels that let users scan a table and understand data state at a glance. TableCrafter's status badge feature maps any text value to a custom background color, giving your WordPress tables the kind of visual clarity you'd expect from a spreadsheet or project management tool, without writing a line of CSS. WordPress powers 43% of all websites globally (W3Techs, July 2026), and TableCrafter bridges the gap between the data you collect and the tables your users need to see, no custom PHP, no dashboard access required for viewers. The free version on WordPress.org supports CSV, JSON, Google Sheets, and Excel. Pro adds Gravity Forms, Airtable, Notion, WooCommerce, REST APIs, inline cell editing, export to CSV/PDF, role-based column visibility, and auto-refresh. Every table embeds on any page with a [tablecrafter] shortcode or the native Gutenberg block. CSV remains the most universally supported data exchange format, used by 91% of business intelligence tools (Gartner, 2025).

How Do What Status Badges Are and Why They Matter Work?

When you display form entries in a table, status columns are almost always plain text. A driver dispatch table might show "Available," "On Route," or "Off Duty." An order table might show "Pending," "Processing," "Shipped," or "Cancelled." Reading those words row after row is slow, your eyes have to parse each string individually.

Status badges solve this by pairing each text value with a background color. "Approved" renders as a green pill. "Rejected" renders red. "Pending" renders amber. The color communicates meaning before the reader even reads the word. The result is a table that communicates status in milliseconds instead of seconds.

In TableCrafter, status badges are a Pro column display mode. They are configured per column in the table builder, so you can have badge columns alongside plain-text columns, numeric columns with data bars, and editable columns, all in the same table.

What Do I Need Before Setting Up Status Badges?

To follow this guide you need:

• TableCrafter Pro installed and activated
• A Gravity Forms form with at least one field that holds predictable text values (a dropdown, radio button, or status field works best)
• At least one table already created in TableCrafter → Tables, or you can create one as part of this walkthrough

Status badges work best on fields with a finite, known set of values, dropdown fields, radio buttons, or any field where entries follow a consistent vocabulary. They technically work on free-text fields too, but you would need to define a badge rule for every possible value you want styled, and unmapped values fall back to plain text display.

Step 1: How Do I Open the Table Builder and Select Your Column?

Navigate to TableCrafter → Tables in your WordPress admin. Either click Add New to create a fresh table or click the name of an existing table to open its builder.

In the table builder, locate the column that holds your status values. If you are building a new table, drag the relevant form field from the field picker into the columns list. Each column card in the builder shows the field label, the field ID, and a Display Type dropdown on the right side of the card.

Click the Display Type dropdown for your status column. You will see options such as Plain Text, Link, Data Bar, and Status Badge. Select Status Badge.

Selecting Status Badge reveals a badge mapping panel directly below the column card. This is where you define which text values map to which colors.

Step 2: How Do I Define Your Badge Mappings?

The badge mapping panel shows a repeater interface: each row has a Value field and a Color picker. Click Add Badge Rule to add your first mapping.

In the Value field, type the exact text string as it appears in your form entries. Matching is case-sensitive by default, so "Pending" and "pending" are treated as different values. Enter the value exactly as Gravity Forms stores it, for dropdown fields, this is the choice label, not the choice value, unless you have configured Gravity Forms to store values separately.

Click the Color swatch to open the color picker. You can enter a hex code directly or use the color wheel. TableCrafter applies this color as the badge background and automatically computes a contrasting foreground color (black or white) so your badge text remains readable at any background hue.

Repeat this for every status value you want styled. A typical set for a dispatch or fulfillment table might look like this:

Pending       → #F59E0B  (amber)
Approved      → #10B981  (green)
Rejected      → #EF4444  (red)
In Review     → #6366F1  (indigo)
Cancelled     → #6B7280  (gray)

There is no limit to the number of badge rules you can define per column. You can also reorder rules using the drag handle on the left of each row, though the order does not affect matching, all rules are evaluated independently.

Step 3: How Do I Save and Embed the Table?

Once your badge rules are defined, click Save Table at the top right of the builder. TableCrafter stores the column configuration, including all badge mappings, in the WordPress database.

To display the table on a page or post, use the TableCrafter shortcode. All three shortcode aliases map to the same handler:

[tablecrafter id="42"]
[tablecrafter id="42"]
[tablecrafter id="42"]

Paste any of these into a page, post, or Elementor HTML widget, replacing 42 with your table's actual ID. The table ID is shown in the URL when you are editing a table in the builder, and in the Tables list under the table name.

Load the page on the frontend. The status column should now render each entry's value as a colored pill badge. If you see plain text instead of badges, verify that your TableCrafter Pro license is active under TableCrafter → Settings → License.

Step 4: How Do I Combine Badges with Inline Editing?

One of the most useful combinations in TableCrafter Pro is status badges paired with inline editing. This lets a user see the current status at a glance and update it directly in the table, clicking the badge opens an edit control, the user selects a new value, and the badge color updates immediately after saving.

To enable inline editing on the badge column, scroll to the column card in the builder and toggle Allow Inline Edit on. For a dropdown field, TableCrafter will render the inline editor as a select input populated with the field's choices. After the user saves, the cell re-renders using the badge display rules, so the new status appears as the correct colored badge without a page reload.

Inline edits write back to Gravity Forms via GFAPI::update_entry_field(), so the change is permanent and reflected in your Gravity Forms entry list. All AJAX calls go through wp-admin/admin-ajax.php with nonce validation on every request.

How Does Troubleshooting Common Issues Work?

If your badges are not rendering as expected, work through these checks:

• Badges show as plain text: Confirm your Pro license is active and that you selected "Status Badge" as the display type (not "Plain Text"). Deactivating and reactivating the plugin can force a license re-check.
• All values fall back to gray: Your badge rule values do not match what is stored in the database. Use the Gravity Forms entry viewer to check the exact stored value for a field, copy it directly from there into the badge rule's Value field.
• Case mismatch: "pending" and "Pending" are different. Check the exact case stored by your form and match it precisely in the badge rule.
• Shortcode renders nothing: Make sure the table ID in the shortcode matches an existing, saved table. Check TableCrafter → Tables for the correct ID.
• Caching shows stale colors: If you update badge rules and the frontend still shows old colors, clear your page cache. TableCrafter's AJAX responses include cache-busting parameters, but full-page caches (WP Rocket, NitroPack, etc.) may serve a stale HTML snapshot. Clear the cache after any table configuration change.