ActiveFilters component not displaying filter operators correctly

[ryanrozich]

Bug Description

The ActiveFilters component (filter pills) is not correctly displaying the filter operator type. Regardless of the actual filter operator being used (equals, greater than, less than, between, etc.), the pill only shows the filter value without the operator context.

Steps to Reproduce

1. Apply a date filter with any operator type (e.g., "greater than", "less than", "between")
2. Observe the active filter pill displayed
3. Result: The pill shows "Due Date: Today" regardless of the operator used
4. Expected: The pill should show the operator, e.g.:
   • "Due Date: > Today" for greater than
   • "Due Date: < Today" for less than
   • "Due Date: = Today" for equals
   • "Due Date: Between X and Y" for range filters

Expected Behavior

The ActiveFilters component should display:

• The operator symbol or text along with the filter value
• Different representations for different filter types:
  • Equals: "="
  • Greater than/After: ">" or "After"
  • Less than/Before: "<" or "Before"
  • Between/In Range: "Between X and Y"
• This should work for both specific dates and relative date expressions

Additional Context

• Affects both absolute and relative date filters
• The filter functionality works correctly; this is purely a display issue
• Users cannot distinguish between different filter operators when looking at active filters

Screenshots

As shown in the provided screenshots, the filter pill only displays "Due Date: Today" without any operator indication.

Environment

• ag-grid-react-components version: v0.2.0-rc1
• Component: ActiveFilters

[ryanrozich]

This issue has been resolved by PR #102 (Release v0.2.0-rc3). The ActiveFilters component now correctly displays filter operators in the format "[operator] [value]" (e.g., "after Today", "before 2024-01-01", etc.).

The headless refactor implementation shows operators for all filter types as requested. For AG Grid compatibility, we use AG Grid's operator names ("after", "before") rather than generic terms.

If you need custom operator symbols (e.g., ">" instead of "after"), you can customize the display using the headless pattern by providing your own formatting function.

See HEADLESS_RC3_MIGRATION_PLAN.md for implementation details.