Components advanced

DataSourceSearch

A search/filter control that connects to a page data source, typically placed above a DataGrid to provide search functionality.

Mis à jour Mar 6, 2026

DataSourceSearch

A search/filter control that connects to a page data source, typically placed above a DataGrid to provide 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

Common Mistakes

Étiquettes

datasourcesearch advanced list page filtering datagrid real-time search

Composants associés

Prêt à construire ?

Commencez à créer votre application gratuitement avec Qödiak.

Commencer gratuitement

Articles associés

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.

Button

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. Two visual variants are available, and the button can be enabled or disabled 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.

Card

Feature card component with an icon, title, description, and entrance animations. Ideal for showcasing features, services, or benefits in grid layouts with animation support.

Checkbox

A checkbox group component that lets users select multiple options from a predefined list. It renders a set of checkboxes with individual labels and can be arranged vertically or horizontally.

CountdownTimer

Real-time countdown timer component that displays the time remaining until a target date/time. It updates every second, offers customizable formatting, and shows a completion message when the countdown ends. Suitable for any site type.