Data Tables

Comprehensive table patterns including sorting, filtering, selection, pagination, inline editing, and responsive layouts.

Sortable Table

Click any column header to sort ascending or descending. Active sort column shows an arrow indicator.

Name ▲EmailDepartmentRoleStatusSalary
Alice Chenalice.chen@company.comEngineeringSenior EngineerActive$135,000
Bob Martinezbob.m@company.comDesignLead DesignerActive$120,000
Clara Kimclara.kim@company.comMarketingMarketing ManagerOn Leave$105,000
David Oseidavid.o@company.comEngineeringJunior EngineerProbation$82,000
Eva Rossieva.rossi@company.comSalesAccount ExecutiveActive$95,000
Frank Zhaofrank.z@company.comEngineeringStaff EngineerRemote$155,000
Grace Tanakagrace.t@company.comHRHR CoordinatorActive$78,000
Henry Patelhenry.p@company.comFinanceFinancial AnalystContractor$92,000

Colored Row Table

Row backgrounds are tinted based on task status for quick visual scanning.

TaskAssigneePriorityDue DateStatus
Deploy v2.4 to productionAlice ChenHigh2026-03-12Completed
Review Q1 marketing budgetClara KimMedium2026-03-15In Progress
Fix authentication timeout bugDavid OseiCritical2026-03-10Overdue
Update API documentationFrank ZhaoLow2026-03-20Pending
Onboard new design internGrace TanakaMedium2026-03-18Not Started

Responsive Card Table

Toggle between standard table layout and a card-based layout optimized for narrower viewports.

Order IDCustomerProductAmountDateStatus
ORD-1001Liam JohnsonWireless Headphones$89.992026-03-01Delivered
ORD-1002Sophia LeeMechanical Keyboard$149.002026-03-03Shipped
ORD-1003Noah WilliamsUSB-C Hub$45.502026-03-05Processing
ORD-1004Emma BrownMonitor Stand$62.002026-03-06Delivered
ORD-1005James DavisWebcam HD$79.952026-03-07Cancelled
ORD-1006Olivia GarciaDesk Lamp$34.992026-03-09Shipped

Table with Search & Filter

Type to search by product name. Use category buttons to narrow results. Result count updates in real time.

8 results found
NameCategoryPriceStockRating
Bluetooth SpeakerElectronics$49.99In Stock(124)★★★★4.5
Cotton T-ShirtClothing$24.99In Stock(350)★★★★4.2
JavaScript HandbookBooks$39.95In Stock(56)★★★★4.8
Wireless MouseElectronics$29.99In Stock(210)★★★★4.3
Denim JacketClothing$89.00In Stock(78)★★★★4.6
React PatternsBooks$44.99Low Stock(33)★★★★4.9
USB MicrophoneElectronics$69.00Out of Stock(0)★★★★4.7
Running ShortsClothing$34.50In Stock(165)★★★★4.1

Selectable Table

Check individual rows or use the header checkbox to select all. An action bar appears with bulk operations.

NameOwnerCreatedStatus
Project AlphaAlice Chen2026-01-15Active
Project BetaBob Martinez2026-02-01Active
Project GammaClara Kim2026-02-10On Leave
Project DeltaDavid Osei2026-02-20Probation
Project EpsilonEva Rossi2026-03-01Active
Project ZetaFrank Zhao2026-03-05Remote

Expandable Rows

Click the chevron to reveal detailed information for each row including description, notes, and tags.

ProjectLeadDateStatus
▶API Gateway UpgradeFrank Zhao2026-03-01Active
▶Mobile App RedesignBob Martinez2026-02-15In Progress
▶Database MigrationAlice Chen2026-03-08Pending
▶Security AuditDavid Osei2026-02-28Completed
▶Analytics DashboardEva Rossi2026-03-10Not Started

Table with Inline Editing

Double-click any cell to edit its value. Press Enter to save or Escape to cancel changes.

Double-click any cell to edit. Press Enter to save or Escape to cancel.

NameEmailRoleDepartment
Alice Chenalice.chen@company.comSenior EngineerEngineering
Bob Martinezbob.m@company.comLead DesignerDesign
Clara Kimclara.kim@company.comMarketing ManagerMarketing
David Oseidavid.o@company.comJunior EngineerEngineering
Eva Rossieva.rossi@company.comAccount ExecutiveSales

Pagination Table

Displays 5 rows per page from a 20-row dataset with full pagination controls.

#NameEmailDepartmentJoined
1Alice Chenalice@co.comEngineering2025-01-01
2Bob Martinezbob@co.comDesign2025-02-02
3Clara Kimclara@co.comMarketing2025-03-03
4David Oseidavid@co.comSales2025-04-04
5Eva Rossieva@co.comHR2025-05-05
Showing 1-5 of 20