Documentation

Column Filtering

Column filtering allows users to quickly find and display only the data that meets specific criteria. Simple Table provides intelligent filtering for different data types including text, numbers, dates, booleans, and enum values.

Basic Implementation

Column filtering is enabled by adding the filterable: true property to individual column headers. Each column can be independently configured for filtering based on its data type.

Filter Configuration

PropertyRequiredDescriptionExample
HeaderObject.filterable
boolean
Optional
Enable filtering for a specific column. Each column can be independently configured for filtering based on its data type. Simple Table provides intelligent filtering with different operators for each data type.

External Filtering

For advanced use cases, you can handle filtering externally - perfect for server-side filtering, API integration, or custom filtering logic. This demo shows how to manage filtering completely outside the table component with diverse data types and locations.

External Filter Status: No filters applied

External filtering provides two key benefits:

  • API Integration: Use onFilterChange to trigger server-side filtering while keeping the table's UI filter controls.
  • Complete Control: Use externalFilterHandling= to disable all internal filtering and provide your own pre-filtered data.

External Filtering Configuration

PropertyRequiredDescriptionExample
Optional
Callback function triggered when filter configuration changes. Receives the current filter state with all active filters.
externalFilterHandling
boolean
Optional
When true, completely disables internal filtering logic. The table will not filter data internally - you must provide pre-filtered data via the rows prop.

Enum Filter Search

For enum columns with more than 10 options, Simple Table automatically provides a search input to help users quickly find and select the desired enum values. This improves usability when dealing with large sets of enum options.