HTML / CSS / JavaScript

Tables and data display

Sorting, filtering, comparing, editing, and responsive data tables.

75category cases
Currently showing 75 cases
0005Tables and data display

Responsive Data Table

An order list that automatically switches between desktop tables and mobile info cards.

HTMLCSSResponsiveTable
Open and run
0026Tables and data display

Inventory Ledger Multi-Column Sort Table

Complete a multi-column sortable table in an inventory ledger scenario: include real content, interactive controls, clear state feedback, and a responsive layout across sizes.

Tables and data displayMulti-column sort tableHTML TableCSSJavaScript
Open and run
0042Tables and data display

Inventory Ledger Filterable Table

Complete the combined filter table in an inventory ledger scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.

Tables and data displayComposite Filter TableHTML TableCSSJavaScript
Open and run
0058Tables and data display

Inventory Ledger Paged Data Table

Complete a paginated data table for an inventory ledger scenario: include real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Tables and data displayPaginated data tableHTML TableCSSJavaScript
Open and run
0074Tables and data display

Inventory Ledger Column Visibility Control

Complete the column visibility control in an inventory ledger scenario: includes realistic content, interactive controls, clear state feedback, and responsive layouts.

Tables and data displayColumn display controlHTML TableCSSJavaScript
Open and run
0090Tables and data display

Inventory Ledger Sticky Header

Completed a sticky table header for an inventory ledger scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.

Tables and data displaySticky HeaderHTML TableCSSJavaScript
Open and run
0106Tables and data display

Mobile card table for inventory ledger

Create a mobile card table for an inventory ledger scenario, including real content, actionable controls, clear state feedback, and cross-size layouts.

Tables and data displayMobile card tableHTML TableCSSJavaScript
Open and run
0122Tables and data display

Inventory ledger comparison table

Complete a comparison table for an inventory ledger scenario: include realistic content, actionable controls, clear status feedback, and a responsive layout across sizes.

Tables and data displayPlan Comparison TableHTML TableCSSJavaScript
Open and run
0138Tables and data display

Inventory ledger relationship matrix table

A relationship matrix table completed for an inventory ledger scenario: real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Tables and data displayRelationship Matrix TableHTML TableCSSJavaScript
Open and run
0154Tables and data display

Inventory Ledger Inline Edit Table

Inline editing table completed for the inventory ledger scenario: includes realistic content, interactive controls, clear status feedback, and responsive layout across sizes.

Tables and data displayInline Editable TableHTML TableCSSJavaScript
Open and run
0170Tables and data display

Inventory Ledger Bulk Selection Table

Complete a bulk-selection table for an inventory ledger scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.

Tables and data displayBatch selection tableHTML TableCSSJavaScript
Open and run
0186Tables and data display

Multi-column sortable course scores table

Complete the multi-column sortable table in a course grades scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Tables and data displayMulti-column sort tableHTML TableCSSJavaScript
Open and run
0202Tables and data display

Course grade composite filter table

A combined filtering table completed for a course grades scenario: real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Tables and data displayComposite Filter TableHTML TableCSSJavaScript
Open and run
0218Tables and data display

Course Scores Paginated Data Table

Build a paginated data table for course grade scenarios: includes real content, interactive controls, clear status feedback, and layouts across sizes.

Tables and data displayPaginated data tableHTML TableCSSJavaScript
Open and run
0234Tables and data display

Course score column visibility control

In a course scores scenario, complete column visibility control: includes real content, actionable controls, clear status feedback, and responsive layouts.

Tables and data displayColumn display controlHTML TableCSSJavaScript
Open and run
0250Tables and data display

Sticky Table Header for Course Scores

Complete sticky table headers for a course grades scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Tables and data displaySticky HeaderHTML TableCSSJavaScript
Open and run
0266Tables and data display

Mobile Course Grades Card Table

Complete a mobile card table for a course scores scenario: including realistic content, actionable controls, clear state feedback, and a responsive layout.

Tables and data displayMobile card tableHTML TableCSSJavaScript
Open and run
0282Tables and data display

Course Score Comparison Table

Complete a solution comparison table in a course score scenario: includes real content, interactive controls, clear state feedback, and cross-size layout.

Tables and data displayPlan Comparison TableHTML TableCSSJavaScript
Open and run
0298Tables and data display

Course grade relationship matrix table

Complete the relationship matrix table in a course grade scenario: include real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Tables and data displayRelationship Matrix TableHTML TableCSSJavaScript
Open and run
0314Tables and data display

