Data Export

Exports records/data.

id,name,total
1,Acme Co,4200
2,Globex,1800

[ "__meta__": true,
  {"id":1,"name":"Acme Co"}]

📄 report-128.pdf
(cover page + headers)

html

<div class="dexp dexp--csv">
  <p class="dexp__title">Export 128 records</p>
  <pre class="dexp__preview dexp__preview--csv">id,name,total
1,Acme Co,4200
2,Globex,1800</pre>
  <pre class="dexp__preview dexp__preview--json">[ &quot;__meta__&quot;: true,
  {&quot;id&quot;:1,&quot;name&quot;:&quot;Acme Co&quot;}]</pre>
  <pre class="dexp__preview dexp__preview--pdf">&#128196; report-128.pdf
(cover page + headers)</pre>
  <button type="button" class="dexp__btn" style="background:#A8E6C1;">Download .csv</button>
</div>
<style>
.dexp { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.dexp__title { margin: 0 0 10px; font-weight: 700; }
.dexp__preview { display: none; background: #24143010; padding: 10px; border-radius: 8px; font: 10px/1.5 ui-monospace, monospace; white-space: pre-wrap; margin: 0 0 12px; }
.dexp--csv .dexp__preview--csv, .dexp--json .dexp__preview--json, .dexp--pdf .dexp__preview--pdf { display: block; }
.dexp__btn { border: none; padding: 10px 16px; border-radius: 8px; font: 600 12px system-ui, sans-serif; color: #241430; cursor: pointer; width: 100%; }
</style>

tailwind

<div class="dexptw dexptw--csv font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border">
  <p class="m-0 mb-2.5 font-bold">Export 128 records</p>
  <pre class="dexptw__preview dexptw__preview--csv hidden bg-[#24143010] p-2.5 rounded-lg text-[10px] font-mono whitespace-pre-wrap m-0 mb-3">id,name,total
1,Acme Co,4200
2,Globex,1800</pre>
  <pre class="dexptw__preview dexptw__preview--json hidden bg-[#24143010] p-2.5 rounded-lg text-[10px] font-mono whitespace-pre-wrap m-0 mb-3">[ &quot;__meta__&quot;: true,
  {&quot;id&quot;:1,&quot;name&quot;:&quot;Acme Co&quot;}]</pre>
  <pre class="dexptw__preview dexptw__preview--pdf hidden bg-[#24143010] p-2.5 rounded-lg text-[10px] font-mono whitespace-pre-wrap m-0 mb-3">&#128196; report-128.pdf
(cover page + headers)</pre>
  <button type="button" class="border-none py-2.5 px-4 rounded-lg font-semibold text-xs text-[#241430] cursor-pointer w-full" style="background:#A8E6C1;">Download .csv</button>
</div>
<style>
.dexptw--csv .dexptw__preview--csv, .dexptw--json .dexptw__preview--json, .dexptw--pdf .dexptw__preview--pdf { display: block; }
</style>

react

export function DataExport({
  format = "csv",
  recordCount = 128,
  includeHeaders = true,
  accent = "#A8E6C1",
}) {
  const preBox = { background: "#24143010", padding: 10, borderRadius: 8, fontSize: 10, fontFamily: "ui-monospace, monospace", whiteSpace: "pre-wrap", margin: "0 0 12px" };
  let body;
  if (format === "csv") body = `${includeHeaders ? "id,name,total\n" : ""}1,Acme Co,4200\n2,Globex,1800`;
  else if (format === "json") body = `[${includeHeaders ? " \"__meta__\": true," : ""}\n  {"id":1,"name":"Acme Co"}]`;
  else body = `\uD83D\uDCC4 report-${recordCount}.pdf${includeHeaders ? "\n(cover page + headers)" : ""}`;
  return (
    <div style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 10px", fontWeight: 700 }}>Export {recordCount} records</p>
      <pre style={preBox}>{body}</pre>
      <button type="button" style={{ border: "none", padding: "10px 16px", borderRadius: 8, fontWeight: 600, fontSize: 12, color: "#241430", cursor: "pointer", width: "100%", background: accent }}>Download .{format}</button>
    </div>
  );
}