Edit Data Export

Name

Also known as (comma separated)

Brief definition Exports records/data.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "format", "type": "select", "label": "Export format", "default": "csv", "options": [ "csv", "json", "pdf" ] }, { "id": "recordCount", "type": "number", "label": "Records to export", "default": 128, "min": 1, "max": 9999, "step": 1 }, { "id": "includeHeaders", "type": "toggle", "label": "Include headers", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"dexp dexp--{{format}}\">\n <p class=\"dexp__title\">Export {{recordCount}} records</p>\n <pre class=\"dexp__preview dexp__preview--csv\">{{#if includeHeaders}}id,name,total\n{{/if}}1,Acme Co,4200\n2,Globex,1800</pre>\n <pre class=\"dexp__preview dexp__preview--json\">[{{#if includeHeaders}} &quot;__meta__&quot;: true,{{/if}}\n {&quot;id&quot;:1,&quot;name&quot;:&quot;Acme Co&quot;}]</pre>\n <pre class=\"dexp__preview dexp__preview--pdf\">&#128196; report-{{recordCount}}.pdf{{#if includeHeaders}}\n(cover page + headers){{/if}}</pre>\n <button type=\"button\" class=\"dexp__btn\" style=\"background:{{accent}};\">Download .{{format}}</button>\n</div>\n<style>\n.dexp { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.dexp__title { margin: 0 0 10px; font-weight: 700; }\n.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; }\n.dexp--csv .dexp__preview--csv, .dexp--json .dexp__preview--json, .dexp--pdf .dexp__preview--pdf { display: block; }\n.dexp__btn { border: none; padding: 10px 16px; border-radius: 8px; font: 600 12px system-ui, sans-serif; color: #241430; cursor: pointer; width: 100%; }\n</style>", "tailwind": "<div class=\"dexptw dexptw--{{format}} font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border\">\n <p class=\"m-0 mb-2.5 font-bold\">Export {{recordCount}} records</p>\n <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\">{{#if includeHeaders}}id,name,total\n{{/if}}1,Acme Co,4200\n2,Globex,1800</pre>\n <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\">[{{#if includeHeaders}} &quot;__meta__&quot;: true,{{/if}}\n {&quot;id&quot;:1,&quot;name&quot;:&quot;Acme Co&quot;}]</pre>\n <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-{{recordCount}}.pdf{{#if includeHeaders}}\n(cover page + headers){{/if}}</pre>\n <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:{{accent}};\">Download .{{format}}</button>\n</div>\n<style>\n.dexptw--csv .dexptw__preview--csv, .dexptw--json .dexptw__preview--json, .dexptw--pdf .dexptw__preview--pdf { display: block; }\n</style>", "react": "export function DataExport({\n format = \"{{format}}\",\n recordCount = {{recordCount}},\n includeHeaders = {{includeHeaders}},\n accent = \"{{accent}}\",\n}) {\n const preBox = { background: \"#24143010\", padding: 10, borderRadius: 8, fontSize: 10, fontFamily: \"ui-monospace, monospace\", whiteSpace: \"pre-wrap\", margin: \"0 0 12px\" };\n let body;\n if (format === \"csv\") body = `${includeHeaders ? \"id,name,total\\n\" : \"\"}1,Acme Co,4200\\n2,Globex,1800`;\n else if (format === \"json\") body = `[${includeHeaders ? \" \\\"__meta__\\\": true,\" : \"\"}\\n {\"id\":1,\"name\":\"Acme Co\"}]`;\n else body = `\\uD83D\\uDCC4 report-${recordCount}.pdf${includeHeaders ? \"\\n(cover page + headers)\" : \"\"}`;\n return (\n <div style={{ font: \"12px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 10px\", fontWeight: 700 }}>Export {recordCount} records</p>\n <pre style={preBox}>{body}</pre>\n <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>\n </div>\n );\n}" }