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>How to decide what is the best Javascript Data Grid?</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="This post outlines a review process to help compare Javascript, React, Angular and Vue Data Grid components to ensure you choose the best one."> <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/how-to-evaluate-a-javascript-data-grid/"> <meta name="referrer" content="no-referrer-when-downgrade"> <link rel="amphtml" href="https://blog.ag-grid.com/how-to-evaluate-a-javascript-data-grid/amp/"> <meta property="og:site_name" content="AG Grid Blog"> <meta property="og:type" content="article"> <meta property="og:title" content="How to decide what is the best Javascript Data Grid?"> <meta property="og:description" content="What do we do when hunting for a new component to meet a specific need? How do we answer the question "What is the best Data Grid?""> <meta property="og:url" content="https://blog.ag-grid.com/how-to-evaluate-a-javascript-data-grid/"> <meta property="og:image" content="https://blog.ag-grid.com/content/images/2022/06/how-to-evaluate-a-data-grid-tiny.png"> <meta property="article:published_time" content="2022-06-27T13:20:48.000Z"> <meta property="article:modified_time" content="2022-07-12T12:56:36.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="How to decide what is the best Javascript Data Grid?"> <meta name="twitter:description" content="What do we do when hunting for a new component to meet a specific need? How do we answer the question "What is the best Data Grid?""> <meta name="twitter:url" content="https://blog.ag-grid.com/how-to-evaluate-a-javascript-data-grid/"> <meta name="twitter:image" content="https://blog.ag-grid.com/content/images/2022/06/how-to-evaluate-a-data-grid-tiny.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="688"> <meta property="og:image:height" content="400"> <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": "How to decide what is the best Javascript Data Grid?", "url": "https://blog.ag-grid.com/how-to-evaluate-a-javascript-data-grid/", "datePublished": "2022-06-27T13:20:48.000Z", "dateModified": "2022-07-12T12:56:36.000Z", "image": { "@type": "ImageObject", "url": "https://blog.ag-grid.com/content/images/2022/06/how-to-evaluate-a-data-grid-tiny.png", "width": 688, "height": 400 }, "keywords": "Misc", "description": "What do we do when hunting for a new component to meet a specific need? How do we answer the question "What is the best Data Grid?"", "mainEntityOfPage": "https://blog.ag-grid.com/how-to-evaluate-a-javascript-data-grid/" } </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" /> <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">How to evaluate a Javascript Data Grid</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="2022-06-27">27 June 2022</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 do we do when hunting for a new component to meet a specific need? How do we answer the question "What is the best Data Grid?"</p> <p>For a specific framework, we could 'Ask Google': "What is the best React Data Grid?" and in response, we will see many listicle articles.</p> <p>But 'best' needs to consider your specific needs, and no listicle article can do that.</p> <p>For example:</p> <ul> <li>What is your budget?</li> <li>What is your team's skill level?</li> <li>Do you want a Data Grid or an entire component suite?</li> <li>Are you looking for enterprise-level support?</li> <li>Do you need multi-framework support?</li> <li>etc.</li> </ul> <p>The only way to decide the "best data grid" for your environment is to evaluate the options.</p> <p>We've put together this list of points as a starting guide for how to evaluate a Data Grid. You can answer many of these points just by reviewing the website and examples of the product:</p> <ul> <li>Could you build your own?</li> <li>What essential features do you need immediately?</li> <li>What features will you need in the future when your product takes off?</li> <li>Do you need High-Frequency Updates?</li> <li>Do you need to customize the data grid?</li> <li>Does your user need to customize the data grid?</li> <li>What is the product documentation like?</li> <li>How easy will it be to hire staff?</li> <li>How popular and widely used is the data grid?</li> <li>Is commercial and enterprise support available?</li> <li>Is the data grid supported and updated?</li> <li>Can you evaluate freely?</li> <li>Can you review the Data Grid source code?</li> <li>Is there a free version available for commercial use?</li> <li>How easy is it to get started?</li> </ul> <p>We've supplied some answers below to cover AG Grid and feel free to use this as a basis to compare AG Grid with our competitors to see which Data Grid works best for you. We believe AG Grid will be the best for most use-cases, but we know that different teams prioritize different features and options.</p> <h2 id="could-you-build-your-own">Could you build your own?</h2> <p>Choosing any component can be tricky. It's often <a href="https://blog.ag-grid.com/why-use-a-third-party-data-grid-component/">tempting to build custom components iteratively</a>, but the feature set you need becomes too much to code on your own at some point.</p> <p>Considering what features you'll want the component to provide your users ultimately gives you a good starting point for reviewing the component marketplace.</p> <p>Creating a simple table with sorting and filtering won't take too much time, but it will still be longer than adding an existing Data Grid as a dependency and enabling a few properties.</p> <p>Make sure you consider the future needs of your project and estimate how long it will take to create more advanced features like pivoting and grouping by rows and columns. The complexity increases if you want user control over those features and not just set them up in advance in code.</p> <h3 id="dont-start-from-scratchgo-headless">Don't start from scratch - go headless</h3> <p>If you do decide to build your own regardless, we'd still recommend you don't. AG Grid comes fully featured and will save you a lot of time.</p> <p>Still, if you are determined, then we recommend looking at a Headless component like the <a href="https://tanstack.com/table?ref=blog.ag-grid.com">Tanstack Table</a>, previously known as React Table before it supported multiple frameworks.</p> <p>Tanstack Table is headless, so you still have to write the code to create the GUI, but the component handles the underlying functionality, like sorting. We have a blog post showing the difference in the amount of code required to use a <a href="https://blog.ag-grid.com/headless-react-table-vs-ag-grid-react-data-grid/">Headless Component versus a fully featured Data Grid like AG Grid</a>.</p> <h2 id="what-essential-features-do-you-need-immediately">What essential features do you need immediately?</h2> <p>If you decide to build your own data grid, it is crucial to consider the features you will eventually need.</p> <p>For a data grid, the initial set of features is likely to be:</p> <ul> <li>sorting,</li> <li>filtering,</li> <li>in cell editing,</li> <li>pagination and,</li> <li>customizing the rendering of data in the cells.</li> </ul> <p>This set of features won't help reduce the list of candidate components because this is the basic set of features you'd expect from any Data Grid.</p> <p>But when you estimate the time it will take you to build these features yourself, while creating and styling a GUI, then you might consider evaluating an existing Data Grid rather than spending the time coding them yourself.</p> <p>For example, you only need a few lines of code to create a basic AG Grid implementation that is editable and pulls data from an API while providing sorting, filtering, and pagination. Additionally, it can all be built in a few minutes.</p> <pre><code class="language-javascript"> const columnDefs = [ {field: 'make'}, {field: 'model'}, {field: 'price', editable: true} ]; const gridOptions = { columnDefs: columnDefs, enableSorting: true, enableFilter: true, pagination: true }; const eGridDiv = document.querySelector('#myGrid'); new agGrid.Grid(eGridDiv, gridOptions); fetch('https://www.ag-grid.com/example-assets/row-data.json'). then(function (response) { return response.json(); }).then(function (data) { gridOptions.api.setRowData(data); }) </code></pre> <h2 id="what-features-will-you-need-in-the-future-when-your-product-takes-off">What features will you need in the future when your product takes off?</h2> <p>Thinking through the future needs of your product can be one of the most complex parts of evaluating a component. You're often so focused on the immediate need to render data in a grid and make it user accessible that more advanced features don't come into the picture.</p> <p>Consider:</p> <ul> <li>Column Spanning</li> <li>Column Grouping</li> <li>Multi Level column grouping</li> <li>Row Spanning</li> <li>Row Grouping</li> <li>Data Aggregation when grouping</li> <li>Rendering Tree Data</li> <li>Nested Data Grids</li> <li>Advanced Column Filtering</li> <li>Pivoting</li> </ul> <p>We recommend reading through the component's documentation as it will trigger ideas for features you probably had not considered. The <a href="https://www.ag-grid.com/javascript-data-grid/getting-started/?ref=blog.ag-grid.com">AG Grid documentation</a> has a sidebar where you can reveal the contents and quickly see the scope of the features available.</p> <p>For each advanced feature, you identify as helpful, try to estimate how long it would take to implement yourself. Many of the features listed above could well take months to implement the most basic implementation.</p> <p>AG Grid has been in development since 2014 with a dedicated team of professional developers who continually add new features and update the Data Grid to keep pace with the framework changes and cross-browser nuances. It can be helpful to consider adopting a third-party Data Grid component as outsourcing the development of a niche part of your product. At the same time, you focus on the functionality that adds the most business value. And if our open-source community edition can meet your application needs, then you're outsourcing the programming and maintenance of Data Grid functionality to a professional team of developers for free.</p> <h2 id="do-you-need-high-frequency-updates">Do you need High-Frequency Updates?</h2> <p>One of the most challenging aspects of creating a Data Grid is handling frequent updates, especially when the Data Grid is rendering a lot of data.</p> <p>The main techniques required for this are:</p> <ul> <li>Row virtualization</li> <li>Transactional Data Updates</li> <li>Rendering optimization</li> <li>Server-side Data updates</li> </ul> <p>Row virtualization ensures that the Data Grid only renders data visible on the screen. Various techniques are available to do this, and AG Grid has <a href="https://www.ag-grid.com/angular-data-grid/dom-virtualisation/?ref=blog.ag-grid.com">DOM Virtualisation</a> built into both Community and Enterprise editions.</p> <p>Look for examples in the documentation for the Data Grid components to find working examples where you can see the data virtualization and updates in practice. Also, information on how to configure the data grid when it handles lots of data with frequent updates.</p> <p>For AG Grid we have:</p> <ul> <li><a href="https://www.ag-grid.com/angular-data-grid/massive-row-count/?ref=blog.ag-grid.com#example-viewport-big-data">an example showing AG Grid with 1,000,000 rows in a data set</a></li> <li><a href="https://www.ag-grid.com/angular-data-grid/scrolling-performance/?ref=blog.ag-grid.com">information on tweaking performance for large data sets</a></li> <li><a href="https://embed.plnkr.co/plunk/zi7m4KckOwvvpqXD?autoCloseSidebar=true&show=preview&ref=blog.ag-grid.com">an example showing high frequency updates when when grouping and aggregating data</a></li> <li>documentation and examples for update transactions for <a href="https://www.ag-grid.com/javascript-data-grid/data-update-transactions/?ref=blog.ag-grid.com">client side</a> and <a href="https://www.ag-grid.com/javascript-data-grid/server-side-model-transactions/?ref=blog.ag-grid.com">server side data</a></li> <li>documentation and examples covering High Frequency updates for <a href="https://www.ag-grid.com/javascript-data-grid/data-update-high-frequency/?ref=blog.ag-grid.com">client side</a> and <a href="https://www.ag-grid.com/javascript-data-grid/server-side-model-high-frequency/?ref=blog.ag-grid.com">server side</a></li> </ul> <p>High-Frequency handling of large Data Sets is often one of the main reasons for choosing AG Grid as <a href="https://blog.ag-grid.com/proof-trading-case-study/">described in this customer case study with Proof Trading</a>.</p> <h2 id="do-you-need-to-customize-the-data-grid">Do you need to customize the data grid?</h2> <p>Most teams immediately think of writing their own data grid because they are nervous that they will not be able to customize the Data Grid to their specifications.</p> <p>Make sure that the Data Grid you are evaluating can be easily customized.</p> <p>With AG Grid, we support customization through components written in the framework being used.</p> <p>Full <a href="https://www.ag-grid.com/javascript-data-grid/components/?ref=blog.ag-grid.com">documentation on the types of components is available</a>. We also have an <a href="https://youtu.be/eglfpHRpcu0?ref=blog.ag-grid.com">overview video explaining how the component customization works</a>.</p> <p>Additionally AG Grid also supports various <a href="https://www.ag-grid.com/javascript-data-grid/row-styles/?ref=blog.ag-grid.com">CSS Styling mechanisms</a> including <a href="https://www.ag-grid.com/javascript-data-grid/themes/?ref=blog.ag-grid.com">themes</a>.</p> <p>The customization available from AG Grid is often cited as a reason for choosing AG Grid and is covered in this <a href="https://blog.ag-grid.com/prisma-io-case-study/">case study with Prisma.io</a>.</p> <p>Additionally, AG Grid is so customizable that AdapTable has built their entire business on an extension for AG Grid which relies entirely on the customisability of AG Grid, as described in this <a href="https://blog.ag-grid.com/adaptable-tools-demo-and-interview/">case study interview with AdapTable's CTO</a>.</p> <h2 id="does-your-user-need-to-customize-the-data-grid">Does your user need to customize the data grid?</h2> <p>When choosing a Data Grid, we often forget that the more customization we can put in the hands of the user when they use our product, the more it can meet their evolving needs without any additional coding effort.</p> <p>Once you put your Data Grid in the hands of users, it can be hard to predict what they will need and what subtle configuration changes they will require. Using a Data Grid that supports user configuration will save development time later because your users can configure the grid themselves.</p> <p>AG Grid's <a href="https://www.ag-grid.com/javascript-data-grid/component-tool-panel/?ref=blog.ag-grid.com#example-custom-stats">Tool Panel</a> and support for user-controlled <a href="https://www.ag-grid.com/javascript-data-grid/pivoting/?ref=blog.ag-grid.com">pivoting</a>, <a href="https://www.ag-grid.com/javascript-data-grid/column-groups/?ref=blog.ag-grid.com">column grouping</a> and <a href="https://www.ag-grid.com/javascript-data-grid/grouping/?ref=blog.ag-grid.com">row grouping</a> are some of the most obvious user customizations, and these only require a few parameters to enable.</p> <p>In addition, AG Grid Enterprise comes with <a href="https://www.youtube.com/watch?v=ObXdeXE9oBU&ref=blog.ag-grid.com">Integrated Charting</a>, allowing users to select data and build their charts from rendered data, all without any programming involvement.</p> <h2 id="what-is-the-product-documentation-like">What is the product documentation like?</h2> <p>The product documentation is essential when working with a component library. It is important to know that the team building the component care as much about the developer's experience with the documentation as they do about the component itself.</p> <p>Things to look for in the documentation:</p> <ul> <li>Is there a Getting Started Guide?</li> <li>Is there a search facility?</li> <li>Are there examples embedded in the documentation?</li> <li>Are the examples runnable in the browser?</li> <li>Can you amend the code and experiment with the examples in the browser?</li> <li>Are there any video tutorials in the documentation?</li> <li>Are older versions of the documentation available online?</li> </ul> <p>With <a href="https://www.ag-grid.com/javascript-data-grid/getting-started/?ref=blog.ag-grid.com">the AG Grid Documentation</a>, we have all the framework documentation available by clicking the framework icon at the top right-hand corner because all Data Grid features are available in all supported frameworks.</p> <p>We use Plunker to host the examples embedded in the documentation. These examples are maintained for all frameworks and supported approaches in each framework, e.g. classes and hooks. Plunker allows us to automatically upload the examples with each release, so they are always in step with the current version. It provides an environment where you can edit and easily play with each example to try things out.</p> <p>Our older version documentation <a href="https://www.ag-grid.com/archive/?ref=blog.ag-grid.com">is available</a> from the "Documentation Archive" link in the footer of the site.</p> <p>We have a blog post describing how to <a href="https://blog.ag-grid.com/maximise-your-productivity-with-ag-grid-documentation/">maximize your productivity with the AG Grid documentation</a>.</p> <h2 id="how-easy-will-it-be-to-hire-staff">How easy will it be to hire staff?</h2> <p>When you are choosing a Data Grid for your product, it is likely to be a strategic choice, and you will need to be sure that you can hire experienced staff to work with the component choice.</p> <p>We recommend performing a job search on job hunting sites to see how many jobs are listed with the component.</p> <p>When the component is listed as a skill in job listings, it is a good indicator that the component is well used and has an active set of developers who list it as a skill. You will also gain an idea of the companies that use the component.</p> <p>Job adverts frequently list AG Grid as "ag-grid," so be sure to search for variants of the component's name.</p> <h2 id="how-popular-and-widely-used-is-the-data-grid">How popular and widely used is the data grid?</h2> <p>The Job Ad search above will provide some indicators as to the popularity of the component.</p> <p>The other indicators are npm stats and Github stars.</p> <ul> <li>you can see <a href="https://www.npmtrends.com/ag-grid-angular-vs-ag-grid-community-vs-ag-grid-enterprise-vs-ag-grid-react-vs-ag-grid-vue?ref=blog.ag-grid.com">AG Grid npm stats here</a>.</li> <li>you can also use npm trends to compare <a href="https://www.npmtrends.com/@glideapps/glide-data-grid-vs-ag-grid-community-vs-ag-grid-enterprise-vs-fancygrid-vs-flexmonster-vs-handsontable-vs-igniteui-react-grids?ref=blog.ag-grid.com">AG Grid with other Data Grids</a></li> </ul> <h2 id="is-commercial-and-enterprise-support-available">Is commercial and enterprise support available?</h2> <p>When building strategic and business-critical applications, you need to use components from a company that takes the component seriously.</p> <p>Some data grids are part of a large component suite; they won't be equally important to the company selling them. AG Grid only makes a data grid, it is our single focus, and all we do is continue to improve the grid.</p> <p>It's also the only thing we have to support, so we have a dedicated team that can work with customers directly for their specific use-cases.</p> <p>You never know when you will face a problem that you can't resolve internally. The documentation that supports a component is generic and won't cover every technical combination you are using on your project. You'll want to know that you have the option of contacting support and that the support team can help you work through any issue you face rather than wasting development time experimenting on your own.</p> <h2 id="is-the-data-grid-supported-and-updated">Is the data grid supported and updated?</h2> <p>If a company is serious about its component, they will continually work on it and release new versions.</p> <p>Things to look out for are the release notes on the company website and the releases that have been made through <code>npm</code> or Github.</p> <p>The AG Grid links to see how we put out releases are:</p> <ul> <li><a href="https://ag-grid.com/changelog?ref=blog.ag-grid.com">changelog, covering all releases and release notes</a> incidentally, this is written using AG Grid.</li> <li><a href="https://ag-grid.com/pipeline/?ref=blog.ag-grid.com">pipeline, describing what is coming next</a>, also written in AG Grid.</li> <li>our <a href="https://github.com/ag-grid/ag-grid/releases?ref=blog.ag-grid.com">Github releases</a> are pretty detailed, so if you are signed up for notification on Github, you'll see precisely what we release and know the moment that we go live.</li> </ul> <h2 id="can-you-evaluate-freely">Can you evaluate freely?</h2> <p>When choosing between components, there is nothing worse than having to sign up for a trial version or contact sales to get permission to use the component.</p> <p>Ideally, you want to be able to add it to your project using <code>npm</code> and get started on your evaluation with no limitations.</p> <p>AG Grid is a company created by developers, and we don't put any blockers on the evaluation process.</p> <p>You can get started by adding AG Grid to your project using <code>npm</code>.</p> <p>If you want to evaluate using the community edition, you can even deploy it into production because our Community edition is MIT Licensed and free to use with no restrictions on production usage.</p> <p>This is one of the reasons that <a href="https://blog.ag-grid.com/prisma-io-case-study/">Prisma.io adopted AG Grid Community Edition in their online Data Platform</a>.</p> <p>When you evaluate the Enterprise edition, all we do is add a watermark to the screen for a second or two and display a message in the console. It is possible to evaluate the Enterprise edition features without any permission or any sales contacts.</p> <p>We only issue a trial license for evaluations so that people can see what the grid is like without the watermark, for example, when you want to demo the application to your users.</p> <p>No functionality is locked behind a license. You have access to all the functionality as soon as you add AG Grid to your product.</p> <p>And we have a page in the documentation if you are interested in the <a href="https://ag-grid.com/javascript-data-grid/licensing/?ref=blog.ag-grid.com">differences between the Community Edition and the Enterprise edition</a>.</p> <h2 id="can-you-review-the-data-grid-source-code">Can you review the Data Grid source code?</h2> <p>Developers will want to review the quality of the component's code, not just the features and usability.</p> <p>That's one reason why AG Grid adopted an Open Source model for our code base.</p> <p>The community edition is open source and completely free to use, even in production. The enterprise edition source is also openly available on Github, so you can review the implementation and algorithms used to ensure they are what you would choose.</p> <p>This was one of the deciding factors that helped <a href="https://blog.ag-grid.com/proof-trading-webrush-podcast-using-ag-grid/">Proof Trading adopt AG Grid</a>. They looked at our implementation and saw we were using the same algorithms and techniques they would, so why bother writing it from scratch? Better to adopt something built by another company and save yourself years of effort.</p> <p>Consider also the long-term escrow position. The open-source model we adopt is also an excellent safeguard for an escrow position, with Github as a third party holding the source code.</p> <p><a href="https://blog.ag-grid.com/proof-trading-webrush-podcast-using-ag-grid/">Proof Trading used the community edition to evaluate AG Grid</a> as this was a hassle-free way to get started, and by reviewing the AG Grid source code, they were able to perform a very technical evaluation before adopting AG Grid in their high-frequency trading environment.</p> <h2 id="is-there-a-free-version-available-for-commercial-use">Is there a free version available for commercial use?</h2> <p>Many companies only offer a 'trial' edition of their component. If you're evaluating their component and building your application with it, they hope you invest so much time in the trial that you'll feel committed enough to buy the product to keep using it.</p> <p>At AG Grid, we take the opposite view. We only want to charge for something that offers value above and beyond the open-source products on the market. So our Community Edition is open-source and completely free for production use.</p> <p>This makes it easy to compare with any open-source grid that is out there. Our Community Edition is open-source. It also happens to be programmed by professional programmers for whom this is their 100% day job, not a side project.</p> <p>You get all the benefits of open-source:</p> <ul> <li>Community Edition is free.</li> <li>Use it without restrictions.</li> <li>Fork the project and make your own version if you want to.</li> <li>Review the code.</li> </ul> <p>You also avoid all the drawbacks:</p> <ul> <li>Bugs don't get fixed because they are not important.</li> <li>Features requests are ignored because they don't fit the developers' needs.</li> </ul> <p>With AG Grid, the Community Edition functionality is also part of Enterprise Edition. We fix it and keep it up to date. We use customer feedback to drive the product forward and make it even better.</p> <p>Our Community Edition is not a side project; it is the core, and the heart and soul, of our commercial Enterprise product.</p> <h2 id="how-easy-is-it-to-get-started">How easy is it to get started?</h2> <p>Before getting hands-on and using it with any custom code, make sure to follow some of the Getting started information on the site.</p> <p>Most component documentation is a reference guide and requires some experience with the component to understand it fully.</p> <p>The Getting Started guides should be simple and fast to follow.</p> <p>AG Grid has Getting Started Guides and videos for every framework we support:</p> <ul> <li><a href="https://ag-grid.com/javascript-data-grid/getting-started/?ref=blog.ag-grid.com">Getting Started Guide</a></li> <li><a href="https://ag-grid.com/javascript-data-grid/videos/?ref=blog.ag-grid.com">Getting Started Videos</a></li> </ul> <p>We also have posts on our blog covering <a href="https://blog.ag-grid.com/tag/how-to/">How To Guides for Features</a> and <a href="https://blog.ag-grid.com/tag/tutorial/">longer tutorials that go in depth</a> to a specific application or domain.</p> <p>You'll also find that we have free training courses for <a href="https://thinkster.io/tutorials/fundamentals-of-ag-grid-with-angular?ref=blog.ag-grid.com">Angular</a> and <a href="https://thinkster.io/tutorials/using-ag-grid-with-react-getting-started?ref=blog.ag-grid.com">React</a>.</p> <h2 id="finally-use-it">Finally, Use It</h2> <p>After reading the documentation, watching YouTube Videos, and walking through a tutorial, you will finally be able to start using it in your production application.</p> <p>Some people prefer to create a Prototype Implementation that mirrors some of the production requirements:</p> <ul> <li>create a simple app</li> <li>add some basic customizations that demonstrate the capabilities required</li> <li>hook into the existing APIs and databases</li> </ul> <p>Other people prefer to add the component directly into their application to see how easy it will be to wire it up with their existing abstractions and API code.</p> <p>If you do this with AG Grid, then anything you build with the Community Edition, you can deploy directly into production and let your Users provide feedback on the component.</p> <h2 id="summary">Summary</h2> <p>Hopefully, this provided some ideas for evaluating a Data Grid.</p> <p>We know it can be very easy to pick the first open-source Data Grid that you find, start building with it, and then have to begin writing pull Requests to make it do what you want. That is, after all, what triggered the AG Grid to create its Data Grid in the first place.</p> <p>Because of this, we also understand the temptation to 'just build your own'; after all, that's what we did.</p> <p>But unless you plan to set up your own company to sell a Data Grid, we don't recommend this.</p> <p>Instead, identify the business value the development process aims to deliver, and think through the features and capabilities you will need to implement the value. Experiment with components that have proven themselves in the marketplace and plan to stick around for the long term.</p> <p>If you want to learn how some of our existing users approached the evaluation process, check out the <a href="https://blog.ag-grid.com/prisma-io-case-study/">Prisma.io case study</a> which has many points about how they evaluated the product. Also, the <a href="https://blog.ag-grid.com/proof-trading-case-study/">Proof Trading case study</a> with their evaluation points and they described their evaluation process on the <a href="https://blog.ag-grid.com/proof-trading-webrush-podcast-using-ag-grid/">WebRush Podcast</a>.</p> <hr> <p>At AG Grid our mission is to build the best Data Grid in the world and while we believe we've done that, we invite you to evaluate our Data Grid and find out. We support <a href="https://ag-grid.com/react-data-grid/?ref=blog.ag-grid.com">React</a>, <a href="https://ag-grid.com/angular-data-grid/?ref=blog.ag-grid.com">Angular</a>, <a href="https://ag-grid.com/vue-data-grid/?ref=blog.ag-grid.com">Vue</a> and <a href="https://ag-grid.com/javascript-data-grid/?ref=blog.ag-grid.com">Javascript</a>, additionally we are <a href="https://blog.ag-grid.com/fully-typed-angular-components/">fully typed for use in Typescript</a>.</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=How to evaluate a Javascript Data Grid&url=https://blog.ag-grid.com/how-to-evaluate-a-javascript-data-grid/" 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/how-to-evaluate-a-javascript-data-grid/" 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="/geekle-react-global-summit-2022-overview/">Geekle React Global Summit 2022 Overview</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 tag-react-data-grid tag-javascript tag-angular "> <a class="post-card-image-link" href="/js-nation-and-react-summit-june-2022-overview/"> <img class="post-card-image" srcset="/content/images/size/w300/2022/06/blog-ag-grid-js-nation-react-summit-tiny.png 300w, /content/images/size/w600/2022/06/blog-ag-grid-js-nation-react-summit-tiny.png 600w, /content/images/size/w1000/2022/06/blog-ag-grid-js-nation-react-summit-tiny.png 1000w, /content/images/size/w2000/2022/06/blog-ag-grid-js-nation-react-summit-tiny.png 2000w" sizes="(max-width: 1000px) 400px, 700px" src="/content/images/size/w600/2022/06/blog-ag-grid-js-nation-react-summit-tiny.png" alt="JS Nation and React Summit June 2022 Overview" /> </a> <div class="post-card-content"> <span class="post-card-tag text-secondary">Misc</span> <a class="post-card-content-link" href="/js-nation-and-react-summit-june-2022-overview/"> <header class="post-card-header"> <h2 class="post-card-title">JS Nation and React Summit June 2022 Overview</h2> </header> <section class="post-card-excerpt"> <p>June was a busy month for the AG Grid team as we were sponsoring and presenting at the JS Nation and React Summit conferences in Amsterdam</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">4 min read</span> </footer> </div> </article> <article class="post-card post tag-react-data-grid tag-misc "> <a class="post-card-image-link" href="/geekle-react-global-summit-2022-overview/"> <img class="post-card-image" srcset="/content/images/size/w300/2022/06/geekle-react-conf-tiny.png 300w, /content/images/size/w600/2022/06/geekle-react-conf-tiny.png 600w, /content/images/size/w1000/2022/06/geekle-react-conf-tiny.png 1000w, /content/images/size/w2000/2022/06/geekle-react-conf-tiny.png 2000w" sizes="(max-width: 1000px) 400px, 700px" src="/content/images/size/w600/2022/06/geekle-react-conf-tiny.png" alt="Geekle React Global Summit 2022 Overview" /> </a> <div class="post-card-content"> <span class="post-card-tag text-secondary">React</span> <a class="post-card-content-link" href="/geekle-react-global-summit-2022-overview/"> <header class="post-card-header"> <h2 class="post-card-title">Geekle React Global Summit 2022 Overview</h2> </header> <section class="post-card-excerpt"> <p>The Geekle React Global Online Summit took place in April 2022, AG Grid helped sponsor the conference</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">2 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>