Add Query Builder React samples (Overview and Template)

[Copilot]

Closes #998
Ports two Query Builder samples from Web Components to React: a basic Overview sample with Grid integration and API calls, and a Template sample demonstrating custom search value templates.

Sample 1: Query Builder Overview

Path: samples/interactions/query-builder/overview/

• Query Builder with Grid, entity selection (Customers/Orders), dynamic column visibility
• Fetches data from Northwind API (https://data-northwind.indigo.design/QueryBuilder/ExecuteQuery)
• Loading states, expression tree event handling

Sample 2: Query Builder Template

Path: samples/interactions/query-builder/template/

• Custom searchValueTemplate implementations per field type:
  • Region: Select dropdown with 9 region options
  • OrderStatus: Radio button group (New/Shipped/Done)
  • Date/Time: DatePicker and DateTimeInput components
  • Default: Standard text/number inputs
• Query Builder Header, live expression tree JSON output

Implementation

Uses igniteui-webcomponents-grids@6.3.0-alpha.2 with React functional components. Web components registered via .register() with JSX type declarations:

IgcQueryBuilderComponent.register();

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'igc-query-builder': any;
    }
  }
}

Custom template example:

const buildSearchValueTemplate = (ctx: QueryBuilderSearchValueContext) => {
  if (field === 'Region' && matchesEqualityCondition) {
    return html`<igc-select @igcChange=${...}>${regionOptions.map(...)}</igc-select>`;
  }
  // ...other field types
};

Screenshots

Overview Sample

Template Sample - Custom Select

Template Sample - Custom Radio Buttons

Original prompt

Add QueryBuilder React Samples

Context

Port 2 Query Builder samples from Web Components (WC) to React, based on:

• WC PR: feat: add query builder related samples igniteui-wc-examples#1144
• Angular Elements PR (for component configuration): feat(query-builder): Expose query builder component in elements igniteui-angular#16731

Requirements

Sample 1: Query Builder Overview

Location: samples/interactions/query-builder/overview/

Reference WC Implementation:

• File: https://github.com/IgniteUI/igniteui-wc-examples/blob/bc54a2bec2d2da092b1c4e089e95a15fea794626/samples/interactions/query-builder/overview/src/index.ts
• HTML: https://github.com/IgniteUI/igniteui-wc-examples/blob/bc54a2bec2d2da092b1c4e089e95a15fea794626/samples/interactions/query-builder/overview/index.html
• CSS: https://github.com/IgniteUI/igniteui-wc-examples/blob/bc54a2bec2d2da092b1c4e089e95a15fea794626/samples/interactions/query-builder/overview/src/index.css

Features to implement:

• Query Builder with Grid integration
• Entity selection (Customers/Orders with fields)
• Expression tree management
• API integration with Northwind endpoint: https://data-northwind.indigo.design/QueryBuilder/ExecuteQuery
• Dynamic column visibility based on returnFields
• Auto-generate grid columns
• Loading state handling

Key Implementation Details:

// Entities structure
entities = [
  { name: 'Customers', fields: customersFields },
  { name: 'Orders', fields: ordersFields }
];

// Fields examples
customersFields = [
  { field: 'customerId', dataType: 'string' },
  { field: 'companyName', dataType: 'string' },
  // ... more fields
];

ordersFields = [
  { field: 'orderId', dataType: 'number' },
  { field: 'orderDate', dataType: 'date' },
  { field: 'completed', dataType: 'boolean' },
  // ... more fields
];

// Expression tree initialization
const tree = new IgcFilteringExpressionsTree();
tree.operator = FilteringLogic.And;
tree.entity = 'Orders';
tree.returnFields = ['orderId', 'customerId', ...]; // or ['*'] for all

Sample 2: Query Builder Template

Location: samples/interactions/query-builder/template/

Reference WC Implementation:

• File: https://github.com/IgniteUI/igniteui-wc-examples/blob/bc54a2bec2d2da092b1c4e089e95a15fea794626/samples/interactions/query-builder/template/src/index.ts
• HTML: https://github.com/IgniteUI/igniteui-wc-examples/blob/bc54a2bec2d2da092b1c4e089e95a15fea794626/samples/interactions/query-builder/template/index.html
• CSS: https://github.com/IgniteUI/igniteui-wc-examples/blob/bc54a2bec2d2da092b1c4e089e95a15fea794626/samples/interactions/query-builder/template/src/index.css

Features to implement:

• Query Builder with custom search value templates
• searchValueTemplate prop usage (from Angular Elements)
• Custom templates for different field types:
  • Region field: Custom Select dropdown with predefined options
  • OrderStatus field: Radio button group
  • Date fields: Date picker
  • Time fields: Time input with custom formatting
  • Default fields: Standard input (text/number)
• Expression tree JSON output display
• Query Builder Header with custom title

Key Implementation Details:

// Region options
regionOptions = [
  { text: 'Central North America', value: 'CNA' },
  { text: 'Central Europe', value: 'CEU' },
  // ... more options
];

// Status options
statusOptions = [
  { text: 'New', value: 1 },
  { text: 'Shipped', value: 2 },
  { text: 'Done', value: 3 }
];

// Fields with custom formatters
ordersFields = [
  { field: 'Region', dataType: 'string', formatter: (value) => value?.text ?? value?.value ?? value },
  { field: 'OrderStatus', dataType: 'number', formatter: (value) => statusOptions.find(o => o.value === value)?.text },
  { field: 'RequiredTime', dataType: 'time', formatter: (value) => value.toLocaleTimeString(...) },
  { field: 'OrderDate', dataType: 'date', formatter: (value) => value.toLocaleDateString(...) },
  // ... more fields
];

// Template function signature
searchValueTemplate = (ctx: IgcQueryBuilderSearchValueContext) => {
  // ctx.implicit - the value object
  // ctx.selectedField - current field
  // ctx.selectedCondition - current condition
  // ctx.defaultSearchValueTemplate - fallback template
  
  // Return appropriate component based on field/condition
};

Technical Specifications

Package Versions (CRITICAL)

{
  "igniteui-webcomponents-grids": "6.3.0-alpha.2",
  "igniteui-react": "19.5.0-beta.2",
  "igniteui-react-core": "19.5.0-beta.2" // or compatible version
}

File Structure (per sample)

Follow existing React examples pattern:

samples/interactions/query-builder/{sample-name}/
├── index.html
├── package.json
├── vite.config.js
├── .eslintrc.js
├── sandbox.config.json
├── README.md
├── src/
│   ├── index.tsx  (main React component)
│   ├── index.css
│   └── react-app-env.d.ts

React Component Patterns

• Use functional components with hooks (useState, useEffect)
• Import from `i...

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[gedinakova]

@onlyexeption The radio buttons text is missing: