Table
A responsive table component for displaying tabular data.
Installation
import {
Table,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from "@sourceful-energy/ui"Usage
| Device | Status | Power |
|---|---|---|
| Solar Inverter | Online | 4.2 kW |
Examples
Device List
| ID | Device | Status | Power | Today |
|---|---|---|---|---|
| INV001 | Solar Inverter #1 | Online | 4.2 kW | 18.5 kWh |
| INV002 | Solar Inverter #2 | Online | 3.8 kW | 16.2 kWh |
| BAT001 | Battery Storage | Charging | 2.1 kW | 12.4 kWh |
| EVC001 | EV Charger | Idle | 0 kW | 8.0 kWh |
| MTR001 | Smart Meter | Online | - | - |
With Footer
| Date | Production | Consumption | Net Export |
|---|---|---|---|
| 2024-01-15 | 24.5 kWh | 18.2 kWh | 6.3 kWh |
| 2024-01-14 | 22.1 kWh | 19.8 kWh | 2.3 kWh |
| 2024-01-13 | 28.3 kWh | 16.5 kWh | 11.8 kWh |
| 2024-01-12 | 18.9 kWh | 21.2 kWh | -2.3 kWh |
| 2024-01-11 | 26.7 kWh | 17.4 kWh | 9.3 kWh |
| Total (5 days) | 120.5 kWh | 93.1 kWh | 27.4 kWh |
Simple Table
| Metric | Value |
|---|---|
| Current Power | 4.2 kW |
| Today's Production | 18.5 kWh |
| Monthly Total | 542 kWh |
| Lifetime | 12.4 MWh |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes. |
Accessibility
- Uses native HTML table elements for semantics
- TableCaption provides accessible description
- TableHead cells use proper th elements
- Supports keyboard navigation
- Scrollable container for responsive design