Edit Range Selection

Name

Also known as (comma separated)

Brief definition Selecting a range of cells/rows.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "caption", "type": "text", "label": "Caption", "default": "Expense sheet" }, { "id": "accent", "type": "color", "label": "Accent", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "range", "type": "select", "label": "Range shape", "default": "block", "options": [ "cell", "row", "block" ] }, { "id": "anchorLabel", "type": "text", "label": "Range reference", "default": "C2:D3" }, { "id": "showHandles", "type": "toggle", "label": "Show fill handle", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"rsel\" data-range=\"{{range}}\" style=\"--accent:{{accent}};\">\n <div class=\"rsel__scroll\">\n <table class=\"rsel__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 class=\"rsel__rowline\">\n <td>#1041</td><td>R. Okafor</td>\n <td class=\"rsel__cell\">Processing{{#if anchorLabel}}<span class=\"rsel__badge\">{{anchorLabel}}</span>{{/if}}</td>\n <td class=\"rsel__cell\">£128.50</td>\n </tr>\n <tr class=\"rsel__rowline\">\n <td>#1040</td><td>M. Iqbal</td>\n <td class=\"rsel__cell\">Shipped</td>\n <td class=\"rsel__cell\">£22.00{{#if showHandles}}<span class=\"rsel__handle\" aria-hidden=\"true\"></span>{{/if}}</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.rsel { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }\n.rsel__scroll { overflow-x: auto; }\n.rsel__table { border-collapse: collapse; width: 100%; }\n.rsel__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }\n.rsel__table th, .rsel__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }\n.rsel__table th { background: var(--accent); color: #FAF7F2; }\n.rsel__cell { position: relative; }\n.rsel__badge { position: absolute; top: 1px; right: 3px; font-size: 10px; font-weight: 600; color: var(--accent); }\n.rsel__handle { position: absolute; right: -4px; bottom: -4px; width: 7px; height: 7px; background: var(--accent); border: 1px solid #FAF7F2; }\n.rsel[data-range=\"cell\"] .rsel__cell:first-of-type { outline: 2px solid var(--accent); outline-offset: -2px; }\n.rsel[data-range=\"row\"] .rsel__rowline { background: #A8E6C155; }\n.rsel[data-range=\"block\"] .rsel__cell { background: #A8E6C155; outline: 1px solid var(--accent); outline-offset: -1px; }\n</style>", "tailwind": "<div class=\"max-w-[480px] rounded-[10px] border border-[#24143020] font-sans text-sm text-[#241430] bg-[#FAF7F2] overflow-hidden\" data-range=\"{{range}}\" 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 class=\"rsel__rowline\">\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=\"rsel__cell p-3.5 border-b border-[#24143020] whitespace-nowrap relative\">Processing{{#if anchorLabel}}<span class=\"absolute top-0.5 right-1 text-[10px] font-semibold\" style=\"color:{{accent}}\">{{anchorLabel}}</span>{{/if}}</td>\n <td class=\"rsel__cell p-3.5 border-b border-[#24143020] whitespace-nowrap relative\">£128.50</td>\n </tr>\n <tr class=\"rsel__rowline\">\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=\"rsel__cell p-3.5 border-b border-[#24143020] whitespace-nowrap relative\">Shipped</td>\n <td class=\"rsel__cell p-3.5 border-b border-[#24143020] whitespace-nowrap relative\">£22.00{{#if showHandles}}<span aria-hidden=\"true\" class=\"absolute -right-1 -bottom-1 w-1.5 h-1.5 border border-[#FAF7F2]\" style=\"background:{{accent}}\"></span>{{/if}}</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-range=\"cell\"] .rsel__cell:first-of-type { outline: 2px solid var(--accent); outline-offset: -2px; }\n[data-range=\"row\"] .rsel__rowline { background: #A8E6C155; }\n[data-range=\"block\"] .rsel__cell { background: #A8E6C155; outline: 1px solid var(--accent); outline-offset: -1px; }\n</style>", "react": "function RangeSelection({\n caption = \"{{caption}}\",\n accent = \"{{accent}}\",\n range = \"{{range}}\",\n anchorLabel = \"{{anchorLabel}}\",\n showHandles = {{showHandles}},\n}) {\n const cell = { padding: \"10px 14px\", borderBottom: \"1px solid #24143020\", whiteSpace: \"nowrap\" };\n const blockCell = {\n ...cell, position: \"relative\",\n background: range === \"row\" || range === \"block\" ? \"#A8E6C155\" : \"transparent\",\n outline: range === \"block\" ? `1px solid ${accent}` : range === \"cell\" ? `2px solid ${accent}` : \"none\",\n outlineOffset: -2,\n };\n const rowStyle = { background: range === \"row\" ? \"#A8E6C155\" : \"transparent\" };\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 <tr>{[\"#1042\", \"A. Whitfield\", \"Shipped\", \"£64.00\"].map((c, j) => <td key={j} style={cell}>{c}</td>)}</tr>\n <tr style={rowStyle}>\n <td style={cell}>#1041</td><td style={cell}>R. Okafor</td>\n <td style={blockCell}>Processing{anchorLabel && <span style={{ position: \"absolute\", top: 1, right: 3, fontSize: 10, fontWeight: 600, color: accent }}>{anchorLabel}</span>}</td>\n <td style={blockCell}>£128.50</td>\n </tr>\n <tr style={rowStyle}>\n <td style={cell}>#1040</td><td style={cell}>M. Iqbal</td>\n <td style={blockCell}>Shipped</td>\n <td style={blockCell}>£22.00{showHandles && <span aria-hidden=\"true\" style={{ position: \"absolute\", right: -4, bottom: -4, width: 7, height: 7, background: accent, border: \"1px solid #FAF7F2\" }} />}</td>\n </tr>\n <tr>{[\"#1039\", \"S. Novak\", \"Refunded\", \"£40.00\"].map((c, j) => <td key={j} style={cell}>{c}</td>)}</tr>\n </tbody>\n </table>\n </div>\n </div>\n );\n}" }