Course Grades Inline Edit Table

Complete inline-editing tables for course grade scenarios: includes real content, interactive controls, clear state feedback, and responsive layouts.

Tables and data displayInline Editable TableHTML TableCSSJavaScript
Open and run
0330Tables and data display

Course Scores Bulk Selection Table

A bulk selection table for course score scenarios: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Tables and data displayBatch selection tableHTML TableCSSJavaScript
Open and run
0346Tables and data display

Project Budget Multi-Column Sortable Table

Complete a multi-column sortable table in a project budget scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Tables and data displayMulti-column sort tableHTML TableCSSJavaScript
Open and run
0361Tables and data display

Project Budget Composite Filter Table

Complete the combined filter table in the project budget scenario: includes real content, interactive controls, clear state feedback, and responsive layouts.

Tables and data displayComposite Filter TableHTML TableCSSJavaScript
Open and run
0376Tables and data display

Project Budget Paged Data Table

Completed paginated data table in the project budget scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Tables and data displayPaginated data tableHTML TableCSSJavaScript
Open and run
0391Tables and data display

Project Budget Column Visibility Control

Column visibility control in a project budget scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Tables and data displayColumn display controlHTML TableCSSJavaScript
Open and run
0406Tables and data display

Project Budget Sticky Header

Complete a sticky table header for the project budget scenario: include real content, operable controls, clear status feedback, and a responsive layout.

Tables and data displaySticky HeaderHTML TableCSSJavaScript
Open and run
0419Tables and data display

Project Budget Mobile Card Table

Complete a mobile card table in a project budget scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts.

Tables and data displayMobile card tableHTML TableCSSJavaScript
Open and run
0432Tables and data display

Project Budget Comparison Table

Complete the proposal comparison table in the project budget scenario: includes real content, interactive controls, clear status feedback, and cross-size layouts.

Tables and data displayPlan Comparison TableHTML TableCSSJavaScript
Open and run
0445Tables and data display

Project budget relational matrix table

Complete a relationship matrix table in a project-budget scenario: includes real content, interactive controls, clear state feedback, and cross-size layouts.

Tables and data displayRelationship Matrix TableHTML TableCSSJavaScript
Open and run
0457Tables and data display

Project Budget Inline Edit Table

Complete an inline-edit table in a project budget scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts.

Tables and data displayInline Editable TableHTML TableCSSJavaScript
Open and run
0467Tables and data display

Project Budget Bulk Selection Table

Complete a bulk selection table in a project budget scenario: includes real content, actionable controls, clear state feedback, and cross-size layout.

Tables and data displayBatch selection tableHTML TableCSSJavaScript
Open and run
0476Tables and data display

Service ticket multi-column sorting table

Complete the multi-column sorting table in a service ticket scenario: includes real content, interactive controls, clear status feedback, and cross-size layouts.

Tables and data displayMulti-column sort tableHTML TableCSSJavaScript
Open and run
0484Tables and data display

Service ticket combined filter table

Complete a composite filter table in a service-ticket scenario: includes real content, interactive controls, clear state feedback, and cross-size layouts.

Tables and data displayComposite Filter TableHTML TableCSSJavaScript
Open and run
0527Tables and data display

Course Attendance Bulk Selection Table

Complete a bulk selection table in a class attendance scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Tables and data displayBatch selection tableHTML TableCSSJavaScript
Open and run
0543Tables and data display

Outpatient Billing Column Visibility Control

Complete column visibility control in an outpatient billing scenario: includes realistic content, interactive controls, clear status feedback, and a responsive layout.

Tables and data displayColumn display controlHTML TableCSSJavaScript
Open and run
0552Tables and data display

Clinic inventory plan comparison table

In an outpatient inventory scenario, complete a comparison table of options: include real content, interactive controls, clear status feedback, and cross-size layouts.

Tables and data displayPlan Comparison TableHTML TableCSSJavaScript
Open and run
0568Tables and data display

Donation Ledger Inline Edit Table

Complete an inline editable table in a donation ledger scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Tables and data displayInline Editable TableHTML TableCSSJavaScript
Open and run
0577Tables and data display

Clinic review table relationship matrix

Complete a relational matrix table in a clinic review form scenario: include realistic content, interactive controls, clear state feedback, and responsive layouts.

