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 and text 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. Status badges are a free feature available on all plans. 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 and Excel, role-based column visibility, and auto-refresh. Every table embeds on any page with a [tablecrafter] shortcode or the native Gutenberg block.

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 Free column display mode available on all plans, including the free version on WordPress.org. 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 installed and activated (free or Pro; status badges work on both)
• A data source with at least one field that holds predictable text values (a Gravity Forms dropdown, radio button, or status field works best; Google Sheets and other sources work equally well)
• 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 data source. Matching is case-sensitive: "Pending" and "pending" are treated as different values. For Gravity Forms dropdown fields, enter the value exactly as it is stored in the entry (the choice label, unless you have configured Gravity Forms to save values separately).

Each badge rule requires two hex color fields: a Background hex and a Text hex. Both are required. If either is missing or is not a valid hex color, TC_Badge_Service drops that mapping entirely. For accessible badge text, choose a text color with sufficient contrast against the background (e.g., white text on dark backgrounds, dark text on light backgrounds).

The badge displays the raw cell value as its label. There is no separate display label field: whatever text is in the cell is what appears inside the badge. Repeat the rule for every status value you want styled:

Pending    → bg: #F59E0B  text: #ffffff
Approved   → bg: #10B981  text: #ffffff
Rejected   → bg: #EF4444  text: #ffffff
In Review  → bg: #6366F1  text: #ffffff
Cancelled  → bg: #6B7280  text: #ffffff

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 for values you defined rules for, verify that the value in the badge rule exactly matches (case-for-case) what is stored in your data source. Use the Gravity Forms entry viewer or your data source directly to check the exact stored string.

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 for mapped values: Your badge rule value does not exactly match the stored string. Use the Gravity Forms entry viewer to check the exact stored value and copy it directly into the badge rule's Value field. Matching is case-sensitive.
• All values show as plain text: Confirm you selected "Status Badge" as the display type (not "Plain Text") for the column, and that you saved the table after defining the badge rules.
• Case mismatch: "pending" and "Pending" are treated as different values. Check the exact case stored by your data source and match it precisely in the badge rule.
• Badge color is wrong: Confirm both the background hex and text hex fields contain valid 6-digit hex values (e.g., #10B981). If either field contains an invalid value, TC_Badge_Service::sanitize_map() drops the entire rule and the value renders as plain text.
• 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.