Column Chooser

Selects visible columns.

Columns
Team directory
Name Email Status
A. Whitfielda.whitfield@example.comActive
R. Okaforr.okafor@example.comActive
M. Iqbalm.iqbal@example.comAway
S. Novaks.novak@example.comActive

html

<div class="cchz" style="--accent:#241430;">
  <fieldset class="cchz__chooser">
    <legend>Columns</legend>
    <label class="cchz__opt"><input type="checkbox" checked disabled><span>Name</span></label>
    <label class="cchz__opt"><input type="checkbox" checked disabled><span>Email</span></label>
    <label class="cchz__opt"><input type="checkbox"  disabled><span>Role</span></label>
    <label class="cchz__opt"><input type="checkbox"  disabled><span>Joined</span></label>
    <label class="cchz__opt"><input type="checkbox" checked disabled><span>Status</span></label>
  </fieldset>
  <div class="cchz__scroll">
    <table class="cchz__table">
      <caption>Team directory</caption>
      <thead><tr>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        
        
        <th scope="col">Status</th>
      </tr></thead>
      <tbody>
        <tr><td>A. Whitfield</td><td>a.whitfield@example.com</td><td>Active</td></tr>
        <tr><td>R. Okafor</td><td>r.okafor@example.com</td><td>Active</td></tr>
        <tr><td>M. Iqbal</td><td>m.iqbal@example.com</td><td>Away</td></tr>
        <tr><td>S. Novak</td><td>s.novak@example.com</td><td>Active</td></tr>
      </tbody>
    </table>
  </div>
