Edit Column Actions

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<div class=\"cact\" data-menu=\"{{menuColumn}}\" style=\"--accent:{{accent}};\">\n  <div class=\"cact__scroll\">\n    <table class=\"cact__table\">\n      <caption>{{caption}}</caption>\n      <thead><tr>\n        <th scope=\"col\">Order</th>\n        <th scope=\"col\" class=\"cact__th cact__th--customer\"><span class=\"cact__label\">Customer</span><details class=\"cact__menu\"><summary aria-label=\"Column actions for Customer\">&#8942;</summary><div class=\"cact__list\" role=\"menu\">{{#if sortAction}}<button type=\"button\" role=\"menuitem\" class=\"cact__item\">Sort ascending</button>{{/if}}{{#if pinAction}}<button type=\"button\" role=\"menuitem\" class=\"cact__item\">Pin left</button>{{/if}}<button type=\"button\" role=\"menuitem\" class=\"cact__item\">Autosize</button><button type=\"button\" role=\"menuitem\" class=\"cact__item\">Hide column</button></div></details></th>\n        <th scope=\"col\" class=\"cact__th cact__th--status\"><span class=\"cact__label\">Status</span><details class=\"cact__menu\"><summary aria-label=\"Column actions for Status\">&#8942;</summary><div class=\"cact__list\" role=\"menu\">{{#if sortAction}}<button type=\"button\" role=\"menuitem\" class=\"cact__item\">Sort ascending</button>{{/if}}{{#if pinAction}}<button type=\"button\" role=\"menuitem\" class=\"cact__item\">Pin left</button>{{/if}}<button type=\"button\" role=\"menuitem\" class=\"cact__item\">Autosize</button><button type=\"button\" role=\"menuitem\" class=\"cact__item\">Hide column</button></div></details></th>\n        <th scope=\"col\" class=\"cact__th cact__th--total\"><span class=\"cact__label\">Total</span><details class=\"cact__menu\"><summary aria-label=\"Column actions for Total\">&#8942;</summary><div class=\"cact__list\" role=\"menu\">{{#if sortAction}}<button type=\"button\" role=\"menuitem\" class=\"cact__item\">Sort ascending</button>{{/if}}{{#if pinAction}}<button type=\"button\" role=\"menuitem\" class=\"cact__item\">Pin left</button>{{/if}}<button type=\"button\" role=\"menuitem\" class=\"cact__item\">Autosize</button><button type=\"button\" role=\"menuitem\" class=\"cact__item\">Hide column</button></div></details></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      </tbody>\n    </table>\n  </div>\n</div>\n<style>\n.cact { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }\n.cact__scroll { overflow: auto; }\n.cact__table { border-collapse: collapse; width: 100%; }\n.cact__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }\n.cact__table th, .cact__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }\n.cact__th { position: relative; }\n.cact[data-menu=\"Customer\"] .cact__th--customer,\n.cact[data-menu=\"Status\"] .cact__th--status,\n.cact[data-menu=\"Total\"] .cact__th--total { background: var(--accent); color: #FAF7F2; }\n.cact__label { margin-right: 18px; }\n.cact__menu { display: inline-block; position: absolute; right: 6px; top: 8px; }\n.cact__menu summary { list-style: none; cursor: pointer; padding: 2px 6px; border-radius: 4px; }\n.cact__menu summary::-webkit-details-marker { display: none; }\n.cact__menu summary:hover, .cact__menu summary:focus-visible { background: #FAF7F230; outline: none; }\n.cact__list { position: absolute; right: 0; top: 100%; margin-top: 4px; background: #FAF7F2; color: #241430; border: 1px solid #24143020; border-radius: 8px; box-shadow: 0 6px 16px #24143026; min-width: 140px; padding: 4px; z-index: 1; display: flex; flex-direction: column; }\n.cact__item { text-align: left; background: none; border: 0; padding: 6px 8px; border-radius: 4px; font: inherit; cursor: pointer; }\n.cact__item:hover, .cact__item:focus-visible { background: #24143012; outline: none; }\n</style>",
  "tailwind": "<div class=\"max-w-[480px] rounded-[10px] border border-[#24143020] font-sans text-sm text-[#241430] bg-[#FAF7F2] overflow-hidden\" data-menu=\"{{menuColumn}}\" style=\"--accent:{{accent}};\">\n  <div class=\"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>\n        <th scope=\"col\" class=\"p-3.5 text-left border-b border-[#24143020] whitespace-nowrap\">Order</th>\n        <th scope=\"col\" class=\"cact__th--customer p-3.5 text-left border-b border-[#24143020] whitespace-nowrap relative\"><span class=\"mr-4\">Customer</span><details class=\"inline-block absolute right-1.5 top-1\"><summary class=\"list-none cursor-pointer px-1.5 py-0.5 rounded hover:bg-white/20\" aria-label=\"Column actions for Customer\">&#8942;</summary><div role=\"menu\" class=\"absolute right-0 top-full mt-1 bg-[#FAF7F2] text-[#241430] border border-[#24143020] rounded-lg shadow-lg min-w-[140px] p-1 flex flex-col z-10\">{{#if sortAction}}<button type=\"button\" role=\"menuitem\" class=\"cact__item\">Sort ascending</button>{{/if}}{{#if pinAction}}<button type=\"button\" role=\"menuitem\" class=\"cact__item\">Pin left</button>{{/if}}<button type=\"button\" role=\"menuitem\" class=\"cact__item\">Autosize</button><button type=\"button\" role=\"menuitem\" class=\"cact__item\">Hide column</button></div></details></th>\n        <th scope=\"col\" class=\"cact__th--status p-3.5 text-left border-b border-[#24143020] whitespace-nowrap relative\"><span class=\"mr-4\">Status</span><details class=\"inline-block absolute right-1.5 top-1\"><summary class=\"list-none cursor-pointer px-1.5 py-0.5 rounded hover:bg-white/20\" aria-label=\"Column actions for Status\">&#8942;</summary><div role=\"menu\" class=\"absolute right-0 top-full mt-1 bg-[#FAF7F2] text-[#241430] border border-[#24143020] rounded-lg shadow-lg min-w-[140px] p-1 flex flex-col z-10\">{{#if sortAction}}<button type=\"button\" role=\"menuitem\" class=\"cact__item\">Sort ascending</button>{{/if}}{{#if pinAction}}<button type=\"button\" role=\"menuitem\" class=\"cact__item\">Pin left</button>{{/if}}<button type=\"button\" role=\"menuitem\" class=\"cact__item\">Autosize</button><button type=\"button\" role=\"menuitem\" class=\"cact__item\">Hide column</button></div></details></th>\n        <th scope=\"col\" class=\"cact__th--total p-3.5 text-left border-b border-[#24143020] whitespace-nowrap relative\"><span class=\"mr-4\">Total</span><details class=\"inline-block absolute right-1.5 top-1\"><summary class=\"list-none cursor-pointer px-1.5 py-0.5 rounded hover:bg-white/20\" aria-label=\"Column actions for Total\">&#8942;</summary><div role=\"menu\" class=\"absolute right-0 top-full mt-1 bg-[#FAF7F2] text-[#241430] border border-[#24143020] rounded-lg shadow-lg min-w-[140px] p-1 flex flex-col z-10\">{{#if sortAction}}<button type=\"button\" role=\"menuitem\" class=\"cact__item\">Sort ascending</button>{{/if}}{{#if pinAction}}<button type=\"button\" role=\"menuitem\" class=\"cact__item\">Pin left</button>{{/if}}<button type=\"button\" role=\"menuitem\" class=\"cact__item\">Autosize</button><button type=\"button\" role=\"menuitem\" class=\"cact__item\">Hide column</button></div></details></th>\n      </tr></thead>\n      <tbody>\n        <tr><td class=\"p-3.5 border-b border-[#24143020]\">#1042</td><td class=\"p-3.5 border-b border-[#24143020]\">A. Whitfield</td><td class=\"p-3.5 border-b border-[#24143020]\">Shipped</td><td class=\"p-3.5 border-b border-[#24143020]\">£64.00</td></tr>\n        <tr><td class=\"p-3.5 border-b border-[#24143020]\">#1041</td><td class=\"p-3.5 border-b border-[#24143020]\">R. Okafor</td><td class=\"p-3.5 border-b border-[#24143020]\">Processing</td><td class=\"p-3.5 border-b border-[#24143020]\">£128.50</td></tr>\n        <tr><td class=\"p-3.5 border-b border-[#24143020]\">#1040</td><td class=\"p-3.5 border-b border-[#24143020]\">M. Iqbal</td><td class=\"p-3.5 border-b border-[#24143020]\">Shipped</td><td class=\"p-3.5 border-b border-[#24143020]\">£22.00</td></tr>\n        <tr><td class=\"p-3.5 border-b border-[#24143020]\">#1039</td><td class=\"p-3.5 border-b border-[#24143020]\">S. Novak</td><td class=\"p-3.5 border-b border-[#24143020]\">Refunded</td><td class=\"p-3.5 border-b border-[#24143020]\">£40.00</td></tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n<style>\ndetails > summary::-webkit-details-marker { display: none; }\n[data-menu=\"Customer\"] .cact__th--customer,\n[data-menu=\"Status\"] .cact__th--status,\n[data-menu=\"Total\"] .cact__th--total { background: var(--accent); color: #FAF7F2; }\n</style>",
  "react": "function ColumnActions({\n  caption = \"{{caption}}\",\n  accent = \"{{accent}}\",\n  menuColumn = \"{{menuColumn}}\",\n  sortAction = {{sortAction}},\n  pinAction = {{pinAction}},\n}) {\n  const cols = [\"Customer\", \"Status\", \"Total\"];\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 cellStyle = { padding: \"10px 14px\", borderBottom: \"1px solid #24143020\", whiteSpace: \"nowrap\" };\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={{ 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={cellStyle}>Order</th>\n              {cols.map((c) => (\n                <th key={c} scope=\"col\" style={{ ...cellStyle, position: \"relative\", background: menuColumn === c ? accent : \"transparent\", color: menuColumn === c ? \"#FAF7F2\" : \"inherit\" }}>\n                  <span style={{ marginRight: 18 }}>{c}</span>\n                  <details style={{ display: \"inline-block\", position: \"absolute\", right: 6, top: 8 }}>\n                    <summary aria-label={`Column actions for ${c}`} style={{ listStyle: \"none\", cursor: \"pointer\", padding: \"2px 6px\", borderRadius: 4 }}>&#8942;</summary>\n                    <div role=\"menu\" style={{ position: \"absolute\", right: 0, top: \"100%\", marginTop: 4, background: \"#FAF7F2\", color: \"#241430\", border: \"1px solid #24143020\", borderRadius: 8, minWidth: 140, padding: 4, display: \"flex\", flexDirection: \"column\" }}>\n                      {sortAction && <button type=\"button\" role=\"menuitem\" style={{ textAlign: \"left\", background: \"none\", border: 0, padding: \"6px 8px\", font: \"inherit\", cursor: \"pointer\" }}>Sort ascending</button>}\n                      {pinAction && <button type=\"button\" role=\"menuitem\" style={{ textAlign: \"left\", background: \"none\", border: 0, padding: \"6px 8px\", font: \"inherit\", cursor: \"pointer\" }}>Pin left</button>}\n                      <button type=\"button\" role=\"menuitem\" style={{ textAlign: \"left\", background: \"none\", border: 0, padding: \"6px 8px\", font: \"inherit\", cursor: \"pointer\" }}>Autosize</button>\n                      <button type=\"button\" role=\"menuitem\" style={{ textAlign: \"left\", background: \"none\", border: 0, padding: \"6px 8px\", font: \"inherit\", cursor: \"pointer\" }}>Hide column</button>\n                    </div>\n                  </details>\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {rows.map((row) => (\n              <tr key={row[0]}>{row.map((cell, j) => <td key={j} style={cellStyle}>{cell}</td>)}</tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n}"
}

History