Edit Table · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<table class=\"table{{#if striped}} table--striped{{/if}}\" style=\"--accent:{{accent}};--pad:{{cellPadding}}px;\">\n  <caption class=\"table__caption\">{{caption}}</caption>\n  <thead>\n    <tr><th scope=\"col\">Order</th><th scope=\"col\">Customer</th><th scope=\"col\">Status</th><th scope=\"col\">Total</th></tr>\n  </thead>\n  <tbody data-rows=\"{{rows}}\">\n    <tr><td>#1042</td><td>A. Whitfield</td><td>Shipped</td><td>£64.00</td></tr>\n    <tr><td>#1041</td><td>R. Okafor</td><td>Processing</td><td>£128.50</td></tr>\n    <tr><td>#1040</td><td>M. Iqbal</td><td>Shipped</td><td>£22.00</td></tr>\n    <tr><td>#1039</td><td>S. Novak</td><td>Refunded</td><td>£40.00</td></tr>\n    <tr><td>#1038</td><td>L. Duarte</td><td>Shipped</td><td>£96.20</td></tr>\n    <tr><td>#1037</td><td>P. Andersson</td><td>Processing</td><td>£15.75</td></tr>\n  </tbody>\n</table>\n<style>\n.table { border-collapse: collapse; width: 100%; max-width: 480px; font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; }\n.table__caption { text-align: left; font-weight: 600; padding-bottom: 8px; }\n.table th, .table td { padding: var(--pad) 14px; text-align: left; border-bottom: 1px solid #24143020; }\n.table th { background: var(--accent); color: #FAF7F2; font-weight: 600; }\n.table--striped tbody tr:nth-child(even) { background: #24143010; }\ntbody[data-rows=\"3\"] tr:nth-child(n+4) { display: none; }\ntbody[data-rows=\"4\"] tr:nth-child(n+5) { display: none; }\ntbody[data-rows=\"5\"] tr:nth-child(n+6) { display: none; }\ntbody[data-rows=\"6\"] tr:nth-child(n+7) { display: none; }\n</style>",
  "tailwind": "<table class=\"border-collapse w-full max-w-[480px] font-sans text-sm text-[#241430] bg-[#FAF7F2]\">\n  <caption class=\"text-left font-semibold pb-2\">{{caption}}</caption>\n  <thead>\n    <tr style=\"background:{{accent}}\" class=\"text-[#FAF7F2]\">\n      <th scope=\"col\" class=\"text-left font-semibold p-[{{cellPadding}}px]\">Order</th>\n      <th scope=\"col\" class=\"text-left font-semibold p-[{{cellPadding}}px]\">Customer</th>\n      <th scope=\"col\" class=\"text-left font-semibold p-[{{cellPadding}}px]\">Status</th>\n      <th scope=\"col\" class=\"text-left font-semibold p-[{{cellPadding}}px]\">Total</th>\n    </tr>\n  </thead>\n  <tbody data-rows=\"{{rows}}\" class=\"{{#if striped}}[&>tr:nth-child(even)]:bg-[#24143010]{{/if}}\">\n    <tr class=\"border-b border-[#24143020]\"><td class=\"p-[{{cellPadding}}px]\">#1042</td><td class=\"p-[{{cellPadding}}px]\">A. Whitfield</td><td class=\"p-[{{cellPadding}}px]\">Shipped</td><td class=\"p-[{{cellPadding}}px]\">£64.00</td></tr>\n    <tr class=\"border-b border-[#24143020]\"><td class=\"p-[{{cellPadding}}px]\">#1041</td><td class=\"p-[{{cellPadding}}px]\">R. Okafor</td><td class=\"p-[{{cellPadding}}px]\">Processing</td><td class=\"p-[{{cellPadding}}px]\">£128.50</td></tr>\n    <tr class=\"border-b border-[#24143020]\"><td class=\"p-[{{cellPadding}}px]\">#1040</td><td class=\"p-[{{cellPadding}}px]\">M. Iqbal</td><td class=\"p-[{{cellPadding}}px]\">Shipped</td><td class=\"p-[{{cellPadding}}px]\">£22.00</td></tr>\n    <tr class=\"border-b border-[#24143020]\"><td class=\"p-[{{cellPadding}}px]\">#1039</td><td class=\"p-[{{cellPadding}}px]\">S. Novak</td><td class=\"p-[{{cellPadding}}px]\">Refunded</td><td class=\"p-[{{cellPadding}}px]\">£40.00</td></tr>\n    <tr class=\"border-b border-[#24143020]\"><td class=\"p-[{{cellPadding}}px]\">#1038</td><td class=\"p-[{{cellPadding}}px]\">L. Duarte</td><td class=\"p-[{{cellPadding}}px]\">Shipped</td><td class=\"p-[{{cellPadding}}px]\">£96.20</td></tr>\n    <tr class=\"border-b border-[#24143020]\"><td class=\"p-[{{cellPadding}}px]\">#1037</td><td class=\"p-[{{cellPadding}}px]\">P. Andersson</td><td class=\"p-[{{cellPadding}}px]\">Processing</td><td class=\"p-[{{cellPadding}}px]\">£15.75</td></tr>\n  </tbody>\n</table>\n<style>\ntbody[data-rows=\"3\"] tr:nth-child(n+4) { display: none; }\ntbody[data-rows=\"4\"] tr:nth-child(n+5) { display: none; }\ntbody[data-rows=\"5\"] tr:nth-child(n+6) { display: none; }\ntbody[data-rows=\"6\"] tr:nth-child(n+7) { display: none; }\n</style>",
  "react": "export function Table({\n  caption = \"{{caption}}\",\n  rows = \"{{rows}}\",\n  cellPadding = {{cellPadding}},\n  accent = \"{{accent}}\",\n  striped = {{striped}},\n}) {\n  const data = [\n    [\"#1042\", \"A. Whitfield\", \"Shipped\", \"£64.00\"],\n    [\"#1041\", \"R. Okafor\", \"Processing\", \"£128.50\"],\n    [\"#1040\", \"M. Iqbal\", \"Shipped\", \"£22.00\"],\n    [\"#1039\", \"S. Novak\", \"Refunded\", \"£40.00\"],\n    [\"#1038\", \"L. Duarte\", \"Shipped\", \"£96.20\"],\n    [\"#1037\", \"P. Andersson\", \"Processing\", \"£15.75\"],\n  ].slice(0, Number(rows));\n  return (\n    <table style={{ borderCollapse: \"collapse\", width: \"100%\", maxWidth: 480, fontFamily: \"system-ui, sans-serif\", fontSize: 14, color: \"#241430\", background: \"#FAF7F2\" }}>\n      <caption style={{ textAlign: \"left\", fontWeight: 600, paddingBottom: 8 }}>{caption}</caption>\n      <thead>\n        <tr style={{ background: accent, color: \"#FAF7F2\" }}>\n          {[\"Order\", \"Customer\", \"Status\", \"Total\"].map((h) => (\n            <th key={h} scope=\"col\" style={{ textAlign: \"left\", fontWeight: 600, padding: `${cellPadding}px 14px` }}>{h}</th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {data.map((row, i) => (\n          <tr key={row[0]} style={{ background: striped && i % 2 === 1 ? \"#24143010\" : \"transparent\",\n            borderBottom: \"1px solid #24143020\" }}>\n            {row.map((cell, j) => <td key={j} style={{ padding: `${cellPadding}px 14px` }}>{cell}</td>)}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}"
}