Custom Filter Components

/**
 * Props provided to custom filter components
 * @template TData - Type of row data objects
 * @template TContext - Type of grid context
 * @template TModel - Type of filter model
 */
interface CustomFilterProps<TData = any, TContext = any, TModel = any>
  extends BaseFilterParams<TData, TContext> {
  /** The current filter model for the component */
  model: TModel | null;
  /** Callback that should be called every time the model in the component changes */
  onModelChange: (model: TModel | null) => void;
  /** 
   * Callback that can be optionally called every time the filter UI changes.
   * The grid will respond with emitting a FilterModifiedEvent.
   */
  onUiChange: () => void;
}

import React, { useState, useEffect } from 'react';
import { CustomFilterProps, useGridFilter } from 'ag-grid-react';

interface TextFilterModel {
  filterType: 'text';
  type: 'equals' | 'contains' | 'startsWith' | 'endsWith';
  filter: string;
}

const CustomTextFilter: React.FC<CustomFilterProps<any, any, TextFilterModel>> = (props) => {
  const [filterText, setFilterText] = useState(props.model?.filter || '');
  const [filterType, setFilterType] = useState(props.model?.type || 'contains');

  // Update model when filter changes
  useEffect(() => {
    const newModel: TextFilterModel = {
      filterType: 'text',
      type: filterType,
      filter: filterText
    };
    
    if (filterText) {
      props.onModelChange(newModel);
    } else {
      props.onModelChange(null);
    }
  }, [filterText, filterType, props]);

  // Integrate with grid callbacks
  useGridFilter({
    doesFilterPass: (params) => {
      if (!filterText) return true;
      
      const value = props.valueGetter(params);
      const cellValue = String(value || '').toLowerCase();
      const filter = filterText.toLowerCase();
      
      switch (filterType) {
        case 'equals': return cellValue === filter;
        case 'contains': return cellValue.includes(filter);
        case 'startsWith': return cellValue.startsWith(filter);
        case 'endsWith': return cellValue.endsWith(filter);
        default: return true;
      }
    },
    isFilterActive: () => !!filterText,
    getModel: () => filterText ? { filterType: 'text', type: filterType, filter: filterText } : null,
    setModel: (model) => {
      if (model) {
        setFilterText(model.filter || '');
        setFilterType(model.type || 'contains');
      } else {
        setFilterText('');
      }
    }
  });

  return (
    <div style={{ padding: '10px' }}>
      <select 
        value={filterType} 
        onChange={(e) => setFilterType(e.target.value as any)}
      >
        <option value="contains">Contains</option>
        <option value="equals">Equals</option>
        <option value="startsWith">Starts with</option>
        <option value="endsWith">Ends with</option>
      </select>
      
      <input
        type="text"
        value={filterText}
        onChange={(e) => {
          setFilterText(e.target.value);
          props.onUiChange(); // Notify grid of UI changes
        }}
        placeholder="Filter text..."
        style={{ width: '100%', marginTop: '5px' }}
      />
    </div>
  );
};

// Usage in column definition
const columnDefs = [
  {
    field: 'name',
    filter: CustomTextFilter,
    filterParams: {
      // Additional parameters can be passed here
    }
  }
];

/**
 * Props provided to custom filter components when enableFilterHandlers = true
 * @template TData - Type of row data objects
 * @template TContext - Type of grid context
 * @template TModel - Type of filter model
 */
interface CustomFilterDisplayProps<TData = any, TContext = any, TModel = any>
  extends FilterDisplayParams<TData, TContext, TModel> {}

/**
 * Props provided to custom floating filter components
 * @template P - Type of parent filter component
 * @template TData - Type of row data objects
 * @template TContext - Type of grid context
 * @template TModel - Type of filter model
 */
interface CustomFloatingFilterProps<P = IFilter, TData = any, TContext = any, TModel = any>
  extends IFloatingFilterParams<P, TData, TContext> {
  /** The current filter model for the component */
  model: TModel | null;
  /** Callback that should be called every time the model in the component changes */
  onModelChange: (model: TModel | null) => void;
}

import React, { useState, useEffect } from 'react';
import { CustomFloatingFilterProps, useGridFloatingFilter } from 'ag-grid-react';

