Custom View

User-defined representation of data.

html

<div class="cview cview--table">
  <p class="cview__name">&#9733; My open deals <span class="cview__count">3</span></p>
  <table class="cview__table">
    <tr><td>Acme Co</td><td>$4,200</td></tr>
    <tr><td>Globex</td><td>$1,800</td></tr>
    <tr><td>Initech</td><td>$9,050</td></tr>
  </table>
  <div class="cview__cards">
    <div class="cview__card" style="border-top-color:#F5C2E0;">Acme Co<b>$4,200</b></div>
    <div class="cview__card" style="border-top-color:#F5C2E0;">Globex<b>$1,800</b></div>
    <div class="cview__card" style="border-top-color:#F5C2E0;">Initech<b>$9,050</b></div>
  </div>
  <ul class="cview__list">
    <li><span class="cview__dot" style="background:#F5C2E0;"></span>Acme Co &mdash; $4,200</li>
    <li><span class="cview__dot" style="background:#F5C2E0;"></span>Globex &mdash; $1,800</li>
    <li><span class="cview__dot" style="background:#F5C2E0;"></span>Initech &mdash; $9,050</li>
  </ul>
</div>
<style>
.cview { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.cview__name { margin: 0 0 12px; font-weight: 700; }
.cview__count { font-size: 10px; color: #24143099; font-weight: 400; }
.cview__table, .cview__cards, .cview__list { display: none; }
.cview__table { width: 100%; border-collapse: collapse; }
.cview__table td { padding: 6px 4px; border-bottom: 1px solid #24143014; }
.cview__cards { display: none; gap: 8px; }
.cview__card { flex: 1; padding: 10px; border-radius: 8px; background: #ffffff; border: 1px solid #24143018; border-top: 4px solid; text-align: center; }
.cview__card b { display: block; margin-top: 4px; }
.cview__list { list-style: none; margin: 0; padding: 0; }
.cview__list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.cview__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cview--table .cview__table { display: table; }
.cview--cards .cview__cards { display: flex; }
.cview--list .cview__list { display: block; }
</style>

tailwind

<div class="cviewtw cviewtw--table font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border">
  <p class="m-0 mb-3 font-bold">&#9733; My open deals <span class="text-[10px] text-[#24143099] font-normal">3</span></p>
  <table class="cviewtw__table hidden w-full border-collapse"><tr><td class="py-1.5 px-1 border-b border-[#24143014]">Acme Co</td><td class="py-1.5 px-1 border-b border-[#24143014]">$4,200</td></tr><tr><td class="py-1.5 px-1 border-b border-[#24143014]">Globex</td><td class="py-1.5 px-1 border-b border-[#24143014]">$1,800</td></tr><tr><td class="py-1.5 px-1">Initech</td><td class="py-1.5 px-1">$9,050</td></tr></table>
  <div class="cviewtw__cards hidden gap-2">
    <div class="flex-1 p-2.5 rounded-lg bg-white border border-[#24143018] border-t-4 text-center" style="border-top-color:#F5C2E0;">Acme Co<b class="block mt-1">$4,200</b></div>
    <div class="flex-1 p-2.5 rounded-lg bg-white border border-[#24143018] border-t-4 text-center" style="border-top-color:#F5C2E0;">Globex<b class="block mt-1">$1,800</b></div>
    <div class="flex-1 p-2.5 rounded-lg bg-white border border-[#24143018] border-t-4 text-center" style="border-top-color:#F5C2E0;">Initech<b class="block mt-1">$9,050</b></div>
  </div>
  <ul class="cviewtw__list hidden list-none m-0 p-0">
    <li class="flex items-center gap-2 py-1.5"><span class="w-2 h-2 rounded-full shrink-0" style="background:#F5C2E0;"></span>Acme Co &mdash; $4,200</li>
    <li class="flex items-center gap-2 py-1.5"><span class="w-2 h-2 rounded-full shrink-0" style="background:#F5C2E0;"></span>Globex &mdash; $1,800</li>
    <li class="flex items-center gap-2 py-1.5"><span class="w-2 h-2 rounded-full shrink-0" style="background:#F5C2E0;"></span>Initech &mdash; $9,050</li>
  </ul>
</div>
<style>
.cviewtw--table .cviewtw__table { display: table; }
.cviewtw--cards .cviewtw__cards { display: flex; }
.cviewtw--list .cviewtw__list { display: block; }
</style>

react

export function CustomView({
  viewType = "table",
  accent = "#F5C2E0",
  showCount = true,
  viewName = "My open deals",
}) {
  const rows = [["Acme Co", "$4,200"], ["Globex", "$1,800"], ["Initech", "$9,050"]];
  return (
    <div style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 12px", fontWeight: 700 }}>&#9733; {viewName}{showCount && <span style={{ fontSize: 10, color: "#24143099", fontWeight: 400 }}> 3</span>}</p>
      {viewType === "table" && (
        <table style={{ width: "100%", borderCollapse: "collapse" }}>
          <tbody>{rows.map(([n, v]) => <tr key={n}><td style={{ padding: "6px 4px", borderBottom: "1px solid #24143014" }}>{n}</td><td style={{ padding: "6px 4px", borderBottom: "1px solid #24143014" }}>{v}</td></tr>)}</tbody>
        </table>
      )}
      {viewType === "cards" && (
        <div style={{ display: "flex", gap: 8 }}>
          {rows.map(([n, v]) => <div key={n} style={{ flex: 1, padding: 10, borderRadius: 8, background: "#ffffff", border: "1px solid #24143018", borderTop: `4px solid ${accent}`, textAlign: "center" }}>{n}<b style={{ display: "block", marginTop: 4 }}>{v}</b></div>)}
        </div>
      )}
      {viewType === "list" && (
        <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
          {rows.map(([n, v]) => <li key={n} style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 0" }}><span style={{ width: 8, height: 8, borderRadius: "50%", flexShrink: 0, background: accent }} />{n} &mdash; {v}</li>)}
        </ul>
      )}
    </div>
  );
}