Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA toolbar with a relative time range, a refresh-now button and an auto-refresh interval that shows when the data was last refreshed and the window it covers. Use this when a live dashboard needs one place to set the window and how often it reloads.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when a live dashboard needs one place to set the window and how often it reloads.
Do not use it for archived reports; use date-range-filter-popover.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
| now | string | clock | Local date-time to resolve the range. |
| intervals | { label: string; seconds: number }[] | Off, 5s, 30s, 1m, 5m | Auto-refresh choices. |
| onRefresh | (range: { from; to }) => void | - | Called on refresh with the resolved window. |
| defaultRange | TimeRangeValue | last 15 minutes | Initial window. |
The pattern ships with a Testing Library test (dashboard-time-range-bar.test.tsx) that covers the range label, refresh now, the interval timer and stopping it.