interface SimpleFloatingFilterModel {
  filter: string;
}

const CustomFloatingFilter: React.FC<CustomFloatingFilterProps<any, any, any, SimpleFloatingFilterModel>> = (props) => {
  const [filterText, setFilterText] = useState(props.model?.filter || '');

  useEffect(() => {
    if (filterText) {
      props.onModelChange({ filter: filterText });
    } else {
      props.onModelChange(null);
    }
  }, [filterText, props]);

  // Integrate with grid floating filter callbacks
  useGridFloatingFilter({
    onParentModelChanged: (parentModel) => {
      setFilterText(parentModel?.filter || '');
    }
  });

  return (
    <input
      type="text"
      value={filterText}
      onChange={(e) => setFilterText(e.target.value)}
      placeholder="Quick filter..."
      style={{ width: '100%', height: '100%' }}
    />
  );
};

// Usage in column definition
const columnDefs = [
  {
    field: 'name',
    filter: 'agTextColumnFilter',
    floatingFilter: true,
    floatingFilterComponent: CustomFloatingFilter
  }
];

/**
 * Props provided to custom floating filter components when enableFilterHandlers = true
 * @template TData - Type of row data objects
 * @template TContext - Type of grid context
 * @template TModel - Type of filter model
 * @template TCustomParams - Type of custom parameters
 */
interface CustomFloatingFilterDisplayProps<TData = any, TContext = any, TModel = any, TCustomParams = object>
  extends FloatingFilterDisplayParams<TData, TContext, TModel, TCustomParams> {}

/**
 * Props provided to custom date components
 * @template TData - Type of row data objects
 * @template TContext - Type of grid context
 */
interface CustomDateProps<TData = any, TContext = any> extends BaseDateParams<TData, TContext> {
  /** The current date for the component */
  date: Date | null;
  /** Callback that should be called every time the date in the component changes */
  onDateChange: (date: Date | null) => void;
}

import React, { useState } from 'react';
import { CustomDateProps, useGridDate } from 'ag-grid-react';

const CustomDatePicker: React.FC<CustomDateProps> = (props) => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(props.date);

  const handleDateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newDate = event.target.value ? new Date(event.target.value) : null;
    setSelectedDate(newDate);
    props.onDateChange(newDate);
  };

  // Integrate with grid date callbacks
  useGridDate({
    getDate: () => selectedDate,
    setDate: (date) => setSelectedDate(date)
  });

  const dateString = selectedDate ? selectedDate.toISOString().split('T')[0] : '';

  return (
    <input
      type="date"
      value={dateString}
      onChange={handleDateChange}
      style={{ width: '100%' }}
    />
  );
};

// Usage in column definition
const columnDefs = [
  {
    field: 'createdDate',
    filter: 'agDateColumnFilter',
    filterParams: {
      dateComponent: CustomDatePicker
    }
  }
];

/**
 * Hook to allow custom filter component callbacks to be provided to the grid
 * @param callbacks - Filter callback implementations
 */
function useGridFilter(callbacks: CustomFilterCallbacks): void;

/**
 * Hook to allow custom filter component callbacks when using enableFilterHandlers = true
 * @param callbacks - Filter display callback implementations
 */
function useGridFilterDisplay(callbacks: CustomFilterDisplayCallbacks): void;

/**
 * Hook to allow custom floating filter component callbacks to be provided to the grid
 * @param callbacks - Floating filter callback implementations
 */
function useGridFloatingFilter(callbacks: CustomFloatingFilterCallbacks): void;

/**
 * Hook to allow custom date component callbacks to be provided to the grid
 * @param callbacks - Date callback implementations
 */
function useGridDate(callbacks: CustomDateCallbacks): void;

/**
 * Callbacks for custom filter components
 */
interface CustomFilterCallbacks extends BaseFilter {}

/**
 * Callbacks for custom filter components when using enableFilterHandlers = true
 */
interface CustomFilterDisplayCallbacks extends SharedFilterUi {}

/**
 * Callbacks for custom floating filter components
 */
interface CustomFloatingFilterCallbacks extends BaseFloatingFilter {}

/**
 * Callbacks for custom date components
 */
interface CustomDateCallbacks extends BaseDate {}