How to Combine Status Badges with Column Filters in TableCrafter

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

Status badges turn raw text values into color-coded visual signals, while column filters let your users slice data down to exactly what they need. Used together inside TableCrafter, they create a dashboard-quality experience on any WordPress page, without writing a single line of code. This guide walks you through configuring both features, wiring them together, and avoiding the common pitfalls that trip people up along the way. 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. Role-based access control is a requirement in 78% of enterprise WordPress deployments (WPScan Security Report, 2024).

How Do What Status Badges and Column Filters Actually Do Work?

Before connecting the two features, it helps to understand what each one does on its own.

Status badges Pro are a display-layer transformation. You map specific text values in a column to a color and an optional label. A cell that contains the raw text pending can render as a yellow pill labeled "Pending," while approved renders green and rejected renders red. The underlying Gravity Forms entry value never changes, badges are purely visual output applied at render time.

Column filters Pro add per-column filter controls above or alongside your table. Depending on the column type, TableCrafter can render a text input, a date range picker, a numeric range slider, or a dropdown populated from the actual values present in that column. When a visitor selects a filter value, an AJAX call goes to wp-admin/admin-ajax.php with a nonce and the filter parameters, and only matching rows come back.

The reason combining them is so powerful: once you map your status values to badges, TableCrafter can use those same values to build a dropdown filter automatically. A user sees "Show me only Approved rows," clicks the dropdown, selects the green badge label, and the table instantly narrows, no page reload.

How Do Prerequisites and Plan Requirements Work?

Both status badges and column filters are Pro features. They are not available on the free tier, which is limited to read-only display with basic search and pagination. To follow this guide you need:

• TableCrafter Pro installed and activated
• At least one Gravity Forms form with a field that holds a consistent set of text values (a Status field, a Stage field, a Priority field, and so on)
• A published table built from that form, if you do not have one yet, go to TableCrafter → Tables → Add New and connect it to your form before continuing

How Does Step 1, Configure Status Badges on Your Status Column Work?

Open your table in the builder: TableCrafter → Tables, then click Edit on the table you want to modify.

Find the column that holds your status values in the column list. Click the column to expand its settings panel. Look for the Display Type or Cell Format dropdown and select Status Badge.

A badge mapping editor appears. Each row in the editor represents one badge rule:

• Value, the exact text stored in Gravity Forms (case-sensitive). For example: pending, approved, rejected, on hold
• Label, what the badge displays. You can match the value or use a friendlier label like "Under Review"
• Color, pick from the preset palette or enter a hex value. TableCrafter applies this as the badge background; it automatically selects contrasting text (white or dark) for readability

Add a row for every value that appears in your data. Any unmapped value renders as plain text, so it is worth pulling a quick list of distinct values from your Gravity Forms entries before you start mapping.

Save the table. Load a page that contains your [tablecrafter id="X"] shortcode (or the equivalent [tablecrafter id="X"] or [tablecrafter id="X"], all three map to the same handler). Confirm that the status column is now rendering colored badge pills instead of raw text.

How Does Step 2, Enable Column Filters on the Same Table Work?

Return to the table builder. Look for the Filters tab or section, the exact location depends on your TableCrafter version, but it is typically in the main table settings panel above the column list.

Enable Column Filters. This activates the per-column filter UI that appears at the top of the rendered table. You can also control the filter layout: filters can appear as a top bar, a sidebar, or as inline controls directly in the column headers.

Now go back to your status column settings. With column filters enabled, you will see a Filter Type setting for each column. For a badge-mapped status column, set the Filter Type to Dropdown. TableCrafter will populate the dropdown from the distinct values present in that column's data.

For your other columns, dates, numeric fields, text fields, choose the appropriate filter type: date range, numeric range, or text search. You can enable filters on some columns and leave others unfiltered. Only the status column needs the dropdown type for badge integration.

Save the table again and reload your frontend page. You should now see a filter bar with a dropdown for your status column. Selecting a status value from the dropdown triggers an AJAX request and the table re-renders showing only matching rows, with their badges intact.

How Does Step 3, Wire Up the Shortcode on Your Page Work?

TableCrafter tables are embedded with a shortcode. The minimal version is just the table ID:

[tablecrafter id="42"]

You can also use the legacy shortcode aliases, they all resolve to the same output:

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

If you want to control specific behavior at the shortcode level, several optional attributes are available:

[tablecrafter id="42" entries_per_page="25" show_search="true"]

Column filter settings, badge mappings, and role-based permissions are all configured in the table builder and stored with the table record, they apply automatically wherever the shortcode is placed, so you do not need to repeat configuration in each shortcode instance.

This configuration interacts with any caching or CDN layer active on your WordPress installation. If you use WP Rocket, LiteSpeed Cache, or a CDN such as Cloudflare, flush the page cache after making this change to ensure the updated configuration is reflected in the cached HTML served to visitors. TableCrafter's server-side output is regenerated on the next uncached request.

How Do Combining Badges and Filters with Role-Based Permissions Work?

One of the more powerful combinations available in TableCrafter Pro is layering role-based permissions on top of badge-filtered tables. Pro

Under TableCrafter → Tables → Edit → Permissions, you can restrict which WordPress roles can view the table at all, and then apply column-level visibility rules on top of that. For example:

• Drivers see only their own rows (filtered by the logged-in user's ID) and the status column shows badges but has no filter dropdown, they cannot browse other drivers' statuses
• Managers see all rows with the full filter bar and can filter by any status badge value
• Admins get the same view as managers plus inline editing capability, so they can change a status directly in the cell

Inline editing in TableCrafter Pro writes back to Gravity Forms via GFAPI::update_entry_field(). When an admin clicks a status badge cell in edit mode, the badge UI gives way to the raw input (or a dropdown of allowed values), the update is submitted over AJAX with nonce validation and capability checks, and the badge re-renders immediately after the save completes, no page reload required.

This pattern is common in load-tracking dashboards, project management tables, and order management interfaces where different roles need different levels of access to the same underlying data.

How Does Troubleshooting Common Issues Work?

A few problems come up regularly when setting up this combination for the first time.

Badges render but the dropdown filter shows no options. This usually means the column's Filter Type is set to Text instead of Dropdown, or column filters are not enabled at the table level. Return to the table builder, confirm the global filter toggle is on, and check that the individual column's filter type is set to Dropdown.

The dropdown shows raw values instead of badge labels. Filter dropdowns in TableCrafter are populated from the stored Gravity Forms values, not from the display labels you assigned in the badge mapper. If your stored value is in_progress and your badge label is "In Progress," the dropdown will say in_progress. To align them, either update the Gravity Forms field choices so the stored values match your desired display text, or accept that badge labels and filter options will differ. This is a display-layer versus data-layer distinction: badges transform output, filters operate on the source values.

Filters work in the editor preview but not on the frontend. This is almost always a caching issue. NitroPack, WP Rocket, and similar caching plugins can cache the initial AJAX response and serve stale data to subsequent filter requests. Exclude the table's page from full-page caching, or configure your cache plugin to allow dynamic content on that URL.

Badges do not appear after switching table data source. Badge mappings are stored per-column and tied to the column's field ID. If you change the data source or remap a column to a different Gravity Forms field, existing badge rules may reference the wrong field. Re-open the column settings and re-confirm the badge mapping after any data source change.