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.

Each mapping entry specifies two hex color values: a background color for the pill and a text color for the label inside it. A "Pending" badge might use a light amber background with a dark brown foreground to maintain readable contrast, while "Delivered" might use a green background with white text. Values not present in the map render as plain text without any badge styling, so every status string you expect to appear in your data should have an explicit entry. Matching is case-sensitive: "Shipped" and "shipped" are evaluated independently and require separate entries if both appear in your data.

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 on the left side of the builder, locate the column that maps to your order status field. The column list shows every field from your connected Gravity Forms source, labeled with the admin label you assigned inside the form editor. Status fields are typically created as dropdown, radio button, or single-line text fields in Gravity Forms, and they appear in the column list with their form field label and field type indicated.

If the status column is not yet included in your active columns, find it in the available fields panel. Drag the status field into the active columns list to create a new column for it, or scroll through the list if it was added during initial table setup but moved out of view. Fields that have already been added as columns are grayed out in the available fields panel so you can see at a glance which ones are active.

Once you locate the column in the active columns list, click its row to expand the inline settings panel. The settings panel reveals controls for General, Display, Filtering, Editing, and Permissions. The Display section contains the Cell Renderer dropdown where you will switch the column to badge mode in the next step.

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 a Default Color option for cell values that do not match any explicit mapping entry. When a status value in an entry is not present in your badge map, it renders as plain text by default. Configuring a fallback lets unrecognized values render as a neutral badge instead of breaking the visual pattern of the table.

Each mapping entry requires both a background hex color and a text hex color. If either value is missing or not a valid three-digit or six-digit hex code, that entry is removed from the stored configuration when you save, and cells carrying that value fall back to plain text. Use a specific hex such as #e5e7eb for a neutral gray background to ensure the entry is retained correctly during the sanitization step.

A neutral fallback is most useful when the status field accepts free-text input or when records were imported from another system with non-standard values. It signals to operators that a row carries an unexpected status without hiding the stored value. After configuring the fallback, review a sample of entries to confirm every expected status string has its own mapping, so the fallback fires only for genuine edge cases.

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.

Inline editing is a Pro feature that requires an active TableCrafter Pro license. The edit is subject to validation: for a dropdown-backed status column, only values present in the Gravity Forms field's choice list are accepted, preventing ad-hoc strings from being written through the inline interface. After a successful write, the server evaluates the badge map for the new value and returns updated badge HTML, which replaces the cell in the DOM without a secondary request.

TableCrafter pauses the auto-refresh timer while a cell is in edit mode, preventing a background data reload from discarding an unsaved change. The timer resumes once the edit is committed or cancelled. Email alert rules configured for the status field fire after the entry write completes, so a status change can trigger a notification email as part of the same AJAX response cycle, with no additional plugin or automation tool 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.

Permission rules use standard WordPress role slugs such as subscriber, editor, administrator, or any custom role registered by your theme or another plugin. For a status badge column, two common patterns are: granting View access to all logged-in users while restricting Edit access to administrators only; or removing View access entirely for a role so the column does not appear in that user's table at all.

Capability checks happen server-side on every AJAX data request. Removing View access for a role excludes the column from the server response entirely, so the raw status value never reaches the browser for unauthorized users. If inline editing is enabled for the column but a user's role lacks Edit capability, the badge renders in read-only mode with no click-to-edit interaction, and any direct AJAX save attempts from that role are rejected with a permissions error before the write reaches Gravity Forms.

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.

Filters in TableCrafter operate on the underlying stored cell values, not on the rendered badge HTML. When a user selects "Shipped" from the status filter dropdown, the query matches Gravity Forms entries where the raw status field value equals "Shipped" exactly, the same string used as the key in your badge map. Badge rendering is a display transformation applied after filtering, so the two systems stay in sync as long as the map keys match the stored values.

The status filter dropdown auto-populates from the distinct values present in the live data set, so users see only statuses that actually appear in current entries rather than a static list. If you update badge mappings to add a new status but no entries carry it yet, the new value will not appear in the filter until at least one entry is created. For tables with many status variants, enable multi-select mode on the filter so users can view two or more statuses simultaneously, for example showing both "Processing" and "Shipped" rows at once.

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.

Email alerts are a Pro feature configured in the table builder under the Alerts tab. Each rule specifies a field, a comparison operator, a threshold value, and a recipient email address. Supported operators include equals (=), contains, greater than (>), less than (<), and numeric comparisons, making it straightforward to fire an alert when the status field equals "Shipped" exactly or when a numeric priority field exceeds a configured value.

Alert rules fire after the Gravity Forms entry field is written via GFAPI::update_entry_field. Multiple rules can target the same column with different thresholds and recipients: a single inline edit changing status to "Cancelled" can simultaneously alert the logistics team and flag the order for accounts. An optional setting attaches a CSV export of the current table to the notification email, useful for delivering a status snapshot to a fulfillment contact who does not have WordPress admin access.

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.

Auto-refresh is a free feature available on all TableCrafter plans. Set the refresh interval in the table builder settings; the frontend enforces a minimum of 5 seconds between polls regardless of the configured value, preventing excessive load on the Gravity Forms database. For most order boards, a 30-second or 60-second interval provides timely updates without noticeable server strain.

Each refresh cycle fires the same AJAX request used for initial table loads, re-fetching rows according to the current filter and sort state. Badge cells re-render for the refreshed data, so status changes made by other users or automated processes appear with the correct colors without the viewer taking any action. The refresh timer pauses automatically whenever a cell is in inline-edit mode, preventing a background reload from overwriting an unsaved change. A last-updated timestamp below the table increments after each successful reload so viewers can confirm the data is live.

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.