Export Menu

A dropdown menu for exporting data in various formats.

Preview · Export Menu

Code

HTML · @primus/ui-core

<div class="hstack">
  <button class="outline small">Export ▾</button>
  <div class="card" style="padding:0.25rem;min-width:140px">
    <button class="ghost" style="width:100%;justify-content:flex-start;font-size:0.8rem;padding:0.5rem 0.75rem">Export CSV</button>
    <button class="ghost" style="width:100%;justify-content:flex-start;font-size:0.8rem;padding:0.5rem 0.75rem">Export PDF</button>
    <button class="ghost" style="width:100%;justify-content:flex-start;font-size:0.8rem;padding:0.5rem 0.75rem">Export Excel</button>
  </div>
</div>

React

import { PrimusExportMenu } from 'primus-react-ui';

<PrimusExportMenu formats={['CSV', 'PDF', 'Excel']}
  onExport={(payload) => handleExport(payload)} />

Angular

<primus-export-menu [formats]="['CSV', 'PDF', 'Excel']"
  (exportTriggered)="onExport($event)">
</primus-export-menu>

Props

Prop	Type	Default	Description
formats	ExportFormat[]	['CSV']	Available export formats
includeCharts	boolean	false	Include chart images in PDF export
includeStats	boolean	true	Include stat cards in export
includeTables	boolean	true	Include data tables in export
onExport / (exportTriggered)	(payload: ExportPayload) => void	required	Fires when a format is selected

TypeScript interfaces

type ExportFormat = 'CSV' | 'Excel' | 'PDF' | 'JSON';

interface ExportPayload {
  format:         ExportFormat;
  includeCharts:  boolean;
  includeStats:   boolean;
  includeTables:  boolean;
  requestedAt:    string;   // ISO timestamp
}

// Example
<PrimusExportMenu
  formats={['CSV', 'Excel', 'PDF']}
  includeCharts
  onExport={(payload) => {
    if (payload.format === 'CSV') downloadCsv(data);
    if (payload.format === 'PDF') generatePdf({ ...payload });
  }}
/>

Version history

See the Changelog for version history and breaking changes.