Edit Column Chooser

Name

Also known as (comma separated)

Brief definition Selects visible columns.

Notes **Enterprise Application UI:** Controls visible table columns.

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "caption", "type": "text", "label": "Caption", "default": "Team directory" }, { "id": "accent", "type": "color", "label": "Accent", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "showEmail", "type": "toggle", "label": "Show Email column", "default": true }, { "id": "showRole", "type": "toggle", "label": "Show Role column", "default": false }, { "id": "showJoined", "type": "toggle", "label": "Show Joined column", "default": false } ]

Templates (JSON object keyed by format) { "html": "<div class=\"cchz\" style=\"--accent:{{accent}};\">\n <fieldset class=\"cchz__chooser\">\n <legend>Columns</legend>\n <label class=\"cchz__opt\"><input type=\"checkbox\" checked disabled><span>Name</span></label>\n <label class=\"cchz__opt\"><input type=\"checkbox\" {{#if showEmail}}checked{{/if}} disabled><span>Email</span></label>\n <label class=\"cchz__opt\"><input type=\"checkbox\" {{#if showRole}}checked{{/if}} disabled><span>Role</span></label>\n <label class=\"cchz__opt\"><input type=\"checkbox\" {{#if showJoined}}checked{{/if}} disabled><span>Joined</span></label>\n <label class=\"cchz__opt\"><input type=\"checkbox\" checked disabled><span>Status</span></label>\n </fieldset>\n <div class=\"cchz__scroll\">\n <table class=\"cchz__table\">\n <caption>{{caption}}</caption>\n <thead><tr>\n <th scope=\"col\">Name</th>\n {{#if showEmail}}<th scope=\"col\">Email</th>{{/if}}\n {{#if showRole}}<th scope=\"col\">Role</th>{{/if}}\n {{#if showJoined}}<th scope=\"col\">Joined</th>{{/if}}\n <th scope=\"col\">Status</th>\n </tr></thead>\n <tbody>\n <tr><td>A. Whitfield</td>{{#if showEmail}}<td>a.whitfield@example.com</td>{{/if}}{{#if showRole}}<td>Engineer</td>{{/if}}{{#if showJoined}}<td>2021</td>{{/if}}<td>Active</td></tr>\n <tr><td>R. Okafor</td>{{#if showEmail}}<td>r.okafor@example.com</td>{{/if}}{{#if showRole}}<td>Designer</td>{{/if}}{{#if showJoined}}<td>2019</td>{{/if}}<td>Active</td></tr>\n <tr><td>M. Iqbal</td>{{#if showEmail}}<td>m.iqbal@example.com</td>{{/if}}{{#if showRole}}<td>Manager</td>{{/if}}{{#if showJoined}}<td>2017</td>{{/if}}<td>Away</td></tr>\n <tr><td>S. Novak</td>{{#if showEmail}}<td>s.novak@example.com</td>{{/if}}{{#if showRole}}<td>Engineer</td>{{/if}}{{#if showJoined}}<td>2022</td>{{/if}}<td>Active</td></tr>\n </tbody>\n </table>\n </div>\n</div>\n<style>\n.cchz { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }\n.cchz__chooser { display: flex; flex-wrap: wrap; gap: 10px; border: 0; border-bottom: 1px solid #24143020; padding: 10px 14px; margin: 0; }\n.cchz__chooser legend { font-weight: 600; padding: 0 0 6px; width: 100%; }\n.cchz__opt { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }\n.cchz__opt input { accent-color: var(--accent); }\n.cchz__scroll { overflow-x: auto; }\n.cchz__table { border-collapse: collapse; width: 100%; }\n.cchz__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }\n.cchz__table th, .cchz__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }\n.cchz__table th { background: var(--accent); color: #FAF7F2; }\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 <fieldset class=\"flex flex-wrap gap-2.5 border-0 border-b border-[#24143020] px-3.5 py-2.5 m-0\">\n <legend class=\"font-semibold pb-1.5 w-full\">Columns</legend>\n <label class=\"inline-flex items-center gap-1 text-[13px]\"><input type=\"checkbox\" checked disabled class=\"[accent-color:var(--accent)]\"><span>Name</span></label>\n <label class=\"inline-flex items-center gap-1 text-[13px]\"><input type=\"checkbox\" {{#if showEmail}}checked{{/if}} disabled class=\"[accent-color:var(--accent)]\"><span>Email</span></label>\n <label class=\"inline-flex items-center gap-1 text-[13px]\"><input type=\"checkbox\" {{#if showRole}}checked{{/if}} disabled class=\"[accent-color:var(--accent)]\"><span>Role</span></label>\n <label class=\"inline-flex items-center gap-1 text-[13px]\"><input type=\"checkbox\" {{#if showJoined}}checked{{/if}} disabled class=\"[accent-color:var(--accent)]\"><span>Joined</span></label>\n <label class=\"inline-flex items-center gap-1 text-[13px]\"><input type=\"checkbox\" checked disabled class=\"[accent-color:var(--accent)]\"><span>Status</span></label>\n </fieldset>\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\">Name</th>\n {{#if showEmail}}<th scope=\"col\" class=\"p-3.5 text-left whitespace-nowrap\">Email</th>{{/if}}\n {{#if showRole}}<th scope=\"col\" class=\"p-3.5 text-left whitespace-nowrap\">Role</th>{{/if}}\n {{#if showJoined}}<th scope=\"col\" class=\"p-3.5 text-left whitespace-nowrap\">Joined</th>{{/if}}\n <th scope=\"col\" class=\"p-3.5 text-left whitespace-nowrap\">Status</th>\n </tr></thead>\n <tbody>\n <tr><td class=\"p-3.5 border-b border-[#24143020]\">A. Whitfield</td>{{#if showEmail}}<td class=\"p-3.5 border-b border-[#24143020]\">a.whitfield@example.com</td>{{/if}}{{#if showRole}}<td class=\"p-3.5 border-b border-[#24143020]\">Engineer</td>{{/if}}{{#if showJoined}}<td class=\"p-3.5 border-b border-[#24143020]\">2021</td>{{/if}}<td class=\"p-3.5 border-b border-[#24143020]\">Active</td></tr>\n <tr><td class=\"p-3.5 border-b border-[#24143020]\">R. Okafor</td>{{#if showEmail}}<td class=\"p-3.5 border-b border-[#24143020]\">r.okafor@example.com</td>{{/if}}{{#if showRole}}<td class=\"p-3.5 border-b border-[#24143020]\">Designer</td>{{/if}}{{#if showJoined}}<td class=\"p-3.5 border-b border-[#24143020]\">2019</td>{{/if}}<td class=\"p-3.5 border-b border-[#24143020]\">Active</td></tr>\n <tr><td class=\"p-3.5 border-b border-[#24143020]\">M. Iqbal</td>{{#if showEmail}}<td class=\"p-3.5 border-b border-[#24143020]\">m.iqbal@example.com</td>{{/if}}{{#if showRole}}<td class=\"p-3.5 border-b border-[#24143020]\">Manager</td>{{/if}}{{#if showJoined}}<td class=\"p-3.5 border-b border-[#24143020]\">2017</td>{{/if}}<td class=\"p-3.5 border-b border-[#24143020]\">Away</td></tr>\n <tr><td class=\"p-3.5 border-b border-[#24143020]\">S. Novak</td>{{#if showEmail}}<td class=\"p-3.5 border-b border-[#24143020]\">s.novak@example.com</td>{{/if}}{{#if showRole}}<td class=\"p-3.5 border-b border-[#24143020]\">Engineer</td>{{/if}}{{#if showJoined}}<td class=\"p-3.5 border-b border-[#24143020]\">2022</td>{{/if}}<td class=\"p-3.5 border-b border-[#24143020]\">Active</td></tr>\n </tbody>\n </table>\n </div>\n</div>", "react": "function ColumnChooser({\n caption = \"{{caption}}\",\n accent = \"{{accent}}\",\n showEmail = {{showEmail}},\n showRole = {{showRole}},\n showJoined = {{showJoined}},\n}) {\n const people = [\n { name: \"A. Whitfield\", email: \"a.whitfield@example.com\", role: \"Engineer\", joined: \"2021\", status: \"Active\" },\n { name: \"R. Okafor\", email: \"r.okafor@example.com\", role: \"Designer\", joined: \"2019\", status: \"Active\" },\n { name: \"M. Iqbal\", email: \"m.iqbal@example.com\", role: \"Manager\", joined: \"2017\", status: \"Away\" },\n { name: \"S. Novak\", email: \"s.novak@example.com\", role: \"Engineer\", joined: \"2022\", status: \"Active\" },\n ];\n const cell = { padding: \"10px 14px\", borderBottom: \"1px solid #24143020\", whiteSpace: \"nowrap\" };\n const opts = [\n [\"Name\", true, true],\n [\"Email\", showEmail, false],\n [\"Role\", showRole, false],\n [\"Joined\", showJoined, false],\n [\"Status\", true, true],\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 <fieldset style={{ display: \"flex\", flexWrap: \"wrap\", gap: 10, border: 0, borderBottom: \"1px solid #24143020\", padding: \"10px 14px\", margin: 0 }}>\n <legend style={{ fontWeight: 600, paddingBottom: 6, width: \"100%\" }}>Columns</legend>\n {opts.map(([label, checked]) => (\n <label key={label} style={{ display: \"inline-flex\", alignItems: \"center\", gap: 4, fontSize: 13 }}>\n <input type=\"checkbox\" checked={checked} disabled style={{ accentColor: accent }} readOnly /><span>{label}</span>\n </label>\n ))}\n </fieldset>\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 <th scope=\"col\" style={cell}>Name</th>\n {showEmail && <th scope=\"col\" style={cell}>Email</th>}\n {showRole && <th scope=\"col\" style={cell}>Role</th>}\n {showJoined && <th scope=\"col\" style={cell}>Joined</th>}\n <th scope=\"col\" style={cell}>Status</th>\n </tr>\n </thead>\n <tbody>\n {people.map((p) => (\n <tr key={p.name}>\n <td style={cell}>{p.name}</td>\n {showEmail && <td style={cell}>{p.email}</td>}\n {showRole && <td style={cell}>{p.role}</td>}\n {showJoined && <td style={cell}>{p.joined}</td>}\n <td style={cell}>{p.status}</td>\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n </div>\n );\n}" }