Analysis/_bmad-output/implementation-artifacts/1-5-tri-filtrage-de-base.md

Story 1.5: Tri & Filtrage de Base

Status: review

Story

As a Julien (Analyst), I want to sort and filter my data in the grid, so that I can identify extreme values or specific subsets.

Acceptance Criteria

1. Sorting: Users can click a column header to toggle between ascending, descending, and no sort.
2. Filtering: Users can enter a search term or value in a column filter input to narrow down the rows.
3. Performance: Sorting and filtering 50,000 rows should happen within 300ms using local processing.
4. Visual Indicators: Column headers show an arrow icon indicating the current sort direction.
5. Persistence: Sort and filter states are maintained in the UI state during the session.

Tasks / Subtasks

• TanStack Table Logic (AC: 1, 2)
  • Enable getSortedRowModel and getFilteredRowModel in SmartGrid.tsx.
• Filter UI (AC: 2, 4)
  • Add a text input field in each column header for filtering.
  • Add sort icons (Lucide React) to headers.
• State & Performance (AC: 3, 5)
  • Ensure filtering logic handles different data types (string search, numeric range).

Dev Notes

• Sorting: Integrated TanStack's built-in sorting logic with visual arrows.
• Filtering: Implemented per-column text filtering using a Search input in headers.
• UI: Combined renaming, type selection, and filtering into a compact EditableHeader component.

Project Structure Notes

• Modified frontend/src/features/smart-grid/components/SmartGrid.tsx.

References

• [Source: epics.md#Story 1.5]
• [Source: architecture.md#Frontend Architecture]

Dev Agent Record

Agent Model Used

{{agent_model_name_version}}

Completion Notes List

• Enabled sorting and filtering row models in the TanStack Table configuration.
• Added interactive sort buttons with direction indicators (Up/Down).
• Implemented a search-based filter for each column.
• Verified performance remains smooth with virtualization.

File List

• /frontend/src/features/smart-grid/components/SmartGrid.tsx