Column Actions

Actions attached to a column.

html

<div class="cact" data-menu="Total" style="--accent:#241430;">
  <div class="cact__scroll">
    <table class="cact__table">
      <caption>Customer orders</caption>
      <thead><tr>
        <th scope="col">Order</th>
        <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"><button type="button" role="menuitem" class="cact__item">Sort ascending</button><button type="button" role="menuitem" class="cact__item">Pin left</button><button type="button" role="menuitem" class="cact__item">Autosize</button><button type="button" role="menuitem" class="cact__item">Hide column</button></div></details></th>
        <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"><button type="button" role="menuitem" class="cact__item">Sort ascending</button><button type="button" role="menuitem" class="cact__item">Pin left</button><button type="button" role="menuitem" class="cact__item">Autosize</button><button type="button" role="menuitem" class="cact__item">Hide column</button></div></details></th>
        <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"><button type="button" role="menuitem" class="cact__item">Sort ascending</button><button type="button" role="menuitem" class="cact__item">Pin left</button><button type="button" role="menuitem" class="cact__item">Autosize</button><button type="button" role="menuitem" class="cact__item">Hide column</button></div></details></th>
      </tr></thead>
      <tbody>
        <tr><td>#1042</td><td>A. Whitfield</td><td>Shipped</td><td>£64.00</td></tr>
        <tr><td>#1041</td><td>R. Okafor</td><td>Processing</td><td>£128.50</td></tr>
        <tr><td>#1040</td><td>M. Iqbal</td><td>Shipped</td><td>£22.00</td></tr>
        <tr><td>#1039</td><td>S. Novak</td><td>Refunded</td><td>£40.00</td></tr>
      </tbody>
    </table>
  </div>
</div>
<style>
.cact { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }
.cact__scroll { overflow: auto; }
.cact__table { border-collapse: collapse; width: 100%; }
.cact__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }
.cact__table th, .cact__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }
.cact__th { position: relative; }
.cact[data-menu="Customer"] .cact__th--customer,
.cact[data-menu="Status"] .cact__th--status,
.cact[data-menu="Total"] .cact__th--total { background: var(--accent); color: #FAF7F2; }
.cact__label { margin-right: 18px; }
.cact__menu { display: inline-block; position: absolute; right: 6px; top: 8px; }
.cact__menu summary { list-style: none; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.cact__menu summary::-webkit-details-marker { display: none; }
.cact__menu summary:hover, .cact__menu summary:focus-visible { background: #FAF7F230; outline: none; }
.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; }
.cact__item { text-align: left; background: none; border: 0; padding: 6px 8px; border-radius: 4px; font: inherit; cursor: pointer; }
.cact__item:hover, .cact__item:focus-visible { background: #24143012; outline: none; }
</style>

tailwind

<div class="max-w-[480px] rounded-[10px] border border-[#24143020] font-sans text-sm text-[#241430] bg-[#FAF7F2] overflow-hidden" data-menu="Total" style="--accent:#241430;">
  <div class="overflow-auto">
    <table class="border-collapse w-full">
      <caption class="text-left font-semibold px-3.5 py-2.5">Customer orders</caption>
      <thead><tr>
        <th scope="col" class="p-3.5 text-left border-b border-[#24143020] whitespace-nowrap">Order</th>
        <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"><button type="button" role="menuitem" class="cact__item">Sort ascending</button><button type="button" role="menuitem" class="cact__item">Pin left</button><button type="button" role="menuitem" class="cact__item">Autosize</button><button type="button" role="menuitem" class="cact__item">Hide column</button></div></details></th>
        <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"><button type="button" role="menuitem" class="cact__item">Sort ascending</button><button type="button" role="menuitem" class="cact__item">Pin left</button><button type="button" role="menuitem" class="cact__item">Autosize</button><button type="button" role="menuitem" class="cact__item">Hide column</button></div></details></th>
        <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"><button type="button" role="menuitem" class="cact__item">Sort ascending</button><button type="button" role="menuitem" class="cact__item">Pin left</button><button type="button" role="menuitem" class="cact__item">Autosize</button><button type="button" role="menuitem" class="cact__item">Hide column</button></div></details></th>
      </tr></thead>
      <tbody>
        <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>
        <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>
        <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>
        <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>
      </tbody>
    </table>
  </div>
</div>
<style>
details > summary::-webkit-details-marker { display: none; }
[data-menu="Customer"] .cact__th--customer,
[data-menu="Status"] .cact__th--status,
[data-menu="Total"] .cact__th--total { background: var(--accent); color: #FAF7F2; }
</style>

react

function ColumnActions({
  caption = "Customer orders",
  accent = "#241430",
  menuColumn = "Total",
  sortAction = true,
  pinAction = true,
}) {
  const cols = ["Customer", "Status", "Total"];
  const rows = [
    ["#1042", "A. Whitfield", "Shipped", "£64.00"],
    ["#1041", "R. Okafor", "Processing", "£128.50"],
    ["#1040", "M. Iqbal", "Shipped", "£22.00"],
    ["#1039", "S. Novak", "Refunded", "£40.00"],
  ];
  const cellStyle = { padding: "10px 14px", borderBottom: "1px solid #24143020", whiteSpace: "nowrap" };
  return (
    <div style={{ maxWidth: 480, borderRadius: 10, border: "1px solid #24143020", overflow: "hidden", font: "14px system-ui, sans-serif", color: "#241430", background: "#FAF7F2" }}>
      <div style={{ overflow: "auto" }}>
        <table style={{ borderCollapse: "collapse", width: "100%" }}>
          <caption style={{ textAlign: "left", fontWeight: 600, padding: "10px 14px" }}>{caption}</caption>
          <thead>
            <tr>
              <th scope="col" style={cellStyle}>Order</th>
              {cols.map((c) => (
                <th key={c} scope="col" style={{ ...cellStyle, position: "relative", background: menuColumn === c ? accent : "transparent", color: menuColumn === c ? "#FAF7F2" : "inherit" }}>
                  <span style={{ marginRight: 18 }}>{c}</span>
                  <details style={{ display: "inline-block", position: "absolute", right: 6, top: 8 }}>
                    <summary aria-label={`Column actions for ${c}`} style={{ listStyle: "none", cursor: "pointer", padding: "2px 6px", borderRadius: 4 }}>&#8942;</summary>
                    <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" }}>
                      {sortAction && <button type="button" role="menuitem" style={{ textAlign: "left", background: "none", border: 0, padding: "6px 8px", font: "inherit", cursor: "pointer" }}>Sort ascending</button>}
                      {pinAction && <button type="button" role="menuitem" style={{ textAlign: "left", background: "none", border: 0, padding: "6px 8px", font: "inherit", cursor: "pointer" }}>Pin left</button>}
                      <button type="button" role="menuitem" style={{ textAlign: "left", background: "none", border: 0, padding: "6px 8px", font: "inherit", cursor: "pointer" }}>Autosize</button>
                      <button type="button" role="menuitem" style={{ textAlign: "left", background: "none", border: 0, padding: "6px 8px", font: "inherit", cursor: "pointer" }}>Hide column</button>
                    </div>
                  </details>
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((row) => (
              <tr key={row[0]}>{row.map((cell, j) => <td key={j} style={cellStyle}>{cell}</td>)}</tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}