Edit Inline Editing · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<div class=\"inle\" data-editing=\"{{editingRow}}\" style=\"--accent:{{accent}};\">\n  <div class=\"inle__scroll\">\n    <table class=\"inle__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\">Total</th></tr></thead>\n      <tbody>\n        <tr><td>#1042</td><td>A. Whitfield</td><td>Shipped</td><td>£64.00</td></tr>\n        <tr data-row=\"1041\">\n          <td>#1041</td><td>R. Okafor</td>\n          <td>\n            <span class=\"inle__static\">Processing</span>\n            <span class=\"inle__edit\"><input type=\"text\" class=\"inle__input\" value=\"{{fieldValue}}\" aria-label=\"Status for order #1041\"><button type=\"button\" class=\"inle__save\">{{saveLabel}}</button><button type=\"button\" class=\"inle__cancel\">Cancel</button></span>\n          </td>\n          <td>£128.50</td>\n        </tr>\n        <tr data-row=\"1040\">\n          <td>#1040</td><td>M. Iqbal</td>\n          <td>\n            <span class=\"inle__static\">Shipped</span>\n            <span class=\"inle__edit\"><input type=\"text\" class=\"inle__input\" value=\"{{fieldValue}}\" aria-label=\"Status for order #1040\"><button type=\"button\" class=\"inle__save\">{{saveLabel}}</button><button type=\"button\" class=\"inle__cancel\">Cancel</button></span>\n          </td>\n          <td>£22.00</td>\n        </tr>\n        <tr><td>#1039</td><td>S. Novak</td><td>Refunded</td><td>£40.00</td></tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n<style>\n.inle { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }\n.inle__scroll { overflow-x: auto; }\n.inle__table { border-collapse: collapse; width: 100%; }\n.inle__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }\n.inle__table th, .inle__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }\n.inle__table th { background: var(--accent); color: #FAF7F2; }\n.inle__edit { display: none; gap: 6px; align-items: center; }\n.inle__input { font: inherit; padding: 4px 6px; border: 1px solid #24143060; border-radius: 4px; width: 88px; }\n.inle__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }\n.inle__save, .inle__cancel { font-size: 12px; border: 1px solid #24143040; background: #FAF7F2; border-radius: 4px; padding: 3px 8px; cursor: pointer; }\n.inle__save:hover, .inle__cancel:hover { background: #24143010; }\n.inle[data-editing=\"1041\"] tr[data-row=\"1041\"] .inle__static,\n.inle[data-editing=\"1040\"] tr[data-row=\"1040\"] .inle__static { display: none; }\n.inle[data-editing=\"1041\"] tr[data-row=\"1041\"] .inle__edit,\n.inle[data-editing=\"1040\"] tr[data-row=\"1040\"] .inle__edit { display: inline-flex; }\n.inle[data-editing=\"1041\"] tr[data-row=\"1041\"] td:first-child,\n.inle[data-editing=\"1040\"] tr[data-row=\"1040\"] td:first-child { border-left: 3px solid var(--accent); }\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 text-left whitespace-nowrap\">Total</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] whitespace-nowrap\">£64.00</td></tr>\n        <tr data-row=\"1041\">\n          <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>\n          <td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">\n            <span class=\"inle__static\">Processing</span>\n            <span class=\"inle__edit hidden items-center gap-1.5\"><input type=\"text\" class=\"font-inherit px-1.5 py-1 border border-[#24143060] rounded w-[88px]\" value=\"{{fieldValue}}\" aria-label=\"Status for order #1041\"><button type=\"button\" class=\"text-xs border border-[#24143040] bg-[#FAF7F2] rounded px-2 py-0.5\">{{saveLabel}}</button><button type=\"button\" class=\"text-xs border border-[#24143040] bg-[#FAF7F2] rounded px-2 py-0.5\">Cancel</button></span>\n          </td>\n          <td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">£128.50</td>\n        </tr>\n        <tr data-row=\"1040\">\n          <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>\n          <td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">\n            <span class=\"inle__static\">Shipped</span>\n            <span class=\"inle__edit hidden items-center gap-1.5\"><input type=\"text\" class=\"font-inherit px-1.5 py-1 border border-[#24143060] rounded w-[88px]\" value=\"{{fieldValue}}\" aria-label=\"Status for order #1040\"><button type=\"button\" class=\"text-xs border border-[#24143040] bg-[#FAF7F2] rounded px-2 py-0.5\">{{saveLabel}}</button><button type=\"button\" class=\"text-xs border border-[#24143040] bg-[#FAF7F2] rounded px-2 py-0.5\">Cancel</button></span>\n          </td>\n          <td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">£22.00</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] whitespace-nowrap\">£40.00</td></tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n<style>\n[data-editing=\"1041\"] tr[data-row=\"1041\"] .inle__static,\n[data-editing=\"1040\"] tr[data-row=\"1040\"] .inle__static { display: none; }\n[data-editing=\"1041\"] tr[data-row=\"1041\"] .inle__edit,\n[data-editing=\"1040\"] tr[data-row=\"1040\"] .inle__edit { display: inline-flex; }\n</style>",
  "react": "function InlineEditing({\n  caption = \"{{caption}}\",\n  accent = \"{{accent}}\",\n  editingRow = \"{{editingRow}}\",\n  fieldValue = \"{{fieldValue}}\",\n  saveLabel = \"{{saveLabel}}\",\n}) {\n  const rows = [\n    { id: \"1042\", cells: [\"#1042\", \"A. Whitfield\", \"Shipped\", \"£64.00\"] },\n    { id: \"1041\", cells: [\"#1041\", \"R. Okafor\", \"Processing\", \"£128.50\"] },\n    { id: \"1040\", cells: [\"#1040\", \"M. Iqbal\", \"Shipped\", \"£22.00\"] },\n    { id: \"1039\", cells: [\"#1039\", \"S. Novak\", \"Refunded\", \"£40.00\"] },\n  ];\n  const cell = { padding: \"10px 14px\", borderBottom: \"1px solid #24143020\", whiteSpace: \"nowrap\" };\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\", \"Total\"].map((h) => <th key={h} 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}>\n                  <td style={{ ...cell, borderLeft: editing ? `3px solid ${accent}` : \"none\" }}>{r.cells[0]}</td>\n                  <td style={cell}>{r.cells[1]}</td>\n                  <td style={cell}>\n                    {editing ? (\n                      <span style={{ display: \"inline-flex\", gap: 6, alignItems: \"center\" }}>\n                        <input type=\"text\" defaultValue={fieldValue} aria-label={`Status for order ${r.cells[0]}`} style={{ font: \"inherit\", padding: \"4px 6px\", border: \"1px solid #24143060\", borderRadius: 4, width: 88 }} />\n                        <button type=\"button\" style={{ fontSize: 12, border: \"1px solid #24143040\", background: \"#FAF7F2\", borderRadius: 4, padding: \"3px 8px\", cursor: \"pointer\" }}>{saveLabel}</button>\n                        <button type=\"button\" style={{ fontSize: 12, border: \"1px solid #24143040\", background: \"#FAF7F2\", borderRadius: 4, padding: \"3px 8px\", cursor: \"pointer\" }}>Cancel</button>\n                      </span>\n                    ) : r.cells[2]}\n                  </td>\n                  <td style={cell}>{r.cells[3]}</td>\n                </tr>\n              );\n            })}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n}"
}