Edit Column Header · 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=\"chdr\" data-align=\"{{align}}\" style=\"--accent:{{accent}};\">\n  <div class=\"chdr__scroll\">\n    <table class=\"chdr__table\">\n      <caption>{{caption}}</caption>\n      <thead><tr>\n        <th scope=\"col\" class=\"{{#if sticky}}chdr__sticky{{/if}}\">Order</th>\n        <th scope=\"col\" class=\"{{#if sticky}}chdr__sticky{{/if}}\">Customer</th>\n        <th scope=\"col\" class=\"{{#if sticky}}chdr__sticky{{/if}}\">Status</th>\n        <th scope=\"col\" class=\"{{#if sticky}}chdr__sticky{{/if}}\"{{#if sortIndicator}} aria-sort=\"ascending\"{{/if}}><button type=\"button\" class=\"chdr__sortbtn\">Total{{#if sortIndicator}} <span aria-hidden=\"true\">&#9650;</span>{{/if}}</button></th>\n      </tr></thead>\n      <tbody>\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        <tr><td>#1038</td><td>L. Duarte</td><td>Shipped</td><td>£96.20</td></tr>\n        <tr><td>#1037</td><td>P. Andersson</td><td>Processing</td><td>£15.75</td></tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n<style>\n.chdr { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }\n.chdr__scroll { max-height: 180px; overflow: auto; }\n.chdr__table { border-collapse: collapse; width: 100%; }\n.chdr__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }\n.chdr__table th, .chdr__table td { padding: 10px 14px; border-bottom: 1px solid #24143020; white-space: nowrap; }\n.chdr__table th { background: var(--accent); color: #FAF7F2; top: 0; }\n.chdr__sticky { position: sticky; }\n.chdr[data-align=\"left\"] th { text-align: left; }\n.chdr[data-align=\"center\"] th { text-align: center; }\n.chdr[data-align=\"right\"] th { text-align: right; }\n.chdr__sortbtn { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; padding: 0; }\n.chdr__sortbtn:hover { text-decoration: underline; }\n.chdr__sortbtn:focus-visible { outline: 2px solid #FAF7F2; outline-offset: 2px; }\n</style>",
  "tailwind": "<div class=\"max-w-[480px] rounded-[10px] border border-[#24143020] font-sans text-sm text-[#241430] bg-[#FAF7F2] overflow-hidden\" data-align=\"{{align}}\" style=\"--accent:{{accent}};\">\n  <div class=\"max-h-[180px] overflow-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 whitespace-nowrap top-0 chdr__th{{#if sticky}} sticky{{/if}}\">Order</th>\n        <th scope=\"col\" class=\"p-3.5 whitespace-nowrap top-0 chdr__th{{#if sticky}} sticky{{/if}}\">Customer</th>\n        <th scope=\"col\" class=\"p-3.5 whitespace-nowrap top-0 chdr__th{{#if sticky}} sticky{{/if}}\">Status</th>\n        <th scope=\"col\" class=\"p-3.5 whitespace-nowrap top-0 chdr__th{{#if sticky}} sticky{{/if}}\"{{#if sortIndicator}} aria-sort=\"ascending\"{{/if}}><button type=\"button\" class=\"bg-transparent border-0 font-inherit text-inherit cursor-pointer inline-flex gap-1 items-center p-0 hover:underline focus-visible:outline focus-visible:outline-2\">Total{{#if sortIndicator}} <span aria-hidden=\"true\">&#9650;</span>{{/if}}</button></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><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        <tr><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">#1038</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">L. Duarte</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\">£96.20</td></tr>\n        <tr><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">#1037</td><td class=\"p-3.5 border-b border-[#24143020] whitespace-nowrap\">P. Andersson</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\">£15.75</td></tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n<style>\n[data-align=\"left\"] th { text-align: left; }\n[data-align=\"center\"] th { text-align: center; }\n[data-align=\"right\"] th { text-align: right; }\n</style>",
  "react": "function ColumnHeader({\n  caption = \"{{caption}}\",\n  accent = \"{{accent}}\",\n  align = \"{{align}}\",\n  sortIndicator = {{sortIndicator}},\n  sticky = {{sticky}},\n}) {\n  const rows = [\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    [\"#1038\", \"L. Duarte\", \"Shipped\", \"£96.20\"],\n    [\"#1037\", \"P. Andersson\", \"Processing\", \"£15.75\"],\n  ];\n  const th = { padding: \"10px 14px\", whiteSpace: \"nowrap\", textAlign: align, position: sticky ? \"sticky\" : \"static\", top: 0, background: accent, color: \"#FAF7F2\" };\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={{ maxHeight: 180, overflow: \"auto\" }}>\n        <table style={{ borderCollapse: \"collapse\", width: \"100%\" }}>\n          <caption style={{ textAlign: \"left\", fontWeight: 600, padding: \"10px 14px\" }}>{caption}</caption>\n          <thead>\n            <tr>\n              <th scope=\"col\" style={th}>Order</th>\n              <th scope=\"col\" style={th}>Customer</th>\n              <th scope=\"col\" style={th}>Status</th>\n              <th scope=\"col\" style={th} aria-sort={sortIndicator ? \"ascending\" : \"none\"}>\n                <button type=\"button\" style={{ background: \"none\", border: 0, font: \"inherit\", color: \"inherit\", cursor: \"pointer\", display: \"inline-flex\", gap: 4, alignItems: \"center\", padding: 0 }}>\n                  Total {sortIndicator && <span aria-hidden=\"true\">&#9650;</span>}\n                </button>\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            {rows.map((row) => (\n              <tr key={row[0]}>{row.map((cell, j) => <td key={j} style={{ padding: \"10px 14px\", borderBottom: \"1px solid #24143020\", whiteSpace: \"nowrap\" }}>{cell}</td>)}</tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n}"
}