Edit Infinite Data Grid · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<div class=\"idg\" style=\"--accent:{{accent}};\">\n  <div class=\"idg__scroll\">\n    <table class=\"idg__table\">\n      <caption>{{caption}}</caption>\n      <thead><tr><th scope=\"col\">Order</th><th scope=\"col\">Customer</th><th scope=\"col\">Status</th><th scope=\"col\">Total</th></tr></thead>\n      <tbody>\n        <tr style=\"height:{{rowHeight}}px;\"><td>#1042</td><td>A. Whitfield</td><td>Shipped</td><td>£64.00</td></tr>\n        <tr style=\"height:{{rowHeight}}px;\"><td>#1041</td><td>R. Okafor</td><td>Processing</td><td>£128.50</td></tr>\n        <tr style=\"height:{{rowHeight}}px;\"><td>#1040</td><td>M. Iqbal</td><td>Shipped</td><td>£22.00</td></tr>\n        <tr style=\"height:{{rowHeight}}px;\"><td>#1039</td><td>S. Novak</td><td>Refunded</td><td>£40.00</td></tr>\n        {{#if loading}}\n        <tr class=\"idg__skeleton\" style=\"height:{{rowHeight}}px;\" aria-hidden=\"true\"><td colspan=\"4\"><span class=\"idg__shimmer\"></span></td></tr>\n        {{/if}}\n      </tbody>\n    </table>\n  </div>\n  <div class=\"idg__footer\">\n    <div class=\"idg__track\"><div class=\"idg__fill\" style=\"width:{{loadedPercent}}%;\"></div></div>\n    <span class=\"idg__status\" role=\"status\">{{#if loading}}Loading more&#8230; {{/if}}{{loadedPercent}}% rendered</span>\n  </div>\n</div>\n<style>\n.idg { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }\n.idg__scroll { max-height: 220px; overflow-y: auto; }\n.idg__table { border-collapse: collapse; width: 100%; }\n.idg__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }\n.idg__table th, .idg__table td { padding: 0 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }\n.idg__table th { background: var(--accent); color: #FAF7F2; padding: 10px 14px; }\n.idg__shimmer { display: block; height: 12px; margin: auto 0; border-radius: 4px; background: linear-gradient(90deg, #24143014 25%, #24143028 37%, #24143014 63%); background-size: 400% 100%; }\n@media (prefers-reduced-motion: no-preference) {\n.idg__shimmer { animation: idg-shimmer .22s ease infinite; }\n}\n@keyframes idg-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }\n.idg__footer { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid #24143020; }\n.idg__track { flex: 1; height: 6px; border-radius: 999px; background: #24143014; overflow: hidden; }\n.idg__fill { height: 100%; background: var(--accent); border-radius: inherit; }\n@media (prefers-reduced-motion: no-preference) {\n.idg__fill { transition: width .2s; }\n}\n.idg__status { font-size: 12px; white-space: nowrap; }\n</style>",
  "tailwind": "<div class=\"max-w-[480px] rounded-[10px] border border-[#24143020] font-sans text-sm text-[#241430] bg-[#FAF7F2] overflow-hidden\" style=\"--accent:{{accent}};\">\n  <div class=\"max-h-[220px] overflow-y-auto\">\n    <table class=\"border-collapse w-full\">\n      <caption class=\"text-left font-semibold px-3.5 py-2.5\">{{caption}}</caption>\n      <thead><tr class=\"text-[#FAF7F2]\" style=\"background:{{accent}}\">\n        <th scope=\"col\" class=\"p-3.5 text-left whitespace-nowrap\">Order</th>\n        <th scope=\"col\" class=\"p-3.5 text-left whitespace-nowrap\">Customer</th>\n        <th scope=\"col\" class=\"p-3.5 text-left whitespace-nowrap\">Status</th>\n        <th scope=\"col\" class=\"p-3.5 text-left whitespace-nowrap\">Total</th>\n      </tr></thead>\n      <tbody>\n        <tr style=\"height:{{rowHeight}}px\"><td class=\"px-3.5 border-b border-[#24143020] whitespace-nowrap\">#1042</td><td class=\"px-3.5 border-b border-[#24143020] whitespace-nowrap\">A. Whitfield</td><td class=\"px-3.5 border-b border-[#24143020] whitespace-nowrap\">Shipped</td><td class=\"px-3.5 border-b border-[#24143020] whitespace-nowrap\">£64.00</td></tr>\n        <tr style=\"height:{{rowHeight}}px\"><td class=\"px-3.5 border-b border-[#24143020] whitespace-nowrap\">#1041</td><td class=\"px-3.5 border-b border-[#24143020] whitespace-nowrap\">R. Okafor</td><td class=\"px-3.5 border-b border-[#24143020] whitespace-nowrap\">Processing</td><td class=\"px-3.5 border-b border-[#24143020] whitespace-nowrap\">£128.50</td></tr>\n        <tr style=\"height:{{rowHeight}}px\"><td class=\"px-3.5 border-b border-[#24143020] whitespace-nowrap\">#1040</td><td class=\"px-3.5 border-b border-[#24143020] whitespace-nowrap\">M. Iqbal</td><td class=\"px-3.5 border-b border-[#24143020] whitespace-nowrap\">Shipped</td><td class=\"px-3.5 border-b border-[#24143020] whitespace-nowrap\">£22.00</td></tr>\n        <tr style=\"height:{{rowHeight}}px\"><td class=\"px-3.5 border-b border-[#24143020] whitespace-nowrap\">#1039</td><td class=\"px-3.5 border-b border-[#24143020] whitespace-nowrap\">S. Novak</td><td class=\"px-3.5 border-b border-[#24143020] whitespace-nowrap\">Refunded</td><td class=\"px-3.5 border-b border-[#24143020] whitespace-nowrap\">£40.00</td></tr>\n        {{#if loading}}\n        <tr aria-hidden=\"true\" style=\"height:{{rowHeight}}px\"><td colspan=\"4\" class=\"px-3.5\"><span class=\"block h-3 my-auto rounded motion-safe:animate-pulse bg-[#24143020]\"></span></td></tr>\n        {{/if}}\n      </tbody>\n    </table>\n  </div>\n  <div class=\"flex items-center gap-2.5 px-3.5 py-2.5 border-t border-[#24143020]\">\n    <div class=\"flex-1 h-1.5 rounded-full bg-[#24143014] overflow-hidden\"><div class=\"h-full rounded-full\" style=\"width:{{loadedPercent}}%;background:{{accent}}\"></div></div>\n    <span role=\"status\" class=\"text-xs whitespace-nowrap\">{{#if loading}}Loading more&#8230; {{/if}}{{loadedPercent}}% rendered</span>\n  </div>\n</div>",
  "react": "function InfiniteDataGrid({\n  caption = \"{{caption}}\",\n  accent = \"{{accent}}\",\n  loading = {{loading}},\n  loadedPercent = {{loadedPercent}},\n  rowHeight = {{rowHeight}},\n}) {\n  const rows = [\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  ];\n  const cell = { padding: \"0 14px\", borderBottom: \"1px solid #24143020\", whiteSpace: \"nowrap\" };\n  return (\n    <div style={{ maxWidth: 480, borderRadius: 10, border: \"1px solid #24143020\", overflow: \"hidden\", font: \"14px system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\" }}>\n      <div style={{ maxHeight: 220, overflowY: \"auto\" }}>\n        <table style={{ borderCollapse: \"collapse\", width: \"100%\" }}>\n          <caption style={{ textAlign: \"left\", fontWeight: 600, padding: \"10px 14px\" }}>{caption}</caption>\n          <thead>\n            <tr style={{ background: accent, color: \"#FAF7F2\" }}>\n              {[\"Order\", \"Customer\", \"Status\", \"Total\"].map((h) => <th key={h} scope=\"col\" style={{ padding: \"10px 14px\", textAlign: \"left\" }}>{h}</th>)}\n            </tr>\n          </thead>\n          <tbody>\n            {rows.map((row) => (\n              <tr key={row[0]} style={{ height: rowHeight }}>{row.map((c, j) => <td key={j} style={cell}>{c}</td>)}</tr>\n            ))}\n            {loading && (\n              <tr aria-hidden=\"true\" style={{ height: rowHeight }}>\n                <td colSpan={4} style={{ padding: \"0 14px\" }}>\n                  <span style={{ display: \"block\", height: 12, borderRadius: 4, background: \"#24143020\" }} />\n                </td>\n              </tr>\n            )}\n          </tbody>\n        </table>\n      </div>\n      <div style={{ display: \"flex\", alignItems: \"center\", gap: 10, padding: \"10px 14px\", borderTop: \"1px solid #24143020\" }}>\n        <div style={{ flex: 1, height: 6, borderRadius: 999, background: \"#24143014\", overflow: \"hidden\" }}>\n          <div style={{ height: \"100%\", width: `${loadedPercent}%`, background: accent, borderRadius: \"inherit\" }} />\n        </div>\n        <span role=\"status\" style={{ fontSize: 12, whiteSpace: \"nowrap\" }}>{loading ? \"Loading more… \" : \"\"}{loadedPercent}% rendered</span>\n      </div>\n    </div>\n  );\n}"
}