</div>
<style>
.cchz { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }
.cchz__chooser { display: flex; flex-wrap: wrap; gap: 10px; border: 0; border-bottom: 1px solid #24143020; padding: 10px 14px; margin: 0; }
.cchz__chooser legend { font-weight: 600; padding: 0 0 6px; width: 100%; }
.cchz__opt { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.cchz__opt input { accent-color: var(--accent); }
.cchz__scroll { overflow-x: auto; }
.cchz__table { border-collapse: collapse; width: 100%; }
.cchz__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }
.cchz__table th, .cchz__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }
.cchz__table th { background: var(--accent); color: #FAF7F2; }
</style>

tailwind

<div class="max-w-[480px] rounded-[10px] border border-[#24143020] font-sans text-sm text-[#241430] bg-[#FAF7F2] overflow-hidden" style="--accent:#241430;">
  <fieldset class="flex flex-wrap gap-2.5 border-0 border-b border-[#24143020] px-3.5 py-2.5 m-0">
    <legend class="font-semibold pb-1.5 w-full">Columns</legend>
    <label class="inline-flex items-center gap-1 text-[13px]"><input type="checkbox" checked disabled class="[accent-color:var(--accent)]"><span>Name</span></label>
    <label class="inline-flex items-center gap-1 text-[13px]"><input type="checkbox" checked disabled class="[accent-color:var(--accent)]"><span>Email</span></label>
    <label class="inline-flex items-center gap-1 text-[13px]"><input type="checkbox"  disabled class="[accent-color:var(--accent)]"><span>Role</span></label>
    <label class="inline-flex items-center gap-1 text-[13px]"><input type="checkbox"  disabled class="[accent-color:var(--accent)]"><span>Joined</span></label>
    <label class="inline-flex items-center gap-1 text-[13px]"><input type="checkbox" checked disabled class="[accent-color:var(--accent)]"><span>Status</span></label>
  </fieldset>
  <div class="overflow-x-auto">
    <table class="border-collapse w-full">
      <caption class="text-left font-semibold px-3.5 py-2.5">Team directory</caption>
      <thead><tr class="text-[#FAF7F2]" style="background:#241430">
        <th scope="col" class="p-3.5 text-left whitespace-nowrap">Name</th>
        <th scope="col" class="p-3.5 text-left whitespace-nowrap">Email</th>
        
        
        <th scope="col" class="p-3.5 text-left whitespace-nowrap">Status</th>
      </tr></thead>
      <tbody>
        <tr><td class="p-3.5 border-b border-[#24143020]">A. Whitfield</td><td class="p-3.5 border-b border-[#24143020]">a.whitfield@example.com</td><td class="p-3.5 border-b border-[#24143020]">Active</td></tr>
        <tr><td class="p-3.5 border-b border-[#24143020]">R. Okafor</td><td class="p-3.5 border-b border-[#24143020]">r.okafor@example.com</td><td class="p-3.5 border-b border-[#24143020]">Active</td></tr>
        <tr><td class="p-3.5 border-b border-[#24143020]">M. Iqbal</td><td class="p-3.5 border-b border-[#24143020]">m.iqbal@example.com</td><td class="p-3.5 border-b border-[#24143020]">Away</td></tr>
        <tr><td class="p-3.5 border-b border-[#24143020]">S. Novak</td><td class="p-3.5 border-b border-[#24143020]">s.novak@example.com</td><td class="p-3.5 border-b border-[#24143020]">Active</td></tr>
      </tbody>
    </table>
  </div>
</div>

react

function ColumnChooser({
  caption = "Team directory",
  accent = "#241430",
  showEmail = true,
  showRole = false,
  showJoined = false,
}) {
  const people = [
    { name: "A. Whitfield", email: "a.whitfield@example.com", role: "Engineer", joined: "2021", status: "Active" },
    { name: "R. Okafor", email: "r.okafor@example.com", role: "Designer", joined: "2019", status: "Active" },
    { name: "M. Iqbal", email: "m.iqbal@example.com", role: "Manager", joined: "2017", status: "Away" },
    { name: "S. Novak", email: "s.novak@example.com", role: "Engineer", joined: "2022", status: "Active" },
  ];
  const cell = { padding: "10px 14px", borderBottom: "1px solid #24143020", whiteSpace: "nowrap" };
  const opts = [
    ["Name", true, true],
    ["Email", showEmail, false],
    ["Role", showRole, false],
    ["Joined", showJoined, false],
    ["Status", true, true],
  ];
  return (
    <div style={{ maxWidth: 480, borderRadius: 10, border: "1px solid #24143020", overflow: "hidden", font: "14px system-ui, sans-serif", color: "#241430", background: "#FAF7F2" }}>
      <fieldset style={{ display: "flex", flexWrap: "wrap", gap: 10, border: 0, borderBottom: "1px solid #24143020", padding: "10px 14px", margin: 0 }}>
        <legend style={{ fontWeight: 600, paddingBottom: 6, width: "100%" }}>Columns</legend>
        {opts.map(([label, checked]) => (
          <label key={label} style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 13 }}>
            <input type="checkbox" checked={checked} disabled style={{ accentColor: accent }} readOnly /><span>{label}</span>
          </label>
        ))}
      </fieldset>
      <div style={{ overflowX: "auto" }}>
        <table style={{ borderCollapse: "collapse", width: "100%" }}>
          <caption style={{ textAlign: "left", fontWeight: 600, padding: "10px 14px" }}>{caption}</caption>
          <thead>
            <tr style={{ background: accent, color: "#FAF7F2" }}>
              <th scope="col" style={cell}>Name</th>
              {showEmail && <th scope="col" style={cell}>Email</th>}
              {showRole && <th scope="col" style={cell}>Role</th>}
              {showJoined && <th scope="col" style={cell}>Joined</th>}
              <th scope="col" style={cell}>Status</th>
            </tr>
          </thead>
          <tbody>
            {people.map((p) => (
              <tr key={p.name}>
                <td style={cell}>{p.name}</td>
                {showEmail && <td style={cell}>{p.email}</td>}
                {showRole && <td style={cell}>{p.role}</td>}
                {showJoined && <td style={cell}>{p.joined}</td>}
                <td style={cell}>{p.status}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}