Data Display
Tables
Tables are structured grid components that organize large amounts of raw information into horizontal rows and vertical columns.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features6 checks
- Semantic <table> HTML structure
- Proper <thead> and <tbody> organization
- <th scope="col"> elements for column headers
- Sufficient color contrast on all text and backgrounds
- Sort and filter icons labelled with aria-hidden
- Responsive overflow container for small viewports
When to use this component
Do's
- •Displaying structured data in rows and columns
- •Presenting sortable or filterable data sets
- •Showing comparison data (fees, features, status)
- •Administrative data views with many records
Don'ts
- •For simple key-value pairs, use DescriptionList.
- •For card-based layouts, use Card grid.
- •For single-column lists, use List.
- •For very few items (2-3), consider a simpler layout.
Do's and Don'ts
✓ Do's
- • Use consistent padding in all cells
- • Apply zebra striping for improved readability in long tables
- • Include sort icons on sortable columns
✗ Don'ts
Ramesh Kumar - Approved - 12 Apr
Priya Sharma - Pending - 11 Apr
- • Don't mix row and column striping simultaneously
- • Don't use overly complex cell content in the compact size
- • Don't skip the header row. Always include column labels.