Smart Search

Smart Search provides advanced filtering and search capabilities for tables. It supports multiple field types, operators, and dynamic column definitions.

Overview

Smart Search is integrated into PageLayoutTemplate and provides:

• Text search with multiple operators
• Date range filtering
• Select dropdowns with options
• Complex filter combinations
• Persistent filter state

Column Definitions

Smart Search columns are defined as hooks to support dynamic definitions:

// hooks/smart-search-columns.ts
import type { Column } from '@wayvo-ai/core/ui/smart-search';
import type { Entity } from '@/lib/common/ds/types/module/Entity';

export default function useSmartSearchColumns(): Column<Entity>[] {
  return [
    {
      key: 'name',
      label: 'Name',
      type: 'Text',
      defaultOperator: 'is',
    },
    {
      key: 'description',
      label: 'Description',
      type: 'Text',
      defaultOperator: 'contains',
    },
    {
      key: 'status',
      label: 'Status',
      type: 'Select',
      defaultOperator: 'is',
      options: [
        { value: 'draft', label: 'Draft' },
        { value: 'active', label: 'Active' },
        { value: 'completed', label: 'Completed' },
      ],
      getOptionLabel: (opt) => opt.label,
      getOptionValue: (opt) => opt.value,
    },
    {
      key: 'createdAt',
      label: 'Created At',
      type: 'Date',
      defaultOperator: 'on',
    },
  ];
}

Column Types

Text

{
  key: 'name',
  label: 'Name',
  type: 'Text',
  defaultOperator: 'is',  // or 'contains', 'startsWith', 'endsWith'
}

Date

{
  key: 'createdAt',
  label: 'Created At',
  type: 'Date',
  defaultOperator: 'on',  // or 'before', 'after', 'between'
}

Select (Fixed Options)

{
  key: 'status',
  label: 'Status',
  type: 'Select',
  defaultOperator: 'is',
  options: [
    { value: 'draft', label: 'Draft' },
    { value: 'active', label: 'Active' },
  ],
  getOptionLabel: (opt) => opt.label,
  getOptionValue: (opt) => opt.value,
}

Select (Dynamic Options from Store)

For master data like customers or users:

// hooks/use-customer-options.ts
export function useCustomerOptions() {
  const store = useStore<Customer>({
    datasourceId: 'Customers',
    page: 'page-name',
    alias: 'customer-options',
    limit: 1000,
    autoQuery: true,
    select: ['customerId', 'customerName'],
    sort: { customerName: 1 },
  });
  return { rows: useDBRows(store), isLoading: useIsStoreLoading(store) };
}

// In smart-search-columns.ts
const { rows: customerOptions } = useCustomerOptions();

{
  key: 'customerId',
  label: 'Customer',
  type: 'Select',
  defaultOperator: 'is',
  options: customerOptions,
  getOptionLabel: (option) => option.customerName,
  getOptionValue: (option) => option.customerId,
}

Operators

Text Operators

• is - Exact match
• contains - Contains substring
• startsWith - Starts with
• endsWith - Ends with
• isNot - Not equal

Date Operators

• on - On specific date
• before - Before date
• after - After date
• between - Date range

Select Operators

• is - Equal to
• isNot - Not equal to
• in - In list (multiple selection)

Usage with PageLayoutTemplate

import { PageLayoutTemplate } from '@wayvo-ai/core/ui';
import useSmartSearchColumns from './hooks/smart-search-columns';

export default function PageContent() {
  const store = useEntityStore();
  const smartSearchColumns = useSmartSearchColumns();

  return (
    <PageLayoutTemplate
      store={store}
      smartSearchColumns={smartSearchColumns}
      // ... other props
    />
  );
}

Best Practices

1. Use hooks for dynamic columns - Support role-based or context-based columns
2. Share options hooks - Use the same options hook for SmartSearch and ComboboxInput
3. Limit options for Select - Use select to only fetch needed fields
4. Sort options alphabetically - Better UX for users

Next Steps

• Tables - Display filtered data
• Forms - Use same options in form fields