How to Color-Code Order Statuses with Badges in TableCrafter

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

Status badges transform plain text fields into instantly scannable visual indicators, letting your team process order data in seconds rather than minutes. TableCrafter's status badge feature maps any text value to a custom color, so "Pending," "Shipped," and "Cancelled" each get their own distinct pill. This guide walks you through every configuration step, from building the table to fine-tuning your color scheme. 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. PDF export is requested by users in 64% of data-heavy WordPress plugin reviews (WordPress.org plugin directory analysis, 2025).

What Status Badges Do (and Why They Matter)?

A raw Gravity Forms entry table showing order statuses as plain text strings forces readers to parse each row individually. A badge column flips that cognitive load entirely: color does the heavy sorting before the eye even reaches the text. At a glance, a dispatcher sees a wall of green "Delivered" rows with a handful of red "Failed" outliers, and knows exactly where to focus.

In TableCrafter, status badges are a column-level display option. You define a mapping of exact text values to hex colors, and the plugin replaces each cell's text output with a styled pill element. The underlying Gravity Forms entry data is never modified, only the rendered HTML changes. This means your data stays clean while your UI gains visual hierarchy.

How Does Prerequisites Before You Start Work?

Before configuring badges, make sure the following are in place:

• A Gravity Form with a status field. This is typically a dropdown, radio button, or single-line text field whose values represent order states, for example "Pending", "Processing", "Shipped", "Delivered", "Cancelled".
• An existing TableCrafter table. Navigate to TableCrafter → Tables in your WordPress admin. If you have not created a table yet, click Add New, select your Gravity Form as the data source, and save at least once before adding badge configuration.
• TableCrafter Pro activated. The badge option will not appear in the column settings panel on a free installation.

How Do I Configure Status Badges on a Column?

The badge configuration lives inside the table builder on a per-column basis. Here is the complete setup process.

1. Open the Table Builder

Go to TableCrafter → Tables and click the name of your table, or click Edit beneath it. This opens the drag-and-drop table builder interface.

2. Locate Your Status Column

In the column list, find the column that maps to your order status field. If it is not yet added, drag it in from the available fields panel on the left. Click the column to expand its settings panel on the right side of the builder.

3. Switch the Display Type to "Status Badge"

Inside the column settings panel, look for the Display Type (sometimes labeled Cell Renderer) dropdown. Change it from Default (Text) to Status Badge. The panel will expand to reveal the badge mapping interface.

4. Add Value-to-Color Mappings

Each row in the mapping interface takes two inputs: the exact text value as it appears in your Gravity Forms entries, and a color (hex code or color picker). Add one row per status. A typical order workflow might look like this:

Pending      → #F59E0B  (amber)
Processing   → #3B82F6  (blue)
Shipped      → #8B5CF6  (violet)
Delivered    → #10B981  (green)
Cancelled    → #EF4444  (red)
Refunded     → #6B7280  (gray)

Values are case-sensitive by default. Make sure the text you enter exactly matches what Gravity Forms stores in the entry, check the form field choices if you are unsure.

5. Set a Fallback Color (Optional)

The badge mapping interface includes an optional Default color field. Any cell value that does not match one of your defined mappings will render using this fallback color instead of displaying as plain text. Setting a neutral gray here is a safe choice to catch unexpected values without breaking the visual pattern.

6. Save the Table

Click Save Table at the top or bottom of the builder. TableCrafter stores the badge configuration alongside the rest of the column definitions in the WordPress options table.

How Does Embedding the Table with Shortcode Work?

Once saved, place the table on any page or post using one of the three equivalent shortcodes. All three map to the same rendering handler inside the plugin:

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

Replace 42 with the numeric ID shown in the TableCrafter → Tables list. The shortcode produces a fully responsive HTML table with your badge cells rendered as colored pill elements. No extra CSS or JavaScript is required on your end, the plugin enqueues its own frontend assets.

The column mapping you define here is stored as a JSON configuration in the WordPress database. You can export this configuration using the TableCrafter export tool and import it to another table or another site. This is useful when replicating a table layout across multiple pages or when migrating a table to a staging environment for testing before going live.

How Does Combining Badges with Other Pro Features Work?

Status badges become significantly more powerful when combined with other Pro capabilities.

Inline Editing

With inline editing enabled, a user can click a badge cell, select a new status from a dropdown, and save. The cell updates in place via an AJAX call to wp-admin/admin-ajax.php, which writes the new value through GFAPI::update_entry_field() directly into the Gravity Forms entry. The badge color re-renders immediately to reflect the change, no page reload required.

Role-Based Permissions

TableCrafter Pro supports table-level and column-level permission rules. You can expose the status column (with its badges) as read-only to customer-facing roles while allowing back-office staff to edit it. Configure this under the Permissions tab in the table builder by assigning WordPress roles to view or edit capabilities per column.

Advanced Filters

Pro users can add a filter bar above the table. Adding a filter on the status column gives users a dropdown to isolate, for example, only "Pending" rows. The badge colors remain visible in the filtered results, reinforcing the status meaning even when other statuses are hidden from view.

Email Alerts

If you enable email alerts on status field changes, TableCrafter will trigger a notification when an inline edit writes a new value. A warehouse manager updating an order from "Processing" to "Shipped" can automatically notify the customer or a fulfillment contact without any additional plugin or Zapier integration.

Auto-Refresh

For live order boards displayed on a TV or shared dashboard, the auto-refresh option polls for new or updated entries at a configurable interval. Combined with badges, this creates a real-time status board where color changes appear automatically without manual reloads.

How Does Troubleshooting Common Badge Issues Work?

If badges are not rendering as expected, these are the most common causes:

• Badges not appearing at all: Confirm you have an active Pro license. On the free plan, the Display Type dropdown will not include the Status Badge option and the column will fall back to plain text.
• Wrong color or no color for a value: The value matching is case-sensitive and must match exactly. Open a Gravity Forms entry directly in Forms → Entries to see the raw stored value, then copy-paste it into the badge mapping to eliminate whitespace or capitalization mismatches.
• Badges show but inline editing does not update the color: Make sure inline editing is enabled both at the table level and for the specific column. If the column is set to view-only for the current user's role, the AJAX save will be blocked by the capability check and the badge will not re-render.
• Caching plugins showing stale colors: If you changed a badge color mapping and visitors still see the old colors, purge your page cache. TableCrafter's frontend rendering is server-side, so cached HTML can hold old badge markup.
• Shortcode not rendering the table: Verify the table ID in the shortcode matches the ID in TableCrafter → Tables. All three shortcode aliases ([tablecrafter], [tablecrafter], [tablecrafter]) are valid; any one of them will work.