How to Filter an Airtable Table on Your WordPress Site

Updated July 2026 • 7 min read • By Fahad Murtaza

TableCrafter gives visitors multiple ways to slice through Airtable data on your WordPress site: a live search bar, per-column dropdown filters, multi-select filters, and date range pickers. This guide covers which filter type applies to each Airtable field type, how to configure them, and the difference between client-side and server-side filtering. 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 native Gutenberg block. Gravity Forms is active on over 10 million WordPress sites (Gravity Forms, 2025).

What Filter Types Are Available in TableCrafter?

TableCrafter supports four distinct filter mechanisms, each suited to a different kind of Airtable field:

How Do I Enable Filters in TableCrafter?

Global Filter Toggle

To show any filters at all, you must enable the filter bar globally for the table:

1. Open the table configuration in TableCrafter → Manage Tables.
2. In the Display Settings section, enable Filter Bar.
3. Save the table.

You can also enable the filter bar at the shortcode level without changing the table configuration:

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

With filter="true", the filter bar appears and all columns with a configured filter type will show their filter controls.

Per-Column Filter Configuration

Enabling the global filter bar is not enough on its own, you must also enable filtering on each individual column you want to be filterable:

1. In the table configuration, open the Columns section.
2. For each column you want to be filterable, enable the Filterable toggle.
3. TableCrafter will auto-select the filter type based on the column type, but you can override it.

How Do I Filter by Column Type?

Single Select Fields: Dropdown Filter

Airtable Single select fields render a dropdown filter. TableCrafter collects all distinct values from the fetched dataset and populates the dropdown automatically. No manual configuration of options is needed.

When a visitor selects an option from the dropdown, the table immediately filters to show only rows where that column matches the selected value. Selecting the blank/default option resets the filter.

Example use case: A project board where visitors filter by Status: Not started, In progress, or Complete.

Multi-Select Fields: Multi-Select Dropdown Filter

Airtable Multi-select fields render a multi-select dropdown filter. Visitors can pick one or more values. A row is included in the results if it contains any of the selected values (OR logic). This matches the most natural expectation: if you select both Design and Development, you see rows tagged with either or both.

The dropdown is populated from all distinct values found in the dataset, combining all values across all records for that column.

Example use case: A resource library where each resource can have multiple tags, and visitors filter to resources tagged with either Beginner or Advanced.

Date Fields: Date Range Filter

Date and DateTime columns render a From / To date range picker. Both inputs are optional, a visitor can set only a From date to see everything after a certain date, only a To date to see everything before, or both for a specific window.

Dates are compared inclusively: a From date of June 1 and a To date of June 30 includes records on June 1 and June 30.

Example use case: An event calendar where visitors filter to events happening in a specific month.

Text, Long Text, URL, Email: Text Search

Text-based columns do not use a dropdown filter by default because the number of unique values could be very large. Instead, they participate in the global search bar. When a visitor types in the search box, TableCrafter filters rows by matching the search term against all enabled text columns simultaneously.

You can also configure an individual text column to have its own text input filter rather than relying solely on the global search bar. Do this in the column's filter settings by setting the filter type to Text Contains. This adds a text input directly below that column header.

Number Fields: Numeric Range Filter

Number columns support a min/max range filter. Visitors can enter a minimum value, a maximum value, or both. Rows outside the range are hidden. This is useful for filtering by price, quantity, score, or any numeric attribute.

Checkbox Fields: Boolean Filter

Checkbox columns render a three-state filter: All, Yes (checked), or No (unchecked). The default state is All, showing every row regardless of checkbox value.

What Is the Live Search Bar?

The global search bar operates across all text columns simultaneously. It is separate from the per-column filter controls and always does client-side matching.

Enable search independently of filters:

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

Enable both search and filters together, the most common configuration:

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

Search matches are case-insensitive and partial. Typing ohn matches rows containing John, johnson, or phone in any searchable text column.

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.

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 Does Client-Side vs. Server-Side Filtering Work?

This distinction matters for performance, especially on large Airtable tables.

Client-Side Filtering (Default)

By default, TableCrafter fetches the entire Airtable dataset on page load (respecting the cache TTL) and performs all filtering in the visitor's browser using JavaScript. No additional API calls are made when a visitor applies or changes a filter.

Advantages: Instant filter response, no API rate limit consumption per filter action, works well for tables up to a few thousand records.

Limitations: The full dataset must be fetched and held in the browser on initial load. For tables with tens of thousands of records, this increases page load time and memory usage.

Server-Side Filtering

For large Airtable tables, TableCrafter can pass filter values to the Airtable API as formula parameters, fetching only matching records. This reduces the initial payload and keeps the browser fast.

To enable server-side filtering, set Filter Mode to Server in the table's data source settings. Note that server-side filtering makes an Airtable API call each time a visitor changes a filter, which counts toward your Airtable API rate limits.

How Do Filters Combine in TableCrafter?

When a visitor applies multiple filters simultaneously, TableCrafter combines them with AND logic: a row must satisfy all active filters to appear in the table. For example:

• Status filter: In Progress
• Category multi-select: Design or Development
• Date range: June 2026

Only rows where Status is In Progress, Category contains Design or Development, and the date falls in June 2026 will appear.

This setting persists across table rebuilds. If you change the data source later, you may need to revisit this step to remap columns from the new source to the existing table configuration.

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.

How Does Resetting Filters Work?

TableCrafter adds a Reset Filters button to the filter bar automatically when any filter is active. Clicking it clears all filter inputs and the search bar, returning the table to its unfiltered state. You can control the button label in the table's display settings.

TableCrafter validates this configuration on save. If validation fails, the admin panel displays a specific error message identifying which field caused the problem. Correct the field value and save again without needing to restart the setup process.

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 Full Shortcode with All Options Work?

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

This renders the Airtable table with the full filter bar, live search, and a CSV export button, the most feature-complete read-only configuration. For editable tables with the same controls:

This step is required before the table can render data. Skipping it or entering incorrect values will result in a connection error when the table first loads. Double-check the value by pasting it directly into the field rather than typing it manually to avoid whitespace or encoding issues.

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.

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