Sourceful Energy

Table

A responsive table component for displaying tabular data.

Installation

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@sourceful-energy/ui"

Usage

A list of your connected devices.
DeviceStatusPower
Solar InverterOnline4.2 kW

Examples

Device List

Connected energy devices
IDDeviceStatusPowerToday
INV001Solar Inverter #1
Online
4.2 kW18.5 kWh
INV002Solar Inverter #2
Online
3.8 kW16.2 kWh
BAT001Battery Storage
Charging
2.1 kW12.4 kWh
EVC001EV Charger
Idle
0 kW8.0 kWh
MTR001Smart Meter
Online
--

With Footer

Daily energy summary
DateProductionConsumptionNet Export
2024-01-1524.5 kWh18.2 kWh6.3 kWh
2024-01-1422.1 kWh19.8 kWh2.3 kWh
2024-01-1328.3 kWh16.5 kWh11.8 kWh
2024-01-1218.9 kWh21.2 kWh-2.3 kWh
2024-01-1126.7 kWh17.4 kWh9.3 kWh
Total (5 days)120.5 kWh93.1 kWh27.4 kWh

Simple Table

MetricValue
Current Power4.2 kW
Today's Production18.5 kWh
Monthly Total542 kWh
Lifetime12.4 MWh

Props

PropTypeDefaultDescription
classNamestring-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