Data Table Grid

Published at 15 Jun 2026

Description
Explains what the challenge is about and what you need to build.

Sorting data helps users quickly parse information. The Data Table Grid challenge asks you to build a sortable table. Clicking on a column header (e.g. 'Name' or 'Age') should sort the rows alphabetically or numerically. Clicking again should toggle between ascending and descending order.

Requirements
Lists the specific elements, IDs, and behaviors your solution must include to pass the tests.

Sort trigger header element must have ID #sort-by-col.
Table body container holding the sorted rows must have ID #table-body-cells.
Implement a JavaScript sort handler that compares row values and toggles order directions.

Example Demo

User Flow

Step-by-step Flow Explanation:

Sort Trigger: User clicks the 'Age' column header button.
Ascending Order: Rows sort immediately, aligning items from youngest to oldest.
Reverse Direction: User clicks the header again, reversing the rows into descending order.

Related UI Challenges

Data Visualization

Discussion (0)

Join the Discussion

index.html

style.css

script.js

Loading Monaco Workspace...

Live Preview Browser

Tests & Console Output

Click to expand

Test Assertion	Status	Details/Errors
Required DOM Elements exist (#sort-by-col, #table-body-cells)	Pending	Pending execution
Component layout compiles and renders successfully with custom CSS styles	Pending	Pending execution
Interactive JavaScript logic and event listeners are implemented	Pending	Pending execution