Edit Row Expansion · 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=\"rexp\" style=\"--accent:{{accent}};\">\n  <div class=\"rexp__scroll\">\n    <table class=\"rexp__table\">\n      <caption>{{caption}}</caption>\n      <thead><tr><th scope=\"col\"><span class=\"sr-only\">Expand</span></th><th scope=\"col\">Order</th><th scope=\"col\">Customer</th><th scope=\"col\">Total</th></tr></thead>\n      <tbody>\n        <tr class=\"{{#if expand1042}}rexp__open{{/if}}\">\n          <td><button type=\"button\" class=\"rexp__toggle\" aria-expanded=\"{{expand1042}}\" aria-controls=\"rexp-1042\"><span class=\"rexp__arrow\" aria-hidden=\"true\">&#9656;</span></button></td>\n          <td>#1042</td><td>A. Whitfield</td><td>£64.00</td>\n        </tr>\n        {{#if expand1042}}\n        <tr><td colspan=\"4\" id=\"rexp-1042\" class=\"rexp__detail\">{{detailContent}}</td></tr>\n        {{/if}}\n        <tr class=\"{{#if expand1041}}rexp__open{{/if}}\">\n          <td><button type=\"button\" class=\"rexp__toggle\" aria-expanded=\"{{expand1041}}\" aria-controls=\"rexp-1041\"><span class=\"rexp__arrow\" aria-hidden=\"true\">&#9656;</span></button></td>\n          <td>#1041</td><td>R. Okafor</td><td>£128.50</td>\n        </tr>\n        {{#if expand1041}}\n        <tr><td colspan=\"4\" id=\"rexp-1041\" class=\"rexp__detail\">{{detailContent}}</td></tr>\n        {{/if}}\n        <tr><td></td><td>#1040</td><td>M. Iqbal</td><td>£22.00</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.rexp { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }\n.rexp__scroll { overflow-x: auto; }\n.rexp__table { border-collapse: collapse; width: 100%; }\n.rexp__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }\n.rexp__table th, .rexp__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }\n.rexp__table th { background: var(--accent); color: #FAF7F2; }\n.rexp__toggle { background: none; border: 0; cursor: pointer; padding: 2px; display: inline-flex; }\n.rexp__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }\n.rexp__toggle[aria-expanded=\"true\"] .rexp__arrow { transform: rotate(90deg); }\n.rexp__arrow { display: inline-block; color: var(--accent); }\n@media (prefers-reduced-motion: no-preference) {\n  .rexp__arrow { transition: transform .15s; }\n}\n.rexp__detail { background: #24143008; white-space: normal; color: #241430cc; font-size: 13px; }\n.rexp__open { 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\" 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\"><span class=\"sr-only\">Expand</span></th>\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\">Total</th>\n      </tr></thead>\n      <tbody>\n        <tr>\n          <td class=\"p-3.5 border-b border-[#24143020]\"><button type=\"button\" class=\"rexp__toggle bg-transparent border-0 cursor-pointer p-0.5 inline-flex focus-visible:outline focus-visible:outline-2\" aria-expanded=\"{{expand1042}}\" aria-controls=\"rexp-1042\"><span aria-hidden=\"true\" class=\"rexp__arrow inline-block motion-safe:transition-transform\" style=\"color:{{accent}}\">&#9656;</span></button></td>\n          <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\">£64.00</td>\n        </tr>\n        {{#if expand1042}}\n        <tr><td colspan=\"4\" id=\"rexp-1042\" class=\"bg-[#24143008] px-3.5 py-2 text-[13px] text-[#241430cc]\">{{detailContent}}</td></tr>\n        {{/if}}\n        <tr>\n          <td class=\"p-3.5 border-b border-[#24143020]\"><button type=\"button\" class=\"rexp__toggle bg-transparent border-0 cursor-pointer p-0.5 inline-flex focus-visible:outline focus-visible:outline-2\" aria-expanded=\"{{expand1041}}\" aria-controls=\"rexp-1041\"><span aria-hidden=\"true\" class=\"rexp__arrow inline-block motion-safe:transition-transform\" style=\"color:{{accent}}\">&#9656;</span></button></td>\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><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">£128.50</td>\n        </tr>\n        {{#if expand1041}}\n        <tr><td colspan=\"4\" id=\"rexp-1041\" class=\"bg-[#24143008] px-3.5 py-2 text-[13px] text-[#241430cc]\">{{detailContent}}</td></tr>\n        {{/if}}\n        <tr><td class=\"p-3.5 border-b border-[#24143020]\"></td><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\">£22.00</td></tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n<style>\n.rexp__toggle[aria-expanded=\"true\"] .rexp__arrow { transform: rotate(90deg); }\n</style>",
  "react": "function RowExpansion({\n  caption = \"{{caption}}\",\n  accent = \"{{accent}}\",\n  expand1042 = {{expand1042}},\n  expand1041 = {{expand1041}},\n  detailContent = \"{{detailContent}}\",\n}) {\n  const cell = { padding: \"10px 14px\", borderBottom: \"1px solid #24143020\", whiteSpace: \"nowrap\" };\n  const Toggle = ({ open, controls }) => (\n    <button type=\"button\" aria-expanded={open} aria-controls={controls} style={{ background: \"none\", border: 0, cursor: \"pointer\", padding: 2, display: \"inline-flex\" }}>\n      <span aria-hidden=\"true\" className=\"rexp-caret\" style={{ display: \"inline-block\", transform: open ? \"rotate(90deg)\" : \"none\", color: accent }}>&#9656;</span>\n    </button>\n  );\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\", \"Total\"].map((h, i) => <th key={i} scope=\"col\" style={cell}>{h}</th>)}\n            </tr>\n          </thead>\n          <tbody>\n            <tr style={{ borderLeft: expand1042 ? `3px solid ${accent}` : \"none\" }}>\n              <td style={cell}><Toggle open={expand1042} controls=\"rexp-1042\" /></td>\n              <td style={cell}>#1042</td><td style={cell}>A. Whitfield</td><td style={cell}>£64.00</td>\n            </tr>\n            {expand1042 && <tr><td colSpan={4} id=\"rexp-1042\" style={{ background: \"#24143008\", padding: \"8px 14px\", fontSize: 13, color: \"#241430cc\" }}>{detailContent}</td></tr>}\n            <tr style={{ borderLeft: expand1041 ? `3px solid ${accent}` : \"none\" }}>\n              <td style={cell}><Toggle open={expand1041} controls=\"rexp-1041\" /></td>\n              <td style={cell}>#1041</td><td style={cell}>R. Okafor</td><td style={cell}>£128.50</td>\n            </tr>\n            {expand1041 && <tr><td colSpan={4} id=\"rexp-1041\" style={{ background: \"#24143008\", padding: \"8px 14px\", fontSize: 13, color: \"#241430cc\" }}>{detailContent}</td></tr>}\n            <tr><td style={cell}></td><td style={cell}>#1040</td><td style={cell}>M. Iqbal</td><td style={cell}>£22.00</td></tr>\n          </tbody>\n        </table>\n      </div>\n      <style>{`\n        @media (prefers-reduced-motion: no-preference) {\n          .rexp-caret { transition: transform .15s; }\n        }\n      `}</style>\n    </div>\n  );\n}"
}