report header export csv pdf download analytics report header export csv pdf download refresh analytics report header with export buttons analytics header with CSV and PDF download
Report Header With Export
Fetch pattern JSON:
curl https://webspire.de/patterns/report-header/with-export.json with-export.html
<header class="ws-report-header-export" style="--ws-report-header-bg: var(--ws-color-surface); --ws-report-header-text: var(--ws-color-text); --ws-report-header-text-soft: var(--ws-color-text-soft); --ws-report-header-border: var(--ws-color-border); --ws-report-header-accent: var(--ws-color-primary);">
<div class="mx-auto max-w-5xl px-4 py-8 sm:px-6 lg:px-8">
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<h1 class="text-2xl font-bold tracking-tight text-[var(--ws-report-header-text)]">Analytics Overview</h1>
<p class="mt-1 text-sm text-[var(--ws-report-header-text-soft)]">Track your key metrics and performance indicators.</p>
</div>
<div class="flex flex-wrap items-center gap-3">
<div class="flex items-center gap-2 rounded-lg border border-[var(--ws-report-header-border)] bg-[var(--ws-report-header-bg)] px-4 py-2 text-sm text-[var(--ws-report-header-text)]">
<svg class="h-4 w-4 shrink-0 text-[var(--ws-report-header-text-soft)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
<span>Mar 1 – Mar 21, 2026</span>
</div>
<div class="flex items-center gap-2">
<button type="button" class="inline-flex items-center gap-1.5 rounded-lg border border-[var(--ws-report-header-border)] bg-[var(--ws-report-header-bg)] px-3 py-2 text-sm font-medium text-[var(--ws-report-header-text)] hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-[var(--ws-report-header-accent)] focus:ring-offset-2">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
Export CSV
</button>
<button type="button" class="inline-flex items-center gap-1.5 rounded-lg border border-[var(--ws-report-header-border)] bg-[var(--ws-report-header-bg)] px-3 py-2 text-sm font-medium text-[var(--ws-report-header-text)] hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-[var(--ws-report-header-accent)] focus:ring-offset-2">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
Export PDF
</button>
<button type="button" class="inline-flex items-center justify-center rounded-lg border border-[var(--ws-report-header-border)] bg-[var(--ws-report-header-bg)] p-2 text-[var(--ws-report-header-text-soft)] hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-[var(--ws-report-header-accent)] focus:ring-offset-2" aria-label="Refresh data">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
</button>
</div>
</div>
</div>
</div>
</header>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
reportheaderexportcsvpdfdownloadanalytics
Slots
| Name | Required | Description |
|---|---|---|
| title | Yes | Report title and subtitle. |
| dateRange | Yes | Date range display with calendar icon. |
| actions | Yes | Export CSV, Export PDF buttons and refresh icon button. |
Extends the base report header with export actions: CSV and PDF download buttons with download icons, plus a refresh icon button. All actions are on the right, wrapping gracefully on small screens.