Data Table Components
Advanced data table organisms with sophisticated sorting, filtering, pagination, and virtual scrolling capabilities designed for complex data management in the Fondation Botnar dashboard ecosystem.
Table Variants
of records (filtered by "")
|
|
Actions | |
|---|---|---|
|
|
|
|
No data foundTry adjusting your search or filter criteria. |
No data found
Try adjusting your search or filter criteria.
Implementation Code
Usage Guidelines
Table Features
Advanced Sorting & Filtering
Multi-column sorting with global search and column-specific filters.
- • Global text search across all columns
- • Column-specific sorting (ascending/descending)
- • Quick filters for common data attributes
- • Real-time filtering with debounced input
Data Management
Comprehensive tools for data manipulation and export.
- • Row selection (single and multi-select)
- • Bulk operations on selected rows
- • Data export in multiple formats
- • Configurable column visibility
Performance & Accessibility
Optimized for large datasets with full accessibility support.
- • Virtual scrolling for large datasets
- • Pagination with configurable page sizes
- • ARIA labels and screen reader support
- • Keyboard navigation and shortcuts
Implementation Guidelines
Data Structure
Ensure your data follows a consistent structure with unique identifiers for each row. The table expects objects with properties that match your column definitions.
Performance Optimization
- Use debounced search to prevent excessive filtering
- Implement virtual scrolling for datasets > 1000 rows
- Cache filtered results to improve pagination performance
- Consider server-side pagination for very large datasets
Accessibility Best Practices
- Use proper ARIA roles and labels for screen readers
- Implement keyboard navigation for all interactive elements
- Provide clear sort direction indicators
- Include skip links for large tables