Report header

When to use

• The heading of a report: its title and live status, a period and date range, compare, filters, share and export.
• Analytics and finance pages where everything below follows the range and filters picked here.

When not to use

• Pages that aren't a report, like settings or one record's details: a plain page heading is enough.
• One chart with its own range: give the chart its own period switch, as Revenue chart does.

Usage

Report header with your own data: every prop has the sample as its default, so pass only what you have.

1import { ReportHeader } from "@/components/dashral/blocks/report-header"
2
3<ReportHeader
4  title="Revenue"
5  live
6  onRangeChange={(range) => setRange(range)}
7  onCompareChange={setCompare}
8  filters={filters}
9  onFiltersChange={setFilters}
10  onExport={(format) => api.reports.export("revenue", format)}
11  onShare={() => copyLink()}
12/>

API reference