Filtered Table Example

Advanced table example with dynamic filtering, Select columns, and role-based search columns.

Complete Example

Smart Search with Select Options

// hooks/smart-search-columns.ts
import type { Column } from '@wayvo-ai/core/ui/smart-search';
import type { Entity } from '@/lib/common/ds/types/Entity';
import { useClientSession } from '@wayvo-ai/core/ui';
import { useCustomerOptions } from './use-customer-options';
import { useMemo } from 'react';

export default function useSmartSearchColumns(): Column<Entity>[] {
  const session = useClientSession();
  const isAdmin = session?.roles?.includes('admin');
  const { rows: customerOptions } = useCustomerOptions();

  return useMemo(
    () => [
      {
        key: 'name',
        label: 'Name',
        type: 'Text',
        defaultOperator: 'is',
      },
      {
        key: 'customerId',
        label: 'Customer',
        type: 'Select',
        defaultOperator: 'is',
        options: customerOptions,
        getOptionLabel: (option) => option.customerName,
        getOptionValue: (option) => option.customerId,
      },
      {
        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',
      },
      // Admin-only column
      ...(isAdmin
        ? [
            {
              key: 'internalCode',
              label: 'Internal Code',
              type: 'Text',
              defaultOperator: 'is',
            },
          ]
        : []),
    ],
    [customerOptions, isAdmin],
  );
}

Customer Options Hook

// hooks/use-customer-options.ts
import { useStore } from '@wayvo-ai/core/client';
import { useDBRows, useIsStoreLoading } from '@wayvo-ai/core/ui';
import type { Customer } from '@/lib/common/ds/types/Customer';

export function useCustomerOptions() {
  const store = useStore<Customer>({
    datasourceId: 'Customers',
    page: 'entity-page',
    alias: 'customer-options',
    limit: 1000,
    autoQuery: true,
    select: ['customerId', 'customerName'],
    sort: { customerName: 1 },
  });

  const rows = useDBRows(store);
  const isLoading = useIsStoreLoading(store);

  return { rows, isLoading };
}

Table with Custom Cells

// hooks/use-table-columns.tsx
import type { Store } from '@wayvo-ai/core/common';
import type { Entity } from '@/lib/common/ds/types/Entity';
import type { AccessorKeyColumnDef } from '@tanstack/react-table';
import { HeaderCell, StatusBadgeCell, EntityNameCell } from '@wayvo-ai/core/ui';
import { useMemo } from 'react';

export default function useTableColumns(store: Store<Entity>): AccessorKeyColumnDef<Entity>[] {
  return useMemo(
    () => [
      {
        accessorKey: 'name',
        header: (props) => <HeaderCell {...props} type="Text" store={store} accessorKey="name" title="Name" />,
        cell: (props) => <EntityNameCell attributeCode="name" preset="customer" {...props} />,
      },
      {
        accessorKey: 'customerName',
        header: (props) => (
          <HeaderCell {...props} type="Text" store={store} accessorKey="customerName" title="Customer" />
        ),
        cell: (props) => <TableCell type="Text" attributeCode="customerName" {...props} />,
      },
      {
        accessorKey: 'status',
        header: (props) => <HeaderCell {...props} type="Text" store={store} accessorKey="status" title="Status" />,
        cell: (props) => <StatusBadgeCell attributeCode="status" {...props} />,
      },
      {
        accessorKey: 'createdAt',
        header: (props) => (
          <HeaderCell {...props} type="Date" store={store} accessorKey="createdAt" title="Created At" />
        ),
        cell: (props) => <TableCell type="Date" attributeCode="createdAt" {...props} />,
      },
    ],
    [store],
  );
}

Features Demonstrated

• ✅ Dynamic search columns based on user roles
• ✅ Select filters with master data
• ✅ Custom styled cells
• ✅ Date filtering
• ✅ Text search with multiple operators

Next Steps

• Complex Workflow Example - Multiple stores and relationships
• Smart Search - Learn more about search