Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Display Detections in MUI DataGrid #17

@sorochak

Description

@sorochak

Build a React component that displays the bird detection results in a table format using Material UI's DataGrid component.

Tasks:

  • Create a DetectionsTable.tsx component using MUI DataGrid.
  • Define columns for important detection fields:
    • Species Name
    • Scientific Name
    • Confidence Score
    • Start Time (seconds)
    • End Time (seconds)
    • Detected Date
    • Filename
  • Fetch detection data from the backend API (or load from a static file for now if backend isn't ready).
  • Display the detection records dynamically inside the DataGrid.
  • Add basic features:
    • Pagination
    • Column sorting
    • Search/filter by species name (optional for MVP)

Requirements:

  • Use TypeScript types/interfaces for detection records.
  • Handle loading states and empty results gracefully.
  • Format confidence scores (e.g., show 2 decimal places).

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions