React Export Builder

However good your UI is, someone downstream needs the numbers in their own spreadsheet. This is the escape hatch, built so it does not become a support burden.

Export

284,512 rows match your current filters

Columns

Identity

Process

Results

Timing

Format

Installation

npx shadcn@latest add "https://kelvinui.com/registry/export-builder.json"

Props

PropTypeDescription
columnsExportColumn[]{ key, label, selected?, group? }
rowCountnumberRows the current filters would export
formatsExportFormat[]Subset of csv, xlsx, json
allowSchedulingbooleanShow the recurring-delivery controls
onSubmit(config) => void{ columns, format, frequency, recipients, includeHeaders }

Estimate the size before they click

The panel computes a rough byte estimate from rows × columns × a per-format factor, and above ~50 MB it switches the messaging: the export will be generated in the background and emailed rather than streamed to the browser. That warning is the difference between a considered decision and a hung tab, and it costs nothing to compute.

Each format states its actual trade-off rather than just its name — CSV loses types, Excel keeps them, JSON preserves nesting. People pick CSV by habit and then complain that leading zeros vanished from their part numbers; saying so at the point of choice is cheaper than the support ticket.

Scheduling changes the shape of the request

Choosing anything other than "one-off" makes recipients required, and the submit button changes from Export now to Schedule report. A scheduled export is a standing data flow — worth being explicit that you are creating one, and worth reviewing against whatever data-handling rules apply, since it will keep sending after everyone has forgotten it exists.

New components every week

Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.