Edit Row Editing

Name

Also known as (comma separated)

Brief definition Editing an entire row.

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": "editingRow", "type": "select", "label": "Row being edited", "default": "1041", "options": [ "none", "1041", "1040" ] }, { "id": "nameValue", "type": "text", "label": "Edited customer", "default": "Rafael Okafor" }, { "id": "statusValue", "type": "select", "label": "Edited status", "default": "Processing", "options": [ "Shipped", "Processing", "Refunded" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"redt\" data-editing=\"{{editingRow}}\" style=\"--accent:{{accent}};\">\n <div class=\"redt__scroll\">\n <table class=\"redt__table\">\n <caption>{{caption}}</caption>\n <thead><tr><th scope=\"col\">Order</th><th scope=\"col\">Customer</th><th scope=\"col\">Status</th><th scope=\"col\"><span class=\"sr-only\">Row actions</span></th></tr></thead>\n <tbody>\n <tr><td>#1042</td><td>A. Whitfield</td><td>Shipped</td><td></td></tr>\n <tr data-row=\"1041\">\n <td>#1041</td>\n <td><span class=\"redt__static\">R. Okafor</span><input type=\"text\" class=\"redt__edit redt__input\" value=\"{{nameValue}}\" aria-label=\"Customer for order #1041\"></td>\n <td><span class=\"redt__static\">Processing</span><input type=\"text\" class=\"redt__edit redt__input\" value=\"{{statusValue}}\" aria-label=\"Status for order #1041\"></td>\n <td><span class=\"redt__edit\"><button type=\"button\" class=\"redt__save\">Save</button><button type=\"button\" class=\"redt__cancel\">Cancel</button></span></td>\n </tr>\n <tr data-row=\"1040\">\n <td>#1040</td>\n <td><span class=\"redt__static\">M. Iqbal</span><input type=\"text\" class=\"redt__edit redt__input\" value=\"{{nameValue}}\" aria-label=\"Customer for order #1040\"></td>\n <td><span class=\"redt__static\">Shipped</span><input type=\"text\" class=\"redt__edit redt__input\" value=\"{{statusValue}}\" aria-label=\"Status for order #1040\"></td>\n <td><span class=\"redt__edit\"><button type=\"button\" class=\"redt__save\">Save</button><button type=\"button\" class=\"redt__cancel\">Cancel</button></span></td>\n </tr>\n <tr><td>#1039</td><td>S. Novak</td><td>Refunded</td><td></td></tr>\n </tbody>\n </table>\n </div>\n</div>\n<style>\n.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}\n.redt { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }\n.redt__scroll { overflow-x: auto; }\n.redt__table { border-collapse: collapse; width: 100%; }\n.redt__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }\n.redt__table th, .redt__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }\n.redt__table th { background: var(--accent); color: #FAF7F2; }\n.redt__edit { display: none; }\n.redt__input { font: inherit; padding: 4px 6px; border: 1px solid #24143060; border-radius: 4px; width: 96px; }\n.redt__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }\n.redt__save, .redt__cancel { font-size: 12px; border: 1px solid #24143040; background: #FAF7F2; border-radius: 4px; padding: 3px 8px; cursor: pointer; margin-right: 4px; }\n.redt[data-editing=\"1041\"] tr[data-row=\"1041\"] .redt__static,\n.redt[data-editing=\"1040\"] tr[data-row=\"1040\"] .redt__static { display: none; }\n.redt[data-editing=\"1041\"] tr[data-row=\"1041\"] .redt__edit,\n.redt[data-editing=\"1040\"] tr[data-row=\"1040\"] .redt__edit { display: inline-flex; gap: 4px; align-items: center; }\n.redt[data-editing=\"1041\"] tr[data-row=\"1041\"],\n.redt[data-editing=\"1040\"] tr[data-row=\"1040\"] { background: #24143008; }\n</style>", "tailwind": "<div class=\"max-w-[480px] rounded-[10px] border border-[#24143020] font-sans text-sm text-[#241430] bg-[#FAF7F2] overflow-hidden\" data-editing=\"{{editingRow}}\" 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><tr class=\"text-[#FAF7F2]\" style=\"background:{{accent}}\">\n <th scope=\"col\" class=\"p-3.5 text-left whitespace-nowrap\">Order</th>\n <th scope=\"col\" class=\"p-3.5 text-left whitespace-nowrap\">Customer</th>\n <th scope=\"col\" class=\"p-3.5 text-left whitespace-nowrap\">Status</th>\n <th scope=\"col\" class=\"p-3.5\"><span class=\"sr-only\">Row actions</span></th>\n </tr></thead>\n <tbody>\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]\"></td></tr>\n <tr data-row=\"1041\">\n <td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">#1041</td>\n <td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\"><span class=\"redt__static\">R. Okafor</span><input type=\"text\" class=\"redt__edit hidden font-inherit px-1.5 py-1 border border-[#24143060] rounded w-[96px]\" value=\"{{nameValue}}\" aria-label=\"Customer for order #1041\"></td>\n <td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\"><span class=\"redt__static\">Processing</span><input type=\"text\" class=\"redt__edit hidden font-inherit px-1.5 py-1 border border-[#24143060] rounded w-[96px]\" value=\"{{statusValue}}\" aria-label=\"Status for order #1041\"></td>\n <td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\"><span class=\"redt__edit hidden gap-1\"><button type=\"button\" class=\"text-xs border border-[#24143040] bg-[#FAF7F2] rounded px-2 py-0.5\">Save</button><button type=\"button\" class=\"text-xs border border-[#24143040] bg-[#FAF7F2] rounded px-2 py-0.5\">Cancel</button></span></td>\n </tr>\n <tr data-row=\"1040\">\n <td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">#1040</td>\n <td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\"><span class=\"redt__static\">M. Iqbal</span><input type=\"text\" class=\"redt__edit hidden font-inherit px-1.5 py-1 border border-[#24143060] rounded w-[96px]\" value=\"{{nameValue}}\" aria-label=\"Customer for order #1040\"></td>\n <td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\"><span class=\"redt__static\">Shipped</span><input type=\"text\" class=\"redt__edit hidden font-inherit px-1.5 py-1 border border-[#24143060] rounded w-[96px]\" value=\"{{statusValue}}\" aria-label=\"Status for order #1040\"></td>\n <td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\"><span class=\"redt__edit hidden gap-1\"><button type=\"button\" class=\"text-xs border border-[#24143040] bg-[#FAF7F2] rounded px-2 py-0.5\">Save</button><button type=\"button\" class=\"text-xs border border-[#24143040] bg-[#FAF7F2] rounded px-2 py-0.5\">Cancel</button></span></td>\n </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]\"></td></tr>\n </tbody>\n </table>\n </div>\n</div>\n<style>\n[data-editing=\"1041\"] tr[data-row=\"1041\"] .redt__static,\n[data-editing=\"1040\"] tr[data-row=\"1040\"] .redt__static { display: none; }\n[data-editing=\"1041\"] tr[data-row=\"1041\"] .redt__edit,\n[data-editing=\"1040\"] tr[data-row=\"1040\"] .redt__edit { display: inline-flex; }\n</style>", "react": "function RowEditing({\n caption = \"{{caption}}\",\n accent = \"{{accent}}\",\n editingRow = \"{{editingRow}}\",\n nameValue = \"{{nameValue}}\",\n statusValue = \"{{statusValue}}\",\n}) {\n const rows = [\n { id: \"1042\", cells: [\"#1042\", \"A. Whitfield\", \"Shipped\"] },\n { id: \"1041\", cells: [\"#1041\", \"R. Okafor\", \"Processing\"] },\n { id: \"1040\", cells: [\"#1040\", \"M. Iqbal\", \"Shipped\"] },\n { id: \"1039\", cells: [\"#1039\", \"S. Novak\", \"Refunded\"] },\n ];\n const cell = { padding: \"10px 14px\", borderBottom: \"1px solid #24143020\", whiteSpace: \"nowrap\" };\n const input = { font: \"inherit\", padding: \"4px 6px\", border: \"1px solid #24143060\", borderRadius: 4, width: 96 };\n const btn = { fontSize: 12, border: \"1px solid #24143040\", background: \"#FAF7F2\", borderRadius: 4, padding: \"3px 8px\", cursor: \"pointer\", marginRight: 4 };\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 {[\"Order\", \"Customer\", \"Status\", \"\"].map((h, i) => <th key={i} scope=\"col\" style={cell}>{h}</th>)}\n </tr>\n </thead>\n <tbody>\n {rows.map((r) => {\n const editing = editingRow === r.id;\n return (\n <tr key={r.id} style={{ background: editing ? \"#24143008\" : \"transparent\" }}>\n <td style={cell}>{r.cells[0]}</td>\n <td style={cell}>{editing ? <input defaultValue={nameValue} style={input} aria-label={`Customer for order ${r.cells[0]}`} /> : r.cells[1]}</td>\n <td style={cell}>{editing ? <input defaultValue={statusValue} style={input} aria-label={`Status for order ${r.cells[0]}`} /> : r.cells[2]}</td>\n <td style={cell}>{editing && <span><button type=\"button\" style={btn}>Save</button><button type=\"button\" style={btn}>Cancel</button></span>}</td>\n </tr>\n );\n })}\n </tbody>\n </table>\n </div>\n </div>\n );\n}" }