CINXE.COM

<!DOCTYPE html> <html lang="en"> <head>  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-T7JG534');</script>  <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Showcase and Example Applications</title> <meta name="HandheldFriendly" content="True" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script type="text/javascript" src="https://blog.ag-grid.com/assets/built/prism.js?v=8a9360074a"></script> <link rel="stylesheet" type="text/css" href="https://blog.ag-grid.com/assets/built/screen.css?v=8a9360074a" /> <meta name="description" content="A small set of sample apps and examples for AG Grid. Some created internally and some public examples found in the wild."> <link rel="icon" href="https://blog.ag-grid.com/content/images/size/w256h256/2021/02/200pxArtboard-5.png" type="image/png"> <link rel="canonical" href="https://blog.ag-grid.com/showcase/"> <meta name="referrer" content="no-referrer-when-downgrade"> <link rel="amphtml" href="https://blog.ag-grid.com/showcase/amp/"> <meta property="og:site_name" content="AG Grid Blog"> <meta property="og:type" content="article"> <meta property="og:title" content="Showcase and Example Applications"> <meta property="og:description" content="A small set of sample apps and examples for AG Grid. Some created internally and some public examples found in the wild."> <meta property="og:url" content="https://blog.ag-grid.com/showcase/"> <meta property="og:image" content="https://blog.ag-grid.com/content/images/2021/08/showcase-compress.png"> <meta property="article:published_time" content="2021-06-29T10:09:02.000Z"> <meta property="article:modified_time" content="2024-06-06T10:09:28.000Z"> <meta property="article:tag" content="Misc"> <meta property="article:publisher" content="https://www.facebook.com/aggridbalham"> <meta property="article:author" content="https://www.facebook.com/eviltester"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Showcase and Example Applications"> <meta name="twitter:description" content="A small set of sample apps and examples for AG Grid. Some created internally and some public examples found in the wild."> <meta name="twitter:url" content="https://blog.ag-grid.com/showcase/"> <meta name="twitter:image" content="https://blog.ag-grid.com/content/images/2021/08/showcase-compress.png"> <meta name="twitter:label1" content="Written by"> <meta name="twitter:data1" content="Alan Richardson"> <meta name="twitter:label2" content="Filed under"> <meta name="twitter:data2" content="Misc"> <meta name="twitter:site" content="@ag_grid"> <meta name="twitter:creator" content="@eviltester"> <meta property="og:image:width" content="1000"> <meta property="og:image:height" content="500"> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "publisher": { "@type": "Organization", "name": "AG Grid Blog", "url": "https://blog.ag-grid.com/", "logo": { "@type": "ImageObject", "url": "https://blog.ag-grid.com/content/images/2021/02/logo-white.svg", "width": 235, "height": 40 } }, "author": { "@type": "Person", "name": "Alan Richardson", "image": { "@type": "ImageObject", "url": "https://blog.ag-grid.com/content/images/2021/06/alan.jpeg", "width": 300, "height": 300 }, "url": "https://blog.ag-grid.com/author/alan/", "sameAs": [ "https://eviltester.com", "https://www.facebook.com/eviltester", "https://twitter.com/eviltester" ] }, "headline": "Showcase and Example Applications", "url": "https://blog.ag-grid.com/showcase/", "datePublished": "2021-06-29T10:09:02.000Z", "dateModified": "2024-06-06T10:09:28.000Z", "image": { "@type": "ImageObject", "url": "https://blog.ag-grid.com/content/images/2021/08/showcase-compress.png", "width": 1000, "height": 500 }, "keywords": "Misc", "description": "A small set of sample apps and examples for AG Grid. Some created internally and some public examples found in the wild.", "mainEntityOfPage": "https://blog.ag-grid.com/showcase/" } </script> <meta name="generator" content="Ghost 5.109"> <link rel="alternate" type="application/rss+xml" title="AG Grid Blog" href="https://blog.ag-grid.com/rss/"> <script defer src="https://cdn.jsdelivr.net/ghost/portal@~2.49/umd/portal.min.js" data-i18n="true" data-ghost="https://blog.ag-grid.com/" data-key="e3288fd636f108208efe135083" data-api="https://ag-grid-blog.ghost.io/ghost/api/content/" data-locale="en" crossorigin="anonymous"></script><style id="gh-members-styles">.gh-post-upgrade-cta-content, .gh-post-upgrade-cta { display: flex; flex-direction: column; align-items: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; text-align: center; width: 100%; color: #ffffff; font-size: 16px; } .gh-post-upgrade-cta-content { border-radius: 8px; padding: 40px 4vw; } .gh-post-upgrade-cta h2 { color: #ffffff; font-size: 28px; letter-spacing: -0.2px; margin: 0; padding: 0; } .gh-post-upgrade-cta p { margin: 20px 0 0; padding: 0; } .gh-post-upgrade-cta small { font-size: 16px; letter-spacing: -0.2px; } .gh-post-upgrade-cta a { color: #ffffff; cursor: pointer; font-weight: 500; box-shadow: none; text-decoration: underline; } .gh-post-upgrade-cta a:hover { color: #ffffff; opacity: 0.8; box-shadow: none; text-decoration: underline; } .gh-post-upgrade-cta a.gh-btn { display: block; background: #ffffff; text-decoration: none; margin: 28px 0 0; padding: 8px 18px; border-radius: 4px; font-size: 16px; font-weight: 600; } .gh-post-upgrade-cta a.gh-btn:hover { opacity: 0.92; }</style> <script defer src="https://cdn.jsdelivr.net/ghost/sodo-search@~1.5/umd/sodo-search.min.js" data-key="e3288fd636f108208efe135083" data-styles="https://cdn.jsdelivr.net/ghost/sodo-search@~1.5/umd/main.css" data-sodo-search="https://ag-grid-blog.ghost.io/" data-locale="en" crossorigin="anonymous"></script> <link href="https://blog.ag-grid.com/webmentions/receive/" rel="webmention"> <script defer src="/public/cards.min.js?v=8a9360074a"></script> <link rel="stylesheet" type="text/css" href="/public/cards.min.css?v=8a9360074a"> <script defer src="/public/member-attribution.min.js?v=8a9360074a"></script><style>:root {--ghost-accent-color: #15171A;}</style>  <script defer data-domain="blog.ag-grid.com" src="https://plausible.io/js/plausible.js"></script> <meta name="google-site-verification" content="HsYGuuU8IDov5MwlzKGT-ZlRGStBcr539sGhBYx-O-I" /> <style> @media only screen and (min-width: 800px) { figure{ width: 50%; float: left; } .post-content { display: block; } .post-full-content figure { margin: 0em 1em 1em 1em } div.inner h2, div.inner h3{ clear:both; text-align: center; } div.inner h3{ padding-bottom: 1em; } } </style> <meta name="google-site-verification" content="cgkypu-dfgpZwNHMkHsP3rIT2FSTlrCKZkz-OcGg1-Y" /> <script> const urlParams = new URLSearchParams(window.location.search); const htlmEl = document.documentElement; const getDarkMode = () => { if (urlParams.has('darkmode')) { return urlParams.get('darkmode') === 'true'; } else if (htlmEl.hasAttribute("data-dark-mode")) { return htlmEl.getAttribute("data-dark-mode") === "true"; } else if (localStorage.darkMode) { return localStorage.darkMode === "true"; } else { // OS level darkmode return ( window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ); } }; const setDarkMode = (darkmode) => { localStorage.darkMode = darkmode; // Using .no-transitions class so that there are no animations between light/dark modes htlmEl.classList.add("no-transitions"); htlmEl.setAttribute("data-dark-mode", darkmode); // Set darkmode for header & footer document .querySelectorAll(".darkmode-data-target") .forEach((el) => el.setAttribute("data-dark-mode", darkmode)); htlmEl.offsetHeight; // Trigger a reflow, flushing the CSS changes htlmEl.classList.remove("no-transitions"); }; // Set darkmode before DOM load setDarkMode(getDarkMode()); document.addEventListener("DOMContentLoaded", function () { setDarkMode(getDarkMode()); // Set darkmode again on DOM load to set header & footer darkmode const darkmodeToggle = document.getElementById("darkmode-toggle"); darkmodeToggle.addEventListener("click", () => { setDarkMode(!getDarkMode()); }); }); </script> </head> <body class="post-template tag-misc">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T7JG534" height="0" width="0" style="display:none;visibility:hidden" ></iframe></noscript>  <header class="site-header"> <div class="darkmode-data-target"> <div class="header"> <div class="headerInner layout-page-max-width"> <a id="grid-logo" class="headerLogo" href="https://www.ag-grid.com/" aria-label="Home"> <svg xmlns="http://www.w3.org/2000/svg" class="logotype" width="154" height="40" viewBox="0 0 154 40"> <style> .logotype path, .logotype rect { fill: #fff; } .logotype.dark-type > path, .logotype.dark-type > rect { fill: #003264; } </style> <path d="M147.979,5.6l-0,28.417l-4.768,-0l-0.127,-2.988c-0.7,1.017 -1.59,1.844 -2.67,2.479c-1.081,0.572 -2.416,0.89 -3.942,0.89c-1.335,0 -2.606,-0.254 -3.687,-0.699c-1.144,-0.509 -2.162,-1.144 -2.988,-2.034c-0.826,-0.89 -1.526,-1.971 -1.971,-3.179c-0.508,-1.208 -0.699,-2.606 -0.699,-4.132c-0,-1.526 0.254,-2.924 0.699,-4.196c0.509,-1.271 1.145,-2.352 1.971,-3.242c0.826,-0.89 1.844,-1.589 2.988,-2.098c1.144,-0.509 2.352,-0.763 3.687,-0.763c1.526,0 2.797,0.254 3.878,0.827c1.081,0.572 1.971,1.335 2.67,2.415l-0,-11.633l4.959,-0l-0,-0.064Zm-10.426,24.539c1.653,-0 2.924,-0.572 3.941,-1.653c1.017,-1.081 1.526,-2.543 1.526,-4.323c-0,-1.78 -0.509,-3.179 -1.526,-4.323c-1.017,-1.081 -2.288,-1.653 -3.941,-1.653c-1.59,0 -2.925,0.572 -3.878,1.653c-1.017,1.081 -1.526,2.543 -1.526,4.323c0,1.78 0.509,3.179 1.526,4.259c1.017,1.145 2.288,1.717 3.878,1.717"/> <rect x="119.067" y="5.6" width="4.959" height="5.849"/> <rect x="119.067" y="14.373" width="4.959" height="19.644"/> <path d="M108.831,16.979c1.59,-2.352 5.595,-2.606 7.248,-2.606l-0,4.577c-2.035,0 -4.069,0.064 -5.277,0.954c-1.208,0.89 -1.843,2.098 -1.843,3.56l-0,10.553l-4.959,-0l0,-19.644l4.768,-0l0.063,2.606Z"/> <path d="M26.489,28.677l-12.46,-0l-2.162,5.34l-5.467,-0l11.507,-26.955l4.768,0l11.506,26.955l-5.531,-0l-2.161,-5.34Zm-1.717,-4.26l-4.513,-10.998l-4.514,10.998l9.027,0Z"/> <path d="M62.024,18.654l-12.286,0l-0,4.267l6.963,0c-0.219,2.139 -1.021,3.846 -2.406,5.123c-1.385,1.276 -3.208,1.914 -5.469,1.914c-1.288,0 -2.461,-0.231 -3.518,-0.693c-1.058,-0.462 -1.964,-1.113 -2.717,-1.95c-0.753,-0.839 -1.337,-1.848 -1.749,-3.027c-0.414,-1.179 -0.62,-2.486 -0.62,-3.92c-0,-1.433 0.206,-2.739 0.62,-3.919c0.412,-1.178 0.996,-2.187 1.749,-3.026c0.753,-0.838 1.665,-1.488 2.734,-1.95c1.07,-0.462 2.248,-0.693 3.538,-0.693c2.669,-0 4.696,0.642 6.081,1.927l3.284,-3.286c-2.486,-1.934 -5.63,-2.907 -9.439,-2.907c-2.114,-0 -4.023,0.334 -5.723,1.002c-1.703,0.669 -3.161,1.605 -4.376,2.807c-1.216,1.204 -2.151,2.657 -2.807,4.357c-0.657,1.702 -0.985,3.599 -0.985,5.688c-0,2.066 0.334,3.957 1.003,5.67c0.668,1.714 1.61,3.173 2.825,4.375c1.216,1.204 2.673,2.139 4.375,2.808c1.702,0.668 3.597,1.002 5.688,1.002c2.042,0 3.883,-0.334 5.524,-1.002c1.64,-0.669 3.038,-1.604 4.193,-2.808c1.154,-1.202 2.042,-2.661 2.661,-4.375c0.621,-1.713 0.93,-3.604 0.93,-5.67c0,-0.291 -0.007,-0.577 -0.017,-0.856c-0.014,-0.28 -0.032,-0.565 -0.056,-0.858"/> <path d="M100.792,18.654l-12.286,0l-0,4.267l6.963,0c-0.219,2.139 -1.021,3.846 -2.406,5.123c-1.385,1.276 -3.208,1.914 -5.469,1.914c-1.288,0 -2.461,-0.231 -3.518,-0.693c-1.058,-0.462 -1.964,-1.113 -2.717,-1.95c-0.753,-0.839 -1.337,-1.848 -1.749,-3.027c-0.414,-1.179 -0.62,-2.486 -0.62,-3.92c-0,-1.433 0.206,-2.739 0.62,-3.919c0.412,-1.178 0.996,-2.187 1.749,-3.026c0.753,-0.838 1.665,-1.488 2.735,-1.95c1.069,-0.462 2.247,-0.693 3.537,-0.693c2.669,-0 4.697,0.642 6.081,1.927l3.284,-3.286c-2.486,-1.934 -5.63,-2.907 -9.438,-2.907c-2.115,-0 -4.024,0.334 -5.724,1.002c-1.703,0.669 -3.161,1.605 -4.376,2.807c-1.216,1.204 -2.151,2.657 -2.807,4.357c-0.657,1.702 -0.985,3.599 -0.985,5.688c-0,2.066 0.334,3.957 1.003,5.67c0.668,1.714 1.61,3.173 2.825,4.375c1.216,1.204 2.673,2.139 4.375,2.808c1.702,0.668 3.597,1.002 5.689,1.002c2.041,0 3.883,-0.334 5.523,-1.002c1.64,-0.669 3.038,-1.604 4.193,-2.808c1.154,-1.202 2.042,-2.661 2.661,-4.375c0.621,-1.713 0.93,-3.604 0.93,-5.67c0,-0.291 -0.007,-0.577 -0.017,-0.856c-0.014,-0.28 -0.032,-0.565 -0.056,-0.858"/> </svg><svg xmlns="http://www.w3.org/2000/svg" class="logomark" width="64" height="48" viewBox="0 0 64 48" > <style> .logomark .aqua { fill: #55b4c8; } .logomark .orange { fill: #ff8c00; } .logomark .red { fill: #f00; } .logomark .grey { fill: #b4bebe; } rect { animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-play-state: paused; } .right-2 { animation-delay: calc(1.25s / 6); } .right-3 { animation-delay: calc(1.25s / 6 * 2); } .left-3 { animation-delay: calc(1.25s / 6 * 3); } .left-2 { animation-delay: calc(1.25s / 6 * 4); } .left-1 { animation-delay: calc(1.25s / 6 * 5); } @keyframes logo-mark-bounce-right { 0% { transform: translateX(0%); } 16.6666% { transform: translateX(3px); } 33.3333% { transform: translateX(0); } } </style> <rect class="aqua right-1" x="51" y="10" width="7" height="8" /> <path class="aqua right-1" d="M58,10l-17,0l-8,8l25,0l0,-8Z" /> <rect class="orange right-2" x="36" y="22" width="7" height="8" /> <path class="orange right-2" d="M43,30l0,-7.995l-14,-0l-8.008,7.995l22.008,0Z" /> <rect class="red right-3" x="24" y="34" width="7" height="8" /> <path class="red right-3" d="M13,38.01l4,-4.01l14,0l0,8l-18,0l0,-3.99Z" /> <rect class="grey left-1" x="11" y="6" width="7" height="8" /> <path class="grey left-1" d="M41,10l-4,4l-26,0l0,-8l30,0l0,4Z" /> <rect class="grey left-2" x="16" y="18" width="7" height="8" /> <path class="grey left-2" d="M16,26l9,0l8,-8l-17,-0l0,8Z" /> <rect class="grey left-3" x="6" y="30" width="7" height="8" /> <path class="grey left-3" d="M6,37.988l7,0.012l7.992,-8l-14.992,-0.047l-0,8.035Z" /> </svg> </a> <button class="mobileMenuButton" type="button" aria-controls="main-nav" aria-expanded='false' aria-label="Toggle navigation" onclick="toggleMobileMenu()"; > <svg xmlns="http://www.w3.org/2000/svg" class="menuIcon menu-icon" width="36" height="36" viewBox="0 0 36 36" > <style> .menu-icon rect { fill: #fff; } </style> <g class="top"> <rect x="2" y="7" width="32" height="2" /> </g> <g class="middle"> <rect x="2" y="17" width="32" height="2" /> </g> <g class="bottom"> <rect x="2" y="27" width="32" height="2" /> </g> </svg> </button> <nav id="main-nav" class="mainNav" aria-hidden="true"> <ul class="navItemList list-style-none"> <li class="navItem" role="menuitem"> <a class="navLink" href="https://ag-grid.com/documentation"aria-label="AG Grid Docs">AG Grid</a> </li> <li class="navItem" role="menuitem"> <a class="navLink" href="https://charts.ag-grid.com/documentation"aria-label="AG Chart Docs">AG Charts</a> </li> <li class="navItem" role="menuitem"> <a class="navLink" href="/Newsletter" aria-label="Newsletter">Newsletter</a> </li> <li class="navItem" role="menuitem"> <a class="navLink nav-search" role="menuitem" style="cursor: pointer" data-ghost-search>Search</a> </li> <li class="navItem" role="menuitem" aria-label="AG Grid Blog"> <a class="navLink" href="/">Blog</a> </li> <li class="navItem buttonItem" role="menuitem" aria-label="AG Grid Github"> <span id="darkmode-toggle" class="navLink darkmode-toggle"> <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" ><defs><style>.cls-1{fill:none;}</style></defs><title>asleep</title><path d="M13.5025,5.4136A15.0755,15.0755,0,0,0,25.096,23.6082a11.1134,11.1134,0,0,1-7.9749,3.3893c-.1385,0-.2782.0051-.4178,0A11.0944,11.0944,0,0,1,13.5025,5.4136M14.98,3a1.0024,1.0024,0,0,0-.1746.0156A13.0959,13.0959,0,0,0,16.63,28.9973c.1641.006.3282,0,.4909,0a13.0724,13.0724,0,0,0,10.702-5.5556,1.0094,1.0094,0,0,0-.7833-1.5644A13.08,13.08,0,0,1,15.8892,4.38,1.0149,1.0149,0,0,0,14.98,3Z" /><rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" class="cls-1" width="32" height="32" /></svg> <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" ><defs><style>.cls-1{fill:none;}</style></defs><title>light</title><rect x="15" y="2" width="2" height="4.96" /><rect x="21.67" y="6.85" width="4.96" height="2" transform="translate(1.52 19.37) rotate(-45)" /><rect x="25.04" y="15" width="4.96" height="2" /><rect x="23.15" y="21.67" width="2" height="4.96" transform="translate(-10 24.15) rotate(-45)" /><rect x="15" y="25.04" width="2" height="4.96" /><rect x="5.37" y="23.15" width="4.96" height="2" transform="translate(-14.77 12.63) rotate(-45)" /><rect x="2" y="15" width="4.96" height="2" /><rect x="6.85" y="5.37" width="2" height="4.96" transform="translate(-3.25 7.85) rotate(-45)" /><path d="M16,12a4,4,0,1,1-4,4,4,4,0,0,1,4-4m0-2a6,6,0,1,0,6,6,6,6,0,0,0-6-6Z" /><rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" class="cls-1" width="32" height="32" /></svg> <span>Toggle Darkmode</span> </span> </li> </ul> </nav> </div> </div> <div class="top-bar"> <div class="top-bar-inner layout-page-max-width"> <ul class="other-tags-list list-style-none"> <li> <a href="/tag/version-release/">Versions</a> </li> <li> <a href="/tag/how-to/">How toʼs</a> </li> <li> <a href="/tag/tutorial/">Tutorials</a> </li> <li> <a href="/tag/testing/">Testing</a> </li> </ul> <ul class="framework-tags-list list-style-none"> <li> <a href="/tag/javascript/"> <svg class="icon" width="100%" height="100%" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" > <rect x="0" y="0" width="256" height="256" style="fill:rgb(247,223,30);fill-rule:nonzero;" /> <g transform="matrix(1,0,0,1,4.20544,0)"> <g transform="matrix(1,0,0,1,-27.8948,-48.7274)"> <path d="M67.312,213.932L86.903,202.076C90.682,208.777 94.12,214.447 102.367,214.447C110.272,214.447 115.256,211.355 115.256,199.327L115.256,117.529L139.314,117.529L139.314,199.667C139.314,224.584 124.708,235.926 103.398,235.926C84.153,235.926 72.982,225.959 67.311,213.93" style="fill: #000;" /> </g> <g transform="matrix(1,0,0,1,-27.8948,-48.0406)"> <path d="M152.381,211.354L171.969,200.013C177.126,208.434 183.828,214.62 195.684,214.62C205.653,214.62 212.009,209.636 212.009,202.762C212.009,194.514 205.479,191.592 194.481,186.782L188.468,184.203C171.111,176.815 159.597,167.535 159.597,147.945C159.597,129.901 173.345,116.153 194.826,116.153C210.12,116.153 221.118,121.481 229.022,135.4L210.291,147.429C206.166,140.04 201.7,137.119 194.826,137.119C187.78,137.119 183.312,141.587 183.312,147.429C183.312,154.646 187.78,157.568 198.09,162.037L204.104,164.614C224.553,173.379 236.067,182.313 236.067,202.418C236.067,224.072 219.055,235.928 196.2,235.928C173.861,235.928 159.426,225.274 152.381,211.354" style="fill: #000;" /> </g> </g> </svg> <span>Javascript</span> </a> </li> <li> <a href="/tag/react-data-grid/"> <svg class="icon" width="256px" height="228px" viewBox="0 0 256 228" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" > <path d="M210.483381,73.8236374 C207.827698,72.9095503 205.075867,72.0446761 202.24247,71.2267368 C202.708172,69.3261098 203.135596,67.4500894 203.515631,65.6059664 C209.753843,35.3248922 205.675082,10.9302478 191.747328,2.89849283 C178.392359,-4.80289661 156.551327,3.22703567 134.492936,22.4237776 C132.371761,24.2697233 130.244662,26.2241201 128.118477,28.2723861 C126.701777,26.917204 125.287358,25.6075897 123.876584,24.3549348 C100.758745,3.82852863 77.5866802,-4.82157937 63.6725966,3.23341515 C50.3303869,10.9571328 46.3792156,33.8904224 51.9945178,62.5880206 C52.5367729,65.3599011 53.1706189,68.1905639 53.8873982,71.068617 C50.6078941,71.9995641 47.4418534,72.9920277 44.4125156,74.0478303 C17.3093297,83.497195 0,98.3066828 0,113.667995 C0,129.533287 18.5815786,145.446423 46.8116526,155.095373 C49.0394553,155.856809 51.3511025,156.576778 53.7333796,157.260293 C52.9600965,160.37302 52.2875179,163.423318 51.7229345,166.398431 C46.3687351,194.597975 50.5500231,216.989464 63.8566899,224.664425 C77.6012619,232.590464 100.66852,224.443422 123.130185,204.809231 C124.905501,203.257196 126.687196,201.611293 128.472081,199.886102 C130.785552,202.113904 133.095375,204.222319 135.392897,206.199955 C157.14963,224.922338 178.637969,232.482469 191.932332,224.786092 C205.663234,216.837268 210.125675,192.78347 204.332202,163.5181 C203.88974,161.283006 203.374826,158.99961 202.796573,156.675661 C204.416503,156.196743 206.006814,155.702335 207.557482,155.188332 C236.905331,145.46465 256,129.745175 256,113.667995 C256,98.2510906 238.132466,83.3418093 210.483381,73.8236374 L210.483381,73.8236374 Z M204.118035,144.807565 C202.718197,145.270987 201.281904,145.718918 199.818271,146.153177 C196.578411,135.896354 192.205739,124.989735 186.854729,113.72131 C191.961041,102.721277 196.164656,91.9540963 199.313837,81.7638014 C201.93261,82.5215915 204.474374,83.3208483 206.923636,84.1643056 C230.613348,92.3195488 245.063763,104.377206 245.063763,113.667995 C245.063763,123.564379 229.457753,136.411268 204.118035,144.807565 L204.118035,144.807565 Z M193.603754,165.642007 C196.165567,178.582766 196.531475,190.282717 194.834536,199.429057 C193.309843,207.64764 190.243595,213.12715 186.452366,215.321689 C178.384612,219.991462 161.131788,213.921395 142.525146,197.909832 C140.392124,196.074366 138.243609,194.114502 136.088259,192.040261 C143.301619,184.151133 150.510878,174.979732 157.54698,164.793993 C169.922699,163.695814 181.614905,161.900447 192.218042,159.449363 C192.740247,161.555956 193.204126,163.621993 193.603754,165.642007 L193.603754,165.642007 Z M87.2761866,214.514686 C79.3938934,217.298414 73.1160375,217.378157 69.3211631,215.189998 C61.2461189,210.532528 57.8891498,192.554265 62.4682434,168.438039 C62.9927272,165.676183 63.6170041,162.839142 64.3365173,159.939216 C74.8234575,162.258154 86.4299951,163.926841 98.8353334,164.932519 C105.918826,174.899534 113.336329,184.06091 120.811247,192.08264 C119.178102,193.65928 117.551336,195.16028 115.933685,196.574699 C106.001303,205.256705 96.0479605,211.41654 87.2761866,214.514686 L87.2761866,214.514686 Z M50.3486141,144.746959 C37.8658105,140.48046 27.5570398,134.935332 20.4908634,128.884403 C14.1414664,123.446815 10.9357817,118.048415 10.9357817,113.667995 C10.9357817,104.34622 24.8334611,92.4562517 48.0123604,84.3748281 C50.8247961,83.3942121 53.7689223,82.4701001 56.8242337,81.6020363 C60.0276398,92.0224477 64.229889,102.917218 69.3011135,113.93411 C64.1642716,125.11459 59.9023288,136.182975 56.6674809,146.725506 C54.489347,146.099407 52.3791089,145.440499 50.3486141,144.746959 L50.3486141,144.746959 Z M62.7270678,60.4878073 C57.9160346,35.9004118 61.1112387,17.3525532 69.1516515,12.6982729 C77.7160924,7.74005624 96.6544653,14.8094222 116.614922,32.5329619 C117.890816,33.6657739 119.171723,34.8514442 120.456275,36.0781256 C113.018267,44.0647686 105.66866,53.1573386 98.6480514,63.0655695 C86.6081646,64.1815215 75.0831931,65.9741531 64.4868907,68.3746571 C63.8206914,65.6948233 63.2305903,63.0619242 62.7270678,60.4878073 L62.7270678,60.4878073 Z M173.153901,87.7550367 C170.620796,83.3796304 168.020249,79.1076627 165.369124,74.9523483 C173.537126,75.9849113 181.362914,77.3555864 188.712066,79.0329319 C186.505679,86.1041206 183.755673,93.4974728 180.518546,101.076741 C178.196419,96.6680702 175.740322,92.2229454 173.153901,87.7550367 L173.153901,87.7550367 Z M128.122121,43.8938899 C133.166461,49.3588189 138.218091,55.4603279 143.186789,62.0803968 C138.179814,61.8439007 133.110868,61.720868 128.000001,61.720868 C122.937434,61.720868 117.905854,61.8411667 112.929865,62.0735617 C117.903575,55.515009 122.99895,49.4217021 128.122121,43.8938899 L128.122121,43.8938899 Z M82.8018984,87.830679 C80.2715265,92.2183886 77.8609975,96.6393627 75.5753239,101.068539 C72.3906004,93.5156998 69.6661103,86.0886276 67.440586,78.9171899 C74.7446255,77.2826781 82.5335049,75.9461789 90.6495601,74.9332099 C87.9610684,79.1268011 85.3391054,83.4302106 82.8018984,87.8297677 L82.8018984,87.830679 L82.8018984,87.830679 Z M90.8833221,153.182899 C82.4979621,152.247395 74.5919739,150.979704 67.289757,149.390303 C69.5508242,142.09082 72.3354636,134.505173 75.5876271,126.789657 C77.8792246,131.215644 80.2993228,135.638441 82.8451877,140.03572 L82.8456433,140.03572 C85.4388987,144.515476 88.1255676,148.90364 90.8833221,153.182899 L90.8833221,153.182899 Z M128.424691,184.213105 C123.24137,178.620587 118.071264,172.434323 113.021912,165.780078 C117.923624,165.972373 122.921029,166.0708 128.000001,166.0708 C133.217953,166.0708 138.376211,165.953235 143.45336,165.727219 C138.468257,172.501308 133.434855,178.697141 128.424691,184.213105 L128.424691,184.213105 Z M180.622896,126.396409 C184.044571,134.195313 186.929004,141.741317 189.219234,148.9164 C181.796719,150.609693 173.782736,151.973534 165.339049,152.986959 C167.996555,148.775595 170.619884,144.430263 173.197646,139.960532 C175.805484,135.438399 178.28163,130.90943 180.622896,126.396409 L180.622896,126.396409 Z M163.724586,134.496971 C159.722835,141.435557 155.614455,148.059271 151.443648,154.311611 C143.847063,154.854776 135.998946,155.134562 128.000001,155.134562 C120.033408,155.134562 112.284171,154.887129 104.822013,154.402745 C100.48306,148.068386 96.285368,141.425078 92.3091341,134.556664 L92.3100455,134.556664 C88.3442923,127.706935 84.6943232,120.799333 81.3870228,113.930466 C84.6934118,107.045648 88.3338117,100.130301 92.276781,93.292874 L92.2758697,93.294241 C96.2293193,86.4385872 100.390102,79.8276317 104.688954,73.5329157 C112.302398,72.9573964 120.109505,72.6571055 127.999545,72.6571055 L128.000001,72.6571055 C135.925583,72.6571055 143.742714,72.9596746 151.353879,73.5402067 C155.587114,79.7888993 159.719645,86.3784378 163.688588,93.2350031 C167.702644,100.168578 171.389978,107.037901 174.724618,113.77508 C171.400003,120.627999 167.720871,127.566587 163.724586,134.496971 L163.724586,134.496971 Z M186.284677,12.3729198 C194.857321,17.3165548 198.191049,37.2542268 192.804953,63.3986692 C192.461372,65.0669011 192.074504,66.7661189 191.654369,68.4881206 C181.03346,66.0374921 169.500286,64.2138746 157.425315,63.0810626 C150.391035,53.0639249 143.101577,43.9572289 135.784778,36.073113 C137.751934,34.1806885 139.716356,32.3762092 141.672575,30.673346 C160.572216,14.2257007 178.236518,7.73185406 186.284677,12.3729198 L186.284677,12.3729198 Z M128.000001,90.8080696 C140.624975,90.8080696 150.859926,101.042565 150.859926,113.667995 C150.859926,126.292969 140.624975,136.527922 128.000001,136.527922 C115.375026,136.527922 105.140075,126.292969 105.140075,113.667995 C105.140075,101.042565 115.375026,90.8080696 128.000001,90.8080696 L128.000001,90.8080696 Z" fill="#00D8FF" ></path> </svg> <span>React</span> </a> </li> <li> <a href="/tag/angular/"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 223 236" width="100%" height="100%" > <g clip-path="url(#a)"> <path fill="url(#b)" d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z" ></path> <path fill="url(#c)" d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z" ></path> </g> <defs> <linearGradient id="b" x1="49.009" x2="225.829" y1="213.75" y2="129.722" gradientUnits="userSpaceOnUse" > <stop stop-color="#E40035"></stop> <stop offset=".24" stop-color="#F60A48"></stop> <stop offset=".352" stop-color="#F20755"></stop> <stop offset=".494" stop-color="#DC087D"></stop> <stop offset=".745" stop-color="#9717E7"></stop> <stop offset="1" stop-color="#6C00F5"></stop> </linearGradient> <linearGradient id="c" x1="41.025" x2="156.741" y1="28.344" y2="160.344" gradientUnits="userSpaceOnUse" > <stop stop-color="#FF31D9"></stop> <stop offset="1" stop-color="#FF5BE1" stop-opacity="0"></stop> </linearGradient> <clipPath id="a"><path fill="#fff" d="M0 0h223v236H0z" ></path></clipPath></defs></svg> <span>Angular</span> </a> </li> <li> <a href="/tag/vuejs/"> <svg class="icon" width="100%" height="100%" viewBox="0 0 256 221" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" > <path d="M0,0L128,220.8L256,0L204.8,0L128,132.48L50.56,0L0,0Z" style="fill:rgb(65,184,131);fill-rule:nonzero;" /> <path d="M50.56,0L128,133.12L204.8,0L157.44,0L128,51.2L97.92,0L50.56,0Z" style="fill:rgb(53,73,94);fill-rule:nonzero;" /> </svg> <span>Vue</span> </a> </li> </ul> </div> </div> </div> </header> <div class="page-wrapper"> <div class="page-inner layout-grid"> <div class="side-bar"> <div> <h3>Quick Links</h3> <ul class="learn-more-list"> <li><a href="https://blog.ag-grid.com/reasons-to-choose-ag-grid-as-your-javascript-datagrid/">Why Use AG Grid?</a></li> <li><a href="https://blog.ag-grid.com/tag/tutorial/">Tutorials</a></li> <li><a href="https://blog.ag-grid.com/friends/">Friends & Collaborators</a></li> <li><a href="https://blog.ag-grid.com/showcase/">Sample Applications</a></li> </ul> <div class="side-bar-recent-posts"> <h3>Recent Posts</h3> <ul class="recent-posts-list"> <article class="content-wrap"> <li class="archive-post__title"> <a href="/whats-new-in-ag-grid-33-1/" class="archive-post"> What's New in AG Grid 33.1 </a> </li> <li class="archive-post__title"> <a href="/whats-new-in-ag-charts-11-1/" class="archive-post"> What's New in AG Charts 11.1 </a> </li> <li class="archive-post__title"> <a href="/end-to-end-testing-for-ag-grid-in-react-with-cypress/" class="archive-post"> End-to-End Testing for AG Grid in React with Cypress </a> </li> <li class="archive-post__title"> <a href="/unit-testing-ag-grid-react-tables-with-react-testing-library-and-vitest/" class="archive-post"> Unit testing AG Grid React Tables with React Testing Library and Vitest </a> </li> <li class="archive-post__title"> <a href="/introducing-our-figma-design-system-sticker-sheets/" class="archive-post"> Introducing Our Figma Design System Sticker Sheets </a> </li> <li class="archive-post__title"> <a href="/writing-e2e-tests-for-ag-grid-react-tables-with-playwright/" class="archive-post"> Writing E2E Tests for AG Grid React Tables with Playwright </a> </li> <li class="archive-post__title"> <a href="/optimizing-large-data-set-visualisations-with-the-m4-algorithm/" class="archive-post"> Optimising Large Data Set Visualisations with the M4 Algorithm </a> </li> <li class="archive-post__title"> <a href="/using-ag-grid-with-next-js-to-build-a-react-table/" class="archive-post"> Using AG Grid with Next.js to Build a React Table </a> </li> <li class="archive-post__title"> <a href="/introducing-long-term-support-for-ag-grid-and-ag-charts/" class="archive-post"> Introducing Long-Term Support (LTS) for AG Grid and AG Charts </a> </li> <li class="archive-post__title"> <a href="/upgrading-to-ag-grid-33/" class="archive-post"> Upgrading To AG Grid 33 </a> </li> </article> </ul> </div> </div> </div> <main class="main-content"> <article class="post-full post tag-misc "> <header class="post-full-header"> <h1 class="post-full-title">Showcase Grid Examples and Sample Applications</h1> </header> <section class="post-full-meta"> <ul class="author-list list-style-none"> <li class="author-list-item"> <a href="/author/alan/" class="author"> <img class="author-profile-image" src="/content/images/size/w100/2021/06/alan.jpeg" alt="Alan Richardson" /> <span class="author-name text-secondary font-size-small">Alan Richardson</span> </a> </li> </ul> </section> <section class="post-full-meta"> <time class="post-full-meta-date text-secondary font-size-small" datetime="2021-06-29">29 June 2021</time> <span class="text-secondary font-size-small">  |  </span> <a class="font-size-small" href="/tag/misc/">Misc</a> </section> <section class="post-full-content"> <div class="post-content"> <p>What to see what has been built with AG Grid? Most applications are either internal or we have a contract with the customer such that we will not use them in our marketing. All we can point you at are the applications that have been made public. So here are a small selection of sample applications and examples for AG Grid. Some created internally and some public examples found in the wild. All have live demos you can play with to see AG Grid in action.</p><div style="display:block; float:left; font-size:70%"> <p><a href="#example-grids">Example Grids</a></p> <ul> <li><a href="#the-kitchen-sink-demo">The Kitchen Sink Demo</a></li> <li><a href="#the-first-example">The First Example</a></li> <li><a href="#application-created-integrated-charts">Application Created Charts</a></li> <li><a href="#a-dashboard">A Dashboard</a></li> <li><a href="#standalone-charts-explorer">Standalone Charts Explorer</a></li> </ul> <p><a href="#ag-grid-github-example-projects">AG Grid Github Example Projects</a></p> <ul> <li><a href="#react-data-grid-examples">React Data Grid Examples</a></li> </ul> <p><a href="#libraries-and-wrappers%22">Libraries and Wrappers</a></p> <ul> <li><a href="#adaptabletable-from-adaptable-tools">Adaptable Tools</a></li> <li><a href="#streamlit-io-wrapper">Streamlit Python Wrapper</a></li> </ul> <p><a href="#blog-example-applications">Blog Example Applications</a></p> <ul> <li><a href="#pomodoro-app">Pomodoro app</a></li> <li><a href="#holiday-tracking-app">Holiday Tracking App</a></li> <li><a href="#todo-app">TODO App</a></li> <li><a href="#sliding-puzzle-game">Sliding Puzzle Game</a></li> <li><a href="#podcast-player">Podcast Player</a></li> </ul> </div> <div style="display:block; float:right; font-size:70%"> <p><a href="#3rd-party-public-examples">3rd Party Public Examples</a></p> <ul> <li><a href="#flight-fuel-consumption-tables">Flight Fuel Consumption Tables</a></li> <li><a href="#unavco-network-monitoring-map">Unavco Network Monitoring Map</a></li> <li><a href="#anywaydata-com">Markdown and CSV Table Editor</a></li> <li><a href="#live-football-statistics">FootballStatsDirect.com</a></li> <li><a href="#prisma-io-cloud-data-browser">Prisma.io Data Browser and ORM</a></li> <li><a href="#graphileon">Graphileon</a></li> </ul> <p><a href="#opensourceprojectsusingaggrid">Open Source Applications and Frameworks</a></p> <ul> <li><a href="#vuesticuiframework">Vuestic UI Framework</a></li> <li><a href="#lowdefylowcodetool">Lowdefy Low code Tool</a></li> <li><a href="#systelabangularcomponents">Systelab Angular Components</a></li> <li><a href="#constadesignreactcomponent">Consta Design React Component</a></li> <li><a href="#talendreactuicomponents">Talend React UI Components</a></li> <li><a href="#bloomhousingproject">Bloom Housing Project</a></li> <li><a href="#hoistreactcomponents">Hoist React Components</a></li> <li><a href="#apachetrafficcontrol">Apache Traffic Control</a></li> <li><a href="#blackbaudskyux">Blackbaud SkyUX</a></li> <li><a href="#astrospaceuxtheme">Astro space UX Theme</a></li> <li><a href="#sqlizedsqlfrontend">Sqlized SQL front end</a></li> </ul> </div><h2 id="example-grids">Example Grids</h2><p>This sample of grid examples from our site and <a href="https://ag-grid.com/javascript-grid/?ref=blog.ag-grid.com">documentation</a> often show more features than are required in a live grid, but are useful for exploring the capabilities.</p> <h3 id="the-kitchen-sink-demo">The Kitchen Sink Demo</h3><figure class="kg-card kg-image-card"><img src="https://blog.ag-grid.com/content/images/2021/06/AG-Grid--Demo-of-high-performance-datagrid-2021-06-28-at-3.40.22-pm.jpg" class="kg-image" alt="Kitchen sink Demo" loading="lazy" width="1109" height="734" srcset="https://blog.ag-grid.com/content/images/size/w600/2021/06/AG-Grid--Demo-of-high-performance-datagrid-2021-06-28-at-3.40.22-pm.jpg 600w, https://blog.ag-grid.com/content/images/size/w1000/2021/06/AG-Grid--Demo-of-high-performance-datagrid-2021-06-28-at-3.40.22-pm.jpg 1000w, https://blog.ag-grid.com/content/images/2021/06/AG-Grid--Demo-of-high-performance-datagrid-2021-06-28-at-3.40.22-pm.jpg 1109w" sizes="(min-width: 720px) 720px"></figure><p>The <a href="https://www.ag-grid.com/example.php?ref=blog.ag-grid.com">main example</a> used on the AG Grid site. It has as many features as possible activated to demonstrate the enterprise features: embedded charts, filtering, Excel and CSV export, custom menu items, pivot, custom cell renderers, quick filter, themes.</p> <div style="clear:both"></div> <ul> <li><a href="https://www.ag-grid.com/example.php?ref=blog.ag-grid.com">ag-grid.com/example.php</a></li> </ul> <h3 id="the-first-example">The First Example</h3><figure class="kg-card kg-image-card"><img src="https://blog.ag-grid.com/content/images/2021/06/AG-Grid--High-Performance-React-Grid--Angular-Grid--JavaScript-Grid-2021-06-28-at-3.54.09-pm.jpg" class="kg-image" alt="The First Example on the Site" loading="lazy" width="1046" height="534" srcset="https://blog.ag-grid.com/content/images/size/w600/2021/06/AG-Grid--High-Performance-React-Grid--Angular-Grid--JavaScript-Grid-2021-06-28-at-3.54.09-pm.jpg 600w, https://blog.ag-grid.com/content/images/size/w1000/2021/06/AG-Grid--High-Performance-React-Grid--Angular-Grid--JavaScript-Grid-2021-06-28-at-3.54.09-pm.jpg 1000w, https://blog.ag-grid.com/content/images/2021/06/AG-Grid--High-Performance-React-Grid--Angular-Grid--JavaScript-Grid-2021-06-28-at-3.54.09-pm.jpg 1046w" sizes="(min-width: 720px) 720px"></figure><p>The first example on our website shows custom rendering of cells, row selection, column spanning in the header, sorting, filtering and other basic functions. We even hid an easter egg, view the page at less than 767 pixels and see what happens.</p> <div style="clear:both"></div> <ul> <li><a href="https://ag-grid.com/?ref=blog.ag-grid.com">ag-grid.com</a></li> </ul> <h3 id="application-created-integrated-charts">Application Created Integrated Charts</h3><figure class="kg-card kg-image-card"><img src="https://blog.ag-grid.com/content/images/2021/08/compress-application-created-charts.gif" class="kg-image" alt="Application Created Charts" loading="lazy" width="544" height="363"></figure><p>This example is also on our home page, but the <a href="https://www.ag-grid.com/javascript-grid/integrated-charts/?ref=blog.ag-grid.com#example-application-created-charts">version in the documentation</a> for charts is editable so you can play with it and see how it works. The predefined chart in the example is updating at the same time as the data in the grid updates.</p> <div style="clear:both"></div> <ul> <li><a href="https://ag-grid.com/javascript-grid/integrated-charts/?ref=blog.ag-grid.com#example-application-created-charts">ag-grid.com/javascript-grid/integrated-charts/#example-application-created-charts</a></li> </ul> <h3 id="a-dashboard">A Dashboard</h3><figure class="kg-card kg-image-card"><img src="https://blog.ag-grid.com/content/images/2021/06/JavaScript-example-2021-06-28-at-4.01.41-pm.jpg" class="kg-image" alt loading="lazy" width="1085" height="725" srcset="https://blog.ag-grid.com/content/images/size/w600/2021/06/JavaScript-example-2021-06-28-at-4.01.41-pm.jpg 600w, https://blog.ag-grid.com/content/images/size/w1000/2021/06/JavaScript-example-2021-06-28-at-4.01.41-pm.jpg 1000w, https://blog.ag-grid.com/content/images/2021/06/JavaScript-example-2021-06-28-at-4.01.41-pm.jpg 1085w" sizes="(min-width: 720px) 720px"></figure><p>We created three dashboard examples in the <a href="https://www.ag-grid.com/javascript-grid/integrated-charts-cross-filtering/?ref=blog.ag-grid.com">Integrated Charting documentation</a>. The thumbnail highlights the Sales Dashboard example to provide an demo of the type of application page that might be present in an admin interface. Because we've linked to the documentation, you can edit the example and see how it works.</p> <div style="clear:both"></div> <ul> <li><a href="https://www.ag-grid.com/javascript-grid/integrated-charts-cross-filtering/?ref=blog.ag-grid.com#example-sales-dashboard2">See it in action and experiment</a></li> </ul> <h3 id="standalone-charts-explorer">Standalone Charts Explorer</h3><figure class="kg-card kg-image-card"><img src="https://blog.ag-grid.com/content/images/2021/08/charts-explorer-compressed.gif" class="kg-image" alt="Charts Explorer" loading="lazy" width="532" height="300"></figure><p>Our own chart library has a lot of options and we have a <a href="https://www.ag-grid.com/javascript-charts/overview/?ref=blog.ag-grid.com">separate gallery page</a> in the documentation just for the chart library. Rather than showcase the gallery we are using the <a href="https://www.ag-grid.com/javascript-charts/api-explorer/?ref=blog.ag-grid.com">Charts API Explorer</a>, and interactive page where you can amend the customisation and create different charts dynamically.</p> <div style="clear:both"></div> <ul> <li><a href="https://www.ag-grid.com/javascript-charts/api-explorer/?ref=blog.ag-grid.com">https://www.ag-grid.com/javascript-charts/api-explorer/</a></li> </ul> <h2 id="blog-example-applications">Blog Example Applications</h2><p>Some of our blog posts have fairly complicated examples to support them, usually in the tutorials category. We've cherry picked a few below. Since they come with full source code you can expand them to add the missing features which is a great way to learn to work with existing grid application code.</p><h3 id="pomodoro-app">Pomodoro App</h3><figure class="kg-card kg-image-card"><img src="https://blog.ag-grid.com/content/images/2022/06/pomodoro.gif" class="kg-image" alt loading="lazy" width="1714" height="1138" srcset="https://blog.ag-grid.com/content/images/size/w600/2022/06/pomodoro.gif 600w, https://blog.ag-grid.com/content/images/size/w1000/2022/06/pomodoro.gif 1000w, https://blog.ag-grid.com/content/images/size/w1600/2022/06/pomodoro.gif 1600w, https://blog.ag-grid.com/content/images/2022/06/pomodoro.gif 1714w" sizes="(min-width: 720px) 720px"></figure><p>Shuheb did a fantastic job explaining React hooks and, as a side-effect, created one of the best (and best looking) Pomodoro apps we've ever seen. The blog post shows how to use useEffect, useState, useReducer, useContext & useRef, and covers inter component communication.</p> <ul> <li><a href="https://shuheb.github.io/ag-grid-pomodoro/?ref=blog.ag-grid.com">Use the Pomodoro App</a></li> <li><a href="https://blog.ag-grid.com/react-data-grid-use-hooks-to-build-a-pomodoro-app/">Read the blog post</a></li> <li><a href="https://github.com/shuheb/ag-grid-pomodoro?ref=blog.ag-grid.com">Learn from the source code</a></li> </ul> <h3 id="holiday-tracking-app">Holiday Tracking App</h3><figure class="kg-card kg-image-card"><img src="https://blog.ag-grid.com/content/images/2021/06/AgGridHolidayApp-2021-06-28-at-4.20.29-pm.jpg" class="kg-image" alt="Holiday Tracking App" loading="lazy" width="1102" height="326" srcset="https://blog.ag-grid.com/content/images/size/w600/2021/06/AgGridHolidayApp-2021-06-28-at-4.20.29-pm.jpg 600w, https://blog.ag-grid.com/content/images/size/w1000/2021/06/AgGridHolidayApp-2021-06-28-at-4.20.29-pm.jpg 1000w, https://blog.ag-grid.com/content/images/2021/06/AgGridHolidayApp-2021-06-28-at-4.20.29-pm.jpg 1102w" sizes="(min-width: 720px) 720px"></figure><p>The Holiday Tracking App from <a href="https://blog.ag-grid.com/author/shuheb/">Shuheb</a> in this <a href="https://blog.ag-grid.com/using-third-party-datepickers-in-ag-grid/">3rd Party DatePickers blog post</a> doesn't just show 3rd party DatePickers, it also has Custom Cell Rendering on the Status and "Actions" field. Suggested improvements to try and implement are 'clear' the holidays to start a new year, and storing the holiday status to local storage.</p> <div style="clear:both"></div> <ul> <li><a href="https://stackblitz.com/edit/ag-grid-holiday-app?ref=blog.ag-grid.com">StackBlitz hosted example</a></li> <li><a href="https://github.com/shuheb/ag-grid-holiday-app?ref=blog.ag-grid.com">Github Source (Angular)</a></li> </ul> <h3 id="todo-app">TODO App</h3><figure class="kg-card kg-image-card"><img src="https://blog.ag-grid.com/content/images/2021/06/ag-grid-todo-list-react-typescript.stackblitz.io-2021-06-28-at-4.33.01-pm.jpg" class="kg-image" alt="TODO List App" loading="lazy" width="682" height="284" srcset="https://blog.ag-grid.com/content/images/size/w600/2021/06/ag-grid-todo-list-react-typescript.stackblitz.io-2021-06-28-at-4.33.01-pm.jpg 600w, https://blog.ag-grid.com/content/images/2021/06/ag-grid-todo-list-react-typescript.stackblitz.io-2021-06-28-at-4.33.01-pm.jpg 682w"></figure><p>Putting to one side any discussion of <a href="https://blog.ag-grid.com/author/ahmed/">Ahmed's</a> chosen colour scheme, this Todo App written for the "<a href="https://blog.ag-grid.com/take-full-control-of-editing-in-ag-grid/">Renderers as Editors</a>" blog post is pretty good starting point for a todo app. Suggested next steps when playing with the code are: add local storage, filtering on done/not done, highlighting over-due tasks.</p> <ul> <li><a href="https://github.com/AhmedAGadir/ag-grid-todo-list-react-typescript?ref=blog.ag-grid.com">Github Repo (React)</a></li> </ul> <h3 id="sliding-puzzle-game">Sliding Puzzle Game</h3><figure class="kg-card kg-image-card"><img src="https://blog.ag-grid.com/content/images/2021/10/sliding-anim-optimised-1.gif" class="kg-image" alt loading="lazy" width="498" height="306"></figure><p>Written to create a showcase demo of the new <a href="https://www.ag-grid.com/react-data-grid/reactui/?ref=blog.ag-grid.com">React Rendering Engine</a> this puzzle game uses custom Cell Renderers and Custom Headers to create buttons which move the puzzle pieces. All rendered in AG Grid. Read the <a href="https://blog.ag-grid.com/creating-a-react-tile-slider-puzzle/">blog How To Post Here</a>.</p> <ul> <li><a href="https://ag-grid.github.io/react-data-grid/slider-game/index.html?ref=blog.ag-grid.com">Play the Game Online</a></li> <li><a href="https://github.com/ag-grid/react-data-grid/tree/main/slider-game-puzzle?ref=blog.ag-grid.com">Github Source</a></li> </ul> <h3 id="podcast-player">Podcast Player</h3><figure class="kg-card kg-image-card"><img src="https://blog.ag-grid.com/content/images/2021/10/podcast-player-thumb-compress.png" class="kg-image" alt loading="lazy" width="1057" height="674" srcset="https://blog.ag-grid.com/content/images/size/w600/2021/10/podcast-player-thumb-compress.png 600w, https://blog.ag-grid.com/content/images/size/w1000/2021/10/podcast-player-thumb-compress.png 1000w, https://blog.ag-grid.com/content/images/2021/10/podcast-player-thumb-compress.png 1057w" sizes="(min-width: 720px) 720px"></figure><p>Podcast Player written in React using the community edition of AG Grid with custom cell renderers and RSS parsing.</p> <ul> <li><a href="https://eviltester.github.io/podcast-player/?ref=blog.ag-grid.com">Use the podcast player here</a></li> <li><a href="https://github.com/ag-grid/react-data-grid/tree/main/podcast-player?ref=blog.ag-grid.com">Source for the podcast player</a></li> <li><a href="https://blog.ag-grid.com/how-to-write-a-podcast-app-using-react/">Tutorial post and videos describing how to create Podcast Player</a></li> </ul> <h2 id="3rd-party-public-examples">3rd Party Public Examples</h2><h3 id="flight-fuel-consumption-tables">Flight Fuel Consumption Tables</h3><figure class="kg-card kg-image-card"><img src="https://blog.ag-grid.com/content/images/2021/06/---Flight-Fuel-Consumption-Table-2021-06-28-at-4.40.16-pm.jpg" class="kg-image" alt loading="lazy" width="1102" height="721" srcset="https://blog.ag-grid.com/content/images/size/w600/2021/06/---Flight-Fuel-Consumption-Table-2021-06-28-at-4.40.16-pm.jpg 600w, https://blog.ag-grid.com/content/images/size/w1000/2021/06/---Flight-Fuel-Consumption-Table-2021-06-28-at-4.40.16-pm.jpg 1000w, https://blog.ag-grid.com/content/images/2021/06/---Flight-Fuel-Consumption-Table-2021-06-28-at-4.40.16-pm.jpg 1102w" sizes="(min-width: 720px) 720px"></figure><p>The <a href="https://despouy.ca/flight-fuel-table/?ref=blog.ag-grid.com">Flight Fuel Consumptions Tables</a> application shows up to date information of recent flights and their associated fuel consumption. Created by <a href="https://despouy.ca/?ref=blog.ag-grid.com">Pedro Despouy</a> to bypass the 2 year delay in official Canadian emissions reporting. AG Grid is used to render the data and provide out of the box sorting and filter. Pedro has added custom cell rendering, data loading from API and 'on click' display of data in the text view.</p> <div style="clear:both"></div> <ul> <li><a href="https://despouy.ca/flight-fuel-table/?ref=blog.ag-grid.com">Use the Flight Fuel Consumption Tables App</a></li> </ul> <h3 id="unavco-network-monitoring-map">Unavco Network Monitoring Map</h3><figure class="kg-card kg-image-card"><img src="https://blog.ag-grid.com/content/images/2021/06/UNAVCO-Network-Monitoring-Map-2021-06-28-at-4.50.53-pm.jpg" class="kg-image" alt loading="lazy" width="1103" height="742" srcset="https://blog.ag-grid.com/content/images/size/w600/2021/06/UNAVCO-Network-Monitoring-Map-2021-06-28-at-4.50.53-pm.jpg 600w, https://blog.ag-grid.com/content/images/size/w1000/2021/06/UNAVCO-Network-Monitoring-Map-2021-06-28-at-4.50.53-pm.jpg 1000w, https://blog.ag-grid.com/content/images/2021/06/UNAVCO-Network-Monitoring-Map-2021-06-28-at-4.50.53-pm.jpg 1103w" sizes="(min-width: 720px) 720px"></figure><p><a href="https://www.unavco.org/?ref=blog.ag-grid.com">Unavco</a> use AG Grid a part of their <a href="https://www.unavco.org/instrumentation/networks/map/map.html?ref=blog.ag-grid.com">public Network Monitoring application</a>. Combining a linked map view and grid view with custom cell renderers to make the data easy to understand at a glance and to click through for more information.</p> <div style="clear:both"></div> <ul> <li><a href="https://www.unavco.org/instrumentation/networks/map/map.html?ref=blog.ag-grid.com">Use the application on the Unavco Site here</a></li> </ul> <h3 id="anywaydata-com">AnyWayData.com</h3><figure class="kg-card kg-image-card"><img src="https://blog.ag-grid.com/content/images/2021/10/markdown-table-editor-2021-10-21_12-51-40-compress.png" class="kg-image" alt loading="lazy" width="1104" height="775" srcset="https://blog.ag-grid.com/content/images/size/w600/2021/10/markdown-table-editor-2021-10-21_12-51-40-compress.png 600w, https://blog.ag-grid.com/content/images/size/w1000/2021/10/markdown-table-editor-2021-10-21_12-51-40-compress.png 1000w, https://blog.ag-grid.com/content/images/2021/10/markdown-table-editor-2021-10-21_12-51-40-compress.png 1104w" sizes="(min-width: 720px) 720px"></figure><p>This <a href="https://eviltester.github.io/grid-table-editor/?ref=blog.ag-grid.com">open source Markdown and CSV editor</a> uses the community edition of AG Grid. The data grid is used for sorting, filtering, in-cell editing, and drag and drop re-ordering of the rows and columns. Columns and rows can be added and deleted. All the various formats can be imported, exported and converted between e.g. CSV to Gherkin table. The app can also be used to generate random test data.</p> <ul> <li><a href="https://anywaydata.com/?ref=blog.ag-grid.com">Use the Grid Editor here</a></li> <li><a href="https://github.com/eviltester/grid-table-editor?ref=blog.ag-grid.com">Source Code for the application is on Github</a></li> </ul> <h3 id="live-football-statistics">Live Football Statistics</h3><figure class="kg-card kg-image-card"><img src="https://blog.ag-grid.com/content/images/2021/11/football-stats-666x455-tiny.png" class="kg-image" alt loading="lazy" width="666" height="455" srcset="https://blog.ag-grid.com/content/images/size/w600/2021/11/football-stats-666x455-tiny.png 600w, https://blog.ag-grid.com/content/images/2021/11/football-stats-666x455-tiny.png 666w"></figure><p><a href="https://footballstatsdirect.com/?ref=blog.ag-grid.com">FootballStatsDirect.com</a>, has live European Football data refreshed daily and rendered in an AG Grid Data Grid. This uses the Enterprise edition and has integrated charts enabled. We have documented this as <a href="https://blog.ag-grid.com/football-stats-direct-interview/">a case study on the blog</a> and a <a href="https://blog.ag-grid.com/football-stats-direct/">post describing the architectural decision making process</a>.</p> <ul> <li><a href="https://footballstatsdirect.com/?ref=blog.ag-grid.com">Analyse the Live Football Data here</a></li> </ul> <h3 id="prisma-io-cloud-data-browser">Prisma.io Cloud Data Browser</h3><figure class="kg-card kg-image-card"><img src="https://blog.ag-grid.com/content/images/2022/03/prismadatabrowser--1-.png" class="kg-image" alt loading="lazy" width="1200" height="654" srcset="https://blog.ag-grid.com/content/images/size/w600/2022/03/prismadatabrowser--1-.png 600w, https://blog.ag-grid.com/content/images/size/w1000/2022/03/prismadatabrowser--1-.png 1000w, https://blog.ag-grid.com/content/images/2022/03/prismadatabrowser--1-.png 1200w" sizes="(min-width: 720px) 720px"></figure><p><a href="https://prisma.io/?ref=blog.ag-grid.com">Prisma.io</a> use the Community Edition of AG Grid to power the data browser view of their low code Data Modelling and ORM solution. You can see <a href="https://blog.ag-grid.com/prisma-io-case-study/">a case study of Prisma and their AG Grid evaluation</a> on the blog.</p> <ul> <li><a href="https://www.prisma.io/dataplatform?ref=blog.ag-grid.com">Cloud Data Platform</a></li> <li><a href="https://www.prisma.io/client?ref=blog.ag-grid.com">Prisma Client ORM</a></li> </ul> <h3 id="graphileon">Graphileon</h3><figure class="kg-card kg-image-card"><img src="https://blog.ag-grid.com/content/images/2022/03/graphileon--1-.png" class="kg-image" alt loading="lazy" width="1278" height="668" srcset="https://blog.ag-grid.com/content/images/size/w600/2022/03/graphileon--1-.png 600w, https://blog.ag-grid.com/content/images/size/w1000/2022/03/graphileon--1-.png 1000w, https://blog.ag-grid.com/content/images/2022/03/graphileon--1-.png 1278w" sizes="(min-width: 720px) 720px"></figure><p>Graphileon takes graph databases and turns them into applications for visual data management. Allowing Information analysts and business consultants to quickly create graph-based applications. A Free Personal Edition is available.</p> <ul> <li><a href="https://graphileon.com/?ref=blog.ag-grid.com">https://graphileon.com/</a></li> </ul> <h2 id="ag-grid-github-example-projects">AG Grid Github Example Projects</h2><h3 id="react-data-grid-examples">React Data Grid Examples</h3><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://blog.ag-grid.com/content/images/2021/07/React-Data-Grid-Examples-1.png" class="kg-image" alt loading="lazy" width="688" height="400" srcset="https://blog.ag-grid.com/content/images/size/w600/2021/07/React-Data-Grid-Examples-1.png 600w, https://blog.ag-grid.com/content/images/2021/07/React-Data-Grid-Examples-1.png 688w"><figcaption>AG Grid Example React Projects</figcaption></figure><p>We maintain a <a href="https://github.com/ag-grid/ag-grid-react-example?ref=blog.ag-grid.com">React Data Grid example repo</a> with three sample projects: a Stock Trading Dashboard simulator, an interactive feature example, demonstration of a 'large' grid. (676 columns by 1000 rows).</p> <div style="clear:both"></div> <ul> <li><a href="https://blog.ag-grid.com/react-data-grid-example-projects/">Read descriptions of these projects and try the suggested exercises</a>.</li> </ul> <h2 id="libraries-and-wrappers">Libraries and Wrappers</h2><p>People build on AG Grid to make our data grid accessible to other languages and augment with more user focussed features.</p><h3 id="adaptabletable-from-adaptable-tools">AdaptableTable from Adaptable Tools</h3><figure class="kg-card kg-image-card"><img src="https://blog.ag-grid.com/content/images/2022/03/adaptable-tools--1-.png" class="kg-image" alt loading="lazy" width="1620" height="1026" srcset="https://blog.ag-grid.com/content/images/size/w600/2022/03/adaptable-tools--1-.png 600w, https://blog.ag-grid.com/content/images/size/w1000/2022/03/adaptable-tools--1-.png 1000w, https://blog.ag-grid.com/content/images/size/w1600/2022/03/adaptable-tools--1-.png 1600w, https://blog.ag-grid.com/content/images/2022/03/adaptable-tools--1-.png 1620w" sizes="(min-width: 720px) 720px"></figure><p>AdaptableTable is a library that extends AG Grid with new features like a query language, calculated fields, user customisable cell formatting, alerts when data changes, setting panel and a whole bunch more end user focussed functionality.</p> <ul> <li><a href="https://www.adaptabletools.com/?ref=blog.ag-grid.com">AdaptableTools.com</a></li> <li><a href="https://www.adaptabletools.com/demos?ref=blog.ag-grid.com">Demo applications</a></li> <li><a href="https://youtu.be/10elxyyiQ7M?ref=blog.ag-grid.com">Demo Video and Interview</a></li> </ul> <h3 id="streamlit-io-wrapper">Streamlit.io Wrapper</h3><figure class="kg-card kg-image-card"><img src="https://blog.ag-grid.com/content/images/2022/03/streamlit-aggrid--1-.png" class="kg-image" alt loading="lazy" width="1352" height="821" srcset="https://blog.ag-grid.com/content/images/size/w600/2022/03/streamlit-aggrid--1-.png 600w, https://blog.ag-grid.com/content/images/size/w1000/2022/03/streamlit-aggrid--1-.png 1000w, https://blog.ag-grid.com/content/images/2022/03/streamlit-aggrid--1-.png 1352w" sizes="(min-width: 720px) 720px"></figure><p>Streamlit.io is a Python framework for creating web based Python languages and is often used by the Data Science Community. Pablo Fonseca created a wrapper for AG Grid which allows our Data Table to be used in Streamlit Applications.</p> <ul> <li><a href="https://streamlit-aggrid.readthedocs.io/en/docs/?ref=blog.ag-grid.com">Documentation</a></li> <li><a href="https://share.streamlit.io/pablocfonseca/streamlit-aggrid/main/examples/example.py?ref=blog.ag-grid.com">Demos</a></li> <li><a href="https://blog.ag-grid.com/pablo-fonseca-streamlit/">Watch an interview with Pablo Fonseca</a></li> </ul> <p>Some sample applications using this wrapper:</p> <ul> <li><a href="https://share.streamlit.io/gerardrbentley/fidelity-account-overview/main/app.py?ref=blog.ag-grid.com">Fidelity Account Overview Dashboard</a></li> </ul> <hr><h2 id="opensourceprojectsusingaggrid">Open Source Projects Using AG Grid</h2> <p>AG Grid community edition is MIT Licensed and free to use in commercial applications so we often find it used in Open Source Projects. We've listed a few notable projects below, and the benefit of them being Open Source means you can study the code and learn from them.</p> <h3 id="vuesticuiframework">Vuestic UI Framework</h3> <p>The <a href="https://vuestic.dev/?ref=blog.ag-grid.com">Vuestic UI Framework</a> is a comprehensive Vue component library which has a <a href="https://vuestic.dev/en/extensions/ag-grid?ref=blog.ag-grid.com">styling theme for AG Grid</a> to make it the <a href="https://github.com/epicmaxco/vuestic-ui?ref=blog.ag-grid.com">data grid in the component suite</a>.</p> <h3 id="lowdefylowcodetool">Lowdefy Low code Tool</h3> <p><a href="https://lowdefy.com/?ref=blog.ag-grid.com">Lowdefy</a> is a low code tool that uses AG Grid as a block component, allowing you to create apps which render data in AG Grid without a lot of coding knowledge. There is <a href="https://example-reporting.lowdefy.com/report?ref=blog.ag-grid.com">a Lowdefy example using AG Grid here</a>.</p> <h3 id="systelabangularcomponents">Systelab Angular Components</h3> <p>The <a href="https://github.com/systelab/systelab-components?ref=blog.ag-grid.com">Systelab Component Library</a> has common components for Angular. AG Grid is used as the grid component in their <a href="https://systelab.github.io/components/?ref=blog.ag-grid.com">'tables' component showcase</a>.</p> <h3 id="constadesignreactcomponent">Consta Design React Component</h3> <p>Consta Design have created a <a href="https://github.com/consta-design-system/ag-grid-adapter?ref=blog.ag-grid.com">React component that wraps AG Grid</a> to provide some formatting and editing components. You can see it in action in their <a href="https://ag-grid-adapter.consta.design/?path=%2Fstory%2Fcommon-start--page&ref=blog.ag-grid.com">Storybook implementation</a>.</p> <h3 id="talendreactuicomponents">Talend React UI Components</h3> <p>The <a href="https://github.com/Talend/ui/?ref=blog.ag-grid.com">React UI Components from Talend</a> have a <a href="http://talend.surge.sh/datagrid/?path=%2Fstory%2Fcomponents-headercellrenderer--all&ref=blog.ag-grid.com">Storybook playground for header cell renderer</a> and the other AG Grid customizations for editing and column layouts.</p> <h3 id="bloomhousingproject">Bloom Housing Project</h3> <p>The <a href="https://github.com/bloom-housing/bloom?ref=blog.ag-grid.com">Bloom Housing Project</a> uses AG Grid in their admin interface and you can see the customizations in their <a href="https://storybook.bloom.exygy.dev/?path=%2Fstory%2Ftables-agtable--default&ref=blog.ag-grid.com">Storybook with Table stories</a></p> <h3 id="hoistreactcomponents">Hoist React Components</h3> <p>Hoist use AG Grid in their <a href="https://github.com/xh/hoist-react?ref=blog.ag-grid.com">Hoist React Components library</a> as one of their core components for data store rendering. It is possible to see their components in action by <a href="https://toolbox.xh.io/app/home?ref=blog.ag-grid.com">logging in to their sample toolbox application</a></p> <h3 id="apachetrafficcontrol">Apache Traffic Control</h3> <p><a href="https://trafficcontrol.apache.org/?ref=blog.ag-grid.com">Apache Traffic Control</a>, the open source CDN is <a href="https://github.com/apache/trafficcontrol/milestone/23?ref=blog.ag-grid.com">migrating their data tables to use AG Grid</a>.</p> <h3 id="blackbaudskyux">Blackbaud SkyUX</h3> <p><a href="https://developer.blackbaud.com/skyux/?ref=blog.ag-grid.com">Blackbaud SkyUX</a> User Experience Framework uses AG Grid as the Data Entry Grid, as you can see in <a href="https://developer.blackbaud.com/skyux/components/data-entry-grid?docs-active-tab=design&ref=blog.ag-grid.com">their component showcase examples</a>.</p> <h3 id="astrospaceuxtheme">Astro space UX Theme</h3> <p>The <a href="https://www.astrouxds.com/?ref=blog.ag-grid.com">Astro Space UX Design System</a> has a set of design patterns and AG Grid is the <a href="https://www.astrouxds.com/patterns/table/?ref=blog.ag-grid.com#complex-tables">recommended grid for complex tables</a>. They provide <a href="https://github.com/RocketCommunicationsInc/astro-ag-Grid?ref=blog.ag-grid.com">a theme for AG Grid</a> which can be seen in the <a href="https://astro-ag-grid-example.netlify.app/?ref=blog.ag-grid.com">Astro Theme Testbed</a></p> <h3 id="sqlizedsqlfrontend">Sqlized SQL front end</h3> <p>This <a href="https://github.com/TheIncredibleVee/sqlized?ref=blog.ag-grid.com">SQL app</a> has examples of using <a href="https://sqlized.vercel.app/?ref=blog.ag-grid.com">AG Grid as the data grid for the SQL results</a>.</p> <p><em>If you know of any public applications, or have written an application using AG Grid that we might be able to showcase then let us know <a href="mailto:info@ag-grid.com">info@ag-grid.com</a></em></p> </div> </section> <footer class="share-footer"> <span class="share-label text-secondary">Share</span> <a class="share-social-media twitter" href="https://twitter.com/share?text=Showcase Grid Examples and Sample Applications&url=https://blog.ag-grid.com/showcase/" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;" title="Twitter" target="_blank" rel="noopener"><svg width="1092" height="1075" viewBox="0 0 1092 1075" fill="none" xmlns="http://www.w3.org/2000/svg" size="32" class="icon" ><g clip-path="url(#clip0_404_5)"><path d="M622.109 475.189L919.927 129H849.353L590.758 429.591L384.219 129H146L458.328 583.547L146 946.58H216.577L489.661 629.145L707.781 946.58H946L622.091 475.189H622.109ZM525.443 587.552L493.798 542.289L242.007 182.13H350.41L553.608 472.79L585.253 518.053L849.387 895.867H740.984L525.443 587.569V587.552Z" ></path></g><defs><clipPath id="clip0_404_5"><rect width="800" height="818" transform="translate(146 129)" ></rect></clipPath></defs></svg></a> <a class="share-social-media facebook" href="https://www.facebook.com/sharer/sharer.php?u=https://blog.ag-grid.com/showcase/" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;" title="Facebook" target="_blank" rel="noopener"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z" /></svg></a> </footer> <footer class="post-full-footer"> <ul class="author-list author-list-large list-style-none"> <li class="author-list-item"> <a href="/author/alan/" class="author"> <img class="author-profile-image" src="/content/images/size/w100/2021/06/alan.jpeg" alt="Alan Richardson" /> <div class="author-name-and-bio"> <span class="author-name text-secondary font-size-extra-large">Alan Richardson</span> <span class="author-bio text-secondary font-size-small">Alan is Head of Digital Marketing at AG Grid. You can also find him blogging about marketing at https://talotics.com</span> </div> </a> </li> </ul> </footer> <p class="tags-list-description text-secondary font-size-medium">Read more posts about...</p> <ul class="other-tags-list list-style-none"> <li> <a href="/tag/version-release/">Versions</a> </li> <li> <a href="/tag/how-to/">How toʼs</a> </li> <li> <a href="/tag/tutorial/">Tutorials</a> </li> <li> <a href="/tag/testing/">Testing</a> </li> </ul> <ul class="framework-tags-list list-style-none"> <li> <a href="/tag/javascript/"> <svg class="icon" width="100%" height="100%" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" > <rect x="0" y="0" width="256" height="256" style="fill:rgb(247,223,30);fill-rule:nonzero;" /> <g transform="matrix(1,0,0,1,4.20544,0)"> <g transform="matrix(1,0,0,1,-27.8948,-48.7274)"> <path d="M67.312,213.932L86.903,202.076C90.682,208.777 94.12,214.447 102.367,214.447C110.272,214.447 115.256,211.355 115.256,199.327L115.256,117.529L139.314,117.529L139.314,199.667C139.314,224.584 124.708,235.926 103.398,235.926C84.153,235.926 72.982,225.959 67.311,213.93" style="fill: #000;" /> </g> <g transform="matrix(1,0,0,1,-27.8948,-48.0406)"> <path d="M152.381,211.354L171.969,200.013C177.126,208.434 183.828,214.62 195.684,214.62C205.653,214.62 212.009,209.636 212.009,202.762C212.009,194.514 205.479,191.592 194.481,186.782L188.468,184.203C171.111,176.815 159.597,167.535 159.597,147.945C159.597,129.901 173.345,116.153 194.826,116.153C210.12,116.153 221.118,121.481 229.022,135.4L210.291,147.429C206.166,140.04 201.7,137.119 194.826,137.119C187.78,137.119 183.312,141.587 183.312,147.429C183.312,154.646 187.78,157.568 198.09,162.037L204.104,164.614C224.553,173.379 236.067,182.313 236.067,202.418C236.067,224.072 219.055,235.928 196.2,235.928C173.861,235.928 159.426,225.274 152.381,211.354" style="fill: #000;" /> </g> </g> </svg> <span>Javascript</span> </a> </li> <li> <a href="/tag/react-data-grid/"> <svg class="icon" width="256px" height="228px" viewBox="0 0 256 228" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" > <path d="M210.483381,73.8236374 C207.827698,72.9095503 205.075867,72.0446761 202.24247,71.2267368 C202.708172,69.3261098 203.135596,67.4500894 203.515631,65.6059664 C209.753843,35.3248922 205.675082,10.9302478 191.747328,2.89849283 C178.392359,-4.80289661 156.551327,3.22703567 134.492936,22.4237776 C132.371761,24.2697233 130.244662,26.2241201 128.118477,28.2723861 C126.701777,26.917204 125.287358,25.6075897 123.876584,24.3549348 C100.758745,3.82852863 77.5866802,-4.82157937 63.6725966,3.23341515 C50.3303869,10.9571328 46.3792156,33.8904224 51.9945178,62.5880206 C52.5367729,65.3599011 53.1706189,68.1905639 53.8873982,71.068617 C50.6078941,71.9995641 47.4418534,72.9920277 44.4125156,74.0478303 C17.3093297,83.497195 0,98.3066828 0,113.667995 C0,129.533287 18.5815786,145.446423 46.8116526,155.095373 C49.0394553,155.856809 51.3511025,156.576778 53.7333796,157.260293 C52.9600965,160.37302 52.2875179,163.423318 51.7229345,166.398431 C46.3687351,194.597975 50.5500231,216.989464 63.8566899,224.664425 C77.6012619,232.590464 100.66852,224.443422 123.130185,204.809231 C124.905501,203.257196 126.687196,201.611293 128.472081,199.886102 C130.785552,202.113904 133.095375,204.222319 135.392897,206.199955 C157.14963,224.922338 178.637969,232.482469 191.932332,224.786092 C205.663234,216.837268 210.125675,192.78347 204.332202,163.5181 C203.88974,161.283006 203.374826,158.99961 202.796573,156.675661 C204.416503,156.196743 206.006814,155.702335 207.557482,155.188332 C236.905331,145.46465 256,129.745175 256,113.667995 C256,98.2510906 238.132466,83.3418093 210.483381,73.8236374 L210.483381,73.8236374 Z M204.118035,144.807565 C202.718197,145.270987 201.281904,145.718918 199.818271,146.153177 C196.578411,135.896354 192.205739,124.989735 186.854729,113.72131 C191.961041,102.721277 196.164656,91.9540963 199.313837,81.7638014 C201.93261,82.5215915 204.474374,83.3208483 206.923636,84.1643056 C230.613348,92.3195488 245.063763,104.377206 245.063763,113.667995 C245.063763,123.564379 229.457753,136.411268 204.118035,144.807565 L204.118035,144.807565 Z M193.603754,165.642007 C196.165567,178.582766 196.531475,190.282717 194.834536,199.429057 C193.309843,207.64764 190.243595,213.12715 186.452366,215.321689 C178.384612,219.991462 161.131788,213.921395 142.525146,197.909832 C140.392124,196.074366 138.243609,194.114502 136.088259,192.040261 C143.301619,184.151133 150.510878,174.979732 157.54698,164.793993 C169.922699,163.695814 181.614905,161.900447 192.218042,159.449363 C192.740247,161.555956 193.204126,163.621993 193.603754,165.642007 L193.603754,165.642007 Z M87.2761866,214.514686 C79.3938934,217.298414 73.1160375,217.378157 69.3211631,215.189998 C61.2461189,210.532528 57.8891498,192.554265 62.4682434,168.438039 C62.9927272,165.676183 63.6170041,162.839142 64.3365173,159.939216 C74.8234575,162.258154 86.4299951,163.926841 98.8353334,164.932519 C105.918826,174.899534 113.336329,184.06091 120.811247,192.08264 C119.178102,193.65928 117.551336,195.16028 115.933685,196.574699 C106.001303,205.256705 96.0479605,211.41654 87.2761866,214.514686 L87.2761866,214.514686 Z M50.3486141,144.746959 C37.8658105,140.48046 27.5570398,134.935332 20.4908634,128.884403 C14.1414664,123.446815 10.9357817,118.048415 10.9357817,113.667995 C10.9357817,104.34622 24.8334611,92.4562517 48.0123604,84.3748281 C50.8247961,83.3942121 53.7689223,82.4701001 56.8242337,81.6020363 C60.0276398,92.0224477 64.229889,102.917218 69.3011135,113.93411 C64.1642716,125.11459 59.9023288,136.182975 56.6674809,146.725506 C54.489347,146.099407 52.3791089,145.440499 50.3486141,144.746959 L50.3486141,144.746959 Z M62.7270678,60.4878073 C57.9160346,35.9004118 61.1112387,17.3525532 69.1516515,12.6982729 C77.7160924,7.74005624 96.6544653,14.8094222 116.614922,32.5329619 C117.890816,33.6657739 119.171723,34.8514442 120.456275,36.0781256 C113.018267,44.0647686 105.66866,53.1573386 98.6480514,63.0655695 C86.6081646,64.1815215 75.0831931,65.9741531 64.4868907,68.3746571 C63.8206914,65.6948233 63.2305903,63.0619242 62.7270678,60.4878073 L62.7270678,60.4878073 Z M173.153901,87.7550367 C170.620796,83.3796304 168.020249,79.1076627 165.369124,74.9523483 C173.537126,75.9849113 181.362914,77.3555864 188.712066,79.0329319 C186.505679,86.1041206 183.755673,93.4974728 180.518546,101.076741 C178.196419,96.6680702 175.740322,92.2229454 173.153901,87.7550367 L173.153901,87.7550367 Z M128.122121,43.8938899 C133.166461,49.3588189 138.218091,55.4603279 143.186789,62.0803968 C138.179814,61.8439007 133.110868,61.720868 128.000001,61.720868 C122.937434,61.720868 117.905854,61.8411667 112.929865,62.0735617 C117.903575,55.515009 122.99895,49.4217021 128.122121,43.8938899 L128.122121,43.8938899 Z M82.8018984,87.830679 C80.2715265,92.2183886 77.8609975,96.6393627 75.5753239,101.068539 C72.3906004,93.5156998 69.6661103,86.0886276 67.440586,78.9171899 C74.7446255,77.2826781 82.5335049,75.9461789 90.6495601,74.9332099 C87.9610684,79.1268011 85.3391054,83.4302106 82.8018984,87.8297677 L82.8018984,87.830679 L82.8018984,87.830679 Z M90.8833221,153.182899 C82.4979621,152.247395 74.5919739,150.979704 67.289757,149.390303 C69.5508242,142.09082 72.3354636,134.505173 75.5876271,126.789657 C77.8792246,131.215644 80.2993228,135.638441 82.8451877,140.03572 L82.8456433,140.03572 C85.4388987,144.515476 88.1255676,148.90364 90.8833221,153.182899 L90.8833221,153.182899 Z M128.424691,184.213105 C123.24137,178.620587 118.071264,172.434323 113.021912,165.780078 C117.923624,165.972373 122.921029,166.0708 128.000001,166.0708 C133.217953,166.0708 138.376211,165.953235 143.45336,165.727219 C138.468257,172.501308 133.434855,178.697141 128.424691,184.213105 L128.424691,184.213105 Z M180.622896,126.396409 C184.044571,134.195313 186.929004,141.741317 189.219234,148.9164 C181.796719,150.609693 173.782736,151.973534 165.339049,152.986959 C167.996555,148.775595 170.619884,144.430263 173.197646,139.960532 C175.805484,135.438399 178.28163,130.90943 180.622896,126.396409 L180.622896,126.396409 Z M163.724586,134.496971 C159.722835,141.435557 155.614455,148.059271 151.443648,154.311611 C143.847063,154.854776 135.998946,155.134562 128.000001,155.134562 C120.033408,155.134562 112.284171,154.887129 104.822013,154.402745 C100.48306,148.068386 96.285368,141.425078 92.3091341,134.556664 L92.3100455,134.556664 C88.3442923,127.706935 84.6943232,120.799333 81.3870228,113.930466 C84.6934118,107.045648 88.3338117,100.130301 92.276781,93.292874 L92.2758697,93.294241 C96.2293193,86.4385872 100.390102,79.8276317 104.688954,73.5329157 C112.302398,72.9573964 120.109505,72.6571055 127.999545,72.6571055 L128.000001,72.6571055 C135.925583,72.6571055 143.742714,72.9596746 151.353879,73.5402067 C155.587114,79.7888993 159.719645,86.3784378 163.688588,93.2350031 C167.702644,100.168578 171.389978,107.037901 174.724618,113.77508 C171.400003,120.627999 167.720871,127.566587 163.724586,134.496971 L163.724586,134.496971 Z M186.284677,12.3729198 C194.857321,17.3165548 198.191049,37.2542268 192.804953,63.3986692 C192.461372,65.0669011 192.074504,66.7661189 191.654369,68.4881206 C181.03346,66.0374921 169.500286,64.2138746 157.425315,63.0810626 C150.391035,53.0639249 143.101577,43.9572289 135.784778,36.073113 C137.751934,34.1806885 139.716356,32.3762092 141.672575,30.673346 C160.572216,14.2257007 178.236518,7.73185406 186.284677,12.3729198 L186.284677,12.3729198 Z M128.000001,90.8080696 C140.624975,90.8080696 150.859926,101.042565 150.859926,113.667995 C150.859926,126.292969 140.624975,136.527922 128.000001,136.527922 C115.375026,136.527922 105.140075,126.292969 105.140075,113.667995 C105.140075,101.042565 115.375026,90.8080696 128.000001,90.8080696 L128.000001,90.8080696 Z" fill="#00D8FF" ></path> </svg> <span>React</span> </a> </li> <li> <a href="/tag/angular/"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 223 236" width="100%" height="100%" > <g clip-path="url(#a)"> <path fill="url(#b)" d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z" ></path> <path fill="url(#c)" d="m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z" ></path> </g> <defs> <linearGradient id="b" x1="49.009" x2="225.829" y1="213.75" y2="129.722" gradientUnits="userSpaceOnUse" > <stop stop-color="#E40035"></stop> <stop offset=".24" stop-color="#F60A48"></stop> <stop offset=".352" stop-color="#F20755"></stop> <stop offset=".494" stop-color="#DC087D"></stop> <stop offset=".745" stop-color="#9717E7"></stop> <stop offset="1" stop-color="#6C00F5"></stop> </linearGradient> <linearGradient id="c" x1="41.025" x2="156.741" y1="28.344" y2="160.344" gradientUnits="userSpaceOnUse" > <stop stop-color="#FF31D9"></stop> <stop offset="1" stop-color="#FF5BE1" stop-opacity="0"></stop> </linearGradient> <clipPath id="a"><path fill="#fff" d="M0 0h223v236H0z" ></path></clipPath></defs></svg> <span>Angular</span> </a> </li> <li> <a href="/tag/vuejs/"> <svg class="icon" width="100%" height="100%" viewBox="0 0 256 221" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" > <path d="M0,0L128,220.8L256,0L204.8,0L128,132.48L50.56,0L0,0Z" style="fill:rgb(65,184,131);fill-rule:nonzero;" /> <path d="M50.56,0L128,133.12L204.8,0L157.44,0L128,51.2L97.92,0L50.56,0Z" style="fill:rgb(53,73,94);fill-rule:nonzero;" /> </svg> <span>Vue</span> </a> </li> </ul> <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js" ></script> <script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';}(jQuery));var $mcj = jQuery.noConflict(true);</script> <div id="mc_embed_signup" style="width: 100%;"> <form action="https://ag-grid.us11.list-manage.com/subscribe/post?u=9b44b788c97fa5b498fbbc9b5&id=9353cf87ce" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate > <div id="mc_embed_signup_scroll"> <label class="text-secondary font-size-small">Join the AG Grid Newsletter</label> <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="email" /> <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button button-secondary" /> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none" ></div> <div class="response" id="mce-success-response" style="display:none" ></div> </div>  <div style="position: absolute; left: -5000px;" aria-hidden="true"> <input type="text" name="b_9b44b788c97fa5b498fbbc9b5_9353cf87ce" tabindex="-1" value="" /> </div> </div> </form> </div> </article> </main> <aside class="read-next-outer"> <div class="read-next-inner"> <article class="read-next-card" > <header class="read-next-card-header"> <small class="read-next-card-header-sitetitle">— AG Grid Blog —</small> <h3 class="read-next-card-header-title"><a href="/tag/misc/">Misc</a></h3> </header> <div class="read-next-divider"><svg class="icon infinity-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" > <style> .infinity-icon { fill: transparent; stroke-width: 1px; } </style> <path d="M13 14.5s2 3 5 3 5.5-2.463 5.5-5.5S21 6.5 18 6.5c-5 0-7 11-12 11C2.962 17.5.5 15.037.5 12S3 6.5 6 6.5s4.5 3.5 4.5 3.5" /></svg></div> <div class="read-next-card-content"> <ul class="list-style-none"> <li><a href="/why-use-a-third-party-data-grid-component/">Why Use a Third-Party Data Grid Component?</a></li> <li><a href="/js-nation-and-react-summit-june-2022-overview/">JS Nation and React Summit June 2022 Overview</a></li> <li><a href="/how-to-evaluate-a-javascript-data-grid/">How to evaluate a Javascript Data Grid</a></li> </ul> </div> <footer class="read-next-card-footer"> <a href="/tag/misc/">See all 30 posts →</a> </footer> </article> <article class="post-card post tag-misc "> <a class="post-card-image-link" href="/friends/"> <img class="post-card-image" srcset="/content/images/size/w300/2021/07/friends-and-collaborators--1-.png 300w, /content/images/size/w600/2021/07/friends-and-collaborators--1-.png 600w, /content/images/size/w1000/2021/07/friends-and-collaborators--1-.png 1000w, /content/images/size/w2000/2021/07/friends-and-collaborators--1-.png 2000w" sizes="(max-width: 1000px) 400px, 700px" src="/content/images/size/w600/2021/07/friends-and-collaborators--1-.png" alt="Collaborators & Friends" /> </a> <div class="post-card-content"> <span class="post-card-tag text-secondary">Misc</span> <a class="post-card-content-link" href="/friends/"> <header class="post-card-header"> <h2 class="post-card-title">Collaborators & Friends</h2> </header> <section class="post-card-excerpt"> <p>we wanted to put something up to thank and showcase people that have been involved in sharing their knowledge and experience of using AG Grid, people we've collaborated and bounced ideas around with.</p> </section> </a> <footer class="post-card-meta"> <ul class="author-list list-style-none"> <li class="author-list-item"> <a href="/author/alan/" class="author"> <img class="author-profile-image" src="/content/images/size/w100/2021/06/alan.jpeg" alt="Alan Richardson" /> <span class="author-name text-secondary font-size-small">Alan Richardson</span> </a> </li> </ul> <span class="reading-time text-secondary font-size-small">3 min read</span> </footer> </div> </article> <article class="post-card post tag-tutorial tag-react-data-grid "> <a class="post-card-image-link" href="/switching-the-localization-language-in-ag-grid/"> <img class="post-card-image" srcset="/content/images/size/w300/2021/06/switching-localization-thumbnail.png 300w, /content/images/size/w600/2021/06/switching-localization-thumbnail.png 600w, /content/images/size/w1000/2021/06/switching-localization-thumbnail.png 1000w, /content/images/size/w2000/2021/06/switching-localization-thumbnail.png 2000w" sizes="(max-width: 1000px) 400px, 700px" src="/content/images/size/w600/2021/06/switching-localization-thumbnail.png" alt="Switching the localization language in AG Grid" /> </a> <div class="post-card-content"> <span class="post-card-tag text-secondary">Tutorial</span> <a class="post-card-content-link" href="/switching-the-localization-language-in-ag-grid/"> <header class="post-card-header"> <h2 class="post-card-title">Switching the localization language in AG Grid</h2> </header> <section class="post-card-excerpt"> <p>Learn how to switch the localization language on the fly in AG Grid, translating the grid UI language, column names and cell values. See the live sample using React.</p> </section> </a> <footer class="post-card-meta"> <ul class="author-list list-style-none"> <li class="author-list-item"> <a href="/author/bam/" class="author"> <img class="author-profile-image" src="/content/images/size/w100/2022/08/bam.jpg" alt="Bamdad Fard" /> <span class="author-name text-secondary font-size-small">Bamdad Fard</span> </a> </li> </ul> <span class="reading-time text-secondary font-size-small">11 min read</span> </footer> </div> </article> </div> </aside> </div> </div>  <footer class="site-footer"> <div class="darkmode-data-target"> <div class="footer"> <div class="footerColumns layout-grid"> <div class="menuColumn"> <h4 class="thin-text">Documentation</h4> <ul class="list-style-none"> <li><a href="https://www.ag-grid.com/javascript-grid/getting-started/" >Getting Started</a></li> <li><a href="https://www.ag-grid.com/ag-grid-changelog/" >Changelog</a></li> <li><a href="https://www.ag-grid.com/ag-grid-pipeline/" >Pipeline</a></li> <li><a href="https://www.ag-grid.com/archive/">Documentation Archive</a></li> </ul> </div> <div class="menuColumn"> <h4 class="thin-text">Support & Community</h4> <ul class="list-style-none"> <li><a href="https://stackoverflow.com/questions/tagged/ag-grid">Stack Overflow</a></li> <li><a href="https://www.ag-grid.com/license-pricing.php">License & Pricing</a></li> <li><a href="https://ag-grid.zendesk.com/">Support via Zendesk</a></li> </ul> </div> <div class="menuColumn"> <h4 class="thin-text">The Company</h4> <ul class="list-style-none"> <li><a href="https://www.ag-grid.com/about.php">About</a></li> <li><a href="https://blog.ag-grid.com/">Blog</a></li> <li><a href="https://www.ag-grid.com/privacy.php">Privacy Policy</a></li> <li><a href="https://www.ag-grid.com/cookies.php">Cookies Policy</a></li> </ul> </div> <div class="menuColumn"> <h4 class="thin-text">Follow</h4> <ul class="list-style-none"> <li><a href="https://github.com/ag-grid/ag-grid" target="_blank" rel="noopener" > <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16,2a14,14,0,0,0-4.43,27.28c.7.13,1-.3,1-.67s0-1.21,0-2.38c-3.89.84-4.71-1.88-4.71-1.88A3.71,3.71,0,0,0,6.24,22.3c-1.27-.86.1-.85.1-.85A2.94,2.94,0,0,1,8.48,22.9a3,3,0,0,0,4.08,1.16,2.93,2.93,0,0,1,.88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4,5.4,0,0,1,1.44-3.76,5,5,0,0,1,.14-3.7s1.17-.38,3.85,1.43a13.3,13.3,0,0,1,7,0c2.67-1.81,3.84-1.43,3.84-1.43a5,5,0,0,1,.14,3.7,5.4,5.4,0,0,1,1.44,3.76c0,5.38-3.27,6.56-6.39,6.91a3.33,3.33,0,0,1,.95,2.59c0,1.87,0,3.38,0,3.84s.25.81,1,.67A14,14,0,0,0,16,2Z" /></svg> Github </a></li> <li><a href="https://twitter.com/ag_grid" target="_blank" rel="noopener" > <svg width="1092" height="1075" viewBox="0 0 1092 1075" fill="none" xmlns="http://www.w3.org/2000/svg" size="32" class="icon" ><g clip-path="url(#clip0_404_5)"><path d="M622.109 475.189L919.927 129H849.353L590.758 429.591L384.219 129H146L458.328 583.547L146 946.58H216.577L489.661 629.145L707.781 946.58H946L622.091 475.189H622.109ZM525.443 587.552L493.798 542.289L242.007 182.13H350.41L553.608 472.79L585.253 518.053L849.387 895.867H740.984L525.443 587.569V587.552Z" ></path></g><defs><clipPath id="clip0_404_5"><rect width="800" height="818" transform="translate(146 129)" ></rect></clipPath></defs></svg> X </a></li> <li><a href="https://youtube.com/c/ag-grid" target="_blank" rel="noopener" > <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M29.41,9.26a3.5,3.5,0,0,0-2.47-2.47C24.76,6.2,16,6.2,16,6.2s-8.76,0-10.94.59A3.5,3.5,0,0,0,2.59,9.26,36.13,36.13,0,0,0,2,16a36.13,36.13,0,0,0,.59,6.74,3.5,3.5,0,0,0,2.47,2.47C7.24,25.8,16,25.8,16,25.8s8.76,0,10.94-.59a3.5,3.5,0,0,0,2.47-2.47A36.13,36.13,0,0,0,30,16,36.13,36.13,0,0,0,29.41,9.26ZM13.2,20.2V11.8L20.47,16Z" /></svg> YouTube </a></li> <li><a href="https://www.linkedin.com/company/ag-grid" target="_blank" rel="noopener" > <svg version="1.1" class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve" > <path d="M26.2,4H5.8C4.8,4,4,4.8,4,5.7v20.5c0,0.9,0.8,1.7,1.8,1.7h20.4c1,0,1.8-0.8,1.8-1.7V5.7C28,4.8,27.2,4,26.2,4z M11.1,24.4 H7.6V13h3.5V24.4z M9.4,11.4c-1.1,0-2.1-0.9-2.1-2.1c0-1.2,0.9-2.1,2.1-2.1c1.1,0,2.1,0.9,2.1,2.1S10.5,11.4,9.4,11.4z M24.5,24.3 H21v-5.6c0-1.3,0-3.1-1.9-3.1c-1.9,0-2.1,1.5-2.1,2.9v5.7h-3.5V13h3.3v1.5h0.1c0.5-0.9,1.7-1.9,3.4-1.9c3.6,0,4.3,2.4,4.3,5.5V24.3z " /> </svg> LinkedIn </a></li> </ul> </div> </div> <div class="layout-grid"> <p className="text-sm thin-text"> AG Grid Ltd registered in the United Kingdom. Company No. 07318192. </p> <p className="text-sm thin-text">© AG Grid Ltd. 2015-2025</p> </div> </div> </div> </footer> <script> window.addEventListener('load', (event) => { var images = document.querySelectorAll('.kg-gallery-image img'); images.forEach(function (image) { var container = image.closest('.kg-gallery-image'); var width = image.attributes.width.value; var height = image.attributes.height.value; var ratio = width / height; container.style.flex = ratio + ' 1 0%'; }) }); </script> <script> const toggleMobileMenu = () => { const button = document.querySelector('.mobileMenuButton'); const nav = document.querySelector('#main-nav'); button.ariaExpanded = button.ariaExpanded === 'true' ? false : true; nav.ariaHidden = nav.ariaHidden === 'true' ? false : true; }; </script> <script> const postTitle = document.querySelector('.post-full-title'); if (postTitle) { const wordArr = postTitle.innerHTML.split(' '); let orphanless = ""; wordArr.forEach((word, i) => { orphanless += i !== wordArr.length - 1 ? ` ${word}` : ` ${word}`; }); postTitle.innerHTML = orphanless; } </script> </body> </html>