Tables and data displayRelationship Matrix TableHTML TableCSSJavaScript
Open and run
0593Tables and data display

Outpatient Claims Paged Data Table

Complete a paginated data table for an outpatient reimbursement scenario: includes real content, interactive controls, clear status feedback, and a responsive multi-size layout.

Tables and data displayPaginated data tableHTML TableCSSJavaScript
Open and run
0602Tables and data display

Outpatient Ledger Sticky Header

Complete the sticky table header in a clinic ledger scenario: includes real content, interactive controls, clear status feedback, and layouts across sizes.

Tables and data displaySticky HeaderHTML TableCSSJavaScript
Open and run
0618Tables and data display

Outpatient Billing Card Mobile Table

Complete a mobile card table in an outpatient billing statement scenario: includes real content, actionable controls, clear state feedback, and cross-size layout.

Tables and data displayMobile card tableHTML TableCSSJavaScript
Open and run
0627Tables and data display

Outpatient Roster Bulk Selection Table

A bulk selection table built for a clinic roster scenario: real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Tables and data displayBatch selection tableHTML TableCSSJavaScript
Open and run
0643Tables and data display

Clinic Schedule Table Column Visibility Control

Complete column visibility control for an outpatient scheduling table scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

Tables and data displayColumn display controlHTML TableCSSJavaScript
Open and run
0652Tables and data display

Outpatient Stock Book Comparison Table

Complete a solution comparison table for a clinic stockbook scenario: include real content, actionable controls, clear status feedback, and cross-size layouts.

Tables and data displayPlan Comparison TableHTML TableCSSJavaScript
Open and run
0668Tables and data display

Outpatient Usage Table Composite Filter Table

Complete the composite filter table in the outpatient usage scenario: includes realistic content, interactive controls, clear status feedback, and cross-size layouts.

Tables and data displayComposite Filter TableHTML TableCSSJavaScript
Open and run
0677Tables and data display

Energy Consumption Records Inline Edit Table

Complete an inline edit table in an energy usage records scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Tables and data displayInline Editable TableHTML TableCSSJavaScript
Open and run
0693Tables and data display

Exhibit review table relationship matrix

Complete a relationship matrix table for the exhibit review sheet scenario: includes real content, interactive controls, clear status feedback, and cross-size layout.

Tables and data displayRelationship Matrix TableHTML TableCSSJavaScript
Open and run
0702Tables and data display

Exhibit inspection paginated data table

Complete a paginated data table in an exhibit inspection scenario: includes real content, actionable controls, clear state feedback, and responsive layouts.

Tables and data displayPaginated data tableHTML TableCSSJavaScript
Open and run
0718Tables and data display

Exhibit Expense Report Multi-column Sort Table

Complete a multi-column sortable table for an exhibit reimbursement scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Tables and data displayMulti-column sort tableHTML TableCSSJavaScript
Open and run
0727Tables and data display

Exhibit Ledger Sticky Header

Complete the sticky header in the exhibit ledger scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Tables and data displaySticky HeaderHTML TableCSSJavaScript
Open and run
0743Tables and data display

Exhibit Settlement Mobile Card Table

Complete the mobile card table in the exhibit settlement sheet scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.

Tables and data displayMobile card tableHTML TableCSSJavaScript
Open and run
0752Tables and data display

Exhibit Roster Bulk Selection Table

In an exhibit roster table scenario, complete a bulk-selection table: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Tables and data displayBatch selection tableHTML TableCSSJavaScript
Open and run
0768Tables and data display

Exhibit Schedule Column Visibility Control

Complete column visibility control in an exhibit scheduling table scenario: includes real content, interactive controls, clear state feedback, and cross-size layouts.

Tables and data displayColumn display controlHTML TableCSSJavaScript
Open and run
0777Tables and data display

Exhibit Stock Book Comparison Matrix

Complete a comparison table in an exhibit inventory book scenario: include realistic content, actionable controls, clear status feedback, and cross-size layouts.

Tables and data displayPlan Comparison TableHTML TableCSSJavaScript
Open and run
0793Tables and data display

Exhibit Usage Table Composite Filter Table

Build a composite filter table for an exhibit usage table scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Tables and data displayComposite Filter TableHTML TableCSSJavaScript
Open and run
0802Tables and data display

Festival Budget Inline-Edit Table

Build an inline-edit table for festival budget scenarios: includes realistic content, actionable controls, clear state feedback, and responsive layouts.

