HomeChallengesRepsProblemsLeaderboardTake a challenge

Data Table

Sort, filter and paginate a table — without re-sorting a thousand rows on every keystroke.

Advanced20 min on the clock8 graded checks · 100 pointsReact + UI SprintPro
Graded by reading your code against the checklist below.

What you build

    How it is graded

    Published in full, before you start — every point is one of these and there is nothing else.

    1. Hold filter, sort and page in state+10React state
    2. Memoise the derived rows+20React performance
    3. Filter the rows+10React state
    4. Sort, and let the direction toggle+10React state
    5. Show one page at a time+15Pagination
    6. Render a loading state+15Loading and error states
    7. Handle the empty result+10Loading and error states
    8. Make the headers keyboard-usable+10Accessibility

    What it teaches

    The rest of React + UI Sprint