React Grid: Server-Side Operations With Java & Spark

<!DOCTYPE html><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=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet"><html lang="en" data-astro-cid-sckkx6r4 style="--lightModeCSSUrl: url("/images/sun.svg");--darkModeCSSUrl: url("/images/moon.svg");"> <head><meta charset="UTF-8"><meta name="description" content="Learn how to perform server-side operations using Apache Spark with a complete reference implementation. Download AG Grid v33.1.1 today: The best React Table & React Data Grid in the world."><meta name="viewport" content="width=device-width"><link rel="icon" type="image/png" sizes="196x196" href="/_astro/favicon-196.Bimfhk9M.png"><link rel="icon" type="image/png" sizes="192x192" href="/_astro/favicon-192.BPgSS0FN.png"><link rel="icon" type="image/png" sizes="180x180" href="/_astro/favicon-180.DPLMo2LR.png"><link rel="icon" type="image/png" sizes="167x167" href="/_astro/favicon-167.I4Tpyy48.png"><link rel="icon" type="image/png" sizes="152x152" href="/_astro/favicon-152.cc6y96U4.png"><link rel="icon" type="image/png" sizes="128x128" href="/_astro/favicon-128.DBIUHlVo.png"><link rel="icon" type="image/png" sizes="32x32" href="/_astro/favicon-32.WDuB-104.png"><link rel="apple-touch-icon" sizes="180x180" href="/_astro/favicon-180-touch.DLSK8QDR.png"><link rel="apple-touch-icon" sizes="167x167" href="/_astro/favicon-167-touch.BlG15XMf.png"><link rel="apple-touch-icon" sizes="152x152" href="/_astro/favicon-152-touch.Cer8BKXE.png"><meta name="generator" content="Astro v4.16.18"><title>React Grid: Server-Side Operations With Java & Spark | AG Grid</title><link rel="canonical" href="https://www.ag-grid.com/react-data-grid/server-side-operations-spark/"><link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap-index.xml"><meta property="og:url" content="https://www.ag-grid.com/react-data-grid/server-side-operations-spark/"><meta property="og:type" content="website"><meta property="og:title" content="React Grid: Server-Side Operations With Java & Spark | AG Grid"><meta property="og:description" content="Learn how to perform server-side operations using Apache Spark with a complete reference implementation. Download AG Grid v33.1.1 today: The best React Table & React Data Grid in the world."><meta property="og:image" content="/images/ag-grid-social.png"><meta name="twitter:card" content="summary_large_image"><meta property="twitter:domain" content="www.ag-grid.com"><meta property="twitter:url" content="https://www.ag-grid.com/react-data-grid/server-side-operations-spark/"><meta name="twitter:title" content="React Grid: Server-Side Operations With Java & Spark | AG Grid"><meta name="twitter:description" content="Learn how to perform server-side operations using Apache Spark with a complete reference implementation. Download AG Grid v33.1.1 today: The best React Table & React Data Grid in the world."><meta name="twitter:image" content="/images/ag-grid-social.png"><script>(function(){const googleTagManagerId = "GTM-T7JG534"; (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', googleTagManagerId); })();</script><script defer data-domain="ag-grid.com" src="https://plausible.io/js/script.tagged-events.outbound-links.js"></script> <script> window.plausible = window.plausible || function () { (window.plausible.q = window.plausible.q || []).push(arguments); }; </script><script async type="text/javascript" src="https://secure.inventiveinspired7.com/js/792251.js"></script><noscript><img alt="" src="https://secure.inventiveinspired7.com/792251.png" style="display:none;; --lightModeCSSUrl: url("/images/sun.svg");--darkModeCSSUrl: url("/images/moon.svg");" data-astro-cid-sckkx6r4></noscript><link rel="stylesheet" href="/_astro/example-finance.DQZXqfST.css"> <link rel="stylesheet" href="/_astro/_pageName_.BTiaybtX.css"> <style>._contentViewport_cb2ib_1{display:flex;flex-direction:column;flex-grow:1}@media (min-width: 1052px){._contentViewport_cb2ib_1{flex-direction:row}}@media (min-width: 1475px){._contentViewport_cb2ib_1._noLeftMenu_cb2ib_11 ._docPage_cb2ib_11{width:var(--layout-width-9-12);margin-left:calc(var(--layout-width-3-12) + var(--layout-gap))}}@media (max-width: 1880px){._contentViewport_cb2ib_1._noLeftMenu_cb2ib_11 ._docPage_cb2ib_11{width:var(--layout-width-6-12)}}._contentViewport_cb2ib_1._noLeftMenu_cb2ib_11 ._docPage_cb2ib_11{width:100%}._pageSections_cb2ib_29 li p{padding-bottom:0;margin-bottom:8px}._pageSections_cb2ib_29 article>h2{margin-top:48px}._pageSections_cb2ib_29 article>h3,._pageSections_cb2ib_29 article>h4{margin-top:48px}._pageSections_cb2ib_29 article>h2+h3,._pageSections_cb2ib_29 article>h2+h4,._pageSections_cb2ib_29 article>h3+h4{margin-top:32px}._pageSections_cb2ib_29 article p,._pageSections_cb2ib_29 article>ul,._pageSections_cb2ib_29 article>ol,._pageSections_cb2ib_29 article>table{font-size:var(--text-fs-base);line-height:var(--text-lh-xs)}h2:where(:not(:last-child)),h3:where(:not(:last-child)),h4:where(:not(:last-child)),h5:where(:not(:last-child)),h6:where(:not(:last-child)){margin-top:16px;margin-bottom:8px;letter-spacing:-.015em}ul:where(:not(:last-child)),ol:where(:not(:last-child)),blockquote:where(:not(:last-child)){margin-top:20px;margin-bottom:20px}._docPage_cb2ib_11 enterprise-icon:after{display:inline-block;background-image:url(/images/enterprise.svg);text-indent:-10000px;background-position-y:center;background-repeat:no-repeat;content:"e"}._docPage_cb2ib_11{flex:1 1 0px;width:100%;min-width:0px;padding-top:16px;padding-bottom:64px}@media screen and (max-width: 1475px){._docPage_cb2ib_11{border:none}}@media screen and (min-width: 1052px){._docPage_cb2ib_11{width:var(--layout-width-9-12);padding-top:40px;padding-right:12px}}@media screen and (min-width: 1475px){._docPage_cb2ib_11{width:var(--layout-width-7-12);max-width:var(--layout-width-7-12);padding-right:0}}[data-dark-mode=true] ._docPage_cb2ib_11 h1,[data-dark-mode=true] ._docPage_cb2ib_11 h2,[data-dark-mode=true] ._docPage_cb2ib_11 h3,[data-dark-mode=true] ._docPage_cb2ib_11 h4,[data-dark-mode=true] ._docPage_cb2ib_11 h5,[data-dark-mode=true] ._docPage_cb2ib_11 h6{color:var(--color-fg-primary)}._docPage_cb2ib_11 h1:hover .docs-header-icon,._docPage_cb2ib_11 h2:hover .docs-header-icon,._docPage_cb2ib_11 h3:hover .docs-header-icon,._docPage_cb2ib_11 h4:hover .docs-header-icon,._docPage_cb2ib_11 h5:hover .docs-header-icon,._docPage_cb2ib_11 h6:hover .docs-header-icon{opacity:.5}._docPage_cb2ib_11 .docs-header-icon{position:relative;padding-left:0;margin-left:8px;font-size:inherit;opacity:0;transition:opacity .33s ease-in-out}._docPage_cb2ib_11 .docs-header-icon:hover{opacity:1!important}._docPage_cb2ib_11 .docs-header-icon svg{position:relative;width:.85em;height:.85em;top:-.1em;visibility:visible;fill:var(--color-link)}[data-dark-mode=true] ._docPage_cb2ib_11 a:not(.button){color:var(--color-brand-300)}[data-dark-mode=true] ._docPage_cb2ib_11 a:not(.button):hover{color:var(--color-fg-primary);text-decoration-color:var(--color-brand-300)}._docPage_cb2ib_11 enterprise-icon:after{width:1rem;margin-left:.25rem}._docPage_cb2ib_11 .nav-link p{margin:0}._docPage_cb2ib_11 ul li>p{margin-bottom:.25rem}._pageSections_cb2ib_29>article>table{table-layout:fixed}._pageSections_cb2ib_29>article>p:first-child{font-size:var(--text-fs-lg);margin-bottom:32px;color:var(--color-text-secondary);line-height:var(--text-lh-sm)}._pageSections_cb2ib_29>article>p:first-child code{font-size:.8em}._pageSections_cb2ib_29>article>div *:not([class]) img{max-width:100%}._sideMenu_cb2ib_177{padding-top:36px}#errorCodeText{white-space:pre-wrap}.missing-params-message{display:none} </style> <link rel="stylesheet" href="/_astro/_pageName_.C4NmZ8Kx.css"> <style>._icon_1jqgc_1{fill:var(--icon-color, var(--color-fg-primary));width:var(--icon-size);height:var(--icon-size);transition:fill .25s ease-in-out} ._alert_1p97w_1{--icon-size: 1.5rem;display:flex;gap:8px;align-items:center;padding:8px 8px 8px 12px;background-color:var(--color-util-brand-50);border-radius:var(--radius-md);border:1px solid var(--color-util-brand-100);color:var(--color-util-brand-700);margin-top:20px;margin-bottom:32px}[data-dark-mode=true] ._alert_1p97w_1{background-color:color-mix(in srgb,var(--color-util-brand-50),var(--color-bg-primary) 60%)}._alert_1p97w_1 .icon{align-self:flex-start;position:relative;flex-shrink:0;fill:var(--color-util-brand-700)}._alert_1p97w_1 p :last-child{margin-bottom:0}._alert_1p97w_1 a{font-weight:var(--text-semibold);text-decoration:underline}._alert_1p97w_1 kbd{margin:0;padding-top:.075em;padding-bottom:.25em}._alert_1p97w_1._idea_1p97w_36 .icon{fill:orange}._alert_1p97w_1._warning_1p97w_40{color:var(--color-util-warning-700);background-color:var(--color-util-warning-50);border-color:color-mix(in srgb,var(--color-util-warning-600) 20%,var(--color-bg-primary))}[data-dark-mode=true] ._alert_1p97w_1._warning_1p97w_40{border-color:color-mix(in srgb,var(--color-util-warning-600) 30%,var(--color-bg-primary))}._alert_1p97w_1._warning_1p97w_40 .icon{fill:var(--color-util-warning-700)}._alert_1p97w_1._success_1p97w_52{color:var(--color-success);background-color:color-mix(in srgb,var(--color-success) 6%,var(--color-bg-primary));border-color:color-mix(in srgb,var(--color-success) 20%,var(--color-bg-primary))}[data-dark-mode=true] ._alert_1p97w_1._success_1p97w_52{background-color:color-mix(in srgb,var(--color-success) 10%,var(--color-bg-primary));border-color:color-mix(in srgb,var(--color-success) 28%,var(--color-bg-primary))}._alert_1p97w_1._success_1p97w_52 .icon{fill:var(--color-success)} ._clipboardButtonOuter_8cpmg_1{--clipboard-button-bg: var(--color-code-background);--clipboard-button-fg: var(--color-fg-tertiary);display:flex;align-items:center;position:absolute;top:4px;right:4px;opacity:0;z-index:2;transition:opacity .33s ease-in-out}pre:hover ._clipboardButtonOuter_8cpmg_1,._clipboardButtonOuter_8cpmg_1._hasCopied_8cpmg_13{opacity:1}._clipboardButtonOuter_8cpmg_1:hover{--clipboard-button-fg: var(--color-util-brand-400)}[data-dark-mode=true] ._clipboardButtonOuter_8cpmg_1:hover{--clipboard-button-fg: var(--color-link-hover)}._clipboardButtonOuter_8cpmg_1._hasCopied_8cpmg_13{--clipboard-button-bg: var(--color-util-gray-700);--clipboard-button-fg: var(--color-fg-white)}[data-dark-mode=true] ._clipboardButtonOuter_8cpmg_1._hasCopied_8cpmg_13{--clipboard-button-fg: var(--color-bg-primary)}.example-runner-outer ._clipboardButtonOuter_8cpmg_1{right:20px}._clipboardButton_8cpmg_1,._clipboardButtonCopied_8cpmg_34{display:flex;align-items:center;height:32px;background-color:var(--clipboard-button-bg);border-top:1px solid var(--color-border-primary);border-bottom:1px solid var(--color-border-primary)}._clipboardButton_8cpmg_1{width:calc(32px - var(--radius-sm));border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);border-right:1px solid var(--color-border-primary);cursor:pointer;transition:background-color .25s ease-in-out}._clipboardButton_8cpmg_1 svg{--icon-size: 22px;--icon-color: var(--clipboard-button-fg);transition:fill .25s ease-in-out}._clipboardButtonCopiedOuter_8cpmg_57{overflow:hidden}._clipboardButtonCopied_8cpmg_34{font-size:var(--text-fs-sm);font-weight:var(--text-semibold);padding-left:8px;padding-right:8px;border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm);border-left:1px solid var(--color-border-primary);font-weight:var(--text-regular);color:var(--clipboard-button-fg);transition:background-color .25s ease-in-out,color .25s ease-in-out;cursor:pointer} ._icon_1jqgc_1{fill:var(--icon-color, var(--color-fg-primary));width:var(--icon-size);height:var(--icon-size);transition:fill .25s ease-in-out} ._docsHeaderIcon_15ivl_1{position:relative;padding-left:0;margin-left:8px;font-size:inherit;opacity:0;transition:opacity .33s ease-in-out}._docsHeaderIcon_15ivl_1 svg{position:relative;top:-.1em;width:.85em;height:.85em;visibility:visible;fill:var(--color-link)}._docsHeaderIcon_15ivl_1:hover{opacity:1}h1:hover ._docsHeaderIcon_15ivl_1,h2:hover ._docsHeaderIcon_15ivl_1,h3:hover ._docsHeaderIcon_15ivl_1,h4:hover ._docsHeaderIcon_15ivl_1,h5:hover ._docsHeaderIcon_15ivl_1,h6:hover ._docsHeaderIcon_15ivl_1{opacity:.5}h1:hover ._docsHeaderIcon_15ivl_1:hover,h2:hover ._docsHeaderIcon_15ivl_1:hover,h3:hover ._docsHeaderIcon_15ivl_1:hover,h4:hover ._docsHeaderIcon_15ivl_1:hover,h5:hover ._docsHeaderIcon_15ivl_1:hover,h6:hover ._docsHeaderIcon_15ivl_1:hover{opacity:1} ._container_kzfe6_1{display:flex;flex-direction:column;gap:8px;min-height:800px}._container_kzfe6_1 .ag-root-wrapper{border-bottom-left-radius:0;border-bottom-right-radius:0}._container_kzfe6_1 .ag-group-child-count{opacity:.6666;margin-left:4px}._moduleSnippet_kzfe6_16 pre{margin-top:-9px;border-top-left-radius:0;border-top-right-radius:0}[data-dark-mode=true] ._moduleSnippet_kzfe6_16 pre{border-color:color-mix(in srgb,var(--color-fg-primary) 15%,transparent)} ._cta_13t5y_1{position:relative}._cta_13t5y_1 a,._cta_13t5y_1 button{display:flex;justify-content:center;align-items:center;width:40px;height:40px;border-radius:var(--radius-sm);transition:color .25s ease-in-out,background-color .25s ease-in-out;cursor:pointer}._cta_13t5y_1 a:hover,._cta_13t5y_1 button:hover{background-color:var(--color-util-brand-100)}._cta_13t5y_1 a:focus-visible,._cta_13t5y_1 button:focus-visible{outline:none;box-shadow:0 0 0 4px var(--color-button-primary-shadow-focus),var(--shadow-xs)}._cta_13t5y_1 a svg,._cta_13t5y_1 button svg{--icon-size: 1.25em;fill:var(--color-link);transform:translate(1px,.75px);transition:fill .25s ease-in-out}li:first-child ._cta_13t5y_1 a svg,li:first-child ._cta_13t5y_1 button svg{--icon-size: 1.35em}[data-dark-mode=true] ._cta_13t5y_1 a:hover,[data-dark-mode=true] ._cta_13t5y_1 button:hover{background-color:var(--color-util-brand-50)}@supports (-webkit-touch-callout: none){._cta_13t5y_1 button{display:none}}._tooltip_13t5y_46{--tooltip-background: var(--color-fg-primary);position:absolute;display:block;color:var(--color-bg-primary);top:-44px;left:50%;padding:4px 16px;white-space:nowrap;font-weight:600;background-color:var(--tooltip-background);border-radius:6px;transform:translate(-50%,4px);opacity:0;pointer-events:none;transition-delay:0;transition:opacity .165s ease-in,transform .165s ease-in;z-index:1}._tooltip_13t5y_46:before{content:"";position:absolute;background-color:var(--tooltip-background);width:16px;height:16px;transform:rotate(45deg);bottom:-7px;left:calc(50% - 8px);border-radius:3px;z-index:-1}._cta_13t5y_1:hover ._tooltip_13t5y_46{opacity:1;transform:translate(-50%);transition:opacity .33s ease-in,transform .33s ease-in;transition-delay:.165s}[data-dark-mode=true] ._tooltip_13t5y_46{--tooltip-background: var(--color-bg-secondary);color:var(--color-fg-primary);box-shadow:0 -4px 16px #0006} </style> <style>._container_1d2i5_1{--icon-color: var(--color-enterprise-icon);--icon-size: 18px;display:flex;align-items:center;gap:6px}._container_1d2i5_1 .icon{position:relative;top:-2px}._link_1d2i5_13{opacity:.5;transition:opacity .33s ease-in-out}.ag-row:hover ._link_1d2i5_13{opacity:1}._newTabIcon_1d2i5_21{--icon-size: 14px;margin:2px 2px 0 6px}._configuration_10dtg_1{display:flex;flex-direction:column;gap:16px}._rowModel_10dtg_7,._bundles_10dtg_8,._charts_10dtg_9{display:flex;align-items:center}._rowModel_10dtg_7 ._label_10dtg_13,._bundles_10dtg_8 ._label_10dtg_13,._charts_10dtg_9 ._label_10dtg_13{width:100px;font-weight:var(--text-semibold)}._rowModel_10dtg_7>div,._bundles_10dtg_8>div,._charts_10dtg_9>div{display:flex;gap:32px;margin-left:12px}._rowModel_10dtg_7 label,._bundles_10dtg_8 label,._charts_10dtg_9 label{cursor:pointer;display:flex;align-items:center;gap:6px}._enterpriseIcon_10dtg_35{--icon-size: var(--text-fs-lg);--icon-color: var(--color-enterprise-icon)}._moduleName_zn8z5_1{font-size:13px}._searchBox_83fei_1{position:relative;display:flex;margin-top:16px;border-radius:var(--radius-md);cursor:text}[data-dark-mode=true] ._searchBox_83fei_1 input{background:color-mix(in srgb,var(--color-bg-primary),var(--color-fg-primary) 6%)}[data-dark-mode=true] ._searchBox_83fei_1 input::placeholder{color:#fff9}._searchIcon_83fei_15{--icon-size: 20px;--icon-color: var(--color-fg-secondary);position:absolute;top:10px;left:16px}input[type=search]._searchInput_83fei_23{width:100%;padding:8px 8px 8px 40px}input[type=search]._searchInput_83fei_23::placeholder{color:var(--color-fg-quinary)}input[type=search]._searchInput_83fei_23::-webkit-search-decoration,input[type=search]._searchInput_83fei_23::-webkit-search-cancel-button{display:none} ._form_3saq1_1 .alert{margin:0 0 6px}._licenceWrapper_3saq1_5{margin-top:8px;position:relative}._license_3saq1_10,._licencePlaceholder_3saq1_11{width:100%;height:14.2em;padding:16px;word-break:break-all;font-family:var(--text-monospace-font-family);font-size:15px;line-height:var(--text-lh-base)}._license_3saq1_10{resize:none;border-radius:var(--radius-md);border:1px solid color-mix(in srgb,var(--color-border-secondary),var(--color-border-primary));background-color:var(--color-bg-secondary);color:var(--color-fg-secondary)}._license_3saq1_10::placeholder{opacity:0}[data-dark-mode=true] ._license_3saq1_10{background-color:var(--color-bg-tertiary)}._licencePlaceholder_3saq1_11{position:absolute;top:0;left:0;overflow:hidden;pointer-events:none}._licencePlaceholder_3saq1_11 span{opacity:.5}._licenseData_3saq1_46{display:flex;flex-direction:column;gap:16px;margin-top:16px}._expired_3saq1_53{color:var(--color-negative)}._frameworkLogo_3saq1_57{width:24px;height:24px;border-radius:var(--radius-xs)}._configureItems_3saq1_63{display:flex;align-items:center;flex-wrap:wrap;gap:12px 32px;margin-top:8px}._configureItems_3saq1_63 label{display:flex;align-items:center;gap:12px}._error_3saq1_76{border:1px solid var(--color-input-error);background-color:var(--color-util-warning-100)}._results_3saq1_81{margin-top:32px}._results_3saq1_81 h2{margin-top:48px}._reposTable_3saq1_88 thead{line-height:1.2;vertical-align:bottom}._reposTable_3saq1_88 th:first-child,._reposTable_3saq1_88 td:first-child{padding-left:0}._reposTable_3saq1_88 td{vertical-align:middle;text-transform:capitalize}._reposTable_3saq1_88 ._frameworkLogo_3saq1_57{margin-right:4px}@media screen and (max-width: 900px){._reposTable_3saq1_88 thead{display:none}._reposTable_3saq1_88 tr,._reposTable_3saq1_88 td{display:block;text-align:left}._reposTable_3saq1_88 tr{padding:16px 0}._reposTable_3saq1_88 tr:nth-child(2n){background-color:unset}._reposTable_3saq1_88 td{padding:0;line-height:var(--text-lh-tight);font-weight:var(--text-bold)}._reposTable_3saq1_88 td:not(:last-child){margin-bottom:8px}._reposTable_3saq1_88 td[data-column]:before{content:attr(data-column) ": ";font-weight:var(--text-regular);color:var(--color-fg-secondary)}}@media screen and (min-width: 900px){._reposTable_3saq1_88 th:last-child,._reposTable_3saq1_88 td:last-child{padding-right:0;text-align:right}._reposTable_3saq1_88 [data-column="GitHub Repo"]{width:280px}._reposTable_3saq1_88 [data-column=Framework]{width:140px}}@media screen and (min-width: 1600px){._reposTable_3saq1_88 [data-column="License Type"]{width:160px}}._repoButton_3saq1_151>svg.icon{--icon-size: 1.5em;position:relative;right:4px} </style> <link rel="stylesheet" href="/_astro/DocsExampleRunner.b6J30Pzg.css"> <style>.force-resize-cursor *{cursor:ew-resize!important}@keyframes _fadeIn_1g5nw_1{0%{opacity:0}to{opacity:.8}}@keyframes _fadeOut_1g5nw_1{0%{opacity:.8}to{opacity:0}}@keyframes _scaleFadeInUp_1g5nw_1{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes _scaleFadeOutDown_1g5nw_1{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.95)}}._overlay_1g5nw_37{background-color:color-mix(in srgb,var(--color-black),var(--color-black) 45%);z-index:1000;position:fixed;inset:0;opacity:.8}[data-dark-mode=true] ._overlay_1g5nw_37{background-color:color-mix(in srgb,var(--color-black),var(--color-bg-primary) 35%);opacity:.8}._overlay_1g5nw_37[data-state=open]{animation:_fadeIn_1g5nw_1 .25s ease-in}._overlay_1g5nw_37[data-state=closed]{animation:_fadeOut_1g5nw_1 .25s ease-in}._content_1g5nw_55{background-color:var(--color-bg-primary);border-radius:8px;box-shadow:#0e121659 0 10px 38px -10px,#0e121633 0 10px 20px -15px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;max-width:464px;max-height:85vh;z-index:1000;overflow:hidden}._content_1g5nw_55:focus{outline:none}._content_1g5nw_55[data-state=open]{animation:_scaleFadeInUp_1g5nw_1 .2s cubic-bezier(.4,0,1,1)}._content_1g5nw_55[data-state=closed]{animation:_scaleFadeOutDown_1g5nw_1 .2s cubic-bezier(1,1,0,.4)}._title_1g5nw_79{margin:0 0 8px;font-size:var(--text-fs-lg);color:var(--color-text-secondary)}._description_1g5nw_86{margin:10px 0 0;color:var(--mauve-11);font-size:15px;line-height:1.5}._contentModal_1g5nw_93{padding:24px}._actions_1g5nw_97{padding:16px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--color-border-secondary);font-size:14px}._actions_1g5nw_97._noSeparator_1g5nw_105{padding:0 24px 24px;border-top:none}._fullWidth_1g5nw_110{width:100%} </style><script type="module" src="/_astro/hoisted.D12oPI3R.js"></script><style>._gif_jexjs_1{max-width:100%;outline:none!important}._gif_jexjs_1._wrapped_jexjs_5{margin-bottom:0}.gif_player{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;display:inline-block;position:relative;width:100%;min-height:256px;margin-bottom:16px;border-radius:var(--radius-md);background-color:var(--color-bg-primary);text-align:center;user-select:none;cursor:pointer}.gif_player img{max-width:100%}.gif_player:hover .play_button{background-color:var(--color-link-hover);transform:translate(-50%,-50%) scale(1.1)}[data-dark-mode=true] .gif_player:hover .play_button{background-color:color-mix(in srgb,var(--color-util-brand-200),var(--color-link-hover) 25%)}.gif_player.playing .play_button{transform:translate(-50%,-50%) scale(0)}.play_button{position:absolute;width:64px;height:64px;top:50%;left:50%;border-radius:50%;background-color:var(--color-util-brand-400);background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20fill='none'%3e%3cpath%20fill='%23fff'%20d='M48.124%2030.229%2023.929%2017.537c-1.332-.699-2.929.267-2.929%201.77v25.385c0%201.504%201.597%202.47%202.93%201.771l24.194-12.692c1.428-.749%201.428-2.793%200-3.542Z'/%3e%3c/svg%3e");color:#fff;transform:translate(-50%,-50%) scale(1);transition:transform .25s,background-color .25s}[data-dark-mode=true] .play_button{background-color:var(--color-util-brand-200)} </style><style>._imageCaption_mqav2_1{display:flex;flex-direction:column;margin:16px 24px 8px}._imageCaption_mqav2_1 ._image_mqav2_1{max-width:100%}._imageCaption_mqav2_1._centered_mqav2_10{margin-right:auto;margin-left:auto}._imageCaption_mqav2_1._centered_mqav2_10 ._image_mqav2_1{display:block;margin-right:auto;margin-left:auto}._imageCaption_mqav2_1._constrained_mqav2_20{max-width:100%}._body_mqav2_24{padding:16px}._body_mqav2_24._top_mqav2_27{padding:4px}._bodyText_mqav2_31{white-space:nowrap}[data-dark-mode=true] ._imageCaption_mqav2_1._darkmodeFilter_mqav2_35 img{filter:invert(1) hue-rotate(180deg) saturate(1.25);mix-blend-mode:screen} </style></head> <body data-astro-cid-sckkx6r4 style="--lightModeCSSUrl: url("/images/sun.svg");--darkModeCSSUrl: url("/images/moon.svg");"> <script> const htmlEl = document.querySelector('html'); const localDarkmode = localStorage['documentation:darkmode']; const isOSDarkmode = ( window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ).toString(); if (localDarkmode === undefined) { localStorage.setItem('documentation:darkmode', isOSDarkmode); } htmlEl.classList.add('no-transitions'); htmlEl.dataset.darkMode = localDarkmode !== undefined ? localDarkmode : isOSDarkmode; htmlEl.dataset.agThemeMode = htmlEl.dataset.darkMode === 'true' ? 'dark-blue' : 'light'; htmlEl.offsetHeight; // Trigger a reflow, flushing the CSS changes htmlEl.classList.remove('no-transitions'); </script> <div class="_mainContainer_b2g1f_5" data-astro-cid-sckkx6r4 style="--lightModeCSSUrl: url("/images/sun.svg");--darkModeCSSUrl: url("/images/moon.svg");"> <header class="_header_1agp5_1 site-header"> <div class="_headerInner_1agp5_20 layout-page-max-width"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="Z1QHyEj" prefix="r4" component-url="/_astro/SiteLogo.CbYHwFyX.js" component-export="SiteLogo" renderer-url="/_astro/client.5kNSwotS.js" props="{}" ssr="" client="load" opts="{"name":"SiteLogo","value":true}" await-children=""><a href="/" aria-label="Home" class="_headerLogo_1agp5_36"><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"></path><rect x="119.067" y="5.6" width="4.959" height="5.849"></rect><rect x="119.067" y="14.373" width="4.959" height="19.644"></rect><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><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><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><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="logo-mark" 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; } </style><rect class="aqua right-1" x="51" y="10" width="7" height="8"></rect><path class="aqua right-1" d="M58,10l-17,0l-8,8l25,0l0,-8Z"></path><rect class="orange right-2" x="36" y="22" width="7" height="8"></rect><path class="orange right-2" d="M43,30l0,-7.995l-14,-0l-8.008,7.995l22.008,0Z"></path><rect class="red right-3" x="24" y="34" width="7" height="8"></rect><path class="red right-3" d="M13,38.01l4,-4.01l14,0l0,8l-18,0l0,-3.99Z"></path><rect class="grey left-1" x="11" y="6" width="7" height="8"></rect><path class="grey left-1" d="M41,10l-4,4l-26,0l0,-8l30,0l0,4Z"></path><rect class="grey left-2" x="16" y="18" width="7" height="8"></rect><path class="grey left-2" d="M16,26l9,0l8,-8l-17,-0l0,8Z"></path><rect class="grey left-3" x="6" y="30" width="7" height="8"></rect><path class="grey left-3" d="M6,37.988l7,0.012l7.992,-8l-14.992,-0.047l-0,8.035Z"></path></svg></a></astro-island> <astro-island uid="1wil1d" prefix="r5" component-url="/_astro/ProductDropdown.DeOAom3M.js" component-export="ProductDropdown" renderer-url="/_astro/client.5kNSwotS.js" props="{"items":[1,[[0,{"title":[0,"AG Grid"],"description":[0,"Best JavaScript Grid in the World"],"url":[0,"https://www.ag-grid.com"]}],[0,{"title":[0,"AG Charts"],"description":[0,"Best JavaScript Charts in the World"],"url":[0,"https://www.ag-grid.com/charts"]}]]],"children":[0,null]}" ssr="" client="load" opts="{"name":"ProductDropdown","value":true}" await-children=""><div class="_customMenu_zefh0_1 "><button class="_customTrigger_zefh0_23 ">Products<span class="_arrow_zefh0_51"></span></button></div></astro-island> <div class="_docsNavBtnSearchContainer_1agp5_53"> <button id="top-bar-docs-button" class="_mobileNavButton_1agp5_76 button-secondary" type="button" data-toggle="collapse" data-target="#side-nav" aria-controls="side-nav" aria-expanded="false" aria-label="Toggle docs page navigation"> <span>Docs</span> <svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M14 25H28V27H14zM7.17 26L4.59 28.58 6 30 10 26 6 22 4.58 23.41 7.17 26zM14 15H28V17H14zM7.17 16L4.59 18.58 6 20 10 16 6 12 4.58 13.41 7.17 16zM14 5H28V7H14zM7.17 6L4.59 8.58 6 10 10 6 6 2 4.58 3.41 7.17 6z"></path></svg> </button> <astro-island uid="Z1mAAvp" prefix="r7" component-url="/_astro/Search.hHHnN0s7.js" component-export="default" renderer-url="/_astro/client.5kNSwotS.js" props="{}" ssr="" client="load" opts="{"name":"Search","value":true}" await-children=""><div role="button" tabindex="0" class="_headerSearchBox_1bvo1_1" aria-label="Open search with Enter or Space, or use the shortcut Ctrl K while anywhere else in the page."><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"></path></svg><span class="_placeholder_1bvo1_47">Search</span></div></astro-island> </div> <astro-island uid="Z1gJSz3" prefix="r8" component-url="/_astro/HeaderNav.DeNiJgOx.js" component-export="HeaderNav" renderer-url="/_astro/client.5kNSwotS.js" props="{"currentPath":[0,"/react-data-grid/server-side-operations-spark/"],"items":[1,[[0,{"title":[0,"AG Charts"],"url":[0,"https://www.ag-grid.com/charts"],"isCollapsed":[0,true]}],[0,{"title":[0,"Demos"],"path":[0,"/example"]}],[0,{"title":[0,"Theme Builder"],"path":[0,"/theme-builder"]}],[0,{"title":[0,"Docs"],"path":[0,"./getting-started"]}],[0,{"title":[0,"API"],"path":[0,"./reference"]}],[0,{"title":[0,"Community"],"path":[0,"/community"]}],[0,{"title":[0,"Pricing"],"path":[0,"/license-pricing"]}],[0,{"title":[0,"GitHub"],"url":[0,"https://github.com/ag-grid/ag-grid"],"icon":[0,"github"],"github":[0,"true"]}]]],"allPaths":[1,[[0,{"title":[0,"AG Charts"],"url":[0,"https://www.ag-grid.com/charts"],"isCollapsed":[0,true]}],[0,{"title":[0,"Demos"],"path":[0,"/example"]}],[0,{"title":[0,"Theme Builder"],"path":[0,"/theme-builder"]}],[0,{"title":[0,"Docs"],"path":[0,"./getting-started"]}],[0,{"title":[0,"API"],"path":[0,"./reference"]}],[0,{"title":[0,"Community"],"path":[0,"/community"]}],[0,{"title":[0,"Pricing"],"path":[0,"/license-pricing"]}],[0,{"title":[0,"GitHub"],"url":[0,"https://github.com/ag-grid/ag-grid"],"icon":[0,"github"],"github":[0,"true"]}],[0,"reference"],[0,"grid-interface"],[0,"grid-options"],[0,"grid-events"],[0,"grid-api"],[0,"grid-state"],[0,"grid-lifecycle"],[0,"column-interface"],[0,"column-properties"],[0,"column-object"],[0,"column-object-group"],[0,"column-events"],[0,"row-interface"],[0,"row-object"],[0,"row-events"],[0,"typescript-generics"],[0,{"title":[0,"Docs"],"path":[0,"/react"]}],[0,{"title":[0,"Docs"],"path":[0,"/angular"]}],[0,{"title":[0,"Docs"],"path":[0,"/vue"]}],[0,{"title":[0,"Docs"],"path":[0,"/javascript"]}]]],"apiPaths":[1,[[0,"reference"],[0,"grid-interface"],[0,"grid-options"],[0,"grid-events"],[0,"grid-api"],[0,"grid-state"],[0,"grid-lifecycle"],[0,"column-interface"],[0,"column-properties"],[0,"column-object"],[0,"column-object-group"],[0,"column-events"],[0,"row-interface"],[0,"row-object"],[0,"row-events"],[0,"typescript-generics"]]]}" ssr="" client="load" opts="{"name":"HeaderNav","value":true}" await-children=""><div class="_mainNav_1agp5_191"><nav class="_mainNavLarge_1agp5_191"><ul class="_navItemList_1agp5_225 list-style-none"><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="/example/" aria-label="AG Grid Demos"><span>Demos</span></a></li><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="/theme-builder/" aria-label="AG Grid Theme Builder"><span>Theme Builder</span></a></li><li class="_navItem_1agp5_225 _navItemActive_1agp5_243"><a class="_navLink_1agp5_243" href="/react-data-grid/getting-started/" aria-label="AG Grid Docs"><span>Docs</span></a></li><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="/react-data-grid/reference/" aria-label="AG Grid API"><span>API</span></a></li><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="/community/" aria-label="AG Grid Community"><span>Community</span></a></li><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="/license-pricing/" aria-label="AG Grid Pricing"><span>Pricing</span></a></li><li class="_navItem_1agp5_225 _buttonItem_1agp5_320 _githubItem_1agp5_316"><a class="_navLink_1agp5_243" href="https://github.com/ag-grid/ag-grid" aria-label="AG Grid GitHub"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" 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"></path></svg><span>GitHub</span></a></li><li class="_navItem_1agp5_225 _buttonItem_1agp5_320"><button class="_navLink_1agp5_243 button-style-none" aria-label="Dark mode selector"><div class="_icon_1agp5_88 _pseudoIcon_1agp5_324"></div><span>Dark Mode</span></button></li></ul></nav></div><button class="_mobileMenuButton_1agp5_117" type="button" aria-controls="_mainNavSmall_1agp5_1" aria-expanded="false" aria-label="Toggle navigation"><svg xmlns="http://www.w3.org/2000/svg" class="_menuIcon_1agp5_153" 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"></rect></g><g class="middle"><rect x="2" y="17" width="32" height="2"></rect></g><g class="bottom"><rect x="2" y="27" width="32" height="2"></rect></g></svg></button><div id="_mainNavSmall_1agp5_1" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><nav class="_mainNav_1agp5_191"><ul class="_navItemList_1agp5_225 list-style-none"><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="https://www.ag-grid.com/charts" aria-label="AG Grid AG Charts"><span>AG Charts</span></a></li><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="/example/" aria-label="AG Grid Demos"><span>Demos</span></a></li><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="/theme-builder/" aria-label="AG Grid Theme Builder"><span>Theme Builder</span></a></li><li class="_navItem_1agp5_225 _navItemActive_1agp5_243"><a class="_navLink_1agp5_243" href="/react-data-grid/getting-started/" aria-label="AG Grid Docs"><span>Docs</span></a></li><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="/react-data-grid/reference/" aria-label="AG Grid API"><span>API</span></a></li><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="/community/" aria-label="AG Grid Community"><span>Community</span></a></li><li class="_navItem_1agp5_225"><a class="_navLink_1agp5_243" href="/license-pricing/" aria-label="AG Grid Pricing"><span>Pricing</span></a></li><li class="_navItem_1agp5_225 _buttonItem_1agp5_320 _githubItem_1agp5_316"><a class="_navLink_1agp5_243" href="https://github.com/ag-grid/ag-grid" aria-label="AG Grid GitHub"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" 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"></path></svg><span>GitHub</span></a></li><li class="_navItem_1agp5_225 _buttonItem_1agp5_320"><button class="_navLink_1agp5_243 button-style-none" aria-label="Dark mode selector"><div class="_icon_1agp5_88 _pseudoIcon_1agp5_324"></div><span>Dark Mode</span></button></li></ul></nav></div></div></astro-island> </div> </header> <div class="_contentViewport_cb2ib_1 layout-grid"><astro-island uid="2179QF" prefix="r0" component-url="/_astro/DocsNav.CStiDwTf.js" component-export="DocsNav" renderer-url="/_astro/client.5kNSwotS.js" props="{"menuData":[0,{"sections":[1,[[0,{"title":[0,"Getting Started"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Quick Start"],"path":[0,"getting-started"]}],[0,{"type":[0,"item"],"title":[0,"Key Features"],"path":[0,"key-features"]}],[0,{"type":[0,"item"],"title":[0,"Community vs. Enterprise"],"path":[0,"community-vs-enterprise"]}],[0,{"title":[0,"Setup"],"type":[0,"group"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Installation"],"path":[0,"installation"]}],[0,{"title":[0,"Registering Modules"],"path":[0,"modules"]}],[0,{"title":[0,"Installing Enterprise Licence"],"path":[0,"license-install"]}]]]}],[0,{"title":[0,"Tutorials"],"type":[0,"group"],"children":[1,[[0,{"title":[0,"Creating a Basic Grid"],"path":[0,"deep-dive"]}],[0,{"title":[0,"Best Practices"],"path":[0,"react-hooks"],"frameworks":[1,[[0,"react"]]]}],[0,{"title":[0,"Testing"],"type":[0,"group"],"frameworks":[1,[[0,"angular"],[0,"react"]]],"children":[1,[[0,{"title":[0,"Overview"],"path":[0,"testing"],"frameworks":[1,[[0,"angular"],[0,"react"]]]}],[0,{"type":[0,"item"],"title":[0,"Testing Async"],"path":[0,"testing-async"],"frameworks":[1,[[0,"angular"]]]}],[0,{"title":[0,"Playwright"],"url":[0,"https://blog.ag-grid.com/writing-e2e-tests-for-ag-grid-react-tables-with-playwright/"],"frameworks":[1,[[0,"react"]]]}],[0,{"title":[0,"Cypress"],"url":[0,"https://blog.ag-grid.com/end-to-end-testing-for-ag-grid-in-react-with-cypress/"],"frameworks":[1,[[0,"react"]]]}],[0,{"title":[0,"React Testing Library"],"url":[0,"https://blog.ag-grid.com/unit-testing-ag-grid-react-tables-with-react-testing-library-and-vitest/"],"frameworks":[1,[[0,"react"]]]}]]]}],[0,{"title":[0,"Testing"],"type":[0,"item"],"path":[0,"testing"],"frameworks":[1,[[0,"javascript"],[0,"vue"]]]}],[0,{"type":[0,"item"],"title":[0,"Video Tutorials"],"url":[0,"https://www.youtube.com/watch?v=6hxbPqziELk&list=PLsZlhayVgqNwHNHeqpCkSgdRV08xrKtzW&pp=gAQB"],"frameworks":[1,[[0,"react"]]]}],[0,{"type":[0,"item"],"title":[0,"Video Tutorials"],"url":[0,"https://www.youtube.com/watch?v=X_Ip_jGDtho&list=PLsZlhayVgqNw6VHFn4j6FcJM5vLACsf0x&pp=gAQB"],"frameworks":[1,[[0,"angular"]]]}],[0,{"type":[0,"item"],"title":[0,"Video Tutorials"],"url":[0,"https://www.youtube.com/watch?v=V14w_NFuZB4&list=PLsZlhayVgqNz5iC0wFQDgixcAepFyrWbP&pp=gAQB"],"frameworks":[1,[[0,"vue"]]]}],[0,{"type":[0,"item"],"title":[0,"Video Tutorials"],"url":[0,"https://www.youtube.com/watch?v=Ww7-LC6rU6U&list=PLsZlhayVgqNxijfRQxg5Mc6W4MzZHQ9MK&pp=gAQB"],"frameworks":[1,[[0,"javascript"]]]}]]]}],[0,{"title":[0,"Compatibility & Security"],"type":[0,"group"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Compatibility"],"path":[0,"compatibility"]}],[0,{"type":[0,"item"],"title":[0,"Security"],"path":[0,"security"]}],[0,{"type":[0,"item"],"title":[0,"Supported Browsers"],"path":[0,"supported-browsers"]}]]]}]]]}],[0,{"title":[0,"Layout & Styling"],"children":[1,[[0,{"type":[0,"group"],"title":[0,"Theming"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Overview"],"path":[0,"theming"]}],[0,{"type":[0,"item"],"title":[0,"Built-in Themes"],"path":[0,"themes"]}],[0,{"type":[0,"item"],"title":[0,"Theme Parameters"],"path":[0,"theming-parameters"]}],[0,{"type":[0,"item"],"title":[0,"Theme Parts"],"path":[0,"theming-parts"]}],[0,{"type":[0,"item"],"title":[0,"Colors & Dark Mode"],"path":[0,"theming-colors"]}],[0,{"type":[0,"item"],"title":[0,"Fonts"],"path":[0,"theming-fonts"]}],[0,{"type":[0,"item"],"title":[0,"Borders"],"path":[0,"theming-borders"]}],[0,{"type":[0,"item"],"title":[0,"Compactness & Row Height"],"path":[0,"theming-compactness"]}],[0,{"type":[0,"item"],"title":[0,"Selections"],"path":[0,"theming-selections"]}],[0,{"type":[0,"item"],"title":[0,"Headers"],"path":[0,"theming-headers"]}],[0,{"type":[0,"item"],"title":[0,"Icons"],"path":[0,"custom-icons"]}],[0,{"type":[0,"item"],"title":[0,"Tool Panels"],"path":[0,"theming-tool-panels"]}],[0,{"type":[0,"item"],"title":[0,"Inputs & Widgets"],"path":[0,"theming-widgets"]}],[0,{"type":[0,"item"],"title":[0,"Menus & Popups"],"path":[0,"theming-popups"]}],[0,{"type":[0,"item"],"title":[0,"Extending with CSS"],"path":[0,"theming-css"]}],[0,{"type":[0,"item"],"title":[0,"Distributing Shared Themes"],"path":[0,"theming-distribution"]}],[0,{"type":[0,"item"],"title":[0,"Migration from v32"],"path":[0,"theming-migration"]}],[0,{"type":[0,"item"],"title":[0,"Legacy Themes"],"path":[0,"theming-v32"],"childPaths":[1,[[0,"theming-v32-custom-icons"],[0,"theming-v32-customisation"],[0,"theming-v32-customisation-borders"],[0,"theming-v32-customisation-colours"],[0,"theming-v32-customisation-compactness"],[0,"theming-v32-customisation-css"],[0,"theming-v32-customisation-headers"],[0,"theming-v32-customisation-popups"],[0,"theming-v32-customisation-sass"],[0,"theming-v32-customisation-sass-legacy"],[0,"theming-v32-customisation-selections"],[0,"theming-v32-customisation-tool-panels"],[0,"theming-v32-customisation-variables"],[0,"theming-v32-customisation-widgets"],[0,"theming-v32-themes"],[0,"theming-v32-upgrading-to-v28"],[0,"theming-v32-upgrading-to-v28-css"],[0,"theming-v32-upgrading-to-v28-sass"]]]}]]]}],[0,{"type":[0,"item"],"title":[0,"Design System"],"path":[0,"ag-grid-design-system"]}],[0,{"type":[0,"item"],"title":[0,"Grid Layout"],"path":[0,"grid-size"]}]]]}],[0,{"title":[0,"Charting"],"children":[1,[[0,{"type":[0,"group"],"title":[0,"Sparklines"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Install Sparklines"],"path":[0,"sparklines-installation"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Overview"],"path":[0,"sparklines-overview"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Area"],"path":[0,"sparklines-area-customisation"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Bar"],"path":[0,"sparklines-bar-customisation"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Column"],"path":[0,"sparklines-column-customisation"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Line"],"path":[0,"sparklines-line-customisation"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"item"],"title":[0,"Sparkline Data"],"path":[0,"sparklines-data"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Axis Types"],"path":[0,"sparklines-axis-types"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Tooltips"],"path":[0,"sparklines-tooltips"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Points of Interest"],"path":[0,"sparklines-points-of-interest"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Sparklines API"],"path":[0,"sparklines-api-sparkline-options"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Area"],"path":[0,"sparklines-api-sparkline-area"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Bar / Column"],"path":[0,"sparklines-api-sparkline-bar"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Line"],"path":[0,"sparklines-api-sparkline-line"],"isEnterprise":[0,true]}]]]}]]]}],[0,{"type":[0,"group"],"title":[0,"Integrated Charts"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Overview"],"path":[0,"integrated-charts"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Install Integrated Charts"],"path":[0,"integrated-charts-installation"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"User Created Charts"],"path":[0,"integrated-charts-user-created"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Range Chart"],"path":[0,"integrated-charts-range-chart"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Pivot Chart"],"path":[0,"integrated-charts-pivot-chart"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"item"],"title":[0,"Application Created Charts"],"path":[0,"integrated-charts-application-created"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Range Chart API"],"path":[0,"integrated-charts-api-range-chart"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Pivot Chart API"],"path":[0,"integrated-charts-api-pivot-chart"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Cross Filter API"],"path":[0,"integrated-charts-api-cross-filter-chart"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"item"],"title":[0,"Chart Types"],"path":[0,"integrated-charts-chart-types"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Chart Menu"],"path":[0,"integrated-charts-menu"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Chart Tool Panels"],"path":[0,"integrated-charts-chart-tool-panels"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Chart Container"],"path":[0,"integrated-charts-container"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Customisation"],"path":[0,"integrated-charts-customisation"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Chart Events"],"path":[0,"integrated-charts-events"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Time Series"],"path":[0,"integrated-charts-time-series"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Save / Restore Charts"],"path":[0,"integrated-charts-api-save-restore-charts"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Chart Image Export"],"path":[0,"integrated-charts-api-downloading-image"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"group"],"title":[0,"Standalone Charts"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"See AG Charts"],"url":[0,"https://www.ag-grid.com/charts"]}]]]}]]]}],[0,{"title":[0,"Core Features"],"children":[1,[[0,{"type":[0,"group"],"title":[0,"Columns"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Configuration"],"path":[0,"configuration"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Column Definitions"],"path":[0,"column-definitions"]}],[0,{"type":[0,"item"],"title":[0,"Updating Definitions"],"path":[0,"column-updating-definitions"]}],[0,{"type":[0,"item"],"title":[0,"Column State"],"path":[0,"column-state"]}]]]}],[0,{"type":[0,"item"],"title":[0,"Column Headers"],"path":[0,"column-headers"]}],[0,{"type":[0,"item"],"title":[0,"Column Groups"],"path":[0,"column-groups"]}],[0,{"type":[0,"item"],"title":[0,"Column Sizing"],"path":[0,"column-sizing"]}],[0,{"type":[0,"item"],"title":[0,"Column Moving"],"path":[0,"column-moving"]}],[0,{"type":[0,"item"],"title":[0,"Column Pinning"],"path":[0,"column-pinning"]}],[0,{"type":[0,"item"],"title":[0,"Column Spanning"],"path":[0,"column-spanning"]}]]]}],[0,{"type":[0,"group"],"title":[0,"Rows"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Row Data"],"path":[0,"row-ids"]}],[0,{"type":[0,"item"],"title":[0,"Row Sorting"],"path":[0,"row-sorting"]}],[0,{"type":[0,"item"],"title":[0,"Row Numbers"],"path":[0,"row-numbers"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Row Spanning"],"path":[0,"row-spanning"]}],[0,{"type":[0,"item"],"title":[0,"Row Pinning"],"path":[0,"row-pinning"]}],[0,{"type":[0,"item"],"title":[0,"Row Height"],"path":[0,"row-height"]}],[0,{"type":[0,"item"],"title":[0,"Styling Rows"],"path":[0,"row-styles"]}],[0,{"type":[0,"item"],"title":[0,"Row Pagination"],"path":[0,"row-pagination"]}],[0,{"type":[0,"item"],"title":[0,"Accessing Rows"],"path":[0,"accessing-data"]}],[0,{"type":[0,"item"],"title":[0,"Row Dragging"],"path":[0,"row-dragging"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"External DropZone"],"path":[0,"row-dragging-to-external-dropzone"]}],[0,{"type":[0,"item"],"title":[0,"Grid to Grid"],"path":[0,"row-dragging-to-grid"]}]]]}],[0,{"type":[0,"item"],"title":[0,"Full Width Rows"],"path":[0,"full-width-rows"]}]]]}],[0,{"type":[0,"group"],"title":[0,"Cells"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Cell Content"],"path":[0,"cell-content"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Getting Values"],"path":[0,"value-getters"]}],[0,{"type":[0,"item"],"title":[0,"Text Formatting"],"path":[0,"value-formatters"]}],[0,{"type":[0,"item"],"title":[0,"Cell Components"],"path":[0,"component-cell-renderer"]}],[0,{"type":[0,"item"],"title":[0,"Cell Data Types"],"path":[0,"cell-data-types"]}]]]}],[0,{"type":[0,"item"],"title":[0,"Styling Cells"],"path":[0,"cell-styles"]}],[0,{"type":[0,"item"],"title":[0,"Highlighting Changes"],"path":[0,"change-cell-renderers"]}],[0,{"type":[0,"item"],"title":[0,"Tooltips"],"path":[0,"tooltips"]}],[0,{"type":[0,"item"],"title":[0,"Expressions"],"path":[0,"cell-expressions"]}],[0,{"type":[0,"item"],"title":[0,"View Refresh"],"path":[0,"view-refresh"]}],[0,{"type":[0,"item"],"title":[0,"Reference Data"],"path":[0,"reference-data"]}],[0,{"type":[0,"item"],"title":[0,"Cell Text Selection"],"path":[0,"cell-text-selection"]}]]]}],[0,{"type":[0,"group"],"title":[0,"Filtering"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Overview"],"path":[0,"filtering-overview"]}],[0,{"type":[0,"item"],"title":[0,"Column Filters"],"path":[0,"filtering"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Text Filter"],"path":[0,"filter-text"]}],[0,{"type":[0,"item"],"title":[0,"Number Filter"],"path":[0,"filter-number"]}],[0,{"type":[0,"item"],"title":[0,"Date Filter"],"path":[0,"filter-date"]}],[0,{"type":[0,"item"],"title":[0,"Set Filter"],"path":[0,"filter-set"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Filter List"],"path":[0,"filter-set-filter-list"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Data Updates"],"path":[0,"filter-set-data-updates"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Tree List"],"path":[0,"filter-set-tree-list"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Mini Filter"],"path":[0,"filter-set-mini-filter"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Excel Mode"],"path":[0,"filter-set-excel-mode"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"API"],"path":[0,"filter-set-api"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"item"],"title":[0,"Multi Filter"],"path":[0,"filter-multi"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Filter Conditions"],"path":[0,"filter-conditions"]}],[0,{"type":[0,"item"],"title":[0,"Applying Filters"],"path":[0,"filter-applying"]}],[0,{"type":[0,"item"],"title":[0,"Filter API"],"path":[0,"filter-api"]}]]]}],[0,{"type":[0,"item"],"title":[0,"Custom Column Filters"],"path":[0,"component-filter"]}],[0,{"type":[0,"item"],"title":[0,"Floating Filters"],"path":[0,"floating-filters"]}],[0,{"type":[0,"item"],"title":[0,"Custom Floating Filters"],"path":[0,"component-floating-filter"]}],[0,{"type":[0,"item"],"title":[0,"Advanced Filter"],"path":[0,"filter-advanced"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"External Filter"],"path":[0,"filter-external"]}],[0,{"type":[0,"item"],"title":[0,"Quick Filter"],"path":[0,"filter-quick"]}]]]}],[0,{"type":[0,"group"],"title":[0,"Selection"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Row Selection"],"path":[0,"row-selection"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Single Row Selection"],"path":[0,"row-selection-single-row"]}],[0,{"type":[0,"item"],"title":[0,"Multi-Row Selection"],"path":[0,"row-selection-multi-row"]}],[0,{"type":[0,"item"],"title":[0,"API Reference"],"path":[0,"row-selection-api-reference"]}]]]}],[0,{"type":[0,"item"],"title":[0,"Cell Selection"],"path":[0,"cell-selection"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Range Handle"],"path":[0,"cell-selection-handle"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Fill Handle"],"path":[0,"cell-selection-fill-handle"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"API Reference"],"path":[0,"cell-selection-api-reference"],"isEnterprise":[0,true]}]]]}]]]}],[0,{"type":[0,"group"],"title":[0,"Editing"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Overview"],"path":[0,"cell-editing"]}],[0,{"type":[0,"item"],"title":[0,"Start / Stop Editing"],"path":[0,"cell-editing-start-stop"]}],[0,{"type":[0,"item"],"title":[0,"Parsing Values"],"path":[0,"value-parsers"]}],[0,{"type":[0,"item"],"title":[0,"Saving Values"],"path":[0,"value-setters"]}],[0,{"type":[0,"item"],"title":[0,"Edit Components"],"path":[0,"cell-editors"]}],[0,{"type":[0,"item"],"title":[0,"Provided Cell Editors"],"path":[0,"provided-cell-editors"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Text Editor"],"path":[0,"provided-cell-editors-text"]}],[0,{"type":[0,"item"],"title":[0,"Large Text Editor"],"path":[0,"provided-cell-editors-large-text"]}],[0,{"type":[0,"item"],"title":[0,"Select Editor"],"path":[0,"provided-cell-editors-select"]}],[0,{"type":[0,"item"],"title":[0,"Rich Select Editor"],"path":[0,"provided-cell-editors-rich-select"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Number Editor"],"path":[0,"provided-cell-editors-number"]}],[0,{"type":[0,"item"],"title":[0,"Date Editors"],"path":[0,"provided-cell-editors-date"]}],[0,{"type":[0,"item"],"title":[0,"Checkbox Editor"],"path":[0,"provided-cell-editors-checkbox"]}]]]}],[0,{"type":[0,"item"],"title":[0,"Undo / Redo Edits"],"path":[0,"undo-redo-edits"]}],[0,{"type":[0,"item"],"title":[0,"Full Row"],"path":[0,"cell-editing-full-row"]}]]]}],[0,{"type":[0,"group"],"title":[0,"Updating Data"],"path":[0,"data-update"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Row Data"],"path":[0,"data-update-row-data"]}],[0,{"type":[0,"item"],"title":[0,"Single Row / Cell"],"path":[0,"data-update-single-row-cell"]}],[0,{"type":[0,"item"],"title":[0,"Transactions"],"path":[0,"data-update-transactions"]}],[0,{"type":[0,"item"],"title":[0,"High Frequency"],"path":[0,"data-update-high-frequency"]}]]]}],[0,{"type":[0,"group"],"title":[0,"Interactivity"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Keyboard Navigation"],"path":[0,"keyboard-navigation"]}],[0,{"type":[0,"item"],"title":[0,"Touch"],"path":[0,"touch"]}],[0,{"type":[0,"item"],"title":[0,"Accessibility (ARIA)"],"path":[0,"accessibility"]}],[0,{"type":[0,"item"],"title":[0,"RTL Text Direction"],"path":[0,"rtl"]}],[0,{"type":[0,"item"],"title":[0,"Localisation"],"path":[0,"localisation"]}]]]}]]]}],[0,{"title":[0,"Advanced Features"],"children":[1,[[0,{"type":[0,"group"],"title":[0,"Row Grouping"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Overview"],"path":[0,"grouping"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Grouping Data"],"path":[0,"grouping-data"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Group Display Types"],"path":[0,"grouping-display-types"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Single Column"],"path":[0,"grouping-single-group-column"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Multiple Columns"],"path":[0,"grouping-multiple-group-columns"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Group Rows"],"path":[0,"grouping-group-rows"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"item"],"title":[0,"Row Group Panel"],"path":[0,"grouping-group-panel"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Expanding Groups"],"path":[0,"grouping-opening-groups"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Hierarchy Selection"],"path":[0,"grouping-row-selection"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Sorting"],"path":[0,"grouping-sorting"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"group"],"title":[0,"Aggregation"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Overview"],"path":[0,"aggregation"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Configure Columns"],"path":[0,"aggregation-columns"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Custom Functions"],"path":[0,"aggregation-custom-functions"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Total Rows"],"path":[0,"aggregation-total-rows"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Filtering "],"path":[0,"aggregation-filtering"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"group"],"title":[0,"Pivoting"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Overview"],"path":[0,"pivoting"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Pivot Result Columns"],"path":[0,"pivoting-result-columns"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Pivot Column Groups"],"path":[0,"pivoting-column-groups"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Pivot Totals"],"path":[0,"pivoting-totals"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"group"],"title":[0,"Tree Data"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Overview"],"path":[0,"tree-data"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Supplying Data"],"path":[0,"tree-data-data"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Data Paths"],"path":[0,"tree-data-paths"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Nested Records"],"path":[0,"tree-data-nesting"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"item"],"title":[0,"Group Column"],"path":[0,"tree-data-group-column"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Expanding Groups"],"path":[0,"tree-data-opening-groups"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Tree Selection"],"path":[0,"tree-data-selection"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Filtering"],"path":[0,"tree-data-filtering"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"group"],"title":[0,"Master Detail"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Overview"],"path":[0,"master-detail"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Detail Grids"],"path":[0,"master-detail-grids"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Detail Height"],"path":[0,"master-detail-height"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Detail Refresh"],"path":[0,"master-detail-refresh"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Master Rows"],"path":[0,"master-detail-master-rows"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Nesting"],"path":[0,"master-detail-nesting"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Custom Detail"],"path":[0,"master-detail-custom-detail"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Other"],"path":[0,"master-detail-other"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"group"],"title":[0,"Accessories"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Tool Panels"],"path":[0,"tool-panel"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Side Bar"],"path":[0,"side-bar"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Columns Tool Panel"],"path":[0,"tool-panel-columns"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Filters Tool Panel"],"path":[0,"tool-panel-filters"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Custom Panel"],"path":[0,"component-tool-panel"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"item"],"title":[0,"Column Menu"],"path":[0,"column-menu"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Context Menu"],"path":[0,"context-menu"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Menu Item Component"],"path":[0,"component-menu-item"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Status Bar"],"path":[0,"status-bar"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Overlays"],"path":[0,"overlays"]}]]]}],[0,{"type":[0,"group"],"title":[0,"Server-Side Data"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Row Models"],"path":[0,"row-models"]}],[0,{"type":[0,"item"],"title":[0,"Server-Side Row Model"],"path":[0,"server-side-model"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"API Reference"],"path":[0,"server-side-model-api-reference"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Datasource"],"path":[0,"server-side-model-datasource"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Configuration"],"path":[0,"server-side-model-configuration"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Sorting"],"path":[0,"server-side-model-sorting"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Filtering"],"path":[0,"server-side-model-filtering"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Row Grouping"],"path":[0,"server-side-model-grouping"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Pivoting"],"path":[0,"server-side-model-pivoting"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Pagination"],"path":[0,"server-side-model-pagination"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Row Selection"],"path":[0,"server-side-model-selection"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Loading Component"],"path":[0,"component-loading-cell-renderer"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Changing Columns"],"path":[0,"server-side-model-changing-columns"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Updating Data"],"path":[0,"server-side-model-updating"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Refresh"],"path":[0,"server-side-model-updating-refresh"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Single Row Updates"],"path":[0,"server-side-model-updating-single-row"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Transactions"],"path":[0,"server-side-model-updating-transactions"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"item"],"title":[0,"Load Retry"],"path":[0,"server-side-model-retry"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Row Height"],"path":[0,"server-side-model-row-height"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Master Detail"],"path":[0,"server-side-model-master-detail"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Tree Data"],"path":[0,"server-side-model-tree-data"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Example Node.js & MySQL"],"path":[0,"server-side-operations-nodejs"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Example GraphQL & MySQL"],"path":[0,"server-side-operations-graphql"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Example Java & Oracle"],"path":[0,"server-side-operations-oracle"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Example Java & Apache"],"path":[0,"server-side-operations-spark"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"item"],"title":[0,"Infinite Row Model"],"path":[0,"infinite-scrolling"]}],[0,{"type":[0,"item"],"title":[0,"Viewport Row Model"],"path":[0,"viewport"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"group"],"title":[0,"Import & Export"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"CSV Export"],"path":[0,"csv-export"]}],[0,{"type":[0,"item"],"title":[0,"Excel Export"],"path":[0,"excel-export"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"API Reference"],"path":[0,"excel-export-api"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Styles"],"path":[0,"excel-export-styles"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Formulas"],"path":[0,"excel-export-formulas"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Extra Content"],"path":[0,"excel-export-extra-content"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Customising Content"],"path":[0,"excel-export-customising-content"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Images"],"path":[0,"excel-export-images"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Excel Tables"],"path":[0,"excel-export-tables"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Multiple Sheets"],"path":[0,"excel-export-multiple-sheets"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Rows"],"path":[0,"excel-export-rows"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Columns"],"path":[0,"excel-export-columns"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Freezing Content"],"path":[0,"excel-export-freeze"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Data Types"],"path":[0,"excel-export-data-types"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Hyperlinks"],"path":[0,"excel-export-hyperlinks"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Master Detail"],"path":[0,"excel-export-master-detail"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Page Setup"],"path":[0,"excel-export-page-setup"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"item"],"title":[0,"Clipboard"],"path":[0,"clipboard"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Drag & Drop"],"path":[0,"drag-and-drop"]}],[0,{"type":[0,"item"],"title":[0,"Printing"],"path":[0,"printing"]}],[0,{"type":[0,"item"],"title":[0,"Import Excel"],"path":[0,"excel-import"]}]]]}],[0,{"type":[0,"group"],"title":[0,"Performance"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"DOM Virtualisation"],"path":[0,"dom-virtualisation"]}],[0,{"type":[0,"item"],"title":[0,"Value Cache"],"path":[0,"value-cache"]}],[0,{"type":[0,"item"],"title":[0,"Row Animation"],"path":[0,"row-animation"]}],[0,{"type":[0,"item"],"title":[0,"Massive Row Count"],"path":[0,"massive-row-count"]}],[0,{"type":[0,"item"],"title":[0,"Scrolling Performance"],"path":[0,"scrolling-performance"]}],[0,{"type":[0,"item"],"title":[0,"NgZone"],"path":[0,"angular-ngzone"],"frameworks":[1,[[0,"angular"]]]}]]]}]]]}],[0,{"type":[0,"item"],"title":[0,"Miscellaneous"],"children":[1,[[0,{"type":[0,"group"],"title":[0,"Migration"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Upgrading to AG Grid 33.1"],"path":[0,"upgrading-to-ag-grid-33-1"]}],[0,{"type":[0,"item"],"title":[0,"Upgrading to AG Grid 33"],"path":[0,"upgrading-to-ag-grid-33"]}],[0,{"type":[0,"item"],"title":[0,"Upgrading to AG Grid 32.3"],"path":[0,"upgrading-to-ag-grid-32-3"]}],[0,{"type":[0,"item"],"title":[0,"Upgrading to AG Grid 32.2.1"],"path":[0,"upgrading-to-ag-grid-32-2-1"]}],[0,{"type":[0,"item"],"title":[0,"Upgrading to AG Grid 32.1"],"path":[0,"upgrading-to-ag-grid-32-1"]}],[0,{"type":[0,"item"],"title":[0,"Upgrading to AG Grid 32"],"path":[0,"upgrading-to-ag-grid-32"]}],[0,{"type":[0,"item"],"title":[0,"Upgrading to AG Grid 31.3"],"path":[0,"upgrading-to-ag-grid-31-3"]}],[0,{"type":[0,"item"],"title":[0,"Upgrading to AG Grid 31.2"],"path":[0,"upgrading-to-ag-grid-31-2"]}],[0,{"type":[0,"item"],"title":[0,"Upgrading to AG Grid 31.1"],"path":[0,"upgrading-to-ag-grid-31-1"]}],[0,{"type":[0,"item"],"title":[0,"Upgrading to AG Grid 31"],"path":[0,"upgrading-to-ag-grid-31"]}],[0,{"type":[0,"item"],"title":[0,"Upgrading to Older Versions"],"path":[0,"upgrading-to-older-versions"]}],[0,{"type":[0,"item"],"title":[0,"Codemods"],"path":[0,"codemods"]}]]]}],[0,{"type":[0,"group"],"title":[0,"Other"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Context"],"path":[0,"context"]}],[0,{"type":[0,"item"],"title":[0,"Change Detection"],"path":[0,"change-detection"]}],[0,{"type":[0,"item"],"title":[0,"Custom Components"],"path":[0,"components"]}],[0,{"type":[0,"item"],"title":[0,"Aligned Grids"],"path":[0,"aligned-grids"]}]]]}]]]}]]]}],"framework":[0,"react"],"pageName":[0,"server-side-operations-spark"],"showWhatsNew":[0,true]}" ssr="" client="load" opts="{"name":"DocsNav","value":true}" await-children=""><div id="docs-mobile-nav-collapser" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div id="docs-nav-scroll" class="_docsNavOuter_1ilfl_17"><div class="_docsNavInner_1ilfl_50"><div class="_whatsNewLink_1ilfl_65"><a href="/whats-new">What's New</a></div><div class="_section_1ilfl_92"><h5 class="_sectionTitle_1ilfl_97">Getting Started</h5><a href="/react-data-grid/getting-started/" class="_item_1ilfl_99"><span>Quick Start</span></a><a href="/react-data-grid/key-features/" class="_item_1ilfl_99"><span>Key Features</span></a><a href="/react-data-grid/community-vs-enterprise/" class="_item_1ilfl_99"><span>Community vs. Enterprise</span></a><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Setup</span></button><div id="Setup" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/installation/" class="_item_1ilfl_99"><span>Installation</span></a><a href="/react-data-grid/modules/" class="_item_1ilfl_99"><span>Registering Modules</span></a><a href="/react-data-grid/license-install/" class="_item_1ilfl_99"><span>Installing Enterprise Licence</span></a></div></div></div></div><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Tutorials</span></button><div id="Tutorials" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/deep-dive/" class="_item_1ilfl_99"><span>Creating a Basic Grid</span></a><a href="/react-data-grid/react-hooks/" class="_item_1ilfl_99"><span>Best Practices</span></a><a class="_item_1ilfl_99"><span>Testing</span></a><div class="_nestedItems_1ilfl_161"><a href="/react-data-grid/testing/" class="_item_1ilfl_99"><span>Overview</span></a><a href="https://blog.ag-grid.com/writing-e2e-tests-for-ag-grid-react-tables-with-playwright/" class="_item_1ilfl_99" target="_blank"><span>Playwright<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 20 20" size="32" class="_icon_1jqgc_1 icon _externalIcon_1ilfl_197"><path d="M14.167 9.833v5a.833.833 0 0 1-.244.589l-.001.001a.833.833 0 0 1-.589.244H4.167a.837.837 0 0 1-.59-.244v-.001a.833.833 0 0 1-.244-.589V5.667c0-.221.088-.433.244-.59a.837.837 0 0 1 .59-.244h5a.833.833 0 0 0 0-1.666h-5a2.5 2.5 0 0 0-2.5 2.5v9.166a2.5 2.5 0 0 0 2.5 2.5h9.166a2.5 2.5 0 0 0 2.5-2.5v-5a.833.833 0 0 0-1.666 0ZM17.5.667h-5a.833.833 0 0 0 0 1.666h2.988l-7.744 7.744a.835.835 0 0 0 1.179 1.179l7.744-7.744V6.5a.833.833 0 0 0 1.666 0V1.499a.833.833 0 0 0-.023-.195l-.003-.012-.008-.029-.003-.011-.013-.038-.006-.016-.005-.012-.004-.01-.005-.012-.007-.015-.005-.01-.004-.008-.009-.019-.02-.036-.007-.01a.808.808 0 0 0-.277-.277l-.011-.007-.026-.015-.009-.005-.037-.018-.015-.007-.012-.005-.01-.004-.012-.005-.016-.006-.01-.003-.009-.003-.019-.007-.04-.011-.04-.009-.041-.008-.042-.005-.042-.003L17.5.667Z"></path></svg></span></a><a href="https://blog.ag-grid.com/end-to-end-testing-for-ag-grid-in-react-with-cypress/" class="_item_1ilfl_99" target="_blank"><span>Cypress<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 20 20" size="32" class="_icon_1jqgc_1 icon _externalIcon_1ilfl_197"><path d="M14.167 9.833v5a.833.833 0 0 1-.244.589l-.001.001a.833.833 0 0 1-.589.244H4.167a.837.837 0 0 1-.59-.244v-.001a.833.833 0 0 1-.244-.589V5.667c0-.221.088-.433.244-.59a.837.837 0 0 1 .59-.244h5a.833.833 0 0 0 0-1.666h-5a2.5 2.5 0 0 0-2.5 2.5v9.166a2.5 2.5 0 0 0 2.5 2.5h9.166a2.5 2.5 0 0 0 2.5-2.5v-5a.833.833 0 0 0-1.666 0ZM17.5.667h-5a.833.833 0 0 0 0 1.666h2.988l-7.744 7.744a.835.835 0 0 0 1.179 1.179l7.744-7.744V6.5a.833.833 0 0 0 1.666 0V1.499a.833.833 0 0 0-.023-.195l-.003-.012-.008-.029-.003-.011-.013-.038-.006-.016-.005-.012-.004-.01-.005-.012-.007-.015-.005-.01-.004-.008-.009-.019-.02-.036-.007-.01a.808.808 0 0 0-.277-.277l-.011-.007-.026-.015-.009-.005-.037-.018-.015-.007-.012-.005-.01-.004-.012-.005-.016-.006-.01-.003-.009-.003-.019-.007-.04-.011-.04-.009-.041-.008-.042-.005-.042-.003L17.5.667Z"></path></svg></span></a><a href="https://blog.ag-grid.com/unit-testing-ag-grid-react-tables-with-react-testing-library-and-vitest/" class="_item_1ilfl_99" target="_blank"><span>React Testing Library<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 20 20" size="32" class="_icon_1jqgc_1 icon _externalIcon_1ilfl_197"><path d="M14.167 9.833v5a.833.833 0 0 1-.244.589l-.001.001a.833.833 0 0 1-.589.244H4.167a.837.837 0 0 1-.59-.244v-.001a.833.833 0 0 1-.244-.589V5.667c0-.221.088-.433.244-.59a.837.837 0 0 1 .59-.244h5a.833.833 0 0 0 0-1.666h-5a2.5 2.5 0 0 0-2.5 2.5v9.166a2.5 2.5 0 0 0 2.5 2.5h9.166a2.5 2.5 0 0 0 2.5-2.5v-5a.833.833 0 0 0-1.666 0ZM17.5.667h-5a.833.833 0 0 0 0 1.666h2.988l-7.744 7.744a.835.835 0 0 0 1.179 1.179l7.744-7.744V6.5a.833.833 0 0 0 1.666 0V1.499a.833.833 0 0 0-.023-.195l-.003-.012-.008-.029-.003-.011-.013-.038-.006-.016-.005-.012-.004-.01-.005-.012-.007-.015-.005-.01-.004-.008-.009-.019-.02-.036-.007-.01a.808.808 0 0 0-.277-.277l-.011-.007-.026-.015-.009-.005-.037-.018-.015-.007-.012-.005-.01-.004-.012-.005-.016-.006-.01-.003-.009-.003-.019-.007-.04-.011-.04-.009-.041-.008-.042-.005-.042-.003L17.5.667Z"></path></svg></span></a></div><a href="https://www.youtube.com/watch?v=6hxbPqziELk&list=PLsZlhayVgqNwHNHeqpCkSgdRV08xrKtzW&pp=gAQB" class="_item_1ilfl_99" target="_blank"><span>Video Tutorials<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 20 20" size="32" class="_icon_1jqgc_1 icon _externalIcon_1ilfl_197"><path d="M14.167 9.833v5a.833.833 0 0 1-.244.589l-.001.001a.833.833 0 0 1-.589.244H4.167a.837.837 0 0 1-.59-.244v-.001a.833.833 0 0 1-.244-.589V5.667c0-.221.088-.433.244-.59a.837.837 0 0 1 .59-.244h5a.833.833 0 0 0 0-1.666h-5a2.5 2.5 0 0 0-2.5 2.5v9.166a2.5 2.5 0 0 0 2.5 2.5h9.166a2.5 2.5 0 0 0 2.5-2.5v-5a.833.833 0 0 0-1.666 0ZM17.5.667h-5a.833.833 0 0 0 0 1.666h2.988l-7.744 7.744a.835.835 0 0 0 1.179 1.179l7.744-7.744V6.5a.833.833 0 0 0 1.666 0V1.499a.833.833 0 0 0-.023-.195l-.003-.012-.008-.029-.003-.011-.013-.038-.006-.016-.005-.012-.004-.01-.005-.012-.007-.015-.005-.01-.004-.008-.009-.019-.02-.036-.007-.01a.808.808 0 0 0-.277-.277l-.011-.007-.026-.015-.009-.005-.037-.018-.015-.007-.012-.005-.01-.004-.012-.005-.016-.006-.01-.003-.009-.003-.019-.007-.04-.011-.04-.009-.041-.008-.042-.005-.042-.003L17.5.667Z"></path></svg></span></a></div></div></div></div><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Compatibility & Security</span></button><div id="Compatibility & Security" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/compatibility/" class="_item_1ilfl_99"><span>Compatibility</span></a><a href="/react-data-grid/security/" class="_item_1ilfl_99"><span>Security</span></a><a href="/react-data-grid/supported-browsers/" class="_item_1ilfl_99"><span>Supported Browsers</span></a></div></div></div></div></div><hr class="_divider_1ilfl_115"/><div class="_section_1ilfl_92"><h5 class="_sectionTitle_1ilfl_97">Layout & Styling</h5><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Theming</span></button><div id="Theming" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/theming/" class="_item_1ilfl_99"><span>Overview</span></a><a href="/react-data-grid/themes/" class="_item_1ilfl_99"><span>Built-in Themes</span></a><a href="/react-data-grid/theming-parameters/" class="_item_1ilfl_99"><span>Theme Parameters</span></a><a href="/react-data-grid/theming-parts/" class="_item_1ilfl_99"><span>Theme Parts</span></a><a href="/react-data-grid/theming-colors/" class="_item_1ilfl_99"><span>Colors & Dark Mode</span></a><a href="/react-data-grid/theming-fonts/" class="_item_1ilfl_99"><span>Fonts</span></a><a href="/react-data-grid/theming-borders/" class="_item_1ilfl_99"><span>Borders</span></a><a href="/react-data-grid/theming-compactness/" class="_item_1ilfl_99"><span>Compactness & Row Height</span></a><a href="/react-data-grid/theming-selections/" class="_item_1ilfl_99"><span>Selections</span></a><a href="/react-data-grid/theming-headers/" class="_item_1ilfl_99"><span>Headers</span></a><a href="/react-data-grid/custom-icons/" class="_item_1ilfl_99"><span>Icons</span></a><a href="/react-data-grid/theming-tool-panels/" class="_item_1ilfl_99"><span>Tool Panels</span></a><a href="/react-data-grid/theming-widgets/" class="_item_1ilfl_99"><span>Inputs & Widgets</span></a><a href="/react-data-grid/theming-popups/" class="_item_1ilfl_99"><span>Menus & Popups</span></a><a href="/react-data-grid/theming-css/" class="_item_1ilfl_99"><span>Extending with CSS</span></a><a href="/react-data-grid/theming-distribution/" class="_item_1ilfl_99"><span>Distributing Shared Themes</span></a><a href="/react-data-grid/theming-migration/" class="_item_1ilfl_99"><span>Migration from v32</span></a><a href="/react-data-grid/theming-v32/" class="_item_1ilfl_99"><span>Legacy Themes</span></a></div></div></div></div><a href="/react-data-grid/ag-grid-design-system/" class="_item_1ilfl_99"><span>Design System</span></a><a href="/react-data-grid/grid-size/" class="_item_1ilfl_99"><span>Grid Layout</span></a></div><hr class="_divider_1ilfl_115"/><div class="_section_1ilfl_92"><h5 class="_sectionTitle_1ilfl_97">Charting</h5><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Sparklines</span></button><div id="Sparklines" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/sparklines-installation/" class="_item_1ilfl_99"><span>Install Sparklines<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/sparklines-overview/" class="_item_1ilfl_99"><span>Overview<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><div class="_nestedItems_1ilfl_161"><a href="/react-data-grid/sparklines-area-customisation/" class="_item_1ilfl_99"><span>Area<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/sparklines-bar-customisation/" class="_item_1ilfl_99"><span>Bar<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/sparklines-column-customisation/" class="_item_1ilfl_99"><span>Column<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/sparklines-line-customisation/" class="_item_1ilfl_99"><span>Line<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a></div><a href="/react-data-grid/sparklines-data/" class="_item_1ilfl_99"><span>Sparkline Data<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/sparklines-axis-types/" class="_item_1ilfl_99"><span>Axis Types<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/sparklines-tooltips/" class="_item_1ilfl_99"><span>Tooltips<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/sparklines-points-of-interest/" class="_item_1ilfl_99"><span>Points of Interest<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/sparklines-api-sparkline-options/" class="_item_1ilfl_99"><span>Sparklines API<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><div class="_nestedItems_1ilfl_161"><a href="/react-data-grid/sparklines-api-sparkline-area/" class="_item_1ilfl_99"><span>Area<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/sparklines-api-sparkline-bar/" class="_item_1ilfl_99"><span>Bar / Column<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/sparklines-api-sparkline-line/" class="_item_1ilfl_99"><span>Line<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a></div></div></div></div></div><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Integrated Charts</span></button><div id="Integrated Charts" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/integrated-charts/" class="_item_1ilfl_99"><span>Overview<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/integrated-charts-installation/" class="_item_1ilfl_99"><span>Install Integrated Charts<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/integrated-charts-user-created/" class="_item_1ilfl_99"><span>User Created Charts<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><div class="_nestedItems_1ilfl_161"><a href="/react-data-grid/integrated-charts-range-chart/" class="_item_1ilfl_99"><span>Range Chart<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/integrated-charts-pivot-chart/" class="_item_1ilfl_99"><span>Pivot Chart<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a></div><a href="/react-data-grid/integrated-charts-application-created/" class="_item_1ilfl_99"><span>Application Created Charts<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><div class="_nestedItems_1ilfl_161"><a href="/react-data-grid/integrated-charts-api-range-chart/" class="_item_1ilfl_99"><span>Range Chart API<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/integrated-charts-api-pivot-chart/" class="_item_1ilfl_99"><span>Pivot Chart API<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/integrated-charts-api-cross-filter-chart/" class="_item_1ilfl_99"><span>Cross Filter API<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a></div><a href="/react-data-grid/integrated-charts-chart-types/" class="_item_1ilfl_99"><span>Chart Types<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/integrated-charts-menu/" class="_item_1ilfl_99"><span>Chart Menu<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/integrated-charts-chart-tool-panels/" class="_item_1ilfl_99"><span>Chart Tool Panels<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/integrated-charts-container/" class="_item_1ilfl_99"><span>Chart Container<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/integrated-charts-customisation/" class="_item_1ilfl_99"><span>Customisation<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/integrated-charts-events/" class="_item_1ilfl_99"><span>Chart Events<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/integrated-charts-time-series/" class="_item_1ilfl_99"><span>Time Series<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/integrated-charts-api-save-restore-charts/" class="_item_1ilfl_99"><span>Save / Restore Charts<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/integrated-charts-api-downloading-image/" class="_item_1ilfl_99"><span>Chart Image Export<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a></div></div></div></div><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Standalone Charts</span></button><div id="Standalone Charts" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="https://www.ag-grid.com/charts" class="_item_1ilfl_99" target="_blank"><span>See AG Charts<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 20 20" size="32" class="_icon_1jqgc_1 icon _externalIcon_1ilfl_197"><path d="M14.167 9.833v5a.833.833 0 0 1-.244.589l-.001.001a.833.833 0 0 1-.589.244H4.167a.837.837 0 0 1-.59-.244v-.001a.833.833 0 0 1-.244-.589V5.667c0-.221.088-.433.244-.59a.837.837 0 0 1 .59-.244h5a.833.833 0 0 0 0-1.666h-5a2.5 2.5 0 0 0-2.5 2.5v9.166a2.5 2.5 0 0 0 2.5 2.5h9.166a2.5 2.5 0 0 0 2.5-2.5v-5a.833.833 0 0 0-1.666 0ZM17.5.667h-5a.833.833 0 0 0 0 1.666h2.988l-7.744 7.744a.835.835 0 0 0 1.179 1.179l7.744-7.744V6.5a.833.833 0 0 0 1.666 0V1.499a.833.833 0 0 0-.023-.195l-.003-.012-.008-.029-.003-.011-.013-.038-.006-.016-.005-.012-.004-.01-.005-.012-.007-.015-.005-.01-.004-.008-.009-.019-.02-.036-.007-.01a.808.808 0 0 0-.277-.277l-.011-.007-.026-.015-.009-.005-.037-.018-.015-.007-.012-.005-.01-.004-.012-.005-.016-.006-.01-.003-.009-.003-.019-.007-.04-.011-.04-.009-.041-.008-.042-.005-.042-.003L17.5.667Z"></path></svg></span></a></div></div></div></div></div><hr class="_divider_1ilfl_115"/><div class="_section_1ilfl_92"><h5 class="_sectionTitle_1ilfl_97">Core Features</h5><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Columns</span></button><div id="Columns" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/configuration/" class="_item_1ilfl_99"><span>Configuration</span></a><div class="_nestedItems_1ilfl_161"><a href="/react-data-grid/column-definitions/" class="_item_1ilfl_99"><span>Column Definitions</span></a><a href="/react-data-grid/column-updating-definitions/" class="_item_1ilfl_99"><span>Updating Definitions</span></a><a href="/react-data-grid/column-state/" class="_item_1ilfl_99"><span>Column State</span></a></div><a href="/react-data-grid/column-headers/" class="_item_1ilfl_99"><span>Column Headers</span></a><a href="/react-data-grid/column-groups/" class="_item_1ilfl_99"><span>Column Groups</span></a><a href="/react-data-grid/column-sizing/" class="_item_1ilfl_99"><span>Column Sizing</span></a><a href="/react-data-grid/column-moving/" class="_item_1ilfl_99"><span>Column Moving</span></a><a href="/react-data-grid/column-pinning/" class="_item_1ilfl_99"><span>Column Pinning</span></a><a href="/react-data-grid/column-spanning/" class="_item_1ilfl_99"><span>Column Spanning</span></a></div></div></div></div><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Rows</span></button><div id="Rows" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/row-ids/" class="_item_1ilfl_99"><span>Row Data</span></a><a href="/react-data-grid/row-sorting/" class="_item_1ilfl_99"><span>Row Sorting</span></a><a href="/react-data-grid/row-numbers/" class="_item_1ilfl_99"><span>Row Numbers<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/row-spanning/" class="_item_1ilfl_99"><span>Row Spanning</span></a><a href="/react-data-grid/row-pinning/" class="_item_1ilfl_99"><span>Row Pinning</span></a><a href="/react-data-grid/row-height/" class="_item_1ilfl_99"><span>Row Height</span></a><a href="/react-data-grid/row-styles/" class="_item_1ilfl_99"><span>Styling Rows</span></a><a href="/react-data-grid/row-pagination/" class="_item_1ilfl_99"><span>Row Pagination</span></a><a href="/react-data-grid/accessing-data/" class="_item_1ilfl_99"><span>Accessing Rows</span></a><a href="/react-data-grid/row-dragging/" class="_item_1ilfl_99"><span>Row Dragging</span></a><div class="_nestedItems_1ilfl_161"><a href="/react-data-grid/row-dragging-to-external-dropzone/" class="_item_1ilfl_99"><span>External DropZone</span></a><a href="/react-data-grid/row-dragging-to-grid/" class="_item_1ilfl_99"><span>Grid to Grid</span></a></div><a href="/react-data-grid/full-width-rows/" class="_item_1ilfl_99"><span>Full Width Rows</span></a></div></div></div></div><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Cells</span></button><div id="Cells" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/cell-content/" class="_item_1ilfl_99"><span>Cell Content</span></a><div class="_nestedItems_1ilfl_161"><a href="/react-data-grid/value-getters/" class="_item_1ilfl_99"><span>Getting Values</span></a><a href="/react-data-grid/value-formatters/" class="_item_1ilfl_99"><span>Text Formatting</span></a><a href="/react-data-grid/component-cell-renderer/" class="_item_1ilfl_99"><span>Cell Components</span></a><a href="/react-data-grid/cell-data-types/" class="_item_1ilfl_99"><span>Cell Data Types</span></a></div><a href="/react-data-grid/cell-styles/" class="_item_1ilfl_99"><span>Styling Cells</span></a><a href="/react-data-grid/change-cell-renderers/" class="_item_1ilfl_99"><span>Highlighting Changes</span></a><a href="/react-data-grid/tooltips/" class="_item_1ilfl_99"><span>Tooltips</span></a><a href="/react-data-grid/cell-expressions/" class="_item_1ilfl_99"><span>Expressions</span></a><a href="/react-data-grid/view-refresh/" class="_item_1ilfl_99"><span>View Refresh</span></a><a href="/react-data-grid/reference-data/" class="_item_1ilfl_99"><span>Reference Data</span></a><a href="/react-data-grid/cell-text-selection/" class="_item_1ilfl_99"><span>Cell Text Selection</span></a></div></div></div></div><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Filtering</span></button><div id="Filtering" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/filtering-overview/" class="_item_1ilfl_99"><span>Overview</span></a><a href="/react-data-grid/filtering/" class="_item_1ilfl_99"><span>Column Filters</span></a><div class="_nestedItems_1ilfl_161"><a href="/react-data-grid/filter-text/" class="_item_1ilfl_99"><span>Text Filter</span></a><a href="/react-data-grid/filter-number/" class="_item_1ilfl_99"><span>Number Filter</span></a><a href="/react-data-grid/filter-date/" class="_item_1ilfl_99"><span>Date Filter</span></a><a href="/react-data-grid/filter-set/" class="_item_1ilfl_99"><span>Set Filter<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><div class="_nestedItems_1ilfl_161"><a href="/react-data-grid/filter-set-filter-list/" class="_item_1ilfl_99"><span>Filter List<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/filter-set-data-updates/" class="_item_1ilfl_99"><span>Data Updates<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/filter-set-tree-list/" class="_item_1ilfl_99"><span>Tree List<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/filter-set-mini-filter/" class="_item_1ilfl_99"><span>Mini Filter<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/filter-set-excel-mode/" class="_item_1ilfl_99"><span>Excel Mode<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/filter-set-api/" class="_item_1ilfl_99"><span>API<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a></div><a href="/react-data-grid/filter-multi/" class="_item_1ilfl_99"><span>Multi Filter<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/filter-conditions/" class="_item_1ilfl_99"><span>Filter Conditions</span></a><a href="/react-data-grid/filter-applying/" class="_item_1ilfl_99"><span>Applying Filters</span></a><a href="/react-data-grid/filter-api/" class="_item_1ilfl_99"><span>Filter API</span></a></div><a href="/react-data-grid/component-filter/" class="_item_1ilfl_99"><span>Custom Column Filters</span></a><a href="/react-data-grid/floating-filters/" class="_item_1ilfl_99"><span>Floating Filters</span></a><a href="/react-data-grid/component-floating-filter/" class="_item_1ilfl_99"><span>Custom Floating Filters</span></a><a href="/react-data-grid/filter-advanced/" class="_item_1ilfl_99"><span>Advanced Filter<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/filter-external/" class="_item_1ilfl_99"><span>External Filter</span></a><a href="/react-data-grid/filter-quick/" class="_item_1ilfl_99"><span>Quick Filter</span></a></div></div></div></div><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Selection</span></button><div id="Selection" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/row-selection/" class="_item_1ilfl_99"><span>Row Selection</span></a><div class="_nestedItems_1ilfl_161"><a href="/react-data-grid/row-selection-single-row/" class="_item_1ilfl_99"><span>Single Row Selection</span></a><a href="/react-data-grid/row-selection-multi-row/" class="_item_1ilfl_99"><span>Multi-Row Selection</span></a><a href="/react-data-grid/row-selection-api-reference/" class="_item_1ilfl_99"><span>API Reference</span></a></div><a href="/react-data-grid/cell-selection/" class="_item_1ilfl_99"><span>Cell Selection<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><div class="_nestedItems_1ilfl_161"><a href="/react-data-grid/cell-selection-handle/" class="_item_1ilfl_99"><span>Range Handle<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/cell-selection-fill-handle/" class="_item_1ilfl_99"><span>Fill Handle<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/cell-selection-api-reference/" class="_item_1ilfl_99"><span>API Reference<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a></div></div></div></div></div><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Editing</span></button><div id="Editing" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/cell-editing/" class="_item_1ilfl_99"><span>Overview</span></a><a href="/react-data-grid/cell-editing-start-stop/" class="_item_1ilfl_99"><span>Start / Stop Editing</span></a><a href="/react-data-grid/value-parsers/" class="_item_1ilfl_99"><span>Parsing Values</span></a><a href="/react-data-grid/value-setters/" class="_item_1ilfl_99"><span>Saving Values</span></a><a href="/react-data-grid/cell-editors/" class="_item_1ilfl_99"><span>Edit Components</span></a><a href="/react-data-grid/provided-cell-editors/" class="_item_1ilfl_99"><span>Provided Cell Editors</span></a><div class="_nestedItems_1ilfl_161"><a href="/react-data-grid/provided-cell-editors-text/" class="_item_1ilfl_99"><span>Text Editor</span></a><a href="/react-data-grid/provided-cell-editors-large-text/" class="_item_1ilfl_99"><span>Large Text Editor</span></a><a href="/react-data-grid/provided-cell-editors-select/" class="_item_1ilfl_99"><span>Select Editor</span></a><a href="/react-data-grid/provided-cell-editors-rich-select/" class="_item_1ilfl_99"><span>Rich Select Editor<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/provided-cell-editors-number/" class="_item_1ilfl_99"><span>Number Editor</span></a><a href="/react-data-grid/provided-cell-editors-date/" class="_item_1ilfl_99"><span>Date Editors</span></a><a href="/react-data-grid/provided-cell-editors-checkbox/" class="_item_1ilfl_99"><span>Checkbox Editor</span></a></div><a href="/react-data-grid/undo-redo-edits/" class="_item_1ilfl_99"><span>Undo / Redo Edits</span></a><a href="/react-data-grid/cell-editing-full-row/" class="_item_1ilfl_99"><span>Full Row</span></a></div></div></div></div><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Updating Data</span></button><div id="Updating Data" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/data-update-row-data/" class="_item_1ilfl_99"><span>Row Data</span></a><a href="/react-data-grid/data-update-single-row-cell/" class="_item_1ilfl_99"><span>Single Row / Cell</span></a><a href="/react-data-grid/data-update-transactions/" class="_item_1ilfl_99"><span>Transactions</span></a><a href="/react-data-grid/data-update-high-frequency/" class="_item_1ilfl_99"><span>High Frequency</span></a></div></div></div></div><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Interactivity</span></button><div id="Interactivity" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/keyboard-navigation/" class="_item_1ilfl_99"><span>Keyboard Navigation</span></a><a href="/react-data-grid/touch/" class="_item_1ilfl_99"><span>Touch</span></a><a href="/react-data-grid/accessibility/" class="_item_1ilfl_99"><span>Accessibility (ARIA)</span></a><a href="/react-data-grid/rtl/" class="_item_1ilfl_99"><span>RTL Text Direction</span></a><a href="/react-data-grid/localisation/" class="_item_1ilfl_99"><span>Localisation</span></a></div></div></div></div></div><hr class="_divider_1ilfl_115"/><div class="_section_1ilfl_92"><h5 class="_sectionTitle_1ilfl_97">Advanced Features</h5><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Row Grouping</span></button><div id="Row Grouping" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/grouping/" class="_item_1ilfl_99"><span>Overview<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/grouping-data/" class="_item_1ilfl_99"><span>Grouping Data<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/grouping-display-types/" class="_item_1ilfl_99"><span>Group Display Types<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><div class="_nestedItems_1ilfl_161"><a href="/react-data-grid/grouping-single-group-column/" class="_item_1ilfl_99"><span>Single Column<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/grouping-multiple-group-columns/" class="_item_1ilfl_99"><span>Multiple Columns<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/grouping-group-rows/" class="_item_1ilfl_99"><span>Group Rows<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a></div><a href="/react-data-grid/grouping-group-panel/" class="_item_1ilfl_99"><span>Row Group Panel<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/grouping-opening-groups/" class="_item_1ilfl_99"><span>Expanding Groups<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/grouping-row-selection/" class="_item_1ilfl_99"><span>Hierarchy Selection<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/grouping-sorting/" class="_item_1ilfl_99"><span>Sorting<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a></div></div></div></div><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Aggregation</span></button><div id="Aggregation" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/aggregation/" class="_item_1ilfl_99"><span>Overview<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/aggregation-columns/" class="_item_1ilfl_99"><span>Configure Columns<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/aggregation-custom-functions/" class="_item_1ilfl_99"><span>Custom Functions<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/aggregation-total-rows/" class="_item_1ilfl_99"><span>Total Rows<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/aggregation-filtering/" class="_item_1ilfl_99"><span>Filtering <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a></div></div></div></div><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Pivoting</span></button><div id="Pivoting" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/pivoting/" class="_item_1ilfl_99"><span>Overview<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/pivoting-result-columns/" class="_item_1ilfl_99"><span>Pivot Result Columns<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/pivoting-column-groups/" class="_item_1ilfl_99"><span>Pivot Column Groups<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/pivoting-totals/" class="_item_1ilfl_99"><span>Pivot Totals<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a></div></div></div></div><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Tree Data</span></button><div id="Tree Data" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/tree-data/" class="_item_1ilfl_99"><span>Overview<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/tree-data-data/" class="_item_1ilfl_99"><span>Supplying Data<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><div class="_nestedItems_1ilfl_161"><a href="/react-data-grid/tree-data-paths/" class="_item_1ilfl_99"><span>Data Paths<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/tree-data-nesting/" class="_item_1ilfl_99"><span>Nested Records<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a></div><a href="/react-data-grid/tree-data-group-column/" class="_item_1ilfl_99"><span>Group Column<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/tree-data-opening-groups/" class="_item_1ilfl_99"><span>Expanding Groups<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/tree-data-selection/" class="_item_1ilfl_99"><span>Tree Selection<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/tree-data-filtering/" class="_item_1ilfl_99"><span>Filtering<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a></div></div></div></div><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Master Detail</span></button><div id="Master Detail" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/master-detail/" class="_item_1ilfl_99"><span>Overview<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/master-detail-grids/" class="_item_1ilfl_99"><span>Detail Grids<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/master-detail-height/" class="_item_1ilfl_99"><span>Detail Height<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/master-detail-refresh/" class="_item_1ilfl_99"><span>Detail Refresh<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/master-detail-master-rows/" class="_item_1ilfl_99"><span>Master Rows<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/master-detail-nesting/" class="_item_1ilfl_99"><span>Nesting<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/master-detail-custom-detail/" class="_item_1ilfl_99"><span>Custom Detail<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/master-detail-other/" class="_item_1ilfl_99"><span>Other<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a></div></div></div></div><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Accessories</span></button><div id="Accessories" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/tool-panel/" class="_item_1ilfl_99"><span>Tool Panels<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><div class="_nestedItems_1ilfl_161"><a href="/react-data-grid/side-bar/" class="_item_1ilfl_99"><span>Side Bar<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/tool-panel-columns/" class="_item_1ilfl_99"><span>Columns Tool Panel<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/tool-panel-filters/" class="_item_1ilfl_99"><span>Filters Tool Panel<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/component-tool-panel/" class="_item_1ilfl_99"><span>Custom Panel<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a></div><a href="/react-data-grid/column-menu/" class="_item_1ilfl_99"><span>Column Menu<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/context-menu/" class="_item_1ilfl_99"><span>Context Menu<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/component-menu-item/" class="_item_1ilfl_99"><span>Menu Item Component<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/status-bar/" class="_item_1ilfl_99"><span>Status Bar<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/overlays/" class="_item_1ilfl_99"><span>Overlays</span></a></div></div></div></div><div class="_group_1ilfl_98 _isOpen_1ilfl_151"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Server-Side Data</span></button><div id="Server-Side Data" aria-hidden="false" class="rah-static rah-static--height-auto " style="height:auto;overflow:visible"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/row-models/" class="_item_1ilfl_99"><span>Row Models</span></a><a href="/react-data-grid/server-side-model/" class="_item_1ilfl_99"><span>Server-Side Row Model<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><div class="_nestedItems_1ilfl_161"><a href="/react-data-grid/server-side-model-api-reference/" class="_item_1ilfl_99"><span>API Reference<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/server-side-model-datasource/" class="_item_1ilfl_99"><span>Datasource<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/server-side-model-configuration/" class="_item_1ilfl_99"><span>Configuration<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/server-side-model-sorting/" class="_item_1ilfl_99"><span>Sorting<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/server-side-model-filtering/" class="_item_1ilfl_99"><span>Filtering<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/server-side-model-grouping/" class="_item_1ilfl_99"><span>Row Grouping<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/server-side-model-pivoting/" class="_item_1ilfl_99"><span>Pivoting<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/server-side-model-pagination/" class="_item_1ilfl_99"><span>Pagination<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/server-side-model-selection/" class="_item_1ilfl_99"><span>Row Selection<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/component-loading-cell-renderer/" class="_item_1ilfl_99"><span>Loading Component<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/server-side-model-changing-columns/" class="_item_1ilfl_99"><span>Changing Columns<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/server-side-model-updating/" class="_item_1ilfl_99"><span>Updating Data<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><div class="_nestedItems_1ilfl_161"><a href="/react-data-grid/server-side-model-updating-refresh/" class="_item_1ilfl_99"><span>Refresh<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/server-side-model-updating-single-row/" class="_item_1ilfl_99"><span>Single Row Updates<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/server-side-model-updating-transactions/" class="_item_1ilfl_99"><span>Transactions<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a></div><a href="/react-data-grid/server-side-model-retry/" class="_item_1ilfl_99"><span>Load Retry<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/server-side-model-row-height/" class="_item_1ilfl_99"><span>Row Height<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/server-side-model-master-detail/" class="_item_1ilfl_99"><span>Master Detail<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/server-side-model-tree-data/" class="_item_1ilfl_99"><span>Tree Data<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/server-side-operations-nodejs/" class="_item_1ilfl_99"><span>Example Node.js & MySQL<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/server-side-operations-graphql/" class="_item_1ilfl_99"><span>Example GraphQL & MySQL<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/server-side-operations-oracle/" class="_item_1ilfl_99"><span>Example Java & Oracle<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/server-side-operations-spark/" class="_item_1ilfl_99 _isActive_1ilfl_172"><span>Example Java & Apache<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a></div><a href="/react-data-grid/infinite-scrolling/" class="_item_1ilfl_99"><span>Infinite Row Model</span></a><a href="/react-data-grid/viewport/" class="_item_1ilfl_99"><span>Viewport Row Model<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a></div></div></div></div><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Import & Export</span></button><div id="Import & Export" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/csv-export/" class="_item_1ilfl_99"><span>CSV Export</span></a><a href="/react-data-grid/excel-export/" class="_item_1ilfl_99"><span>Excel Export<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><div class="_nestedItems_1ilfl_161"><a href="/react-data-grid/excel-export-api/" class="_item_1ilfl_99"><span>API Reference<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/excel-export-styles/" class="_item_1ilfl_99"><span>Styles<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/excel-export-formulas/" class="_item_1ilfl_99"><span>Formulas<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/excel-export-extra-content/" class="_item_1ilfl_99"><span>Extra Content<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/excel-export-customising-content/" class="_item_1ilfl_99"><span>Customising Content<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/excel-export-images/" class="_item_1ilfl_99"><span>Images<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/excel-export-tables/" class="_item_1ilfl_99"><span>Excel Tables<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/excel-export-multiple-sheets/" class="_item_1ilfl_99"><span>Multiple Sheets<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/excel-export-rows/" class="_item_1ilfl_99"><span>Rows<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/excel-export-columns/" class="_item_1ilfl_99"><span>Columns<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/excel-export-freeze/" class="_item_1ilfl_99"><span>Freezing Content<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/excel-export-data-types/" class="_item_1ilfl_99"><span>Data Types<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/excel-export-hyperlinks/" class="_item_1ilfl_99"><span>Hyperlinks<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/excel-export-master-detail/" class="_item_1ilfl_99"><span>Master Detail<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/excel-export-page-setup/" class="_item_1ilfl_99"><span>Page Setup<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a></div><a href="/react-data-grid/clipboard/" class="_item_1ilfl_99"><span>Clipboard<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _enterpriseIcon_1ilfl_211"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></a><a href="/react-data-grid/drag-and-drop/" class="_item_1ilfl_99"><span>Drag & Drop</span></a><a href="/react-data-grid/printing/" class="_item_1ilfl_99"><span>Printing</span></a><a href="/react-data-grid/excel-import/" class="_item_1ilfl_99"><span>Import Excel</span></a></div></div></div></div><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Performance</span></button><div id="Performance" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/dom-virtualisation/" class="_item_1ilfl_99"><span>DOM Virtualisation</span></a><a href="/react-data-grid/value-cache/" class="_item_1ilfl_99"><span>Value Cache</span></a><a href="/react-data-grid/row-animation/" class="_item_1ilfl_99"><span>Row Animation</span></a><a href="/react-data-grid/massive-row-count/" class="_item_1ilfl_99"><span>Massive Row Count</span></a><a href="/react-data-grid/scrolling-performance/" class="_item_1ilfl_99"><span>Scrolling Performance</span></a></div></div></div></div></div><hr class="_divider_1ilfl_115"/><div class="_section_1ilfl_92"><h5 class="_sectionTitle_1ilfl_97">Miscellaneous</h5><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Migration</span></button><div id="Migration" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/upgrading-to-ag-grid-33-1/" class="_item_1ilfl_99"><span>Upgrading to AG Grid 33.1</span></a><a href="/react-data-grid/upgrading-to-ag-grid-33/" class="_item_1ilfl_99"><span>Upgrading to AG Grid 33</span></a><a href="/react-data-grid/upgrading-to-ag-grid-32-3/" class="_item_1ilfl_99"><span>Upgrading to AG Grid 32.3</span></a><a href="/react-data-grid/upgrading-to-ag-grid-32-2-1/" class="_item_1ilfl_99"><span>Upgrading to AG Grid 32.2.1</span></a><a href="/react-data-grid/upgrading-to-ag-grid-32-1/" class="_item_1ilfl_99"><span>Upgrading to AG Grid 32.1</span></a><a href="/react-data-grid/upgrading-to-ag-grid-32/" class="_item_1ilfl_99"><span>Upgrading to AG Grid 32</span></a><a href="/react-data-grid/upgrading-to-ag-grid-31-3/" class="_item_1ilfl_99"><span>Upgrading to AG Grid 31.3</span></a><a href="/react-data-grid/upgrading-to-ag-grid-31-2/" class="_item_1ilfl_99"><span>Upgrading to AG Grid 31.2</span></a><a href="/react-data-grid/upgrading-to-ag-grid-31-1/" class="_item_1ilfl_99"><span>Upgrading to AG Grid 31.1</span></a><a href="/react-data-grid/upgrading-to-ag-grid-31/" class="_item_1ilfl_99"><span>Upgrading to AG Grid 31</span></a><a href="/react-data-grid/upgrading-to-older-versions/" class="_item_1ilfl_99"><span>Upgrading to Older Versions</span></a><a href="/react-data-grid/codemods/" class="_item_1ilfl_99"><span>Codemods</span></a></div></div></div></div><div class="_group_1ilfl_98"><button class="button-style-none _groupTitle_1ilfl_98"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon _groupChevron_1ilfl_137"><path d="M9.763 8.237 17.525 16l-7.762 7.763 2.474 2.474L22.475 16 12.237 5.763 9.763 8.237Z"></path></svg><span>Other</span></button><div id="Other" aria-hidden="true" class="rah-static rah-static--height-zero " style="height:0;overflow:hidden"><div><div class="_groupChildren_1ilfl_156"><a href="/react-data-grid/context/" class="_item_1ilfl_99"><span>Context</span></a><a href="/react-data-grid/change-detection/" class="_item_1ilfl_99"><span>Change Detection</span></a><a href="/react-data-grid/components/" class="_item_1ilfl_99"><span>Custom Components</span></a><a href="/react-data-grid/aligned-grids/" class="_item_1ilfl_99"><span>Aligned Grids</span></a></div></div></div></div></div></div></div></div></div></astro-island><div id="doc-content" class="_docPage_cb2ib_11"><astro-island uid="Z1fLPQP" prefix="r1" component-url="/_astro/Header.BT5yBZus.js" component-export="Header" renderer-url="/_astro/client.5kNSwotS.js" props="{"title":[0,"Server-Side Operations With Java & Spark"],"framework":[0,"react"],"isEnterprise":[0,true],"path":[0,"/react-data-grid/server-side-operations-spark/"],"menuItems":[1,[[0,{"title":[0,"Getting Started"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Quick Start"],"path":[0,"getting-started"]}],[0,{"type":[0,"item"],"title":[0,"Key Features"],"path":[0,"key-features"]}],[0,{"type":[0,"item"],"title":[0,"Community vs. Enterprise"],"path":[0,"community-vs-enterprise"]}],[0,{"title":[0,"Setup"],"type":[0,"group"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Installation"],"path":[0,"installation"]}],[0,{"title":[0,"Registering Modules"],"path":[0,"modules"]}],[0,{"title":[0,"Installing Enterprise Licence"],"path":[0,"license-install"]}]]]}],[0,{"title":[0,"Tutorials"],"type":[0,"group"],"children":[1,[[0,{"title":[0,"Creating a Basic Grid"],"path":[0,"deep-dive"]}],[0,{"title":[0,"Best Practices"],"path":[0,"react-hooks"],"frameworks":[1,[[0,"react"]]]}],[0,{"title":[0,"Testing"],"type":[0,"group"],"frameworks":[1,[[0,"angular"],[0,"react"]]],"children":[1,[[0,{"title":[0,"Overview"],"path":[0,"testing"],"frameworks":[1,[[0,"angular"],[0,"react"]]]}],[0,{"type":[0,"item"],"title":[0,"Testing Async"],"path":[0,"testing-async"],"frameworks":[1,[[0,"angular"]]]}],[0,{"title":[0,"Playwright"],"url":[0,"https://blog.ag-grid.com/writing-e2e-tests-for-ag-grid-react-tables-with-playwright/"],"frameworks":[1,[[0,"react"]]]}],[0,{"title":[0,"Cypress"],"url":[0,"https://blog.ag-grid.com/end-to-end-testing-for-ag-grid-in-react-with-cypress/"],"frameworks":[1,[[0,"react"]]]}],[0,{"title":[0,"React Testing Library"],"url":[0,"https://blog.ag-grid.com/unit-testing-ag-grid-react-tables-with-react-testing-library-and-vitest/"],"frameworks":[1,[[0,"react"]]]}]]]}],[0,{"title":[0,"Testing"],"type":[0,"item"],"path":[0,"testing"],"frameworks":[1,[[0,"javascript"],[0,"vue"]]]}],[0,{"type":[0,"item"],"title":[0,"Video Tutorials"],"url":[0,"https://www.youtube.com/watch?v=6hxbPqziELk&list=PLsZlhayVgqNwHNHeqpCkSgdRV08xrKtzW&pp=gAQB"],"frameworks":[1,[[0,"react"]]]}],[0,{"type":[0,"item"],"title":[0,"Video Tutorials"],"url":[0,"https://www.youtube.com/watch?v=X_Ip_jGDtho&list=PLsZlhayVgqNw6VHFn4j6FcJM5vLACsf0x&pp=gAQB"],"frameworks":[1,[[0,"angular"]]]}],[0,{"type":[0,"item"],"title":[0,"Video Tutorials"],"url":[0,"https://www.youtube.com/watch?v=V14w_NFuZB4&list=PLsZlhayVgqNz5iC0wFQDgixcAepFyrWbP&pp=gAQB"],"frameworks":[1,[[0,"vue"]]]}],[0,{"type":[0,"item"],"title":[0,"Video Tutorials"],"url":[0,"https://www.youtube.com/watch?v=Ww7-LC6rU6U&list=PLsZlhayVgqNxijfRQxg5Mc6W4MzZHQ9MK&pp=gAQB"],"frameworks":[1,[[0,"javascript"]]]}]]]}],[0,{"title":[0,"Compatibility & Security"],"type":[0,"group"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Compatibility"],"path":[0,"compatibility"]}],[0,{"type":[0,"item"],"title":[0,"Security"],"path":[0,"security"]}],[0,{"type":[0,"item"],"title":[0,"Supported Browsers"],"path":[0,"supported-browsers"]}]]]}]]]}],[0,{"title":[0,"Layout & Styling"],"children":[1,[[0,{"type":[0,"group"],"title":[0,"Theming"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Overview"],"path":[0,"theming"]}],[0,{"type":[0,"item"],"title":[0,"Built-in Themes"],"path":[0,"themes"]}],[0,{"type":[0,"item"],"title":[0,"Theme Parameters"],"path":[0,"theming-parameters"]}],[0,{"type":[0,"item"],"title":[0,"Theme Parts"],"path":[0,"theming-parts"]}],[0,{"type":[0,"item"],"title":[0,"Colors & Dark Mode"],"path":[0,"theming-colors"]}],[0,{"type":[0,"item"],"title":[0,"Fonts"],"path":[0,"theming-fonts"]}],[0,{"type":[0,"item"],"title":[0,"Borders"],"path":[0,"theming-borders"]}],[0,{"type":[0,"item"],"title":[0,"Compactness & Row Height"],"path":[0,"theming-compactness"]}],[0,{"type":[0,"item"],"title":[0,"Selections"],"path":[0,"theming-selections"]}],[0,{"type":[0,"item"],"title":[0,"Headers"],"path":[0,"theming-headers"]}],[0,{"type":[0,"item"],"title":[0,"Icons"],"path":[0,"custom-icons"]}],[0,{"type":[0,"item"],"title":[0,"Tool Panels"],"path":[0,"theming-tool-panels"]}],[0,{"type":[0,"item"],"title":[0,"Inputs & Widgets"],"path":[0,"theming-widgets"]}],[0,{"type":[0,"item"],"title":[0,"Menus & Popups"],"path":[0,"theming-popups"]}],[0,{"type":[0,"item"],"title":[0,"Extending with CSS"],"path":[0,"theming-css"]}],[0,{"type":[0,"item"],"title":[0,"Distributing Shared Themes"],"path":[0,"theming-distribution"]}],[0,{"type":[0,"item"],"title":[0,"Migration from v32"],"path":[0,"theming-migration"]}],[0,{"type":[0,"item"],"title":[0,"Legacy Themes"],"path":[0,"theming-v32"],"childPaths":[1,[[0,"theming-v32-custom-icons"],[0,"theming-v32-customisation"],[0,"theming-v32-customisation-borders"],[0,"theming-v32-customisation-colours"],[0,"theming-v32-customisation-compactness"],[0,"theming-v32-customisation-css"],[0,"theming-v32-customisation-headers"],[0,"theming-v32-customisation-popups"],[0,"theming-v32-customisation-sass"],[0,"theming-v32-customisation-sass-legacy"],[0,"theming-v32-customisation-selections"],[0,"theming-v32-customisation-tool-panels"],[0,"theming-v32-customisation-variables"],[0,"theming-v32-customisation-widgets"],[0,"theming-v32-themes"],[0,"theming-v32-upgrading-to-v28"],[0,"theming-v32-upgrading-to-v28-css"],[0,"theming-v32-upgrading-to-v28-sass"]]]}]]]}],[0,{"type":[0,"item"],"title":[0,"Design System"],"path":[0,"ag-grid-design-system"]}],[0,{"type":[0,"item"],"title":[0,"Grid Layout"],"path":[0,"grid-size"]}]]]}],[0,{"title":[0,"Charting"],"children":[1,[[0,{"type":[0,"group"],"title":[0,"Sparklines"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Install Sparklines"],"path":[0,"sparklines-installation"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Overview"],"path":[0,"sparklines-overview"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Area"],"path":[0,"sparklines-area-customisation"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Bar"],"path":[0,"sparklines-bar-customisation"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Column"],"path":[0,"sparklines-column-customisation"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Line"],"path":[0,"sparklines-line-customisation"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"item"],"title":[0,"Sparkline Data"],"path":[0,"sparklines-data"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Axis Types"],"path":[0,"sparklines-axis-types"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Tooltips"],"path":[0,"sparklines-tooltips"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Points of Interest"],"path":[0,"sparklines-points-of-interest"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Sparklines API"],"path":[0,"sparklines-api-sparkline-options"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Area"],"path":[0,"sparklines-api-sparkline-area"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Bar / Column"],"path":[0,"sparklines-api-sparkline-bar"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Line"],"path":[0,"sparklines-api-sparkline-line"],"isEnterprise":[0,true]}]]]}]]]}],[0,{"type":[0,"group"],"title":[0,"Integrated Charts"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Overview"],"path":[0,"integrated-charts"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Install Integrated Charts"],"path":[0,"integrated-charts-installation"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"User Created Charts"],"path":[0,"integrated-charts-user-created"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Range Chart"],"path":[0,"integrated-charts-range-chart"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Pivot Chart"],"path":[0,"integrated-charts-pivot-chart"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"item"],"title":[0,"Application Created Charts"],"path":[0,"integrated-charts-application-created"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Range Chart API"],"path":[0,"integrated-charts-api-range-chart"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Pivot Chart API"],"path":[0,"integrated-charts-api-pivot-chart"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Cross Filter API"],"path":[0,"integrated-charts-api-cross-filter-chart"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"item"],"title":[0,"Chart Types"],"path":[0,"integrated-charts-chart-types"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Chart Menu"],"path":[0,"integrated-charts-menu"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Chart Tool Panels"],"path":[0,"integrated-charts-chart-tool-panels"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Chart Container"],"path":[0,"integrated-charts-container"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Customisation"],"path":[0,"integrated-charts-customisation"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Chart Events"],"path":[0,"integrated-charts-events"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Time Series"],"path":[0,"integrated-charts-time-series"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Save / Restore Charts"],"path":[0,"integrated-charts-api-save-restore-charts"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Chart Image Export"],"path":[0,"integrated-charts-api-downloading-image"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"group"],"title":[0,"Standalone Charts"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"See AG Charts"],"url":[0,"https://www.ag-grid.com/charts"]}]]]}]]]}],[0,{"title":[0,"Core Features"],"children":[1,[[0,{"type":[0,"group"],"title":[0,"Columns"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Configuration"],"path":[0,"configuration"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Column Definitions"],"path":[0,"column-definitions"]}],[0,{"type":[0,"item"],"title":[0,"Updating Definitions"],"path":[0,"column-updating-definitions"]}],[0,{"type":[0,"item"],"title":[0,"Column State"],"path":[0,"column-state"]}]]]}],[0,{"type":[0,"item"],"title":[0,"Column Headers"],"path":[0,"column-headers"]}],[0,{"type":[0,"item"],"title":[0,"Column Groups"],"path":[0,"column-groups"]}],[0,{"type":[0,"item"],"title":[0,"Column Sizing"],"path":[0,"column-sizing"]}],[0,{"type":[0,"item"],"title":[0,"Column Moving"],"path":[0,"column-moving"]}],[0,{"type":[0,"item"],"title":[0,"Column Pinning"],"path":[0,"column-pinning"]}],[0,{"type":[0,"item"],"title":[0,"Column Spanning"],"path":[0,"column-spanning"]}]]]}],[0,{"type":[0,"group"],"title":[0,"Rows"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Row Data"],"path":[0,"row-ids"]}],[0,{"type":[0,"item"],"title":[0,"Row Sorting"],"path":[0,"row-sorting"]}],[0,{"type":[0,"item"],"title":[0,"Row Numbers"],"path":[0,"row-numbers"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Row Spanning"],"path":[0,"row-spanning"]}],[0,{"type":[0,"item"],"title":[0,"Row Pinning"],"path":[0,"row-pinning"]}],[0,{"type":[0,"item"],"title":[0,"Row Height"],"path":[0,"row-height"]}],[0,{"type":[0,"item"],"title":[0,"Styling Rows"],"path":[0,"row-styles"]}],[0,{"type":[0,"item"],"title":[0,"Row Pagination"],"path":[0,"row-pagination"]}],[0,{"type":[0,"item"],"title":[0,"Accessing Rows"],"path":[0,"accessing-data"]}],[0,{"type":[0,"item"],"title":[0,"Row Dragging"],"path":[0,"row-dragging"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"External DropZone"],"path":[0,"row-dragging-to-external-dropzone"]}],[0,{"type":[0,"item"],"title":[0,"Grid to Grid"],"path":[0,"row-dragging-to-grid"]}]]]}],[0,{"type":[0,"item"],"title":[0,"Full Width Rows"],"path":[0,"full-width-rows"]}]]]}],[0,{"type":[0,"group"],"title":[0,"Cells"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Cell Content"],"path":[0,"cell-content"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Getting Values"],"path":[0,"value-getters"]}],[0,{"type":[0,"item"],"title":[0,"Text Formatting"],"path":[0,"value-formatters"]}],[0,{"type":[0,"item"],"title":[0,"Cell Components"],"path":[0,"component-cell-renderer"]}],[0,{"type":[0,"item"],"title":[0,"Cell Data Types"],"path":[0,"cell-data-types"]}]]]}],[0,{"type":[0,"item"],"title":[0,"Styling Cells"],"path":[0,"cell-styles"]}],[0,{"type":[0,"item"],"title":[0,"Highlighting Changes"],"path":[0,"change-cell-renderers"]}],[0,{"type":[0,"item"],"title":[0,"Tooltips"],"path":[0,"tooltips"]}],[0,{"type":[0,"item"],"title":[0,"Expressions"],"path":[0,"cell-expressions"]}],[0,{"type":[0,"item"],"title":[0,"View Refresh"],"path":[0,"view-refresh"]}],[0,{"type":[0,"item"],"title":[0,"Reference Data"],"path":[0,"reference-data"]}],[0,{"type":[0,"item"],"title":[0,"Cell Text Selection"],"path":[0,"cell-text-selection"]}]]]}],[0,{"type":[0,"group"],"title":[0,"Filtering"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Overview"],"path":[0,"filtering-overview"]}],[0,{"type":[0,"item"],"title":[0,"Column Filters"],"path":[0,"filtering"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Text Filter"],"path":[0,"filter-text"]}],[0,{"type":[0,"item"],"title":[0,"Number Filter"],"path":[0,"filter-number"]}],[0,{"type":[0,"item"],"title":[0,"Date Filter"],"path":[0,"filter-date"]}],[0,{"type":[0,"item"],"title":[0,"Set Filter"],"path":[0,"filter-set"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Filter List"],"path":[0,"filter-set-filter-list"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Data Updates"],"path":[0,"filter-set-data-updates"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Tree List"],"path":[0,"filter-set-tree-list"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Mini Filter"],"path":[0,"filter-set-mini-filter"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Excel Mode"],"path":[0,"filter-set-excel-mode"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"API"],"path":[0,"filter-set-api"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"item"],"title":[0,"Multi Filter"],"path":[0,"filter-multi"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Filter Conditions"],"path":[0,"filter-conditions"]}],[0,{"type":[0,"item"],"title":[0,"Applying Filters"],"path":[0,"filter-applying"]}],[0,{"type":[0,"item"],"title":[0,"Filter API"],"path":[0,"filter-api"]}]]]}],[0,{"type":[0,"item"],"title":[0,"Custom Column Filters"],"path":[0,"component-filter"]}],[0,{"type":[0,"item"],"title":[0,"Floating Filters"],"path":[0,"floating-filters"]}],[0,{"type":[0,"item"],"title":[0,"Custom Floating Filters"],"path":[0,"component-floating-filter"]}],[0,{"type":[0,"item"],"title":[0,"Advanced Filter"],"path":[0,"filter-advanced"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"External Filter"],"path":[0,"filter-external"]}],[0,{"type":[0,"item"],"title":[0,"Quick Filter"],"path":[0,"filter-quick"]}]]]}],[0,{"type":[0,"group"],"title":[0,"Selection"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Row Selection"],"path":[0,"row-selection"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Single Row Selection"],"path":[0,"row-selection-single-row"]}],[0,{"type":[0,"item"],"title":[0,"Multi-Row Selection"],"path":[0,"row-selection-multi-row"]}],[0,{"type":[0,"item"],"title":[0,"API Reference"],"path":[0,"row-selection-api-reference"]}]]]}],[0,{"type":[0,"item"],"title":[0,"Cell Selection"],"path":[0,"cell-selection"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Range Handle"],"path":[0,"cell-selection-handle"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Fill Handle"],"path":[0,"cell-selection-fill-handle"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"API Reference"],"path":[0,"cell-selection-api-reference"],"isEnterprise":[0,true]}]]]}]]]}],[0,{"type":[0,"group"],"title":[0,"Editing"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Overview"],"path":[0,"cell-editing"]}],[0,{"type":[0,"item"],"title":[0,"Start / Stop Editing"],"path":[0,"cell-editing-start-stop"]}],[0,{"type":[0,"item"],"title":[0,"Parsing Values"],"path":[0,"value-parsers"]}],[0,{"type":[0,"item"],"title":[0,"Saving Values"],"path":[0,"value-setters"]}],[0,{"type":[0,"item"],"title":[0,"Edit Components"],"path":[0,"cell-editors"]}],[0,{"type":[0,"item"],"title":[0,"Provided Cell Editors"],"path":[0,"provided-cell-editors"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Text Editor"],"path":[0,"provided-cell-editors-text"]}],[0,{"type":[0,"item"],"title":[0,"Large Text Editor"],"path":[0,"provided-cell-editors-large-text"]}],[0,{"type":[0,"item"],"title":[0,"Select Editor"],"path":[0,"provided-cell-editors-select"]}],[0,{"type":[0,"item"],"title":[0,"Rich Select Editor"],"path":[0,"provided-cell-editors-rich-select"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Number Editor"],"path":[0,"provided-cell-editors-number"]}],[0,{"type":[0,"item"],"title":[0,"Date Editors"],"path":[0,"provided-cell-editors-date"]}],[0,{"type":[0,"item"],"title":[0,"Checkbox Editor"],"path":[0,"provided-cell-editors-checkbox"]}]]]}],[0,{"type":[0,"item"],"title":[0,"Undo / Redo Edits"],"path":[0,"undo-redo-edits"]}],[0,{"type":[0,"item"],"title":[0,"Full Row"],"path":[0,"cell-editing-full-row"]}]]]}],[0,{"type":[0,"group"],"title":[0,"Updating Data"],"path":[0,"data-update"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Row Data"],"path":[0,"data-update-row-data"]}],[0,{"type":[0,"item"],"title":[0,"Single Row / Cell"],"path":[0,"data-update-single-row-cell"]}],[0,{"type":[0,"item"],"title":[0,"Transactions"],"path":[0,"data-update-transactions"]}],[0,{"type":[0,"item"],"title":[0,"High Frequency"],"path":[0,"data-update-high-frequency"]}]]]}],[0,{"type":[0,"group"],"title":[0,"Interactivity"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Keyboard Navigation"],"path":[0,"keyboard-navigation"]}],[0,{"type":[0,"item"],"title":[0,"Touch"],"path":[0,"touch"]}],[0,{"type":[0,"item"],"title":[0,"Accessibility (ARIA)"],"path":[0,"accessibility"]}],[0,{"type":[0,"item"],"title":[0,"RTL Text Direction"],"path":[0,"rtl"]}],[0,{"type":[0,"item"],"title":[0,"Localisation"],"path":[0,"localisation"]}]]]}]]]}],[0,{"title":[0,"Advanced Features"],"children":[1,[[0,{"type":[0,"group"],"title":[0,"Row Grouping"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Overview"],"path":[0,"grouping"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Grouping Data"],"path":[0,"grouping-data"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Group Display Types"],"path":[0,"grouping-display-types"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Single Column"],"path":[0,"grouping-single-group-column"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Multiple Columns"],"path":[0,"grouping-multiple-group-columns"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Group Rows"],"path":[0,"grouping-group-rows"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"item"],"title":[0,"Row Group Panel"],"path":[0,"grouping-group-panel"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Expanding Groups"],"path":[0,"grouping-opening-groups"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Hierarchy Selection"],"path":[0,"grouping-row-selection"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Sorting"],"path":[0,"grouping-sorting"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"group"],"title":[0,"Aggregation"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Overview"],"path":[0,"aggregation"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Configure Columns"],"path":[0,"aggregation-columns"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Custom Functions"],"path":[0,"aggregation-custom-functions"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Total Rows"],"path":[0,"aggregation-total-rows"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Filtering "],"path":[0,"aggregation-filtering"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"group"],"title":[0,"Pivoting"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Overview"],"path":[0,"pivoting"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Pivot Result Columns"],"path":[0,"pivoting-result-columns"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Pivot Column Groups"],"path":[0,"pivoting-column-groups"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Pivot Totals"],"path":[0,"pivoting-totals"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"group"],"title":[0,"Tree Data"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Overview"],"path":[0,"tree-data"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Supplying Data"],"path":[0,"tree-data-data"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Data Paths"],"path":[0,"tree-data-paths"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Nested Records"],"path":[0,"tree-data-nesting"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"item"],"title":[0,"Group Column"],"path":[0,"tree-data-group-column"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Expanding Groups"],"path":[0,"tree-data-opening-groups"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Tree Selection"],"path":[0,"tree-data-selection"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Filtering"],"path":[0,"tree-data-filtering"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"group"],"title":[0,"Master Detail"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Overview"],"path":[0,"master-detail"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Detail Grids"],"path":[0,"master-detail-grids"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Detail Height"],"path":[0,"master-detail-height"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Detail Refresh"],"path":[0,"master-detail-refresh"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Master Rows"],"path":[0,"master-detail-master-rows"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Nesting"],"path":[0,"master-detail-nesting"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Custom Detail"],"path":[0,"master-detail-custom-detail"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Other"],"path":[0,"master-detail-other"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"group"],"title":[0,"Accessories"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Tool Panels"],"path":[0,"tool-panel"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Side Bar"],"path":[0,"side-bar"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Columns Tool Panel"],"path":[0,"tool-panel-columns"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Filters Tool Panel"],"path":[0,"tool-panel-filters"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Custom Panel"],"path":[0,"component-tool-panel"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"item"],"title":[0,"Column Menu"],"path":[0,"column-menu"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Context Menu"],"path":[0,"context-menu"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Menu Item Component"],"path":[0,"component-menu-item"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Status Bar"],"path":[0,"status-bar"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Overlays"],"path":[0,"overlays"]}]]]}],[0,{"type":[0,"group"],"title":[0,"Server-Side Data"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Row Models"],"path":[0,"row-models"]}],[0,{"type":[0,"item"],"title":[0,"Server-Side Row Model"],"path":[0,"server-side-model"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"API Reference"],"path":[0,"server-side-model-api-reference"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Datasource"],"path":[0,"server-side-model-datasource"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Configuration"],"path":[0,"server-side-model-configuration"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Sorting"],"path":[0,"server-side-model-sorting"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Filtering"],"path":[0,"server-side-model-filtering"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Row Grouping"],"path":[0,"server-side-model-grouping"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Pivoting"],"path":[0,"server-side-model-pivoting"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Pagination"],"path":[0,"server-side-model-pagination"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Row Selection"],"path":[0,"server-side-model-selection"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Loading Component"],"path":[0,"component-loading-cell-renderer"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Changing Columns"],"path":[0,"server-side-model-changing-columns"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Updating Data"],"path":[0,"server-side-model-updating"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Refresh"],"path":[0,"server-side-model-updating-refresh"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Single Row Updates"],"path":[0,"server-side-model-updating-single-row"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Transactions"],"path":[0,"server-side-model-updating-transactions"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"item"],"title":[0,"Load Retry"],"path":[0,"server-side-model-retry"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Row Height"],"path":[0,"server-side-model-row-height"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Master Detail"],"path":[0,"server-side-model-master-detail"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Tree Data"],"path":[0,"server-side-model-tree-data"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Example Node.js & MySQL"],"path":[0,"server-side-operations-nodejs"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Example GraphQL & MySQL"],"path":[0,"server-side-operations-graphql"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Example Java & Oracle"],"path":[0,"server-side-operations-oracle"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Example Java & Apache"],"path":[0,"server-side-operations-spark"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"item"],"title":[0,"Infinite Row Model"],"path":[0,"infinite-scrolling"]}],[0,{"type":[0,"item"],"title":[0,"Viewport Row Model"],"path":[0,"viewport"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"group"],"title":[0,"Import & Export"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"CSV Export"],"path":[0,"csv-export"]}],[0,{"type":[0,"item"],"title":[0,"Excel Export"],"path":[0,"excel-export"],"isEnterprise":[0,true],"children":[1,[[0,{"type":[0,"item"],"title":[0,"API Reference"],"path":[0,"excel-export-api"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Styles"],"path":[0,"excel-export-styles"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Formulas"],"path":[0,"excel-export-formulas"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Extra Content"],"path":[0,"excel-export-extra-content"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Customising Content"],"path":[0,"excel-export-customising-content"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Images"],"path":[0,"excel-export-images"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Excel Tables"],"path":[0,"excel-export-tables"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Multiple Sheets"],"path":[0,"excel-export-multiple-sheets"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Rows"],"path":[0,"excel-export-rows"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Columns"],"path":[0,"excel-export-columns"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Freezing Content"],"path":[0,"excel-export-freeze"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Data Types"],"path":[0,"excel-export-data-types"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Hyperlinks"],"path":[0,"excel-export-hyperlinks"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Master Detail"],"path":[0,"excel-export-master-detail"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Page Setup"],"path":[0,"excel-export-page-setup"],"isEnterprise":[0,true]}]]]}],[0,{"type":[0,"item"],"title":[0,"Clipboard"],"path":[0,"clipboard"],"isEnterprise":[0,true]}],[0,{"type":[0,"item"],"title":[0,"Drag & Drop"],"path":[0,"drag-and-drop"]}],[0,{"type":[0,"item"],"title":[0,"Printing"],"path":[0,"printing"]}],[0,{"type":[0,"item"],"title":[0,"Import Excel"],"path":[0,"excel-import"]}]]]}],[0,{"type":[0,"group"],"title":[0,"Performance"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"DOM Virtualisation"],"path":[0,"dom-virtualisation"]}],[0,{"type":[0,"item"],"title":[0,"Value Cache"],"path":[0,"value-cache"]}],[0,{"type":[0,"item"],"title":[0,"Row Animation"],"path":[0,"row-animation"]}],[0,{"type":[0,"item"],"title":[0,"Massive Row Count"],"path":[0,"massive-row-count"]}],[0,{"type":[0,"item"],"title":[0,"Scrolling Performance"],"path":[0,"scrolling-performance"]}],[0,{"type":[0,"item"],"title":[0,"NgZone"],"path":[0,"angular-ngzone"],"frameworks":[1,[[0,"angular"]]]}]]]}]]]}],[0,{"type":[0,"item"],"title":[0,"Miscellaneous"],"children":[1,[[0,{"type":[0,"group"],"title":[0,"Migration"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Upgrading to AG Grid 33.1"],"path":[0,"upgrading-to-ag-grid-33-1"]}],[0,{"type":[0,"item"],"title":[0,"Upgrading to AG Grid 33"],"path":[0,"upgrading-to-ag-grid-33"]}],[0,{"type":[0,"item"],"title":[0,"Upgrading to AG Grid 32.3"],"path":[0,"upgrading-to-ag-grid-32-3"]}],[0,{"type":[0,"item"],"title":[0,"Upgrading to AG Grid 32.2.1"],"path":[0,"upgrading-to-ag-grid-32-2-1"]}],[0,{"type":[0,"item"],"title":[0,"Upgrading to AG Grid 32.1"],"path":[0,"upgrading-to-ag-grid-32-1"]}],[0,{"type":[0,"item"],"title":[0,"Upgrading to AG Grid 32"],"path":[0,"upgrading-to-ag-grid-32"]}],[0,{"type":[0,"item"],"title":[0,"Upgrading to AG Grid 31.3"],"path":[0,"upgrading-to-ag-grid-31-3"]}],[0,{"type":[0,"item"],"title":[0,"Upgrading to AG Grid 31.2"],"path":[0,"upgrading-to-ag-grid-31-2"]}],[0,{"type":[0,"item"],"title":[0,"Upgrading to AG Grid 31.1"],"path":[0,"upgrading-to-ag-grid-31-1"]}],[0,{"type":[0,"item"],"title":[0,"Upgrading to AG Grid 31"],"path":[0,"upgrading-to-ag-grid-31"]}],[0,{"type":[0,"item"],"title":[0,"Upgrading to Older Versions"],"path":[0,"upgrading-to-older-versions"]}],[0,{"type":[0,"item"],"title":[0,"Codemods"],"path":[0,"codemods"]}]]]}],[0,{"type":[0,"group"],"title":[0,"Other"],"children":[1,[[0,{"type":[0,"item"],"title":[0,"Context"],"path":[0,"context"]}],[0,{"type":[0,"item"],"title":[0,"Change Detection"],"path":[0,"change-detection"]}],[0,{"type":[0,"item"],"title":[0,"Custom Components"],"path":[0,"components"]}],[0,{"type":[0,"item"],"title":[0,"Aligned Grids"],"path":[0,"aligned-grids"]}]]]}]]]}]]]}" ssr="" client="load" opts="{"name":"Header","value":true}" await-children=""><header class="_docsPageHeader_cs9nc_1"><div id="top" class="_docsPageTitle_cs9nc_5"><div class="_pageTitleContainer_cs9nc_20"><div class="_pageTitleGroup_cs9nc_38"><h1><span class="_headerFramework_cs9nc_49">React Data Grid</span>Server-Side Operations With Java & Spark</h1></div><div><button type="button" role="combobox" aria-controls="radix-:r1R9:" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" tabindex="0" aria-label="Framework selector" class="_trigger_65kp2_1 _large_65kp2_1"><span style="pointer-events:none"><span class="_frameworkItem_192zo_7"><img src="/_astro/react.CtDRhtxt.svg" alt="react logo" class="_frameworkLogo_192zo_1"/>React</span></span><span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down _chevronDown_65kp2_105"><path d="m6 9 6 6 6-6"></path></svg></span></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div></div><span class="_enterpriseLabel_cs9nc_62">Enterprise<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 32 32" size="32" class="_icon_1jqgc_1 icon"><path d="M16 2c7.727 0 14 6.273 14 14s-6.273 14-14 14S2 23.727 2 16 8.273 2 16 2Zm.005 3c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11Z"></path><path d="M12.226 16.507c0 .549.12 1.05.36 1.502.24.452.554.839.945 1.158.39.32.842.568 1.357.745a4.862 4.862 0 0 0 1.596.267c.746 0 1.393-.174 1.944-.52a6.25 6.25 0 0 0 1.516-1.37l1.81 1.384c-1.33 1.721-3.193 2.58-5.588 2.58-.994 0-1.895-.168-2.702-.504a5.878 5.878 0 0 1-2.049-1.397 6.196 6.196 0 0 1-1.291-2.103 7.422 7.422 0 0 1-.452-2.62c0-.94.164-1.815.492-2.623a6.511 6.511 0 0 1 1.357-2.102 6.189 6.189 0 0 1 2.062-1.397A6.64 6.64 0 0 1 16.192 9c1.117 0 2.062.197 2.834.586.771.391 1.406.901 1.903 1.532a6.04 6.04 0 0 1 1.078 2.128c.221.79.332 1.592.332 2.407v.853H12.226Zm7.559-1.917a5.041 5.041 0 0 0-.254-1.464 3.22 3.22 0 0 0-.678-1.157 3.13 3.13 0 0 0-1.13-.772c-.453-.187-.98-.28-1.585-.28a3.93 3.93 0 0 0-3.633 2.381 3.26 3.26 0 0 0-.279 1.292h7.559Z"></path></svg></span></div></header></astro-island><div class="_pageSections_cb2ib_29"><article><p>Learn how to perform server-side operations using Apache Spark with a complete reference implementation.</p><p>In recent years analysts and data scientists are requesting browser based applications for big data analytics. This data is often widely dispersed in different systems and large file storage volumes.</p><p>This guide will show how to combine Apache Spark's powerful server side transformations with AG Grid's <a href="/react-data-grid/server-side-model/">Server-Side Row Model</a> to create interactive reports for big data analytics.</p><p>We will develop an Olympic Medals application that demonstrates how data can be lazy-loaded as required, even when performing group, filter, sort and pivot operations.</p><div class="alert _alert_1p97w_1 _warning_1p97w_40"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M16 23a1.5 1.5 0 101.5 1.5A1.5 1.5 0 0016 23zM15 12H17V21H15z"></path><path d="M29,30H3a1,1,0,0,1-.8872-1.4614l13-25a1,1,0,0,1,1.7744,0l13,25A1,1,0,0,1,29,30ZM4.6507,28H27.3493l.002-.0033L16.002,6.1714h-.004L4.6487,27.9967Z"></path></svg><div><p>The reference implementation covered in this guide is for demonstration purposes only. If you use this in production it comes with no warranty or support.</p></div></div><p>The source code can be found here: <a href="https://github.com/ag-grid/ag-grid-server-side-apache-spark-example">https://github.com/ag-grid/ag-grid-server-side-apache-spark-example</a></p><h2 id="overview"> Overview <a aria-label="Heading link" href="#overview" class="_docsHeaderIcon_15ivl_1"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path><path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path></svg></a> </h2><p>Apache Spark has quickly become a popular choice for iterative data processing and reporting in a big data context. This is largely due to its ability to cache distributed datasets in memory for faster execution times.</p><h3 id="dataframes"> DataFrames <a aria-label="Heading link" href="#dataframes" class="_docsHeaderIcon_15ivl_1"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path><path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path></svg></a> </h3><p>The Apache Spark SQL library contains a distributed collection called a <a href="https://spark.apache.org/docs/latest/sql-programming-guide.html#datasets-and-dataframes">DataFrame</a> which represents data as a table with rows and named columns. Its distributed nature means large datasets can span many computers to increase storage and parallel execution.</p><p>In our example we will create a DataFrame from a single CSV file and cache it in memory for successive transformations. In real-world applications data will typically be sourced from many input systems and files.</p><h3 id="transformations"> Transformations <a aria-label="Heading link" href="#transformations" class="_docsHeaderIcon_15ivl_1"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path><path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path></svg></a> </h3><p>With our application data loaded into a DataFrame we can then use API calls to perform data transformations. It's important to note that transformations just specify the processing that will occur when triggered by an action such as <em>count</em> or <em>collect</em>.</p><p>The following diagram illustrates the pipeline of transformations we will be performing in our application:</p><astro-island uid="ZJdLJF" prefix="r54" component-url="/_astro/ImageCaption.CejSIaqp.js" component-export="ImageCaption" renderer-url="/_astro/client.5kNSwotS.js" props="{"imageSrc":[0,"/_astro/spark-transformations.DpEbxEvU.png"],"alt":[0,"Spark"],"darkModeImageSrc":[0],"gifStillImageSrc":[0],"gifDarkModeStillImageSrc":[0],"captionHtml":[0,""],"isGif":[0,false],"constrained":[0,true],"enableDarkModeFilter":[0,true]}" ssr="" client="load" opts="{"name":"ImageCaption","value":true}" await-children=""><div class="_imageCaption_mqav2_1 image-caption _constrained_mqav2_20 _darkmodeFilter_mqav2_35"><img src="/_astro/spark-transformations.DpEbxEvU.png" class="_image_mqav2_1" alt="Spark"/></div></astro-island><p>Each of these individual transformations will be described in detail throughout this guide.</p><p>Before proceeding with this guide be sure to review the <a href="/react-data-grid/server-side-operations-oracle/#overview">Row Model Overview</a> as it provides some context for choosing the Server-Side Row Model for big data applications.</p><h2 id="prerequisites"> Prerequisites <a aria-label="Heading link" href="#prerequisites" class="_docsHeaderIcon_15ivl_1"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path><path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path></svg></a> </h2><p>It is assumed the reader is already familiar with Java, Maven, Spring Boot and Apache Spark.</p><p>This example was tested using the following versions:</p><ul><li>ag-grid-enterprise (v18.0.0)</li><li>Java(TM) SE Runtime Environment (build 1.8.0_162-b12)</li><li>Java HotSpot(TM) 64-Bit Server VM (build 25.162-b12, mixed mode)</li><li>Apache Maven (3.5.2)</li><li>Apache Spark Core 2.11(v2.2.1)</li><li>Apache Spark SQL 2.11(v2.2.1)</li></ul><h2 id="download-and-install"> Download and Install <a aria-label="Heading link" href="#download-and-install" class="_docsHeaderIcon_15ivl_1"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path><path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path></svg></a> </h2><p>Clone the example project using:</p><pre class="code language-bash"><code><span class="token function">git</span> clone https://github.com/ag-grid/ag-grid-server-side-apache-spark-example.git </code></pre><p>Navigate into the project directory:</p><pre class="code language-bash"><code><span class="token builtin class-name">cd</span> ag-grid-server-side-apache-spark-example </code></pre><p>Install project dependencies and build project using:</p><pre class="code language-bash"><code>mvn clean <span class="token function">install</span> </code></pre><p>To confirm all went well you should see the following maven output:</p><astro-island uid="1RJ7LA" prefix="r55" component-url="/_astro/ImageCaption.CejSIaqp.js" component-export="ImageCaption" renderer-url="/_astro/client.5kNSwotS.js" props="{"imageSrc":[0,"/_astro/mvn-success.DwRBnc2b.png"],"alt":[0,"MVN"],"darkModeImageSrc":[0],"gifStillImageSrc":[0],"gifDarkModeStillImageSrc":[0],"captionHtml":[0,""],"isGif":[0,false],"constrained":[0,true],"enableDarkModeFilter":[0,true]}" ssr="" client="load" opts="{"name":"ImageCaption","value":true}" await-children=""><div class="_imageCaption_mqav2_1 image-caption _constrained_mqav2_20 _darkmodeFilter_mqav2_35"><img src="/_astro/mvn-success.DwRBnc2b.png" class="_image_mqav2_1" alt="MVN"/></div></astro-island><h2 id="spark-configuration"> Spark Configuration <a aria-label="Heading link" href="#spark-configuration" class="_docsHeaderIcon_15ivl_1"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path><path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path></svg></a> </h2><p>The example application is configured to run in local mode as shown below:</p><pre class="code language-java"><code><span class="token comment">// src/main/java/com/ag/grid/enterprise/spark/demo/service/OlympicMedalsService.java</span> <span class="token class-name">SparkConf</span> sparkConf <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SparkConf</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">setAppName</span><span class="token punctuation">(</span><span class="token string">"OlympicMedals"</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">setMaster</span><span class="token punctuation">(</span><span class="token string">"local[*]"</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">"spark.sql.shuffle.partitions"</span><span class="token punctuation">,</span> <span class="token string">"2"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre><p>By default the <code>spark.sql.shuffle.partitions</code> is set to 200. This will result in performance degradation when in local mode. It has been arbitrarily set to 2 partitions, however when in cluster mode this should be increased to enable parallelism and prevent out of memory exceptions.</p><h2 id="setup-data"> Setup Data <a aria-label="Heading link" href="#setup-data" class="_docsHeaderIcon_15ivl_1"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path><path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path></svg></a> </h2><p>The project includes a small dataset contained within the following CSV file: <code>src/main/resources/data/result.csv</code></p><p>The <code>OlympicMedalDataLoader</code> utility has been provided to generate a larger dataset however:</p><pre class="code language-java"><code><span class="token comment">// src/test/java/util/OlympicMedalDataLoader.java</span> <span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">OlympicMedalDataLoader</span> <span class="token punctuation">{</span> <span class="token keyword">private</span> <span class="token keyword">static</span> <span class="token class-name">String</span> <span class="token constant">FILENAME</span> <span class="token operator">=</span> <span class="token string">"src/main/resources/data/result.csv"</span><span class="token punctuation">;</span> <span class="token keyword">private</span> <span class="token keyword">static</span> <span class="token keyword">int</span> <span class="token constant">BATCH_SIZE</span> <span class="token operator">=</span> <span class="token number">10_000_000</span><span class="token punctuation">;</span> <span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token keyword">void</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token class-name">String</span><span class="token punctuation">[</span><span class="token punctuation">]</span> args<span class="token punctuation">)</span> <span class="token keyword">throws</span> <span class="token class-name">IOException</span> <span class="token punctuation">{</span> <span class="token class-name">Files</span><span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token class-name">Paths</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token constant">FILENAME</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token class-name">Iterable</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">String</span><span class="token punctuation">></span></span><span class="token punctuation">)</span> <span class="token class-name">IntStream</span> <span class="token punctuation">.</span><span class="token function">range</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token constant">BATCH_SIZE</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">mapToObj</span><span class="token punctuation">(</span>i <span class="token operator">-></span> <span class="token function">randomResult</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">::</span><span class="token function">iterator</span><span class="token punctuation">,</span> <span class="token constant">APPEND</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">}</span> </code></pre><p>When executed it will append an additional 10 million records to <code>results.csv</code>, however you can modify this by changing the <code>BATCH_SIZE</code>.</p><h2 id="run-the-app"> Run the App <a aria-label="Heading link" href="#run-the-app" class="_docsHeaderIcon_15ivl_1"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path><path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path></svg></a> </h2><p>From the project root run:</p><pre class="code language-bash"><code>mvn spring-boot:run </code></pre><p>If successful you should see something like this:</p><astro-island uid="1um10J" prefix="r56" component-url="/_astro/ImageCaption.CejSIaqp.js" component-export="ImageCaption" renderer-url="/_astro/client.5kNSwotS.js" props="{"imageSrc":[0,"/_astro/tomcat-started.Djn5Gnub.png"],"alt":[0,"Tomcat"],"darkModeImageSrc":[0],"gifStillImageSrc":[0],"gifDarkModeStillImageSrc":[0],"captionHtml":[0,""],"isGif":[0,false],"constrained":[0,true],"enableDarkModeFilter":[0,true]}" ssr="" client="load" opts="{"name":"ImageCaption","value":true}" await-children=""><div class="_imageCaption_mqav2_1 image-caption _constrained_mqav2_20 _darkmodeFilter_mqav2_35"><img src="/_astro/tomcat-started.Djn5Gnub.png" class="_image_mqav2_1" alt="Tomcat"/></div></astro-island><p>To test the application point your browser to <a href="http://localhost:9090">http://localhost:9090</a></p><h2 id="server-side-get-rows-request"> Server-Side Get Rows Request <a aria-label="Heading link" href="#server-side-get-rows-request" class="_docsHeaderIcon_15ivl_1"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path><path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path></svg></a> </h2><p>Our Java service will use the following request:</p><pre class="code language-java"><code><span class="token comment">// src/main/java/com/ag/grid/enterprise/spark/demo/request/ServerSideGetRowsRequest.java</span> <span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">ServerSideGetRowsRequest</span> <span class="token keyword">implements</span> <span class="token class-name">Serializable</span> <span class="token punctuation">{</span> <span class="token keyword">private</span> <span class="token keyword">int</span> startRow<span class="token punctuation">,</span> endRow<span class="token punctuation">;</span> <span class="token comment">// row group columns</span> <span class="token keyword">private</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">ColumnVO</span><span class="token punctuation">></span></span> rowGroupCols<span class="token punctuation">;</span> <span class="token comment">// value columns</span> <span class="token keyword">private</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">ColumnVO</span><span class="token punctuation">></span></span> valueCols<span class="token punctuation">;</span> <span class="token comment">// pivot columns</span> <span class="token keyword">private</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">ColumnVO</span><span class="token punctuation">></span></span> pivotCols<span class="token punctuation">;</span> <span class="token comment">// true if pivot mode is on, otherwise false</span> <span class="token keyword">private</span> <span class="token keyword">boolean</span> pivotMode<span class="token punctuation">;</span> <span class="token comment">// what groups the user is viewing</span> <span class="token keyword">private</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">String</span><span class="token punctuation">></span></span> groupKeys<span class="token punctuation">;</span> <span class="token comment">// if filtering, what the filter model is</span> <span class="token keyword">private</span> <span class="token class-name">Map</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">String</span><span class="token punctuation">,</span> <span class="token class-name">ColumnFilter</span><span class="token punctuation">></span></span> filterModel<span class="token punctuation">;</span> <span class="token comment">// if sorting, what the sort model is</span> <span class="token keyword">private</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">SortModel</span><span class="token punctuation">></span></span> sortModel<span class="token punctuation">;</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">}</span> </code></pre><p>We will discuss this in detail throughout this guide, however for more details see: <a href="/react-data-grid/server-side-model-datasource/">Server-Side Datasource</a>.</p><h2 id="service-controller"> Service Controller <a aria-label="Heading link" href="#service-controller" class="_docsHeaderIcon_15ivl_1"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path><path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path></svg></a> </h2><p>Our service shall contain a single endpoint <code>/getRows</code> which accepts the request defined above:</p><pre class="code language-java"><code><span class="token comment">// src/main/java/com/ag/grid/enterprise/spark/demo/controller/OlympicMedalsController.java</span> <span class="token annotation punctuation">@RestController</span> <span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">OlympicMedalsController</span> <span class="token punctuation">{</span> <span class="token annotation punctuation">@Autowired</span> <span class="token keyword">private</span> <span class="token class-name">OlympicMedalDao</span> medalDao<span class="token punctuation">;</span> <span class="token annotation punctuation">@RequestMapping</span><span class="token punctuation">(</span>method <span class="token operator">=</span> <span class="token class-name">RequestMethod</span><span class="token punctuation">.</span><span class="token constant">POST</span><span class="token punctuation">,</span> value <span class="token operator">=</span> <span class="token string">"/getRows"</span><span class="token punctuation">)</span> <span class="token keyword">public</span> <span class="token class-name">ResponseEntity</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">String</span><span class="token punctuation">></span></span> <span class="token function">getRows</span><span class="token punctuation">(</span><span class="token annotation punctuation">@RequestBody</span> <span class="token class-name">ServerSideGetRowsRequest</span> request<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token class-name">DataResult</span> data <span class="token operator">=</span> medalDao<span class="token punctuation">.</span><span class="token function">getData</span><span class="token punctuation">(</span>request<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">ResponseEntity</span><span class="token generics"><span class="token punctuation"><</span><span class="token punctuation">></span></span><span class="token punctuation">(</span><span class="token function">asJsonResponse</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token class-name">HttpStatus</span><span class="token punctuation">.</span><span class="token constant">OK</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">}</span> </code></pre><p>The <code>OlympicMedalsController</code> makes use of the <a href="https://docs.spring.io/spring/docs/current/spring-framework-reference/web.html#mvc-controller">Spring Controller</a> to handle HTTP and JSON Serialisation.</p><h2 id="data-access"> Data Access <a aria-label="Heading link" href="#data-access" class="_docsHeaderIcon_15ivl_1"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path><path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path></svg></a> </h2><p>The <code>OlympicMedalDao</code> contains most of the application code. It interacts directly with Spark and uses the APIs to perform the various data transformations.</p><p>Upon initialisation it creates a Spark session using the configuration discussed above. It then reads in the data from <code>result.csv</code> to create a DataFrame which is cached for subsequent transformations.</p><pre class="code language-java"><code><span class="token comment">// src/main/java/com/ag/grid/enterprise/spark/demo/dao/OlympicMedalDao.java</span> <span class="token keyword">private</span> <span class="token class-name">SparkSession</span> sparkSession<span class="token punctuation">;</span> <span class="token annotation punctuation">@PostConstruct</span> <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token class-name">SparkConf</span> sparkConf <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SparkConf</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">setAppName</span><span class="token punctuation">(</span><span class="token string">"OlympicMedals"</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">setMaster</span><span class="token punctuation">(</span><span class="token string">"local[*]"</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">"spark.sql.shuffle.partitions"</span><span class="token punctuation">,</span> <span class="token string">"1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>sparkSession <span class="token operator">=</span> <span class="token class-name">SparkSession</span><span class="token punctuation">.</span><span class="token function">builder</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">config</span><span class="token punctuation">(</span>sparkConf<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">getOrCreate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token class-name">Dataset</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">Row</span><span class="token punctuation">></span></span> dataFrame <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>sparkSession<span class="token punctuation">.</span><span class="token function">read</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">option</span><span class="token punctuation">(</span><span class="token string">"header"</span><span class="token punctuation">,</span> <span class="token string">"true"</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">option</span><span class="token punctuation">(</span><span class="token string">"inferSchema"</span><span class="token punctuation">,</span> <span class="token string">"true"</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">csv</span><span class="token punctuation">(</span><span class="token string">"src/main/resources/data/result.csv"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> dataFrame<span class="token punctuation">.</span><span class="token function">cache</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> dataFrame<span class="token punctuation">.</span><span class="token function">createOrReplaceTempView</span><span class="token punctuation">(</span><span class="token string">"medals"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre><p>A view containing the medals data is created using <code>dataFrame.createOrReplaceTempView("medals")</code>. This is lazily evaluated but the backing dataset has been previously cached using <code>dataFrame.cache()</code>.</p><p>As a DataFrame is a structured collection we have supplied the <code>inferSchema=true</code> option to allow Spark to infer the schema using the first few rows contained in <code>result.csv</code>.</p><p>The rest of this class will be discussed in the remaining sections.</p><h2 id="filtering"> Filtering <a aria-label="Heading link" href="#filtering" class="_docsHeaderIcon_15ivl_1"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path><path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path></svg></a> </h2><p>Our example will make use of the grid's <code>NumberFilter</code> and <code>SetFilter</code> <a href="/react-data-grid/filtering/">Column Filters</a>. The corresponding server-side classes are as follows:</p><pre class="code language-java"><code><span class="token comment">// src/main/java/com/ag/grid/enterprise/spark/demo/filter/NumberColumnFilter.java</span> <span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">NumberColumnFilter</span> <span class="token keyword">extends</span> <span class="token class-name">ColumnFilter</span> <span class="token punctuation">{</span> <span class="token keyword">private</span> <span class="token class-name">String</span> type<span class="token punctuation">;</span> <span class="token keyword">private</span> <span class="token class-name">Integer</span> filter<span class="token punctuation">;</span> <span class="token keyword">private</span> <span class="token class-name">Integer</span> filterTo<span class="token punctuation">;</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">}</span> </code></pre><pre class="code language-java"><code><span class="token comment">// src/main/java/com/ag/grid/enterprise/spark/demo/filter/SetColumnFilter.java</span> <span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">SetColumnFilter</span> <span class="token keyword">extends</span> <span class="token class-name">ColumnFilter</span> <span class="token punctuation">{</span> <span class="token keyword">private</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">String</span><span class="token punctuation">></span></span> values<span class="token punctuation">;</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">}</span> </code></pre><p>These filters are supplied per column in the <code>ServerSideGetRowsRequest</code> via the following property:</p><pre class="code language-java"><code><span class="token class-name">Map</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">String</span><span class="token punctuation">,</span> <span class="token class-name">ColumnFilter</span><span class="token punctuation">></span></span> filterModel<span class="token punctuation">;</span> </code></pre><p>As these filters differ in structure it is necessary to perform some specialised deserialisation using the Type Annotations provided by the <a href="https://github.com/FasterXML/jackson-annotations">Jackson Annotations</a> project.</p><p>When the <code>filterModel</code> property is deserialized, we will need to select the appropriate concrete <code>ColumnFilter</code> as shown below:</p><pre class="code language-java"><code><span class="token comment">// src/main/java/com/ag/grid/enterprise/spark/demo/filter/ColumnFilter.java</span> <span class="token annotation punctuation">@JsonTypeInfo</span><span class="token punctuation">(</span> use <span class="token operator">=</span> <span class="token class-name">JsonTypeInfo<span class="token punctuation">.</span>Id</span><span class="token punctuation">.</span><span class="token constant">NAME</span><span class="token punctuation">,</span> include <span class="token operator">=</span> <span class="token class-name">JsonTypeInfo<span class="token punctuation">.</span>As</span><span class="token punctuation">.</span><span class="token constant">PROPERTY</span><span class="token punctuation">,</span> property <span class="token operator">=</span> <span class="token string">"filterType"</span><span class="token punctuation">)</span> <span class="token annotation punctuation">@JsonSubTypes</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token annotation punctuation">@JsonSubTypes.Type</span><span class="token punctuation">(</span>value <span class="token operator">=</span> <span class="token class-name">NumberColumnFilter</span><span class="token punctuation">.</span><span class="token keyword">class</span><span class="token punctuation">,</span> name <span class="token operator">=</span> <span class="token string">"number"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token annotation punctuation">@JsonSubTypes.Type</span><span class="token punctuation">(</span>value <span class="token operator">=</span> <span class="token class-name">SetColumnFilter</span><span class="token punctuation">.</span><span class="token keyword">class</span><span class="token punctuation">,</span> name <span class="token operator">=</span> <span class="token string">"set"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token keyword">public</span> <span class="token keyword">abstract</span> <span class="token keyword">class</span> <span class="token class-name">ColumnFilter</span> <span class="token punctuation">{</span> <span class="token class-name">String</span> filterType<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre><p>Here we are using the <code>filterType</code> property to determine which concrete filter class needs to be associated with the <code>ColumnFilter</code> entries in the <code>filterModel</code> map.</p><p>The filters are supplied to the DataFrame using standard SQL syntax as shown below:</p><pre class="code language-java"><code><span class="token comment">// src/main/java/com/ag/grid/enterprise/spark/demo/dao/OlympicMedalDao.java</span> <span class="token class-name">Stream</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">String</span><span class="token punctuation">></span></span> columnFilters <span class="token operator">=</span> filterModel<span class="token punctuation">.</span><span class="token function">entrySet</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">stream</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>applyColumnFilters<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token class-name">Stream</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">String</span><span class="token punctuation">></span></span> groupToFilter <span class="token operator">=</span> <span class="token function">zip</span><span class="token punctuation">(</span>groupKeys<span class="token punctuation">.</span><span class="token function">stream</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> rowGroups<span class="token punctuation">.</span><span class="token function">stream</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>key<span class="token punctuation">,</span> group<span class="token punctuation">)</span> <span class="token operator">-></span> group <span class="token operator">+</span> <span class="token string">" = '"</span> <span class="token operator">+</span> key <span class="token operator">+</span> <span class="token string">"'"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token class-name">String</span> filters <span class="token operator">=</span> <span class="token function">concat</span><span class="token punctuation">(</span>columnFilters<span class="token punctuation">,</span> groupToFilter<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">collect</span><span class="token punctuation">(</span><span class="token function">joining</span><span class="token punctuation">(</span><span class="token string">" AND "</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> df<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>filters<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre><h2 id="grouping"> Grouping <a aria-label="Heading link" href="#grouping" class="_docsHeaderIcon_15ivl_1"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path><path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path></svg></a> </h2><p>Grouping is performed using <code>Dataset.groupBy()</code> as shown below:</p><pre class="code language-java"><code><span class="token comment">// src/main/java/com/ag/grid/enterprise/spark/demo/dao/OlympicMedalDao.java</span> <span class="token keyword">private</span> <span class="token class-name">Dataset</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">Row</span><span class="token punctuation">></span></span> <span class="token function">groupBy</span><span class="token punctuation">(</span><span class="token class-name">Dataset</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">Row</span><span class="token punctuation">></span></span> df<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>isGrouping<span class="token punctuation">)</span> <span class="token keyword">return</span> df<span class="token punctuation">;</span> <span class="token class-name">Column</span><span class="token punctuation">[</span><span class="token punctuation">]</span> groups <span class="token operator">=</span> rowGroups<span class="token punctuation">.</span><span class="token function">stream</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">limit</span><span class="token punctuation">(</span>groupKeys<span class="token punctuation">.</span><span class="token function">size</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>functions<span class="token operator">::</span><span class="token function">col</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">toArray</span><span class="token punctuation">(</span><span class="token class-name">Column</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">::</span><span class="token keyword">new</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token function">agg</span><span class="token punctuation">(</span><span class="token function">pivot</span><span class="token punctuation">(</span>df<span class="token punctuation">.</span><span class="token function">groupBy</span><span class="token punctuation">(</span>groups<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre><p>The result of a <code>groupBy()</code> transformation is a <code>RelationalGroupedDataset</code> collection. This is supplied to the <code>pivot</code> and <code>agg</code> functions.</p><h2 id="pivoting"> Pivoting <a aria-label="Heading link" href="#pivoting" class="_docsHeaderIcon_15ivl_1"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path><path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path></svg></a> </h2><p>Spark SQL provides a convenient pivot function to create pivot tables, however as it currently only supports pivots on a single column our example will only allow pivoting on the sport column. This is enabled on the <code>ColDef.enablePivot=true</code> in the client code.</p><pre class="code language-java"><code><span class="token comment">// src/main/java/com/ag/grid/enterprise/spark/demo/service/OlympicMedalsService.java</span> <span class="token keyword">private</span> <span class="token class-name">RelationalGroupedDataset</span> <span class="token function">pivot</span><span class="token punctuation">(</span><span class="token class-name">RelationalGroupedDataset</span> groupedDf<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>isPivotMode<span class="token punctuation">)</span> <span class="token keyword">return</span> groupedDf<span class="token punctuation">;</span> <span class="token comment">// spark sql only supports a single pivot column</span> <span class="token class-name">Optional</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">String</span><span class="token punctuation">></span></span> pivotColumn <span class="token operator">=</span> pivotColumns<span class="token punctuation">.</span><span class="token function">stream</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token class-name">ColumnVO</span><span class="token operator">::</span><span class="token function">getField</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">findFirst</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> pivotColumn<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>groupedDf<span class="token operator">::</span><span class="token function">pivot</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">orElse</span><span class="token punctuation">(</span>groupedDf<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre><p>The result of a <code>pivot()</code> transformation is also a <code>RelationalGroupedDataset</code>.</p><p>From the DataFrame we will use the inferred schema to determine the generated pivot result columns:</p><pre class="code language-java"><code><span class="token keyword">private</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">String</span><span class="token punctuation">></span></span> <span class="token function">getPivotResultColumns</span><span class="token punctuation">(</span><span class="token class-name">Dataset</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">Row</span><span class="token punctuation">></span></span> df<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">stream</span><span class="token punctuation">(</span>df<span class="token punctuation">.</span><span class="token function">schema</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fieldNames</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>f <span class="token operator">-></span> <span class="token operator">!</span>rowGroups<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span>f<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// filter out group fields</span> <span class="token punctuation">.</span><span class="token function">collect</span><span class="token punctuation">(</span><span class="token function">toList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre><p>These will need to be returned to the grid in the following property:</p><pre class="code language-java"><code><span class="token class-name">List</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">String</span><span class="token punctuation">></span></span> pivotResultColumnFields<span class="token punctuation">;</span> </code></pre><p>Our client code will then use these column fields to generate the corresponding <code>ColDefs</code> like so:</p><pre class="code language-js"><code><span class="token comment">// src/main/resources/static/main.js</span> <span class="token keyword">let</span> <span class="token function-variable function">createPivotResultColumns</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">fields<span class="token punctuation">,</span> valueCols</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> pivotResultColumns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">addColDef</span><span class="token punctuation">(</span><span class="token parameter">colId<span class="token punctuation">,</span> parts<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>parts<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">let</span> first <span class="token operator">=</span> parts<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">let</span> existing <span class="token operator">=</span> res<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">r</span> <span class="token operator">=></span> r<span class="token punctuation">.</span>groupId <span class="token operator">===</span> first<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>existing<span class="token punctuation">)</span> <span class="token punctuation">{</span> existing<span class="token punctuation">[</span><span class="token string">'children'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">addColDef</span><span class="token punctuation">(</span>colId<span class="token punctuation">,</span> parts<span class="token punctuation">,</span> existing<span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> colDef <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">let</span> isGroup <span class="token operator">=</span> parts<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>isGroup<span class="token punctuation">)</span> <span class="token punctuation">{</span> colDef<span class="token punctuation">[</span><span class="token string">'groupId'</span><span class="token punctuation">]</span> <span class="token operator">=</span> first<span class="token punctuation">;</span> colDef<span class="token punctuation">[</span><span class="token string">'headerName'</span><span class="token punctuation">]</span> <span class="token operator">=</span> first<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> valueCol <span class="token operator">=</span> valueCols<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">r</span> <span class="token operator">=></span> r<span class="token punctuation">.</span>field <span class="token operator">===</span> first<span class="token punctuation">)</span><span class="token punctuation">;</span> colDef<span class="token punctuation">[</span><span class="token string">'colId'</span><span class="token punctuation">]</span> <span class="token operator">=</span> colId<span class="token punctuation">;</span> colDef<span class="token punctuation">[</span><span class="token string">'headerName'</span><span class="token punctuation">]</span> <span class="token operator">=</span> valueCol<span class="token punctuation">.</span>displayName<span class="token punctuation">;</span> colDef<span class="token punctuation">[</span><span class="token string">'field'</span><span class="token punctuation">]</span> <span class="token operator">=</span> colId<span class="token punctuation">;</span> colDef<span class="token punctuation">[</span><span class="token string">'type'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'measure'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">let</span> children <span class="token operator">=</span> <span class="token function">addColDef</span><span class="token punctuation">(</span>colId<span class="token punctuation">,</span> parts<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> children<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span> <span class="token operator">?</span> colDef<span class="token punctuation">[</span><span class="token string">'children'</span><span class="token punctuation">]</span> <span class="token operator">=</span> children <span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">;</span> res<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>colDef<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> res<span class="token punctuation">;</span> <span class="token punctuation">}</span> fields<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> fields<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">field</span> <span class="token operator">=></span> <span class="token function">addColDef</span><span class="token punctuation">(</span>field<span class="token punctuation">,</span> field<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'_'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> pivotResultColumns<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> pivotResultColumns<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre><p>In order for the grid to show these newly created columns an explicit API call is required:</p><pre class="code language-js"><code>api<span class="token punctuation">.</span><span class="token function">setPivotResultColumns</span><span class="token punctuation">(</span>pivotResultColumns<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre><h2 id="aggregation"> Aggregation <a aria-label="Heading link" href="#aggregation" class="_docsHeaderIcon_15ivl_1"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path><path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path></svg></a> </h2><p>Aggregations are performed using <code>RelationalGroupedDataset.agg()</code> as shown below:</p><pre class="code language-java"><code><span class="token comment">// src/main/java/com/ag/grid/enterprise/spark/demo/dao/OlympicMedalDao.java</span> <span class="token keyword">private</span> <span class="token class-name">Dataset</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">Row</span><span class="token punctuation">></span></span> <span class="token function">agg</span><span class="token punctuation">(</span><span class="token class-name">RelationalGroupedDataset</span> groupedDf<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>valueColumns<span class="token punctuation">.</span><span class="token function">isEmpty</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span> groupedDf<span class="token punctuation">.</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token class-name">Column</span><span class="token punctuation">[</span><span class="token punctuation">]</span> aggCols <span class="token operator">=</span> valueColumns <span class="token punctuation">.</span><span class="token function">stream</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token class-name">ColumnVO</span><span class="token operator">::</span><span class="token function">getField</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>field <span class="token operator">-></span> <span class="token function">sum</span><span class="token punctuation">(</span>field<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">alias</span><span class="token punctuation">(</span>field<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">toArray</span><span class="token punctuation">(</span><span class="token class-name">Column</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">::</span><span class="token keyword">new</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> groupedDf<span class="token punctuation">.</span><span class="token function">agg</span><span class="token punctuation">(</span>aggCols<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token function">copyOfRange</span><span class="token punctuation">(</span>aggCols<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> aggCols<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre><p>Note that our example only requires the <code>sum()</code> aggregation function.</p><h2 id="sorting"> Sorting <a aria-label="Heading link" href="#sorting" class="_docsHeaderIcon_15ivl_1"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path><path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path></svg></a> </h2><p>The <code>ServerSideGetRowsRequest</code> contains the following attribute to determine which columns to sort by:</p><pre class="code language-java"><code><span class="token keyword">private</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">SortModel</span><span class="token punctuation">></span></span> sortModel<span class="token punctuation">;</span> </code></pre><p>The <code>SortModel</code> contains the <code>colId</code> (i.e. 'athlete') and the <code>sort</code> type (i.e. 'asc')</p><pre class="code language-java"><code><span class="token comment">// src/main/java/com/ag/grid/enterprise/spark/demo/request/SortModel.java</span> <span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">SortModel</span> <span class="token keyword">implements</span> <span class="token class-name">Serializable</span> <span class="token punctuation">{</span> <span class="token keyword">private</span> <span class="token class-name">String</span> colId<span class="token punctuation">;</span> <span class="token keyword">private</span> <span class="token class-name">String</span> sort<span class="token punctuation">;</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">}</span> </code></pre><p>The <code>Dataset.orderBy()</code> function accepts an array of Spark <code>Column</code> objects that specify the sort order as shown below:</p><pre class="code language-java"><code><span class="token comment">// src/main/java/com/ag/grid/enterprise/spark/demo/service/OlympicMedalsService.java</span> <span class="token keyword">private</span> <span class="token class-name">Dataset</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">Row</span><span class="token punctuation">></span></span> <span class="token function">orderBy</span><span class="token punctuation">(</span><span class="token class-name">Dataset</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">Row</span><span class="token punctuation">></span></span> df<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token class-name">Stream</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">String</span><span class="token punctuation">></span></span> groupCols <span class="token operator">=</span> rowGroups<span class="token punctuation">.</span><span class="token function">stream</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">limit</span><span class="token punctuation">(</span>groupKeys<span class="token punctuation">.</span><span class="token function">size</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token class-name">Stream</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">String</span><span class="token punctuation">></span></span> valCols <span class="token operator">=</span> valueColumns<span class="token punctuation">.</span><span class="token function">stream</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token class-name">ColumnVO</span><span class="token operator">::</span><span class="token function">getField</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">String</span><span class="token punctuation">></span></span> allCols <span class="token operator">=</span> <span class="token function">concat</span><span class="token punctuation">(</span>groupCols<span class="token punctuation">,</span> valCols<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">collect</span><span class="token punctuation">(</span><span class="token function">toList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token class-name">Column</span><span class="token punctuation">[</span><span class="token punctuation">]</span> cols <span class="token operator">=</span> sortModel<span class="token punctuation">.</span><span class="token function">stream</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>model <span class="token operator">-></span> <span class="token class-name">Pair</span><span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>model<span class="token punctuation">.</span><span class="token function">getColId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> model<span class="token punctuation">.</span><span class="token function">getSort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">equals</span><span class="token punctuation">(</span><span class="token string">"asc"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>p <span class="token operator">-></span> <span class="token operator">!</span>isGrouping <span class="token operator">||</span> allCols<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span><span class="token function">getKey</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>p <span class="token operator">-></span> p<span class="token punctuation">.</span><span class="token function">getValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token function">col</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span><span class="token function">getKey</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">asc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token function">col</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span><span class="token function">getKey</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">desc</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">toArray</span><span class="token punctuation">(</span><span class="token class-name">Column</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">::</span><span class="token keyword">new</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> df<span class="token punctuation">.</span><span class="token function">orderBy</span><span class="token punctuation">(</span>cols<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre><h2 id="infinite-scrolling"> Infinite Scrolling <a aria-label="Heading link" href="#infinite-scrolling" class="_docsHeaderIcon_15ivl_1"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path><path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path></svg></a> </h2><p>The <code>ServerSideGetRowsRequest</code> contains the following attributes to determine the range to return:</p><pre class="code language-java"><code><span class="token keyword">private</span> <span class="token keyword">int</span> startRow<span class="token punctuation">,</span> endRow<span class="token punctuation">;</span> </code></pre><p>The <code>OlympicMedalsService</code> uses this information when limiting the results.</p><p>As Spark SQL doesn't provide <code>LIMIT OFFSET</code> capabilities like most SQL databases, we will need to do a bit of work in order to efficiently limit the results whilst ensuring we don't exceed local memory.</p><p>The strategy used in the code below is to convert the supplied Data Frame into a Resilient Distributed Dataset (RDD) in order to introduce a row index using <code>zipWithIndex()</code>. The row index can then be used to filter the rows according to the requested range.</p><pre class="code language-java"><code><span class="token comment">// src/main/java/com/ag/grid/enterprise/spark/demo/service/OlympicMedalsService.java</span> <span class="token keyword">private</span> <span class="token class-name">DataResult</span> <span class="token function">paginate</span><span class="token punctuation">(</span><span class="token class-name">Dataset</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">Row</span><span class="token punctuation">></span></span> df<span class="token punctuation">,</span> <span class="token keyword">int</span> startRow<span class="token punctuation">,</span> <span class="token keyword">int</span> endRow<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// save schema to recreate data frame</span> <span class="token class-name">StructType</span> schema <span class="token operator">=</span> df<span class="token punctuation">.</span><span class="token function">schema</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// obtain row count</span> <span class="token keyword">long</span> rowCount <span class="token operator">=</span> df<span class="token punctuation">.</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// convert data frame to RDD and introduce a row index so we can filter results by range</span> <span class="token class-name">JavaPairRDD</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">Row</span><span class="token punctuation">,</span> <span class="token class-name">Long</span><span class="token punctuation">></span></span> zippedRows <span class="token operator">=</span> df<span class="token punctuation">.</span><span class="token function">toJavaRDD</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">zipWithIndex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// filter rows by row index for the requested range (startRow, endRow)</span> <span class="token class-name">JavaRDD</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">Row</span><span class="token punctuation">></span></span> filteredRdd <span class="token operator">=</span> zippedRows<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>pair <span class="token operator">-></span> pair<span class="token punctuation">.</span>_2 <span class="token operator">>=</span> startRow <span class="token operator">&&</span> pair<span class="token punctuation">.</span>_2 <span class="token operator"><=</span> endRow<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>pair <span class="token operator">-></span> pair<span class="token punctuation">.</span>_1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// collect paginated results into a list of json objects</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">String</span><span class="token punctuation">></span></span> paginatedResults <span class="token operator">=</span> sparkSession<span class="token punctuation">.</span><span class="token function">sqlContext</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">createDataFrame</span><span class="token punctuation">(</span>filteredRdd<span class="token punctuation">,</span> schema<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">toJSON</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">collectAsList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// calculate last row</span> <span class="token keyword">long</span> lastRow <span class="token operator">=</span> endRow <span class="token operator">>=</span> rowCount <span class="token operator">?</span> rowCount <span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">DataResult</span><span class="token punctuation">(</span>paginatedResults<span class="token punctuation">,</span> lastRow<span class="token punctuation">,</span> <span class="token function">getPivotResultColumns</span><span class="token punctuation">(</span>df<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre><p>The RDD is then converted back into a Data Frame using the original schema previously stored. Once the rows have been filtered we can then safely collect the reduced results as a list of JSON objects. This ensures we don't run out of memory by bringing back all the results.</p><p>Finally we determine the <code>lastRow</code> and retrieve the pivot result columns which contain will be required by the client code to generate <code>ColDefs</code> when in pivot mode.</p><h2 id="conclusion"> Conclusion <a aria-label="Heading link" href="#conclusion" class="_docsHeaderIcon_15ivl_1"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path d="M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"></path><path d="M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"></path></svg></a> </h2><p>In this guide we presented a reference implementation for integrating the Server-Side Row Model with a Java service connected to Apache Spark. This included all necessary configuration and install instructions.</p><p>A high level overview was given to illustrate how the distributed DataFrame is transformed in the example application before providing details of how to achieve the following server-side operations:</p><ul><li>Filtering</li><li>Grouping</li><li>Pivoting</li><li>Aggregation</li><li>Sorting</li><li>Infinite Scrolling</li></ul></article></div></div><astro-island uid="aJxnL" prefix="r2" component-url="/_astro/SideNavigation.j67Zu3Bl.js" component-export="SideNavigation" renderer-url="/_astro/client.5kNSwotS.js" props="{"headings":[1,[[0,{"slug":[0,"top"],"depth":[0,1],"text":[0,"Server-Side Operations With Java & Spark"]}],[0,{"depth":[0,2],"slug":[0,"overview"],"text":[0,"Overview"]}],[0,{"depth":[0,3],"slug":[0,"dataframes"],"text":[0,"DataFrames"]}],[0,{"depth":[0,3],"slug":[0,"transformations"],"text":[0,"Transformations"]}],[0,{"depth":[0,2],"slug":[0,"prerequisites"],"text":[0,"Prerequisites"]}],[0,{"depth":[0,2],"slug":[0,"download-and-install"],"text":[0,"Download and Install"]}],[0,{"depth":[0,2],"slug":[0,"spark-configuration"],"text":[0,"Spark Configuration"]}],[0,{"depth":[0,2],"slug":[0,"setup-data"],"text":[0,"Setup Data"]}],[0,{"depth":[0,2],"slug":[0,"run-the-app"],"text":[0,"Run the App"]}],[0,{"depth":[0,2],"slug":[0,"server-side-get-rows-request"],"text":[0,"Server-Side Get Rows Request"]}],[0,{"depth":[0,2],"slug":[0,"service-controller"],"text":[0,"Service Controller"]}],[0,{"depth":[0,2],"slug":[0,"data-access"],"text":[0,"Data Access"]}],[0,{"depth":[0,2],"slug":[0,"filtering"],"text":[0,"Filtering"]}],[0,{"depth":[0,2],"slug":[0,"grouping"],"text":[0,"Grouping"]}],[0,{"depth":[0,2],"slug":[0,"pivoting"],"text":[0,"Pivoting"]}],[0,{"depth":[0,2],"slug":[0,"aggregation"],"text":[0,"Aggregation"]}],[0,{"depth":[0,2],"slug":[0,"sorting"],"text":[0,"Sorting"]}],[0,{"depth":[0,2],"slug":[0,"infinite-scrolling"],"text":[0,"Infinite Scrolling"]}],[0,{"depth":[0,2],"slug":[0,"conclusion"],"text":[0,"Conclusion"]}]]],"delayedScrollSpy":[0,false]}" ssr="" client="load" opts="{"name":"SideNavigation","value":true}" await-children=""><nav class="_sideNav_tnl9m_1"><div><ul><li class="_level1_tnl9m_106"><a href="#top" class="nav-link">Server-Side Operations With Java &聽Spark</a></li><li class="_level2_tnl9m_119"><a href="#overview" class="nav-link">Overview</a></li><li class="_level3_tnl9m_111"><a href="#dataframes" class="nav-link">DataFrames</a></li><li class="_level3_tnl9m_111"><a href="#transformations" class="nav-link">Transformations</a></li><li class="_level2_tnl9m_119"><a href="#prerequisites" class="nav-link">Prerequisites</a></li><li class="_level2_tnl9m_119"><a href="#download-and-install" class="nav-link">Download and聽Install</a></li><li class="_level2_tnl9m_119"><a href="#spark-configuration" class="nav-link">Spark聽Configuration</a></li><li class="_level2_tnl9m_119"><a href="#setup-data" class="nav-link">Setup聽Data</a></li><li class="_level2_tnl9m_119"><a href="#run-the-app" class="nav-link">Run the聽App</a></li><li class="_level2_tnl9m_119"><a href="#server-side-get-rows-request" class="nav-link">Server-Side Get Rows聽Request</a></li><li class="_level2_tnl9m_119"><a href="#service-controller" class="nav-link">Service聽Controller</a></li><li class="_level2_tnl9m_119"><a href="#data-access" class="nav-link">Data聽Access</a></li><li class="_level2_tnl9m_119"><a href="#filtering" class="nav-link">Filtering</a></li><li class="_level2_tnl9m_119"><a href="#grouping" class="nav-link">Grouping</a></li><li class="_level2_tnl9m_119"><a href="#pivoting" class="nav-link">Pivoting</a></li><li class="_level2_tnl9m_119"><a href="#aggregation" class="nav-link">Aggregation</a></li><li class="_level2_tnl9m_119"><a href="#sorting" class="nav-link">Sorting</a></li><li class="_level2_tnl9m_119"><a href="#infinite-scrolling" class="nav-link">Infinite聽Scrolling</a></li><li class="_level2_tnl9m_119"><a href="#conclusion" class="nav-link">Conclusion</a></li></ul></div></nav></astro-island></div> </div> <footer class="_footer_1rqr6_2"><div class="_footerColumns_1rqr6_31 layout-grid"><div class="_menuColumn_1rqr6_43"><div class="_logoContainer_1rqr6_123"><a href="/" aria-label="Home" class="_headerLogo_1agp5_36"><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"></path><rect x="119.067" y="5.6" width="4.959" height="5.849"></rect><rect x="119.067" y="14.373" width="4.959" height="19.644"></rect><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><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><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><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"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="logo-mark" 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; } </style><rect class="aqua right-1" x="51" y="10" width="7" height="8"></rect><path class="aqua right-1" d="M58,10l-17,0l-8,8l25,0l0,-8Z"></path><rect class="orange right-2" x="36" y="22" width="7" height="8"></rect><path class="orange right-2" d="M43,30l0,-7.995l-14,-0l-8.008,7.995l22.008,0Z"></path><rect class="red right-3" x="24" y="34" width="7" height="8"></rect><path class="red right-3" d="M13,38.01l4,-4.01l14,0l0,8l-18,0l0,-3.99Z"></path><rect class="grey left-1" x="11" y="6" width="7" height="8"></rect><path class="grey left-1" d="M41,10l-4,4l-26,0l0,-8l30,0l0,4Z"></path><rect class="grey left-2" x="16" y="18" width="7" height="8"></rect><path class="grey left-2" d="M16,26l9,0l8,-8l-17,-0l0,8Z"></path><rect class="grey left-3" x="6" y="30" width="7" height="8"></rect><path class="grey left-3" d="M6,37.988l7,0.012l7.992,-8l-14.992,-0.047l-0,8.035Z"></path></svg></a></div><p class="text-sm">漏 AG Grid Ltd. 2015-2025</p><p class="text-sm">AG Grid Ltd registered in the United Kingdom. Company聽No.聽07318192.</p></div><div class="_menuColumn_1rqr6_43"><h2>Documentation</h2><ul class="list-style-none"><li><a href="/documentation">Getting Started</a></li><li><a href="/changelog">Changelog</a></li><li><a href="/pipeline">Pipeline</a></li><li><a href="/documentation-archive">Documentation Archive</a></li></ul></div><div class="_menuColumn_1rqr6_43"><h2>Support & Community</h2><ul class="list-style-none"><li><a href="https://stackoverflow.com/questions/tagged/ag-grid" target="_blank" rel="noreferrer">Stack Overflow</a></li><li><a href="/license-pricing">License & Pricing</a></li><li><a href="https://ag-grid.zendesk.com/" target="_blank" rel="noreferrer">Support via Zendesk</a></li></ul></div><div class="_menuColumn_1rqr6_43"><h2>The Company</h2><ul class="list-style-none"><li><a href="https://www.ag-grid.com/charts/">AG Charts</a></li><li><a href="/about">About</a></li><li><a href="https://blog.ag-grid.com/?_ga=2.213149716.106872681.1607518091-965402545.1605286673">Blog</a></li><li><a href="/privacy">Privacy Policy</a></li><li><a href="/cookies">Cookies Policy</a></li><li><a href="/sitemap">Sitemap</a></li></ul></div><div class="_menuColumn_1rqr6_43"><h2>Follow</h2><ul class="list-style-none"><li><a href="https://github.com/ag-grid/ag-grid"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" 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"></path></svg>GitHub</a></li><li><a href="https://twitter.com/ag_grid"><svg width="1092" height="1075" viewBox="0 0 1092 1075" fill="none" xmlns="http://www.w3.org/2000/svg" size="32" class="_icon_1jqgc_1 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"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>YouTube</a></li><li><a href="https://www.linkedin.com/company/ag-grid"><svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" class="_icon_1jqgc_1 icon" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>LinkedIn</a></li></ul></div></div></footer> </body></html>

CINXE.COM

React Grid: Server-Side Operations With Java & Spark | AG Grid