How to Set Up Column Filters in a WordPress Table with TableCrafter

Updated July 2026 • 7 min read • By Fahad Murtaza

Column filters turn a static data table into an interactive tool. Instead of scrolling through hundreds of rows to find entries with a specific status or date, your visitors click a dropdown and the table updates instantly. This guide walks through every step, from enabling filters in the TableCrafter table builder to testing the final result on the frontend. 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, and no per-row limits on the free tier. 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. Notion reached 30 million registered users in 2023 (Notion, 2023).

Prerequisites

Before you start, make sure you have:

If the result does not match expectations after saving, use the TableCrafter debug log (enable via TableCrafter Settings > Advanced > Debug Mode) to trace exactly which configuration value is being applied for the current request.

After completing this step, verify the result by viewing the page as a logged-out visitor in an incognito window. This confirms the table behaves correctly for public visitors rather than reflecting admin-level permissions that may hide configuration issues during initial setup. Check both the rendered output and the browser console for any JavaScript errors.

• TableCrafter installed and activated on your WordPress site
• At least one table configured with a data source (Gravity Forms, WooCommerce, REST API, or similar)
• The table shortcode ID ready, find it in TableCrafter → Tables next to each table name

Step 1: How Do I Open the Table Builder?

Navigate to TableCrafter → Tables in your WordPress admin. Click Edit on the table you want to add filters to. The table builder opens with a column list on the left and a live preview panel on the right.

Each column row shows its label, field mapping, and a set of toggle icons. The filter icon, a small funnel symbol, controls whether that column exposes a filter to frontend users.

Test this step while logged in as a user with the target role to confirm the expected behavior. Logged-in admin users always see all columns and all rows regardless of role restrictions, which can mask visibility issues during initial configuration.

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.

Step 2: How Do I Enable the Filter for a Column?

Click the funnel icon on any column to reveal the Filter Settings panel. You will see three main options:

• Filter Type: Text, Select, or Date
• Filter Label: The placeholder text shown inside the filter input (defaults to the column label)
• Filter Position: Above table (default) or inline header

Enable the toggle at the top of that panel, choose your filter type, and click Save Column. Repeat for every column you want to make filterable.

Choosing the Right Filter Type

Text is a free-type input field. Use it for columns like Name, Company, or Description where values vary too widely for a dropdown. Text filters match substrings, so typing "smith" will surface both "Smith" and "Smithson."

Select renders as a dropdown menu populated with the unique values found in that column. It is ideal for columns with a limited set of options such as Status, Category, or Region. TableCrafter reads distinct values from the data source at render time and builds the dropdown automatically, no manual option entry required.

Date shows a date-picker input. When a user picks a date, the table filters to rows where the column value matches that exact date. For a date range picker (from/to), see the dedicated date range filter guide.

Step 3: How Do I Save the Table Configuration?

Click Save Table at the top of the table builder. TableCrafter stores the filter configuration in the table's settings record in the WordPress database. The preview panel on the right will refresh and show the filter inputs above the column headers.

The setting is stored in the WordPress options table under the table's configuration key. It does not modify the original data source and can be changed at any time without affecting the underlying records.

TableCrafter re-fetches this data on each page load by default. If your data source updates infrequently and your site has significant traffic, enable the built-in caching option in the table's Performance tab. This stores the fetched data for a configurable number of minutes and serves it from WordPress transients, reducing API calls to the source and improving page load time for visitors.

Step 4: How Do I Add the Shortcode to a Page?

Go to the page or post where you want the table to appear. Add a shortcode block and enter:

[tablecrafter id="1" filter="true"]

Replace 1 with your actual table ID. The filter="true" parameter is required to activate the filter bar on the frontend. Without it, the filters you configured in the builder will not render, even if they are enabled per column.

If you want filters and search and inline editing simultaneously, combine the parameters:

This applies to all users who can view the table, regardless of role. Role-specific overrides can be set per column under the column Visibility settings. The table-level setting acts as the default for any column without a role override.

The configuration you set here applies to every visitor who loads a page containing this table, regardless of whether they are logged in. Role-specific overrides for columns and rows are a separate layer and do not replace these global display settings. Apply global settings first, then add role restrictions as needed for tables that serve multiple user types.

[tablecrafter id="1" filter="true" search="true" edit="true"]

Step 5: How Do I Test the Filters?

Visit the page on the frontend, either in a private browsing window or while logged out if your table is public. You should see a filter bar sitting directly above the table, with one input for each column you enabled. The layout is a horizontal row on desktop and stacks vertically on mobile screens under 768px.

Type into a text filter or select a value from a dropdown. The table rows update without a page reload, TableCrafter sends an AJAX request to the server, applies the filter to the data query, and replaces the table body. The URL does not change by default (see the URL parameter guide if you need shareable filtered links).

Testing the Reset Behavior

Each filter input has a small "×" clear button that appears once a value is entered. Clicking it resets that single filter. A Reset All Filters button appears at the right end of the filter bar whenever any filter is active, clicking it clears every filter simultaneously and re-fetches all rows.

Where Filters Appear in the Page Layout?

By default, TableCrafter renders the filter bar between the table title (if shown) and the table header row. The exact DOM structure is:

.gt-table-wrapper
  .gt-filter-bar          <-- filter inputs here
  .gt-table-scroll
    table.gt-table
      thead
      tbody

This means the filter bar scrolls with the page but stays above the table at all times. If you have set height on the table to enable vertical scrolling, the filter bar remains outside the scrollable container so it is always accessible.

The filter="true" Shortcode Parameter Explained

The shortcode parameter acts as a master switch. Setting filter="false" (or omitting the parameter) suppresses the entire filter bar regardless of per-column settings. This is useful when you embed the same table in multiple locations, for example, showing filters on a dedicated data page but hiding them in a compact sidebar widget using filter="false".

There is no way to selectively show some column filters and hide others via the shortcode, that granular control lives only in the table builder column settings.

How Do Common Issues and Fixes Work?

• Filter bar does not appear: Confirm filter="true" is in the shortcode and that at least one column has the filter toggle enabled in the builder.
• Select dropdown is empty: This happens when the data source has no rows, or when the column is mapped to a calculated field rather than a raw data field. Switch to a direct field mapping.
• Text filter matches too broadly: By design, text filters use substring matching. If you need exact matching, use a Select filter type instead, it matches the full value.
• Filters break after a caching plugin clears cache: TableCrafter's AJAX endpoint is at /wp-admin/admin-ajax.php and should not be cached. Exclude that URL from your caching plugin's rules.

What Are the Next Steps?

Column filters are the foundation of an interactive table. Once they are working, you can layer on additional capabilities: add a global search bar with search="true", enable multi-select dropdowns for columns where users need to filter by more than one value at a time, or configure URL parameter passthrough so filtered views can be bookmarked and shared. Each of those features is covered in the subsequent guides in this series.

Changes take effect immediately after saving. No cache flush or page refresh is required for the new configuration to apply to all shortcode instances of this table.

If this step produces unexpected output, check the source data directly in the connected system. TableCrafter passes data through without modification — if a cell displays an unexpected value, the source record contains that value. Use the TableCrafter debug log (Settings > Advanced > Debug Mode) to trace the exact query sent to the source and the raw response received, which narrows the diagnosis to either a source-side or rendering-side issue.