Components advanced

DataSourceSearch

A search/filter control that connects to a page data source. Place it above a DataGrid to add search functionality.

Atualizado Feb 19, 2026

DataSourceSearch

A search/filter control that connects to a page data source. Place it above a DataGrid to add search functionality.

Use Cases

  • List page search functionality
  • Filtering DataGrid results
  • Real-time search across table data

Properties

targetDataSource

ID of the pageDataSource to filter (must match DataGrid's pageDataSource). Type: string.

searchField

Field/column name to search within. Type: string.

placeholder

Placeholder text shown in search input. Type: string. Default: Search...

debounceMs

Milliseconds to wait after typing before searching (prevents excessive API calls). Type: number. Default: 300

matchType

How to match search term against field values. Type: string. Options: contains, startsWith, exact. Default: contains

Best Practices

  • Place above DataGrid for visual connection
  • Use debounceMs 300-500 for optimal UX (avoid too many API calls)
  • Use ‘contains’ matchType for most search use cases
  • Match targetDataSource to the pageDataSource ID used by DataGrid

Etiquetas

datasourcesearch advanced list page filtering datagrid real-time search

Componentes Relacionados

DataSourceSearch

Pronto para criar?

Comece a criar seu app gratuitamente com o Qödiak.

Começar Gratuitamente

Artigos Relacionados

AnimatedCounter

An animated number counter that smoothly counts from a start value to an end value when scrolled into view, ideal for showcasing statistics, metrics, and numbers on any site.

AnimatedGradient

Smooth animated gradient background for modern, premium aesthetics. Supports linear and radial gradients with configurable colors, animation speed, and intensity. GPU‑accelerated for smooth 60fps performance.

AppSettings

App-level configuration that applies to the entire application. It controls app metadata, publishing, authentication, email notifications, SEO, webhooks, and branding. These settings are distinct from page-level and component-level properties.

Badge

A small label or tag component used for status indicators, categories, highlights, and similar purposes. It supports multiple visual variants.

Button

An interactive button component that supports link navigation, page data source operations (record navigation, new record, mode switching), form submission, and custom JavaScript execution. Save/Delete actions must use a custom script with navigation. The component offers two visual variants and can enable or disable dynamically based on data context.

Calendar

A full‑featured calendar component built with react‑big‑calendar. It can display events in month, week, day, or agenda views and includes navigation and view‑switching capabilities, making it suitable for any site that needs scheduling, event management, or date visualization.