Data Table Patterns
Patterns for displaying tabular data with sorting, filtering, and actions.
Basic Table
Simple table for displaying data without complex interactions.
| Device | Type | Status | Power |
|---|---|---|---|
| Solar Inverter | Inverter | online | 4.2 kW |
| Home Battery | Battery | charging | 2.1 kW |
| EV Charger | Charger | idle | 0 kW |
Table with Row Actions
Add dropdown menus for row-level actions like edit, delete, or view details.
| Device | Location | Status | Power | |
|---|---|---|---|---|
| Solar Inverter | Rooftop | online | 4.2 kW | |
| Home Battery | Garage | charging | 2.1 kW | |
| EV Charger | Driveway | idle | 0 kW | |
| Heat Pump | Basement | online | 1.8 kW | |
| Smart Meter | Utility Room | online | — |
Table with Toolbar
Add search, filters, and bulk actions above the table.
Devices
Manage your connected devices
| Device | Type | Status | Power |
|---|---|---|---|
| Solar Inverter | Inverter | online | 4.2 kW |
| Home Battery | Battery | charging | 2.1 kW |
| EV Charger | Charger | idle | 0 kW |
Selectable Rows
Add checkboxes for selecting multiple rows for bulk actions.
| Device | Status | Power | |
|---|---|---|---|
| Solar Inverter | online | 4.2 kW | |
| Home Battery | charging | 2.1 kW | |
| EV Charger | idle | 0 kW |
Transaction History
Tables for financial or energy transaction data with positive/negative values.
| Transaction | Date | Type | Amount | Value |
|---|---|---|---|---|
| TXN001 | 2024-01-15 | Export | 12.4 kWh | €3.72 |
| TXN002 | 2024-01-15 | Import | 2.1 kWh | -€0.84 |
| TXN003 | 2024-01-14 | Export | 18.2 kWh | €5.46 |
| TXN004 | 2024-01-14 | FCR | 0.5 kW | €2.10 |
Best Practices
- Right-align numeric columns (power, currency, quantities)
- Use monospace font for IDs, codes, and transaction numbers
- Keep row actions in a dropdown to save space
- Add hover states to rows for better scanability
- Use badges for status columns instead of plain text
- Color-code positive/negative values (green/red)
- Add sorting indicators to sortable columns
- Show loading skeletons while data is fetching
- Include empty states when no data matches filters
- Paginate large datasets (10-25 rows per page)