Edit Column Resizing · 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=\"crsz\" style=\"--accent:{{accent}};\">\n  <div class=\"crsz__scroll\">\n    <table class=\"crsz__table\">\n      <caption>{{caption}}</caption>\n      <thead><tr>\n        <th scope=\"col\">Order</th>\n        <th scope=\"col\" class=\"crsz__customer\" style=\"width:{{columnWidth}}px;\">Customer{{#if resizerVisible}}<span class=\"crsz__resizer\" aria-hidden=\"true\"></span>{{/if}}{{#if minWidthGuide}}<span class=\"crsz__guide\" aria-hidden=\"true\"></span>{{/if}}</th>\n        <th scope=\"col\">Status</th>\n        <th scope=\"col\">Total</th>\n      </tr></thead>\n      <tbody>\n        <tr><td>#1042</td><td class=\"crsz__cell\" style=\"width:{{columnWidth}}px;\">A. Whitfield</td><td>Shipped</td><td>£64.00</td></tr>\n        <tr><td>#1041</td><td class=\"crsz__cell\" style=\"width:{{columnWidth}}px;\">R. Okafor</td><td>Processing</td><td>£128.50</td></tr>\n        <tr><td>#1040</td><td class=\"crsz__cell\" style=\"width:{{columnWidth}}px;\">M. Iqbal</td><td>Shipped</td><td>£22.00</td></tr>\n        <tr><td>#1039</td><td class=\"crsz__cell\" style=\"width:{{columnWidth}}px;\">S. Novak</td><td>Refunded</td><td>£40.00</td></tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n<style>\n.crsz { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }\n.crsz__scroll { overflow-x: auto; }\n.crsz__table { border-collapse: collapse; width: 100%; table-layout: fixed; }\n.crsz__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }\n.crsz__table th, .crsz__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.crsz__table th { background: var(--accent); color: #FAF7F2; }\n.crsz__customer { position: relative; }\n.crsz__resizer { position: absolute; top: 0; right: 0; bottom: 0; width: 8px; cursor: col-resize; }\n.crsz__resizer:hover, .crsz__resizer:focus-visible { background: #FAF7F250; }\n.crsz__guide { position: absolute; top: 0; bottom: -400px; left: 100px; border-left: 1px dashed #24143080; pointer-events: none; }\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 table-fixed\">\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=\"relative p-3.5 text-left whitespace-nowrap overflow-hidden text-ellipsis\" style=\"width:{{columnWidth}}px\">Customer{{#if resizerVisible}}<span aria-hidden=\"true\" class=\"absolute top-0 right-0 bottom-0 w-2 cursor-col-resize hover:bg-white/30\"></span>{{/if}}{{#if minWidthGuide}}<span aria-hidden=\"true\" class=\"absolute top-0 bottom-[-400px] border-l border-dashed border-[#24143080] pointer-events-none\" style=\"left:100px\"></span>{{/if}}</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 overflow-hidden text-ellipsis\" style=\"width:{{columnWidth}}px\">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 overflow-hidden text-ellipsis\" style=\"width:{{columnWidth}}px\">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 overflow-hidden text-ellipsis\" style=\"width:{{columnWidth}}px\">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 overflow-hidden text-ellipsis\" style=\"width:{{columnWidth}}px\">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>",
  "react": "function ColumnResizing({\n  caption = \"{{caption}}\",\n  accent = \"{{accent}}\",\n  columnWidth = {{columnWidth}},\n  resizerVisible = {{resizerVisible}},\n  minWidthGuide = {{minWidthGuide}},\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  ];\n  const cell = { padding: \"10px 14px\", borderBottom: \"1px solid #24143020\", whiteSpace: \"nowrap\", overflow: \"hidden\", textOverflow: \"ellipsis\" };\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%\", tableLayout: \"fixed\" }}>\n          <caption style={{ textAlign: \"left\", fontWeight: 600, padding: \"10px 14px\" }}>{caption}</caption>\n          <thead>\n            <tr style={{ background: accent, color: \"#FAF7F2\" }}>\n              <th scope=\"col\" style={cell}>Order</th>\n              <th scope=\"col\" style={{ ...cell, width: columnWidth, position: \"relative\" }}>\n                Customer\n                {resizerVisible && <span aria-hidden=\"true\" style={{ position: \"absolute\", top: 0, right: 0, bottom: 0, width: 8, cursor: \"col-resize\" }} />}\n                {minWidthGuide && <span aria-hidden=\"true\" style={{ position: \"absolute\", top: 0, bottom: -400, left: 100, borderLeft: \"1px dashed #24143080\", pointerEvents: \"none\" }} />}\n              </th>\n              <th scope=\"col\" style={cell}>Status</th>\n              <th scope=\"col\" style={cell}>Total</th>\n            </tr>\n          </thead>\n          <tbody>\n            {rows.map((row) => (\n              <tr key={row[0]}>\n                <td style={cell}>{row[0]}</td>\n                <td style={{ ...cell, width: columnWidth }}>{row[1]}</td>\n                <td style={cell}>{row[2]}</td>\n                <td style={cell}>{row[3]}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n}"
}