- Guidelines
- React Implementation
- Blazor API Reference
Data Tables (DataGrids) organize and present structured information in rows and columns, allowing users to scan, analyze, compare, and take action on large sets of data efficiently.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use data tables for structured data that benefits from column-based organization, sorting, filtering, or other data manipulation operations. |
| Content | Include clear column headers. Present data consistently. Ensure proper data alignment (text left, numbers right). Provide appropriate data density. |
| Behavior | Support sorting, filtering, pagination for large datasets. Allow row selection when actions apply to rows. Enable responsive behaviors for small screens. |
| States | Clearly indicate hover, selected, and active states. Show loading states during data fetching. Provide empty and error states. |
| Feedback | Highlight sorted columns. Provide visual feedback for selection, sorting operations, and filtering. Indicate loading states during data operations. |
| Examples | Financial data, inventory lists, user management, analytics, or any structured tabular information that requires analysis. |
Best Practices
- Appropriate Column Selection: Include only necessary columns to avoid overwhelming users with data.
- Meaningful Organization: Arrange columns in a logical order, with most important information first.
- Responsive Handling: Consider how tables adapt to different screen sizes, potentially collapsing or reorganizing on small screens.
- Action Accessibility: Make row and bulk actions easily accessible while maintaining a clean interface.
- Performance Optimization: Implement virtualization or pagination for large datasets to maintain performance.
Do’s and Don’ts
Do
- Provide clear column headers with sorting indicators when applicable.
- Align content consistently (text left, numbers right).
- Include pagination, filtering, or virtualization for large datasets.
- Maintain consistent row heights and data formatting.
Don't
- Overload tables with too many columns.
- Mix different types of information within a single column.
- Rely solely on color to indicate state or meaning.
- Omit empty states or loading indicators.
Additional Guidance
- Psychological Impact:
- Cognitive Organization: Tables leverage our innate ability to scan and compare data in grid formats.
- Information Hierarchy: Well-designed tables help users prioritize which data to focus on first.
- Cognitive Load: Sorting, filtering, and pagination reduce the mental effort required to find specific information.