Tables and data displayInline Editable TableHTML TableCSSJavaScript
Open and run
0818Tables and data display

Fleet Maintenance Relationship Matrix

Complete the relationship matrix table in a fleet-maintenance scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Tables and data displayRelationship Matrix TableHTML TableCSSJavaScript
Open and run
0827Tables and data display

Greenhouse Log Paged Data Table

Complete a paginated data table in a greenhouse journal scenario: includes real content, actionable controls, clear state feedback, and cross-size layouts.

Tables and data displayPaginated data tableHTML TableCSSJavaScript
Open and run
0843Tables and data display

Maintenance Board Multi-Column Sort Table

Complete a multi-column sortable table for a maintenance board scenario: real content, interactive controls, clear status feedback, and responsive layout across screen sizes.

Tables and data displayMulti-column sort tableHTML TableCSSJavaScript
Open and run
0852Tables and data display

Sticky Header for Delivery Details

Complete a sticky header for a delivery detail scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Tables and data displaySticky HeaderHTML TableCSSJavaScript
Open and run
0868Tables and data display

Mobile Cards for Meal Plans

A mobile card table for meal planning scenarios, featuring real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Tables and data displayMobile card tableHTML TableCSSJavaScript
Open and run
0877Tables and data display

Mentor Hours Bulk Selection Table

Complete a bulk-selection table for a mentor-hours scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.

Tables and data displayBatch selection tableHTML TableCSSJavaScript
Open and run
0893Tables and data display

Pet Visit Column Visibility Control

Complete column visibility control in a pet visit scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Tables and data displayColumn display controlHTML TableCSSJavaScript
Open and run
0902Tables and data display

Podcast Schedule Comparison Table

Create a comparison grid for a podcast scheduling scenario: includes real content, actionable controls, clear status feedback, and cross-size layouts.

Tables and data displayPlan Comparison TableHTML TableCSSJavaScript
Open and run
0918Tables and data display

Spare parts inventory combo filter table

Complete a combined filter table in a spare-parts inventory scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

Tables and data displayComposite Filter TableHTML TableCSSJavaScript
Open and run
0927Tables and data display

Venue booking inline edit table

Create an inline-edit table for a venue booking scenario: includes realistic content, interactive controls, clear state feedback, and responsive layouts across sizes.

Tables and data displayInline Editable TableHTML TableCSSJavaScript
Open and run
0943Tables and data display

Studio Asset Relationship Matrix

Complete a relational matrix table for a studio assets scenario: includes real content, interactive controls, clear state feedback, and cross-size layout.

Tables and data displayRelationship Matrix TableHTML TableCSSJavaScript
Open and run
0952Tables and data display

Studio Audit Table Paged Data Table

Complete the paginated data table in the studio review table scene: includes real content, interactive controls, clear status feedback, and responsive layout across sizes.

Tables and data displayPaginated data tableHTML TableCSSJavaScript
Open and run
0968Tables and data display

Studio Expense Report Multi-Column Sort Table

Complete a multi-column sortable table for a studio reimbursement scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Tables and data displayMulti-column sort tableHTML TableCSSJavaScript
Open and run
0977Tables and data display

Studio Ledger Sticky Header

Complete sticky table headers for a studio ledger scenario: include real content, actionable controls, clear status feedback, and responsive layouts.

Tables and data displaySticky HeaderHTML TableCSSJavaScript
Open and run
0993Tables and data display

Studio Settlement Sheet Mobile Card Table

Complete the mobile card table for a studio payout sheet scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Tables and data displayMobile card tableHTML TableCSSJavaScript
Open and run
1002Tables and data display

Studio Roster Bulk Selection Table

Complete the bulk selection table for the studio roster scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Tables and data displayBatch selection tableHTML TableCSSJavaScript
Open and run
1018Tables and data display

Studio Schedule Column Visibility Controls

Complete column visibility control in the studio schedule table scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Tables and data displayColumn display controlHTML TableCSSJavaScript
Open and run
1027Tables and data display

Studio stock guide comparison table

Complete a comparison table in a studio stock book scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts.

Tables and data displayPlan Comparison TableHTML TableCSSJavaScript
Open and run
1043Tables and data display

Studio Usage Table Combination Filter Table

Complete the combined filter table in the studio usage log scenario: it includes real content, interactive controls, clear state feedback, and responsive layouts.

Tables and data displayComposite Filter TableHTML TableCSSJavaScript
Open and run