High-Performance Data Tables with Dash and AG Grid

<!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-N6T2RXG');</script>  <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <base href="https://go.plotly.com" /> <meta http-equiv="Content-Type" content="text/html" /> <meta name="description" content="Dash AG Grid delivers rich and performant interactive data apps. Watch this recorded technical tutorial with Alex Johnson, Plotly Co-Founder and Chief Technology Officer, to learn more." /> <title>High-Performance Data Tables with Dash and AG Grid</title> <meta property="og:url" content="https://go.plotly.com/dash-ag-grid" /> <meta property="og:type" content="website" /> <meta property="og:title" content="High-Performance Data Tables with Dash and AG Grid" /> <meta property="og:description" content="Watch the recorded technical tutorial with Plotly’s CTO & Co-Founder to learn about Dash AG Grid." /> <meta property="og:image:width" content="50" /> <meta property="og:image:height" content="50" /> <meta property="og:image" content="https://images.prismic.io/plotly-marketing-website-2/3b7ecc91-fc0b-4e2f-8380-03811f457451_webinar_graphic_AG+Grid-01.jpg" /> <link rel="icon" type="image/png" href="https://plotly-marketing-website-2.cdn.prismic.io/plotly-marketing-website-2/e2897c91-731d-4cb8-84c1-c851ded1b539_favicon_new.svg" /> <link rel="canonical" href="/dash-ag-grid" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <style> /*FONT*/ @import url("https://use.typekit.net/ysm0knq.css"); /*DEFAULTS*/ *, ::after, ::before { box-sizing: border-box; } body { padding-top: 20px; margin: 0; font-family: Open Sans, sans-serif; font-size: 16px; letter-spacing: 0; line-height: 1.5; color: #fff; transition: background-color 0.5s ease; } body.dark { background-color: #0c0c0c; } h1, h2, h3, h4, h5 { font-family: "roboto", sans-serif; font-weight: 600; } h1 { font-size: 30pt; } h2 { font-size: 36pt; } h3 { font-size: 19pt; } h4 { font-size: 14pt; } h5 { margin: 0; } p { margin: 0; color: #5b6372; } .dark p { font-weight: 400; color: #a2aab8; } p.white-text { font-family: "roboto", sans-serif; font-weight: 700; font-size: 21px; color: #282d33; } .dark p.white-text { color: #fff; } p#paragraph { margin: 0 0 27px; } #paragraph p:not(:last-of-type) { margin-bottom: 14px; } ul { padding-left: 0; margin-top: 13px; margin-bottom: 0; } li { padding: 0 0 5.5px; margin-left: 20px; list-style: none; color: #5b6372; } li:last-child { padding: 0; } .dark li { color: #a4aab6; } li::before { content: "\2022"; display: inline-block; margin-left: -1em; width: 1em; font-size: 20px; font-weight: bold; color: #7a76ff; } a { font-family: "open-sans", sans-serif; color: #7a76ff; text-decoration: none; } a:hover { text-decoration: underline; color: #3479f3; } img { max-width: 100%; } button, input, optgroup, select, textarea { line-height: inherit; } button, input { overflow: visible; } .gradient { width: 100%; height: 10px; background: linear-gradient(to right, #7a76ff, #00f2e4); } .required-msg { display: inline-block; } /* SWITCH */ .sun { position: absolute; right: 33px; bottom: 2px; display: none; } .dark .sun { display: block; } .moon { position: absolute; right: 3px; bottom: 2px; display: block; } .dark .moon { display: none; } .sun, .moon { width: 23px; height: 25px; } .switch-wrapper { position: relative; display: flex; align-items: center; height: 0; } .switch { position: fixed; right: 17px; bottom: -10px; z-index: 3; } .switch-label { position: absolute; right: 0; bottom: 21px; display: inline-block; width: 60px; height: 30px; text-align: right; } .switch-label input { display: none; } .slider { position: relative; top: 0; right: 0; bottom: 0; left: 0; height: 30px; border: 1px solid #7a76ff; background-color: #7a76ff; transition: 0.4s; cursor: pointer; } .dark .slider { background-color: #282d33; border: 1px solid #282d33; } .slider:before { content: ""; position: absolute; bottom: 4px; left: 4px; width: 20px; height: 20px; background-color: #fff; transition: 0.4s; } input:checked+.slider { background-color: #282d33; } input:checked+.slider:before { transform: translateX(29px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } @keyframes subtleSec { from { background-position: 0%; } to { background-position: 100% 100%; } } @keyframes subtle { from { background-position: 100% 100%; } to { background-position: 0%; } } .animation-bg-holder { position: absolute; top: 0; z-index: -1; width: 100%; height: 100vh; } .first-custom-bg { width: 100%; height: 100vh; background: radial-gradient(#fc8181, #fff, #fff, #fff, #fff, #fff, #fff); background-size: 500% 300%; animation: subtleSec 11s alternate infinite; transition: background 0.5s ease; opacity: 0.3; } .second-custom-bg { position: absolute; top: 0; width: 100%; height: 100vh; background: radial-gradient(#7a76ff, #fff, #fff, #fff, #fff, #fff, #fff); background-size: 500% 300%; animation: subtleSec 10s alternate infinite; transition: background 0.5s ease; opacity: 0.3; } .third-custom-bg { position: absolute; top: 0; width: 100%; height: 100vh; background: radial-gradient(#3479f3, #fff, #fff, #fff, #fff, #fff, #fff); background-size: 500% 300%; animation: subtle 12s alternate-reverse infinite; transition: background 0.5s ease; opacity: 0.3; } .fourth-custom-bg { position: absolute; top: 0; width: 100%; height: 100vh; background: radial-gradient(#fc8181, #fff, #fff, #fff, #fff, #fff, #fff); background-size: 500% 300%; animation: subtle 10s alternate-reverse infinite; transition: background 0.5s ease; opacity: 0.3; } .dark .first-custom-bg { width: 100%; height: 100vh; background: radial-gradient(#fc8181, #0c0c0c, #0c0c0c, #0c0c0c, #0c0c0c, #0c0c0c, #0c0c0c); background-size: 500% 300%; animation: subtleSec 11s alternate infinite; opacity: 0.3; } .dark .second-custom-bg { position: absolute; top: 0; width: 100%; height: 100vh; background: radial-gradient(#7a76ff, #0c0c0c, #0c0c0c, #0c0c0c, #0c0c0c, #0c0c0c, #0c0c0c); background-size: 500% 300%; animation: subtleSec 10s alternate infinite; opacity: 0.3; } .dark .third-custom-bg { position: absolute; top: 0; width: 100%; height: 100vh; background: radial-gradient(#3479f3, #0c0c0c, #0c0c0c, #0c0c0c, #0c0c0c, #0c0c0c, #0c0c0c); background-size: 500% 300%; animation: subtle 12s alternate-reverse infinite; opacity: 0.3; } .dark .fourth-custom-bg { position: absolute; top: 0; width: 100%; height: 100vh; background: radial-gradient(#fc8181, #0c0c0c, #0c0c0c, #0c0c0c, #0c0c0c, #0c0c0c, #0c0c0c); background-size: 500% 300%; animation: subtle 10s alternate-reverse infinite; opacity: 0.3; } /*LAYOUT CONTAINERS*/ .section-content { margin-top: 0; } .container { position: relative; z-index: 2; padding: 0 15px; margin: 0 auto; max-width: 1277px; } .template-content { position: relative; display: grid; grid-template-columns: 45% 48%; column-gap: 7%; direction: rtl; margin-top: 84px; margin-bottom: 20px; } .template-content .register-form { grid-row-start: 7; grid-row-end: 1; } .template-content>* { direction: ltr; } .template-content h1 { margin-top: 0px; margin-bottom: 11px; font-size: 48px; color: #282d33; line-height: 56.25px; word-wrap: break-word; } .template-content h4 { color: #282d33; font-size: 24px; margin: 0 0 6px; } .dark .template-content h1 { color: #fff; } .dark .template-content h4 { color: #fff; } .template-content h4.content-subtitle { margin: 0 0 6px; font-size: 24px; line-height: 28px; } .template-content .right { padding: 0; width: 43%; background-color: #0c0c0c; } /*NAVBAR*/ .section-header { padding: 59px 0 0; } .navbar-icons { display: flex; align-items: center; justify-content: flex-start; margin: 15px 0; } .navbar-icon { display: flex; align-items: center; text-decoration: none; } .navbar-icon img { padding-right: 13px; width: auto; max-width: 100%; height: 53px; object-fit: contain; } .navbar-icons a:nth-child(2) { margin-left: 25px; } .dash { padding-left: 12px; font-size: 24px; color: #fff; border-left: 2px solid #fff; } /*FOOTER*/ .footer { padding: 127px 0 79px; text-align: center; background: #fff; transition: background-color 0.5s ease; } .dark .footer { background: #0c0c0c; } .footer .title-holder { display: flex; align-items: center; justify-content: center; width: 100%; } .footer .title { margin: 0; font-size: 32px; font-weight: 600; line-height: 37.5px; color: #282d33; } .dark .footer .title { color: #fff; } .s-img { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; max-width: 1000px; } .logos-img { display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; margin-top: 64px; } .logo-holder { margin-bottom: 22px; width: 17.33%; } .logos-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(0.7); padding: 0; filter: brightness(0) saturate(100%); } .dark .logos-img img { filter: brightness(0) invert(1); } /*LAYOUT ELEMENTS*/ .date { margin: 4px 0 15px; font-size: 24px; color: #7a76ff; line-height: 28px; } .paragraph { margin-top: -2px; } .paragraph p:not(:last-child) { margin-bottom: 27px; } .btn { background-color: #3378f2; } .bd-placeholder-img { font-size: 1.125rem; text-anchor: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .hide-mobile { display: inline-block; } .hide-desktop { display: none; } /* FORMS */ .form-holder .form-content h4 { margin: 62px 0 0; font-family: "Inter", sans-serif; font-size: 24px; line-height: 36.31px; text-align: center; } #plotly-body form.form p.required label { background: none; } #plotly-body form.form p.required label:after { content: "*"; } #plotly-body .form-holder { padding: 2px; height: 100%; background: linear-gradient(to right, #7a76ff, #00f2e4); border-radius: 5px; } #plotly-body .form-content { padding: 2px 0; height: 100%; background: #fff; border-radius: 4px; } #plotly-body form { padding: 25px 54px; text-align: left; background: #fff; border: none; border-radius: 5px; } .dark#plotly-body .form-content { background: #0c0c0c; } .dark#plotly-body form { background-color: #0c0c0c; } #plotly-body form input, form select, form textarea { padding: 8px 5px; margin-top: 9px; width: 100%; height: 37px; color: #5b6372; background: #fff; border: 1px solid #d9d9d9; -webkit-appearance: none; } .dark#plotly-body form input, .dark form select, .dark form textarea { color: #fff; background: #1b1f22; border: none; } form select { background: url(https://plotly-marketing-website-2.cdn.prismic.io/plotly-marketing-website-2/013f9d80-b96d-4b64-928f-c4b2255547ec_dropdown.svg) no-repeat right #fff; background-size: 10px; background-position-x: 96.5%; background-position-y: 50%; -webkit-appearance: none; } .dark form select { background: url(https://plotly-marketing-website-2.cdn.prismic.io/plotly-marketing-website-2/013f9d80-b96d-4b64-928f-c4b2255547ec_dropdown.svg) no-repeat right #1b1f22; background-size: 10px; background-position-x: 96.5%; background-position-y: 50%; -webkit-appearance: none; } #plotly-body form input:focus, #plotly-body form select:focus, #plotly-body form textarea:focus { outline: none; border-bottom: 1px solid #7a76ff; } #plotly-body form label { margin-bottom: 1px; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 1px; line-height: 15px; text-transform: uppercase; color: #282d33; } .dark#plotly-body form label { color: #a2aab8; } #plotly-body form input[type="submit"] { padding: 0 20px; width: auto; min-width: 144px; min-height: 44.5px; font-family: "Inter", sans-serif; font-size: 14px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; line-height: 17px; color: #fff; background-image: linear-gradient(135deg, #7a76ff, #7a76ff, #7fe4ff); background-size: 200% 100%; border: 0; border-radius: 6px; transition: all 0.4s ease-in-out; cursor: pointer; } #plotly-body form input[type="submit"]:hover { background-position: 100% 0; } #plotly-body form.form p { margin: 0; } #plotly-body form.form p label { width: auto; } #plotly-body form.form p.submit { display: inline-block; padding: 0; margin: 0 0 20px 0; width: 30%; } #plotly-body form.form p.submit+p { display: inline-block; width: 66%; font-size: 14px; text-align: right; } #plotly-body form.form p.no-label { margin: 0; } #plotly-body form.form p span.description { margin-left: 0; } #plotly-body form.form p.pd-checkbox.Terms_Conditions_acceptance span.value>span { display: flex; } #plotly-body .form-field:not(:last-child) { margin: 0 0 17px; } /*FORM: Terms and conditions*/ #plotly-body form.form p.pd-checkbox.Terms_Conditions_acceptance { float: left; width: 100%; } #plotly-body form.form p.pd-checkbox.Terms_Conditions_acceptance label { display: none; } #plotly-body form.form p.pd-checkbox.Terms_Conditions_acceptance span.value { margin-left: 0; } #plotly-body form.form p.pd-checkbox.Terms_Conditions_acceptance span.value>span { align-items: baseline; } #plotly-body form.form p.pd-checkbox.Terms_Conditions_acceptance input[type="checkbox"] { margin: 0 !important; margin-right: 5px !important; width: auto !important; -webkit-appearance: auto; } #plotly-body form.form p.pd-checkbox.Terms_Conditions_acceptance span.value label { display: inline-block; padding-right: 15px; } #plotly-body form.form p label.inline { line-height: 1.5em; } #plotly-body form.form p.error.no-label { margin-top: -16px; margin-bottom: 19px; } #plotly-body form .error input, form .error select, form .error textarea { border: 1px solid #fc8181; } #plotly-body form.form p.error { margin-top: 0.5rem; font-family: Open Sans, sans-serif; font-weight: 400; font-size: 13px; color: #fc8181; } #plotly-body #resubscribeConfirmText { font-weight: 400; color: #FC8181 !important; } p.errors { display: none; } /*LOGOS*/ .navbar-icon img.holoviews { max-width: 400px; } /* SPEAKERS */ .section-speaker { margin-top: 117px; padding: 68px 0 65px; background-color: #fff; border-top: 1px solid #dae0e8; border-bottom: 1px solid #dae0e8; transition: background-color 0.5s ease; } .dark .section-speaker { position: relative; z-index: 2; background-color: #0f0f0f; border-top: 1px solid #1a1d1d; border-bottom: 1px solid #1a1d1d; } .speaker-title { margin-top: 0; margin-bottom: 60px; font-size: 31px; font-weight: 600; text-align: center; color: #282d33; } .dark .speaker-title { color: #fff; } .speaker { display: flex; align-items: center; justify-content: space-between; } .speaker-img { width: auto; } .speaker-img img { width: 265px; height: 265px; object-fit: cover; object-position: top; border-radius: 50%; } .speaker-info { padding-left: 2%; width: 80%; } .speaker-info h3 { margin: 0; font-weight: 700; font-size: 36px; color: #282d33; } .dark .speaker-info h3 { font-weight: 700; color: #fff; } .speaker-info p { margin-top: 10px; } /* DESKTOP VIEW */ @media only screen and (min-width: 7680px) { #plotly-body .form-holder { padding: 4px; } } @media only screen and (min-width: 5760px) { #plotly-body .form-holder { padding: 3px; } } @media only screen and (min-width: 2132px) { #plotly-body .form-holder { padding: 2px; } } @media only screen and (min-height: 768px) { /* FOOTER */ .logo-holder:nth-child(6) { margin-left: 12%; } .logo-holder:nth-child(9) { margin-right: 12%; } } /* TABLET TO MOBILE VIEW */ @media only screen and (max-width: 1390px) { .template-content { padding-right: 0; } } @media only screen and (max-width: 1024px) { #plotly-body form { margin-bottom: 19px; } } @media only screen and (max-width: 991px) { /* SPEAKERS */ .speakers { flex-wrap: wrap; padding: 0 20px; } .speaker-item { width: 100%; } .speaker-item:not(:last-child) { margin-bottom: 38px; } .speaker-title { margin-bottom: 50px; } .speaker-info { padding: 0; width: 71%; } .speaker-info h3 { margin: 16px 0 5px; font-size: 24px; } .speaker-item:not(:first-child) .speaker-img { margin-top: 33px; } } /* TABLET VIEW */ @media only screen and (max-width: 1024px) and (min-width: 768px) { /* FORM */ .navbar-icon img { padding: 5px 0 5px; } .navbar-icon img { padding-right: 0; } } @media only screen and (max-width: 991px) and (min-width: 768px) { /* FORM */ #plotly-body form { padding: 25px 25px; } } @media only screen and (min-width: 768px) { /* SPEAKERS */ .speaker-img { margin-right: 32px; display: flex; align-items: center; } } /* MOBILE VIEW */ @media only screen and (max-width: 767px) { /*DEFAULTS*/ h1 { padding-bottom: 5px; margin: 0; font-size: 40px; } h2 { font-size: 36px; } h3 { font-size: 24px; } h4 { padding-bottom: 5px; margin: 0; font-size: 18px; } p { padding: 0; text-align: left; } #paragraph { margin-top: 30px; } ul { padding-left: 20px; text-align: left; } ul li { margin-left: 0; font-size: 16px; } /*LAYOUT CONTAINERS*/ .container { padding: 0 74px; } .template-content { margin-top: 55px; padding-right: 0; width: 100%; grid-template-columns: 100%; text-align: center; } .template-content .register-form { position: initial; width: 100%; grid-row-start: initial; grid-row-end: initial; } .template-content .right { padding: 0 40px; margin: 20px 0 40px; width: 100%; } .template-content h1 { font-size: 46px; } .sidebar { padding: 15px 0 0; } .paragraph { margin-top: 30px; } p#paragraph { margin: 0 0 10px; text-align: center; } .dark p#paragraph { color: #a2aab8; } .section-header { padding: 0; } /*NAVBAR*/ .navbar-icons { display: flex; justify-content: space-between; } .navbar-icon img { scale: .8; padding-right: 0; } .navbar-icon img#plotlyLogo { scale: 1; width: 155px; } .navbar-icons a:nth-child(2) { margin-left: 0; } .dash { display: none; } /*LOGOS*/ .navbar-icon img.holoviews { max-width: 400px; } .logo-holder { width: 41%; } .logos-img { padding: 0 31px; } /*SPEAKERS*/ .section-speaker { padding: 64px 0; margin-top: 36px; text-align: center; } .speaker { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .speaker-item { flex-wrap: wrap; margin: 20px 0; } .speaker-title { margin-bottom: 30px; font-size: 34px; } .speaker .speaker-img { display: flex; top: -116px; margin-right: 0; width: 100%; justify-content: center; } .speaker .speaker-img img { width: 200px; max-width: 100%; height: 200px; } .speaker-info { padding: 0; width: 100%; } .speaker-item:not(:first-child) .speaker-img { margin-top: 0; } /*LAYOUT ELEMENTS*/ .hide-mobile { display: none !important; } .hide-desktop { display: inline-block; } .logos-img img { padding: 0; transform: scale(0.7); } /* FORM */ #plotly-body form { padding: 31px 14px 24px; } #plotly-body .form-content { min-height: 100% !important; } .form-content h4 { margin: 25px 0; } /* FOOTER */ .footer { padding: 70px 0 37px; } } @media only screen and (max-width: 575px) { /* FORM */ #plotly-body form.form p.submit { display: flex; justify-content: center; width: 100%; } #plotly-body form.form p.submit+p { margin: 0; padding: 0; width: 100%; text-align: center; } } @media only screen and (max-width: 524px) { .container { padding: 0 30px; } .template-content .right { padding: 15px; } .footer { padding: 53px 0 37px; } } </style> <link rel="stylesheet" type="text/css" href="https://go.plotly.com/css/form.css?ver=2021-09-20" /> <script type="text/javascript" src="https://go.plotly.com/js/piUtils.js?ver=2021-09-20"></script><script type="text/javascript"> piAId = '720653'; piCId = '99848'; piHostname = 'go.plotly.com'; (function() { function async_load(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + piHostname + '/pd.js'; var c = document.getElementsByTagName('script')[0]; c.parentNode.insertBefore(s, c); } if(window.attachEvent) { window.attachEvent('onload', async_load); } else { window.addEventListener('load', async_load, false); } })(); </script></head> <body id="plotly-body">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N6T2RXG" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <main role="main"> <div class="section-header"> <div class="container"> <div class="navbar-icons"> <a class="navbar-icon" href="https://plotly.com/"> <img id="plotlyLogo" src="https://plotly-marketing-website-2.cdn.prismic.io/plotly-marketing-website-2/b3d3a2b1-49f9-4e74-93dc-070b266a54ba_plotly_logo.svg" pardot-region="plotly" alt="logo" />  </a> </div> </div> </div> <div class="section-content"> <div class="container"> <div class="template-content"> <h1 pardot-region="content-title">High-Performance Data Tables with Dash and AG Grid</h1> <h4 pardot-region="content-subtitle" class="content-subtitle"> A Technical Tutorial with Plotly’s CTO & Co-Founder </h4> <h5 pardot-region="content-date" class="date"> Recorded on January 26, 2023 </h5> <p id="paragraph" pardot-region="paragraph-1" pardot-repeatable pardot-region-type="“pardot”"> Organizations are quickly moving from traditional BI tools like Excel to Python-friendly solutions like AG Grid. With over 1.2 million downloads per month, this leading component library amplifies the power of tables by offering in-place cell editing, live stream updates, integrated charting, and more </p> <div id="formWrapper" class="content sidebar register-form"> <div class="form-holder"> <div class="form-content"> <h4 pardot-region="form header">Access the Recording</h4> <form accept-charset="UTF-8" method="post" action="https://go.plotly.com/dash-ag-grid" class="form" id="pardot-form"> <p class="form-field first_name pd-text required "> <label class="field-label" for="First_Namepi_First_Name">First Name</label> <input type="text" name="First_Namepi_First_Name" id="First_Namepi_First_Name" value="" class="text" size="30" maxlength="40" onchange="" onfocus="" /> </p> <div id="error_for_First_Namepi_First_Name" style="display:none"></div> <p class="form-field last_name pd-text required "> <label class="field-label" for="Last_Namepi_Last_Name">Last Name</label> <input type="text" name="Last_Namepi_Last_Name" id="Last_Namepi_Last_Name" value="" class="text" size="30" maxlength="80" onchange="" onfocus="" /> </p> <div id="error_for_Last_Namepi_Last_Name" style="display:none"></div> <p class="form-field User_Type pd-select required form-field-primary"> <label class="field-label" for="719653_161083pi_719653_161083">I am a...</label> <select name="719653_161083pi_719653_161083" id="719653_161083pi_719653_161083" class="select" onchange=""><option value="" selected="selected"></option> <option value="1818940">Professional</option> <option value="1818943">Student</option> </select> </p> <div id="error_for_719653_161083pi_719653_161083" style="display:none"></div> <p class="form-field email pd-text required "> <label class="field-label" for="Emailpi_Email">Company Email</label> <input type="text" name="Emailpi_Email" id="Emailpi_Email" value="" class="text" size="30" maxlength="255" onchange="" onfocus="piAjax.loadEmailIndicator(this, 161086, 'https://go.plotly.com/images/indicator2.gif');" /> </p> <div id="error_for_Emailpi_Email" style="display:none"></div> <p class="form-field company pd-text required form-field-secondary dependentFieldSlave dependentField"> <label class="field-label" for="Companypi_Company">Company Name</label> <input type="text" name="Companypi_Company" id="Companypi_Company" value="" class="text" size="30" maxlength="255" onchange="" onfocus="" /> </p> <div id="error_for_Companypi_Company" style="display:none"></div> <p class="form-field job_title pd-select required form-field-secondary dependentFieldSlave dependentField"> <label class="field-label" for="719653_161092pi_719653_161092">Title</label> <select name="719653_161092pi_719653_161092" id="719653_161092pi_719653_161092" class="select" onchange=""><option value="" selected="selected"></option> <option value="1818946">Student</option> <option value="1818949">CXO</option> <option value="1818952">Director/VP</option> <option value="1818955">Product Manager</option> <option value="1818958">Data Engineer</option> <option value="1818961">Data Scientist</option> <option value="1818964">Engineer</option> <option value="1818967">DevOps</option> <option value="1818970">Full Stack Developer</option> <option value="1818973">System Architect</option> <option value="1818976">Other</option> </select> </p> <div id="error_for_719653_161092pi_719653_161092" style="display:none"></div> <p class="form-field utm_source pd-hidden hidden "> <input type="hidden" name="719653_161095pi_719653_161095" id="719653_161095pi_719653_161095" value="" /> </p> <div id="error_for_719653_161095pi_719653_161095" style="display:none"></div> <p class="form-field utm_medium pd-hidden hidden "> <input type="hidden" name="719653_161098pi_719653_161098" id="719653_161098pi_719653_161098" value="" /> </p> <div id="error_for_719653_161098pi_719653_161098" style="display:none"></div> <p class="form-field utm_campaign pd-hidden hidden "> <input type="hidden" name="719653_161101pi_719653_161101" id="719653_161101pi_719653_161101" value="" /> </p> <div id="error_for_719653_161101pi_719653_161101" style="display:none"></div> <p class="form-field utm_content pd-hidden hidden "> <input type="hidden" name="719653_161104pi_719653_161104" id="719653_161104pi_719653_161104" value="" /> </p> <div id="error_for_719653_161104pi_719653_161104" style="display:none"></div> <p class="form-field utm_term pd-hidden hidden "> <input type="hidden" name="719653_161107pi_719653_161107" id="719653_161107pi_719653_161107" value="" /> </p> <div id="error_for_719653_161107pi_719653_161107" style="display:none"></div> <p style="position:absolute; width:190px; left:-9999px; top: -9999px;visibility:hidden;"> <label for="pi_extra_field">Comments</label> <input type="text" name="pi_extra_field" id="pi_extra_field"/> </p>  <input name="_utf8" type="hidden" value="☃" /> <p class="submit"> <input type="submit" accesskey="s" value="ACCESS" /> </p> <p><a href="https://plot.ly/privacy/" target="_blank">Privacy Policy</a></p> <script> if (document.URL.startsWith("https://go.plot.ly/demo-dash" )) { document.querySelector(".get-page-title input").value = "Nav Bar Demo Request"; } if (document.URL.startsWith('https://go.plot.ly/dash-enterprise-trial')) { document.querySelector(".get-page-title input").value = "Dash Demo Request"; } if (document.URL.startsWith('https://go.plot.ly/chart-studio-demo')) { document.querySelector(".get-page-title input").value = "Chart Studio Demo Request"; } if (document.URL.startsWith('https://go.plot.ly/oem-learn')) { document.querySelector(".get-page-title input").value = "OEM Learn More"; } if (document.URL.startsWith('https://go.plot.ly/contact-sales')) { document.querySelector(".get-page-title input").value = "Contact Sales"; } if (document.URL.startsWith('https://go.plot.ly/contact-us')) { document.querySelector(".get-page-title input").value = "Contact Us"; } </script> <script type="text/javascript"> //<![CDATA[ var anchors = document.getElementsByTagName("a"); for (var i=0; i<anchors.length; i++) { var anchor = anchors[i]; if(anchor.getAttribute("href")&&!anchor.getAttribute("target")) { anchor.target = "_top"; } } //]]> </script> <input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value="" /></form> <script type="text/javascript">(function(){ pardot.$(document).ready(function(){ (function() { var $ = window.pardot.$; window.pardot.FormDependencyMap = [{"primary_field_html_id":"719653_161083pi_719653_161083","secondary_field_html_id":"Companypi_Company","primary_field_value":"Professional"},{"primary_field_html_id":"719653_161083pi_719653_161083","secondary_field_html_id":"719653_161092pi_719653_161092","primary_field_value":"Professional"}]; $('.form-field-primary input, .form-field-primary select').each(function(index, input) { $(input).on('change', window.piAjax.checkForDependentField); window.piAjax.checkForDependentField.call(input); }); })(); });})();</script> </div> </div> </div> <div class="paragraph" pardot-region="paragraph-2" pardot-repeatable> <p> We’re thrilled to announce that, due to popular demand, Plotly is releasing the Dash AG Grid Python library to the open-source community. Watch this recorded technical tutorial to learn how Dash works with AG Grid to deliver rich and performant interactive data apps, enabling the following: </p> <ul> <li>Management of core features of a data grid like resizing, reordering, and pinning </li> <li>Access to AG Grid-specific features like pivoting, grouping, and integrated charts </li> <li>The ability to switch between AG Grid community and enterprise editions </li> </ul> </div> </div> </div> </div> </div> <div class="section-speaker"> <div class="container"> <div class="speaker" pardot-repeatable> <div class="speaker-img"> <img src="https://images.prismic.io/plotly-marketing-website-2/19c52371-5bf3-4b36-a410-94116aca2072_Alex_photo.jpg?auto=compress,format" pardot-region="speaker-img1" /> </div> <div class="speaker-info"> <h3 pardot-region="speaker-title1">About Alex Johnson</h3> <p pardot-region="speaker-para1" class="speaker-paragraph"> Alex Johnson, Plotly’s CTO and Co-Founder, drove the development of Plotly.js and Dash, as well as Dash Enterprise. Prior to working in software, Alex earned a PhD in Quantum Physics from Harvard University. He is also a former Ziff Environmental Fellow and served as a database architect for renewable energy companies. Whether in software, physics, or materials science, Alex believes that the key to success is asking the right questions, gathering the best data, analyzing it deeply, and following its lessons wherever they might lead. </p> </div> </div> </div> </div> <div class="animation-section"> <div class="animation-bg-holder"> <div class="first-custom-bg"> </div> <div class="second-custom-bg"> </div> <div class="third-custom-bg"> </div> <div class="fourth-custom-bg"> </div> </div> </div> </main>  <div class="footer"> <div class="container"> <div class="title-holder"> <h3 class="title" pardot-region="footer-title"> With customers across the Fortune 500, Plotly is a category-defining leader in enabling data-driven decisions from advanced analytics, machine learning, and artificial intelligence </h3> </div> <div class="logos-img"> <div class="logo-holder"><img alt="Colgate" pardot-region="logo-1" pardot-repeatable src="https://images.prismic.io/plotly-marketing-website-2/76085e75-1c61-4ab4-98c0-b13493130be9_25772dc4-753b-4fed-b9c3-2530cd421f62_customer_logo_new-15.png?auto=compress,format"> </div> <div class="logo-holder"><img alt="Shell" pardot-region="logo-2" pardot-repeatable src="https://images.prismic.io/plotly-marketing-website-2/7b832920-8219-4967-b75c-8aee6dec6992_Shell%402x.png?auto=compress,format"> </div> <div class="logo-holder"><img alt="Liberty Mutual Insurance" pardot-region="logo-3" pardot-repeatable src="https://images.prismic.io/plotly-marketing-website-2/5f4db579-bf9c-4e04-9e90-42be628606f4_780ffc7b-53bf-49c6-8ec1-e5051fd2067f_customer_logo_new-11.png?auto=compress,format"> </div> <div class="logo-holder"><img alt="Santander" pardot-region="logo-4" pardot-repeatable src="https://images.prismic.io/plotly-marketing-website-2/932a0381-2d51-4886-a45a-c07f4526210c_santander-logo-11530958239sj0lghdh7v.png?auto=compress,format"> </div> <div class="logo-holder"><img alt="Tesla" pardot-region="logo-5" pardot-repeatable src="https://images.prismic.io/plotly-marketing-website-2/e9c3d709-41c1-4bc2-93c7-1abd8c9cd9c0_tesla-vector-logos-400546.png?auto=compress,format"> </div> <div class="logo-holder"><img alt="Lululemon" pardot-region="logo-6" pardot-repeatable src="https://images.prismic.io/plotly-marketing-website-2/1f3abd9c-2e67-498f-ac23-46cef0ad89eb_52a78b92-4d05-401c-9b1a-72b8dd107faa_customer_logo_new-16.png?auto=compress,format"> </div> <div class="logo-holder"><img alt="AES" pardot-region="logo-7" pardot-repeatable src="https://images.prismic.io/plotly-marketing-website-2/0e1eeefb-108b-46de-bcee-236e818bb47d_customer_logo_new-20.png?auto=compress,format"> </div> <div class="logo-holder"><img alt="Intuit" pardot-region="logo-8" pardot-repeatable src="https://images.prismic.io/plotly-marketing-website-2/67e30c7b-d17b-4773-a93a-dd24a19b6052_customer_logo_new-17.png?auto=compress,format"> </div> <div class="logo-holder"><img alt="Utah Jazz" pardot-region="logo-9" pardot-repeatable src="https://images.prismic.io/plotly-marketing-website-2/3238db4d-f326-43b3-8459-6881c123cdb3_customer_logo_new-25.png?auto=compress,format"> </div> <div class="logo-holder"><img alt="Activision Blizzard" pardot-region="logo-10" pardot-repeatable src="https://images.prismic.io/plotly-marketing-website-2/976e99dd-0604-4f94-b5b2-12df2add2a02_customer_logo_new-26.png?auto=compress,format"> </div> <div class="logo-holder"><img alt="T-mobile" pardot-region="logo-11" pardot-repeatable src="https://images.prismic.io/plotly-marketing-website-2/a671c2f1-d70c-48c4-a820-04dfdcb30c07_3a2f6b1f-9401-4ccd-aece-ec5c0017a092_customer_logo_new-19.png?auto=compress,format"> </div> <div class="logo-holder"><img alt="BAE Systems" pardot-region="logo-12" pardot-repeatable src="https://images.prismic.io/plotly-marketing-website-2/6af33d36-fdf2-4fce-a75d-1d10e8f80e09_6e051344-252d-4169-a828-8951ba838b9c_customer_logo_new-22.png?auto=compress,format"> </div> <div class="logo-holder"><img alt="Cisco" pardot-region="logo-13" pardot-repeatable src="https://images.prismic.io/plotly-marketing-website-2/68a5d613-a1eb-44fc-823f-21e5a1d56528_cisco-logo.png?auto=compress,format"> </div> <div class="logo-holder"><img alt="Amgen" pardot-region="logo-14" pardot-repeatable src="https://images.prismic.io/plotly-marketing-website-2/628b6b10-35e3-4ffd-b757-493bccb3f016_amgen.png?auto=compress,format"> </div> </div> </div> </div> <div class="gradient"></div> <div class="switch theme-switch-wrapper"> <label class="switch-label theme-switch" for="checkbox"> <input type="checkbox" id="checkbox" onclick="SwitchMode()" /> <div class="slider round"> <img class="sun" src="https://plotly-marketing-website-2.cdn.prismic.io/plotly-marketing-website-2/cad06fc6-cdce-41d5-88b4-cb19b97bc2a7_sun-yellow.svg" alt="sun"></img> <img class="moon" src="https://plotly-marketing-website-2.cdn.prismic.io/plotly-marketing-website-2/8f9da49f-c389-496d-94ef-251ac8a2d334_svg_toggle-01.svg" alt="moon"></img> </div> </label> </div> <script type="text/javascript"> // Parse the URL function getParameterByName(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); } // Give the URL parameters variable names var source = getParameterByName('utm_source'); var medium = getParameterByName('utm_medium'); var campaign = getParameterByName('utm_campaign'); var content = getParameterByName('utm_content'); var term = getParameterByName('utm_term'); // Put the variable names into the hidden fields in the form. selector should be "p.YOURFIELDNAME input" document.querySelector("p.source input").value = source; document.querySelector("p.utm_medium input").value = medium; document.querySelector("p.utm_campaign input").value = campaign; document.querySelector("p.utm_content input").value = campaign; document.querySelector("p.utm_term input").value = campaign; </script> <script type="text/javascript"> if ($(".errors")[0]) { var utm_source = $(".utm_source").find("input:hidden").val(); var utm_medium = $(".utm_medium").find("input:hidden").val(); var utmURL = window.location.href + `?utm_source=${utm_source}&utm_medium=${utm_medium}`; history.pushState({}, null, utmURL); } </script> <script> const toggleSwitch = document.querySelector( '.theme-switch input[type="checkbox"]' ); const currentTheme = localStorage.getItem("theme"); if (currentTheme) { document.documentElement.setAttribute("data-theme", currentTheme); if (currentTheme === "dark") { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute("data-theme", "dark"); localStorage.setItem("theme", "dark"); } else { document.documentElement.setAttribute("data-theme", "light"); localStorage.setItem("theme", "light"); } } toggleSwitch.addEventListener("change", switchTheme, false); function SwitchMode() { "dark" != localStorage.toggled ? ($("#plotly-body").toggleClass("dark", !0), (localStorage.toggled = "dark"), $("#plotlyLogo").attr( "src", "https://images.prismic.io/plotly-marketing-website-2/69e12d6a-fb65-4b6e-8423-9465a29c6028_plotly-logo-lg.png?auto=compress,format" )) : ($("#plotly-body").toggleClass("dark", !1), (localStorage.toggled = ""), $("#plotlyLogo").attr( "src", "https://plotly-marketing-website-2.cdn.prismic.io/plotly-marketing-website-2/b3d3a2b1-49f9-4e74-93dc-070b266a54ba_plotly_logo.svg" )); } $(document).ready(function () { $("#plotly-body").toggleClass(localStorage.toggled), $("#plotly-body").hasClass("dark") ? ($("#checkbox").prop("checked", !0), $("#plotlyLogo").attr( "src", "https://images.prismic.io/plotly-marketing-website-2/69e12d6a-fb65-4b6e-8423-9465a29c6028_plotly-logo-lg.png?auto=compress,format" )) : ($("#checkbox").prop("checked", !1), $("#plotlyLogo").attr( "src", "https://plotly-marketing-website-2.cdn.prismic.io/plotly-marketing-website-2/b3d3a2b1-49f9-4e74-93dc-070b266a54ba_plotly_logo.svg" )); $(".User_Type select").on("change", function () { $('.error').length && "Professional" === $(".User_Type select option:selected").text() ? $(".form-field-secondary.dependentFieldSlave.dependentField.error").next().next().css("display", "block") : $('.error').length && "Student" === $(".User_Type select option:selected").text() ? $(".form-field-secondary.dependentFieldSlave.dependentField.error").next().next().css("display", "none") : $(".form-field-secondary.dependentFieldSlave.dependentField.error").next().next().css("display", "none") }); }); </script> </body> </html>

CINXE.COM

High-Performance Data Tables with Dash and AG Grid