Column Reordering

Changes column order.

html

<div class="creo" data-active="Status" style="--accent:#241430;">
  <div class="creo__scroll">
    <table class="creo__table">
      <caption>Customer orders</caption>
      <thead>
        
        
        <tr>
          <th scope="col">Order</th>
          <th scope="col" class="creo__th--customer"><span class="creo__handle" aria-hidden="true">&#10021;</span>Customer</th>
          <th scope="col" class="creo__th--status"><span class="creo__handle" aria-hidden="true">&#10021;</span>Status</th>
          <th scope="col" class="creo__th--total"><span class="creo__handle" aria-hidden="true">&#10021;</span>Total</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>
.creo { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }
.creo__scroll { overflow-x: auto; }
.creo__table { border-collapse: collapse; width: 100%; }
.creo__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }
.creo__table th, .creo__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }
.creo__table th { background: var(--accent); color: #FAF7F2; cursor: grab; }
.creo__handle { margin-right: 6px; opacity: .8; }
.creo[data-active="Customer"] .creo__th--customer,
.creo[data-active="Status"] .creo__th--status,
.creo[data-active="Total"] .creo__th--total { outline: 2px dashed #FAF7F2; outline-offset: -3px; }
</style>

tailwind

<div class="max-w-[480px] rounded-[10px] border border-[#24143020] font-sans text-sm text-[#241430] bg-[#FAF7F2] overflow-hidden" data-active="Status" style="--accent:#241430;">
  <div class="overflow-x-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 text-left whitespace-nowrap cursor-grab">Order</th>
          <th scope="col" class="creo__th--customer p-3.5 text-left whitespace-nowrap cursor-grab"><span aria-hidden="true" class="mr-1.5 opacity-80">&#10021;</span>Customer</th>
          <th scope="col" class="creo__th--status p-3.5 text-left whitespace-nowrap cursor-grab"><span aria-hidden="true" class="mr-1.5 opacity-80">&#10021;</span>Status</th>
          <th scope="col" class="creo__th--total p-3.5 text-left whitespace-nowrap cursor-grab"><span aria-hidden="true" class="mr-1.5 opacity-80">&#10021;</span>Total</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>
        
      </tbody>
    </table>
  </div>
</div>
<style>
[data-active="Customer"] .creo__th--customer,
[data-active="Status"] .creo__th--status,
[data-active="Total"] .creo__th--total { outline: 2px dashed #FAF7F2; outline-offset: -3px; }
</style>

react

function ColumnReordering({
  caption = "Customer orders",
  accent = "#241430",
  swapped = false,
  activeColumn = "Status",
  showHandles = true,
}) {
  const cols = swapped ? ["Order", "Status", "Customer", "Total"] : ["Order", "Customer", "Status", "Total"];
  const dataRows = [
    ["#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 order = swapped ? [0, 2, 1, 3] : [0, 1, 2, 3];
  const th = { padding: "10px 14px", textAlign: "left", whiteSpace: "nowrap", cursor: "grab" };
  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={{ 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" }}>
              {cols.map((c) => (
                <th key={c} scope="col" style={{ ...th, outline: c !== "Order" && activeColumn === c ? "2px dashed #FAF7F2" : "none", outlineOffset: -3 }}>
                  {showHandles && c !== "Order" && <span aria-hidden="true" style={{ marginRight: 6, opacity: .8 }}>&#10021;</span>}{c}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {dataRows.map((row) => (
              <tr key={row[0]}>{order.map((i) => <td key={i} style={{ padding: "10px 14px", borderBottom: "1px solid #24143020", whiteSpace: "nowrap" }}>{row[i]}</td>)}</tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}