Data Table

Tabular data display with sorting, filtering, and actions. Data tables are used to organize and display data in a structured format.

Overview

Data tables display information in a grid-like format of rows and columns. They organize information in a way that's easy to scan, so that users can look for patterns and insights. Data tables can include:

Sortable columns
Selectable rows
Pagination
Filtering
Row actions

When to use

When you need to display structured data in rows and columns
When users need to compare data across multiple items
When users need to perform actions on multiple items
When data needs to be sorted, filtered, or paginated

Best Practices

Layout

Align column headers with their respective data
Use consistent column widths across similar tables
Left-align text and right-align numbers for better readability
Use appropriate spacing between columns and rows

Content

Use clear, concise column headers
Display the most important data in the leftmost columns
Use appropriate data formatting (dates, numbers, etc.)
Use status indicators consistently across tables

Interaction

Provide clear affordances for sortable columns
Include pagination for large data sets
Allow filtering and searching when appropriate
Provide clear feedback for row selection

Accessibility

Data tables should follow these accessibility guidelines:

Use proper HTML table elements (table, thead, tbody, tr, th, td)
Include appropriate scope attributes on table headers
Ensure sufficient color contrast for all text and status indicators
Provide keyboard navigation for interactive elements
Include appropriate ARIA attributes for interactive elements
Ensure that sorting, filtering, and pagination controls are accessible