Edit Column Reordering

Name

Also known as (comma separated)

Brief definition Changes column order.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "caption", "type": "text", "label": "Caption", "default": "Customer orders" }, { "id": "accent", "type": "color", "label": "Accent", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "swapped", "type": "toggle", "label": "Swap Customer / Status", "default": false }, { "id": "activeColumn", "type": "select", "label": "Dragging column", "default": "Status", "options": [ "Customer", "Status", "Total" ] }, { "id": "showHandles", "type": "toggle", "label": "Show drag handles", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"creo\" data-active=\"{{activeColumn}}\" style=\"--accent:{{accent}};\">\n <div class=\"creo__scroll\">\n <table class=\"creo__table\">\n <caption>{{caption}}</caption>\n <thead>\n {{#if swapped}}\n <tr>\n <th scope=\"col\">Order</th>\n <th scope=\"col\" class=\"creo__th--status\">{{#if showHandles}}<span class=\"creo__handle\" aria-hidden=\"true\">&#10021;</span>{{/if}}Status</th>\n <th scope=\"col\" class=\"creo__th--customer\">{{#if showHandles}}<span class=\"creo__handle\" aria-hidden=\"true\">&#10021;</span>{{/if}}Customer</th>\n <th scope=\"col\" class=\"creo__th--total\">{{#if showHandles}}<span class=\"creo__handle\" aria-hidden=\"true\">&#10021;</span>{{/if}}Total</th>\n </tr>\n {{/if}}\n {{#unless swapped}}\n <tr>\n <th scope=\"col\">Order</th>\n <th scope=\"col\" class=\"creo__th--customer\">{{#if showHandles}}<span class=\"creo__handle\" aria-hidden=\"true\">&#10021;</span>{{/if}}Customer</th>\n <th scope=\"col\" class=\"creo__th--status\">{{#if showHandles}}<span class=\"creo__handle\" aria-hidden=\"true\">&#10021;</span>{{/if}}Status</th>\n <th scope=\"col\" class=\"creo__th--total\">{{#if showHandles}}<span class=\"creo__handle\" aria-hidden=\"true\">&#10021;</span>{{/if}}Total</th>\n </tr>\n {{/unless}}\n </thead>\n <tbody>\n {{#if swapped}}\n <tr><td>#1042</td><td>Shipped</td><td>A. Whitfield</td><td>£64.00</td></tr>\n <tr><td>#1041</td><td>Processing</td><td>R. Okafor</td><td>£128.50</td></tr>\n <tr><td>#1040</td><td>Shipped</td><td>M. Iqbal</td><td>£22.00</td></tr>\n <tr><td>#1039</td><td>Refunded</td><td>S. Novak</td><td>£40.00</td></tr>\n {{/if}}\n {{#unless swapped}}\n <tr><td>#1042</td><td>A. Whitfield</td><td>Shipped</td><td>£64.00</td></tr>\n <tr><td>#1041</td><td>R. Okafor</td><td>Processing</td><td>£128.50</td></tr>\n <tr><td>#1040</td><td>M. Iqbal</td><td>Shipped</td><td>£22.00</td></tr>\n <tr><td>#1039</td><td>S. Novak</td><td>Refunded</td><td>£40.00</td></tr>\n {{/unless}}\n </tbody>\n </table>\n </div>\n</div>\n<style>\n.creo { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }\n.creo__scroll { overflow-x: auto; }\n.creo__table { border-collapse: collapse; width: 100%; }\n.creo__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }\n.creo__table th, .creo__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }\n.creo__table th { background: var(--accent); color: #FAF7F2; cursor: grab; }\n.creo__handle { margin-right: 6px; opacity: .8; }\n.creo[data-active=\"Customer\"] .creo__th--customer,\n.creo[data-active=\"Status\"] .creo__th--status,\n.creo[data-active=\"Total\"] .creo__th--total { outline: 2px dashed #FAF7F2; outline-offset: -3px; }\n</style>", "tailwind": "<div class=\"max-w-[480px] rounded-[10px] border border-[#24143020] font-sans text-sm text-[#241430] bg-[#FAF7F2] overflow-hidden\" data-active=\"{{activeColumn}}\" style=\"--accent:{{accent}};\">\n <div class=\"overflow-x-auto\">\n <table class=\"border-collapse w-full\">\n <caption class=\"text-left font-semibold px-3.5 py-2.5\">{{caption}}</caption>\n <thead>\n {{#if swapped}}\n <tr class=\"text-[#FAF7F2]\" style=\"background:{{accent}}\">\n <th scope=\"col\" class=\"p-3.5 text-left whitespace-nowrap cursor-grab\">Order</th>\n <th scope=\"col\" class=\"creo__th--status p-3.5 text-left whitespace-nowrap cursor-grab\">{{#if showHandles}}<span aria-hidden=\"true\" class=\"mr-1.5 opacity-80\">&#10021;</span>{{/if}}Status</th>\n <th scope=\"col\" class=\"creo__th--customer p-3.5 text-left whitespace-nowrap cursor-grab\">{{#if showHandles}}<span aria-hidden=\"true\" class=\"mr-1.5 opacity-80\">&#10021;</span>{{/if}}Customer</th>\n <th scope=\"col\" class=\"creo__th--total p-3.5 text-left whitespace-nowrap cursor-grab\">{{#if showHandles}}<span aria-hidden=\"true\" class=\"mr-1.5 opacity-80\">&#10021;</span>{{/if}}Total</th>\n </tr>\n {{/if}}\n {{#unless swapped}}\n <tr class=\"text-[#FAF7F2]\" style=\"background:{{accent}}\">\n <th scope=\"col\" class=\"p-3.5 text-left whitespace-nowrap cursor-grab\">Order</th>\n <th scope=\"col\" class=\"creo__th--customer p-3.5 text-left whitespace-nowrap cursor-grab\">{{#if showHandles}}<span aria-hidden=\"true\" class=\"mr-1.5 opacity-80\">&#10021;</span>{{/if}}Customer</th>\n <th scope=\"col\" class=\"creo__th--status p-3.5 text-left whitespace-nowrap cursor-grab\">{{#if showHandles}}<span aria-hidden=\"true\" class=\"mr-1.5 opacity-80\">&#10021;</span>{{/if}}Status</th>\n <th scope=\"col\" class=\"creo__th--total p-3.5 text-left whitespace-nowrap cursor-grab\">{{#if showHandles}}<span aria-hidden=\"true\" class=\"mr-1.5 opacity-80\">&#10021;</span>{{/if}}Total</th>\n </tr>\n {{/unless}}\n </thead>\n <tbody>\n {{#if swapped}}\n <tr><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">#1042</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">Shipped</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">A. Whitfield</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">£64.00</td></tr>\n <tr><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">#1041</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">Processing</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">R. Okafor</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">£128.50</td></tr>\n <tr><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">#1040</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">Shipped</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">M. Iqbal</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">£22.00</td></tr>\n <tr><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">#1039</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">Refunded</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">S. Novak</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">£40.00</td></tr>\n {{/if}}\n {{#unless swapped}}\n <tr><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">#1042</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">A. Whitfield</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">Shipped</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">£64.00</td></tr>\n <tr><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">#1041</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">R. Okafor</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">Processing</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">£128.50</td></tr>\n <tr><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">#1040</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">M. Iqbal</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">Shipped</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">£22.00</td></tr>\n <tr><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">#1039</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">S. Novak</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">Refunded</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">£40.00</td></tr>\n {{/unless}}\n </tbody>\n </table>\n </div>\n</div>\n<style>\n[data-active=\"Customer\"] .creo__th--customer,\n[data-active=\"Status\"] .creo__th--status,\n[data-active=\"Total\"] .creo__th--total { outline: 2px dashed #FAF7F2; outline-offset: -3px; }\n</style>", "react": "function ColumnReordering({\n caption = \"{{caption}}\",\n accent = \"{{accent}}\",\n swapped = {{swapped}},\n activeColumn = \"{{activeColumn}}\",\n showHandles = {{showHandles}},\n}) {\n const cols = swapped ? [\"Order\", \"Status\", \"Customer\", \"Total\"] : [\"Order\", \"Customer\", \"Status\", \"Total\"];\n const dataRows = [\n [\"#1042\", \"A. Whitfield\", \"Shipped\", \"£64.00\"],\n [\"#1041\", \"R. Okafor\", \"Processing\", \"£128.50\"],\n [\"#1040\", \"M. Iqbal\", \"Shipped\", \"£22.00\"],\n [\"#1039\", \"S. Novak\", \"Refunded\", \"£40.00\"],\n ];\n const order = swapped ? [0, 2, 1, 3] : [0, 1, 2, 3];\n const th = { padding: \"10px 14px\", textAlign: \"left\", whiteSpace: \"nowrap\", cursor: \"grab\" };\n return (\n <div style={{ maxWidth: 480, borderRadius: 10, border: \"1px solid #24143020\", overflow: \"hidden\", font: \"14px system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\" }}>\n <div style={{ overflowX: \"auto\" }}>\n <table style={{ borderCollapse: \"collapse\", width: \"100%\" }}>\n <caption style={{ textAlign: \"left\", fontWeight: 600, padding: \"10px 14px\" }}>{caption}</caption>\n <thead>\n <tr style={{ background: accent, color: \"#FAF7F2\" }}>\n {cols.map((c) => (\n <th key={c} scope=\"col\" style={{ ...th, outline: c !== \"Order\" && activeColumn === c ? \"2px dashed #FAF7F2\" : \"none\", outlineOffset: -3 }}>\n {showHandles && c !== \"Order\" && <span aria-hidden=\"true\" style={{ marginRight: 6, opacity: .8 }}>&#10021;</span>}{c}\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {dataRows.map((row) => (\n <tr key={row[0]}>{order.map((i) => <td key={i} style={{ padding: \"10px 14px\", borderBottom: \"1px solid #24143020\", whiteSpace: \"nowrap\" }}>{row[i]}</td>)}</tr>\n ))}\n </tbody>\n </table>\n </div>\n </div>\n );\n}" }