Column Header

Header identifying a column.

html

<div class="chdr" data-align="left" style="--accent:#241430;">
  <div class="chdr__scroll">
    <table class="chdr__table">
      <caption>Customer orders</caption>
      <thead><tr>
        <th scope="col" class="">Order</th>
        <th scope="col" class="">Customer</th>
        <th scope="col" class="">Status</th>
        <th scope="col" class="" aria-sort="ascending"><button type="button" class="chdr__sortbtn">Total <span aria-hidden="true">&#9650;</span></button></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>
        <tr><td>#1038</td><td>L. Duarte</td><td>Shipped</td><td>£96.20</td></tr>
        <tr><td>#1037</td><td>P. Andersson</td><td>Processing</td><td>£15.75</td></tr>
      </tbody>
    </table>
  </div>
</div>
<style>
.chdr { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }
.chdr__scroll { max-height: 180px; overflow: auto; }
.chdr__table { border-collapse: collapse; width: 100%; }
.chdr__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }
.chdr__table th, .chdr__table td { padding: 10px 14px; border-bottom: 1px solid #24143020; white-space: nowrap; }
.chdr__table th { background: var(--accent); color: #FAF7F2; top: 0; }
.chdr__sticky { position: sticky; }
.chdr[data-align="left"] th { text-align: left; }
.chdr[data-align="center"] th { text-align: center; }
.chdr[data-align="right"] th { text-align: right; }
.chdr__sortbtn { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; padding: 0; }
.chdr__sortbtn:hover { text-decoration: underline; }
.chdr__sortbtn:focus-visible { outline: 2px solid #FAF7F2; outline-offset: 2px; }
</style>

tailwind

<div class="max-w-[480px] rounded-[10px] border border-[#24143020] font-sans text-sm text-[#241430] bg-[#FAF7F2] overflow-hidden" data-align="left" style="--accent:#241430;">
  <div class="max-h-[180px] 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 class="text-[#FAF7F2]" style="background:#241430">
        <th scope="col" class="p-3.5 whitespace-nowrap top-0 chdr__th">Order</th>
        <th scope="col" class="p-3.5 whitespace-nowrap top-0 chdr__th">Customer</th>
        <th scope="col" class="p-3.5 whitespace-nowrap top-0 chdr__th">Status</th>
        <th scope="col" class="p-3.5 whitespace-nowrap top-0 chdr__th" aria-sort="ascending"><button type="button" class="bg-transparent border-0 font-inherit text-inherit cursor-pointer inline-flex gap-1 items-center p-0 hover:underline focus-visible:outline focus-visible:outline-2">Total <span aria-hidden="true">&#9650;</span></button></th>
      </tr></thead>
      <tbody>
        <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>
        <tr><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><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Processing</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">£128.50</td></tr>
        <tr><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><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Shipped</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">£22.00</td></tr>
        <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>
        <tr><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">#1038</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">L. Duarte</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">£96.20</td></tr>
        <tr><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">#1037</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">P. Andersson</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Processing</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">£15.75</td></tr>
      </tbody>
    </table>
  </div>
</div>
<style>
[data-align="left"] th { text-align: left; }
[data-align="center"] th { text-align: center; }
[data-align="right"] th { text-align: right; }
</style>

react

function ColumnHeader({
  caption = "Customer orders",
  accent = "#241430",
  align = "left",
  sortIndicator = true,
  sticky = false,
}) {
  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"],
    ["#1038", "L. Duarte", "Shipped", "£96.20"],
    ["#1037", "P. Andersson", "Processing", "£15.75"],
  ];
  const th = { padding: "10px 14px", whiteSpace: "nowrap", textAlign: align, position: sticky ? "sticky" : "static", top: 0, background: accent, color: "#FAF7F2" };
  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={{ maxHeight: 180, 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={th}>Order</th>
              <th scope="col" style={th}>Customer</th>
              <th scope="col" style={th}>Status</th>
              <th scope="col" style={th} aria-sort={sortIndicator ? "ascending" : "none"}>
                <button type="button" style={{ background: "none", border: 0, font: "inherit", color: "inherit", cursor: "pointer", display: "inline-flex", gap: 4, alignItems: "center", padding: 0 }}>
                  Total {sortIndicator && <span aria-hidden="true">&#9650;</span>}
                </button>
              </th>
            </tr>
          </thead>
          <tbody>
            {rows.map((row) => (
              <tr key={row[0]}>{row.map((cell, j) => <td key={j} style={{ padding: "10px 14px", borderBottom: "1px solid #24143020", whiteSpace: "nowrap" }}>{cell}</td>)}</tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}