@hpcc-js/dgrid2 2.3.6 → 2.3.8

package/dist/index.js

@@ -5,8 +5,8 @@
 })(this, (function (exports, common) { 'use strict';
 
     var PKG_NAME = "@hpcc-js/dgrid2";
-    var PKG_VERSION = "2.3.6";
-    var BUILD_VERSION = "2.104.13";
+    var PKG_VERSION = "2.3.8";
+    var BUILD_VERSION = "2.104.18";
 
     /******************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -75,80 +75,40 @@
 
     var t,r$1,u,i,o$1=0,f=[],c=[],e=l$1.__b,a=l$1.__r,v=l$1.diffed,l=l$1.__c,m=l$1.unmount;function d(t,u){l$1.__h&&l$1.__h(r$1,t,o$1||u),o$1=0;var i=r$1.__H||(r$1.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({__V:c}),i.__[t]}function p(n){return o$1=1,y(B$1,n)}function y(n,u,i){var o=d(t++,2);if(o.t=n,!o.__c&&(o.__=[i?i(u):B$1(void 0,u),function(n){var t=o.__N?o.__N[0]:o.__[0],r=o.t(t,n);t!==r&&(o.__N=[r,o.__[1]],o.__c.setState({}));}],o.__c=r$1,!r$1.u)){r$1.u=!0;var f=r$1.shouldComponentUpdate;r$1.shouldComponentUpdate=function(n,t,r){if(!o.__c.__H)return !0;var u=o.__c.__H.__.filter(function(n){return n.__c});if(u.every(function(n){return !n.__N}))return !f||f.call(this,n,t,r);var i=!1;return u.forEach(function(n){if(n.__N){var t=n.__[0];n.__=n.__N,n.__N=void 0,t!==n.__[0]&&(i=!0);}}),!(!i&&o.__c.props===n)&&(!f||f.call(this,n,t,r))};}return o.__N||o.__}function h(u,i){var o=d(t++,3);!l$1.__s&&z$1(o.__H,i)&&(o.__=u,o.i=i,r$1.__H.__h.push(o));}function s(u,i){var o=d(t++,4);!l$1.__s&&z$1(o.__H,i)&&(o.__=u,o.i=i,r$1.__h.push(o));}function _$1(n){return o$1=5,F(function(){return {current:n}},[])}function A(n,t,r){o$1=6,s(function(){return "function"==typeof n?(n(t()),function(){return n(null)}):n?(n.current=t(),function(){return n.current=null}):void 0},null==r?r:r.concat(n));}function F(n,r){var u=d(t++,7);return z$1(u.__H,r)?(u.__V=n(),u.i=r,u.__h=n,u.__V):u.__}function T$1(n,t){return o$1=8,F(function(){return n},t)}function q$1(n){var u=r$1.context[n.__c],i=d(t++,9);return i.c=n,u?(null==i.__&&(i.__=!0,u.sub(r$1)),u.props.value):n.__}function b(){for(var t;t=f.shift();)if(t.__P&&t.__H)try{t.__H.__h.forEach(k),t.__H.__h.forEach(w$1),t.__H.__h=[];}catch(r){t.__H.__h=[],l$1.__e(r,t.__v);}}l$1.__b=function(n){"function"!=typeof n.type||n.__m||null===n.__?n.__m||(n.__m=n.__&&n.__.__m?n.__.__m:""):n.__m=(n.__&&n.__.__m?n.__.__m:"")+(n.__&&n.__.__k?n.__.__k.indexOf(n):0),r$1=null,e&&e(n);},l$1.__r=function(n){a&&a(n),t=0;var i=(r$1=n.__c).__H;i&&(u===r$1?(i.__h=[],r$1.__h=[],i.__.forEach(function(n){n.__N&&(n.__=n.__N),n.__V=c,n.__N=n.i=void 0;})):(i.__h.forEach(k),i.__h.forEach(w$1),i.__h=[])),u=r$1;},l$1.diffed=function(t){v&&v(t);var o=t.__c;o&&o.__H&&(o.__H.__h.length&&(1!==f.push(o)&&i===l$1.requestAnimationFrame||((i=l$1.requestAnimationFrame)||j$1)(b)),o.__H.__.forEach(function(n){n.i&&(n.__H=n.i),n.__V!==c&&(n.__=n.__V),n.i=void 0,n.__V=c;})),u=r$1=null;},l$1.__c=function(t,r){r.some(function(t){try{t.__h.forEach(k),t.__h=t.__h.filter(function(n){return !n.__||w$1(n)});}catch(u){r.some(function(n){n.__h&&(n.__h=[]);}),r=[],l$1.__e(u,t.__v);}}),l&&l(t,r);},l$1.unmount=function(t){m&&m(t);var r,u=t.__c;u&&u.__H&&(u.__H.__.forEach(function(n){try{k(n);}catch(n){r=n;}}),u.__H=void 0,r&&l$1.__e(r,u.__v));};var g$1="function"==typeof requestAnimationFrame;function j$1(n){var t,r=function(){clearTimeout(u),g$1&&cancelAnimationFrame(t),setTimeout(n);},u=setTimeout(r,100);g$1&&(t=requestAnimationFrame(r));}function k(n){var t=r$1,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),r$1=t;}function w$1(n){var t=r$1;n.__c=n.__(),r$1=t;}function z$1(n,t){return !n||n.length!==t.length||t.some(function(t,r){return t!==n[r]})}function B$1(n,t){return "function"==typeof t?t(n):t}
 
-    function g(n,t){for(var e in t)n[e]=t[e];return n}function C(n,t){for(var e in n)if("__source"!==e&&!(e in t))return !0;for(var r in t)if("__source"!==r&&n[r]!==t[r])return !0;return !1}function E(n){this.props=n;}function w(n,e){function r(n){var t=this.props.ref,r=t==n.ref;return !r&&t&&(t.call?t(null):t.current=null),e?!e(this.props,n)||!r:C(this.props,n)}function u(e){return this.shouldComponentUpdate=r,h$1(n,e)}return u.displayName="Memo("+(n.displayName||n.name)+")",u.prototype.isReactComponent=!0,u.__f=!0,u}(E.prototype=new d$1).isPureReactComponent=!0,E.prototype.shouldComponentUpdate=function(n,t){return C(this.props,n)||C(this.state,t)};var R=l$1.__b;l$1.__b=function(n){n.type&&n.type.__f&&n.ref&&(n.props.ref=n.ref,n.ref=null),R&&R(n);};var x="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911;function N(n){function t(t){var e=g({},t);return delete e.ref,n(e,t.ref||null)}return t.$$typeof=x,t.render=t,t.prototype.isReactComponent=t.__f=!0,t.displayName="ForwardRef("+(n.displayName||n.name)+")",t}var O=l$1.__e;l$1.__e=function(n,t,e,r){if(n.then)for(var u,o=t;o=o.__;)if((u=o.__c)&&u.__c)return null==t.__e&&(t.__e=e.__e,t.__k=e.__k),u.__c(n,t);O(n,t,e,r);};var T=l$1.unmount;function I(n,t,e){return n&&(n.__c&&n.__c.__H&&(n.__c.__H.__.forEach(function(n){"function"==typeof n.__c&&n.__c();}),n.__c.__H=null),null!=(n=g({},n)).__c&&(n.__c.__P===e&&(n.__c.__P=t),n.__c=null),n.__k=n.__k&&n.__k.map(function(n){return I(n,t,e)})),n}function L(n,t,e){return n&&(n.__v=null,n.__k=n.__k&&n.__k.map(function(n){return L(n,t,e)}),n.__c&&n.__c.__P===t&&(n.__e&&e.insertBefore(n.__e,n.__d),n.__c.__e=!0,n.__c.__P=e)),n}function U(){this.__u=0,this.t=null,this.__b=null;}function D(n){var t=n.__.__c;return t&&t.__a&&t.__a(n)}function M(){this.u=null,this.o=null;}l$1.unmount=function(n){var t=n.__c;t&&t.__R&&t.__R(),t&&!0===n.__h&&(n.type=null),T&&T(n);},(U.prototype=new d$1).__c=function(n,t){var e=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(e);var u=D(r.__v),o=!1,i=function(){o||(o=!0,e.__R=null,u?u(l):l());};e.__R=i;var l=function(){if(!--r.__u){if(r.state.__a){var n=r.state.__a;r.__v.__k[0]=L(n,n.__c.__P,n.__c.__O);}var t;for(r.setState({__a:r.__b=null});t=r.t.pop();)t.forceUpdate();}},c=!0===t.__h;r.__u++||c||r.setState({__a:r.__b=r.__v.__k[0]}),n.then(i,i);},U.prototype.componentWillUnmount=function(){this.t=[];},U.prototype.render=function(n,e){if(this.__b){if(this.__v.__k){var r=document.createElement("div"),o=this.__v.__k[0].__c;this.__v.__k[0]=I(this.__b,r,o.__O=o.__P);}this.__b=null;}var i=e.__a&&h$1(p$1,null,n.fallback);return i&&(i.__h=null),[h$1(p$1,null,e.__a?null:n.children),i]};var V=function(n,t,e){if(++e[1]===e[0]&&n.o.delete(t),n.props.revealOrder&&("t"!==n.props.revealOrder[0]||!n.o.size))for(e=n.u;e;){for(;e.length>3;)e.pop()();if(e[1]<e[0])break;n.u=e=e[2];}};(M.prototype=new d$1).__a=function(n){var t=this,e=D(t.__v),r=t.o.get(n);return r[0]++,function(u){var o=function(){t.props.revealOrder?(r.push(u),V(t,n,r)):u();};e?e(o):o();}},M.prototype.render=function(n){this.u=null,this.o=new Map;var t=x$1(n.children);n.revealOrder&&"b"===n.revealOrder[0]&&t.reverse();for(var e=t.length;e--;)this.o.set(t[e],this.u=[1,0,this.u]);return n.children},M.prototype.componentDidUpdate=M.prototype.componentDidMount=function(){var n=this;this.o.forEach(function(t,e){V(n,e,t);});};var j="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,z=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,B="undefined"!=typeof document,H=function(n){return ("undefined"!=typeof Symbol&&"symbol"==typeof Symbol()?/fil|che|rad/i:/fil|che|ra/i).test(n)};function Z(n,t,e){return null==t.__k&&(t.textContent=""),P(n,t),"function"==typeof e&&e(),n?n.__c:null}d$1.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(t){Object.defineProperty(d$1.prototype,t,{configurable:!0,get:function(){return this["UNSAFE_"+t]},set:function(n){Object.defineProperty(this,t,{configurable:!0,writable:!0,value:n});}});});var q=l$1.event;function G(){}function J(){return this.cancelBubble}function K(){return this.defaultPrevented}l$1.event=function(n){return q&&(n=q(n)),n.persist=G,n.isPropagationStopped=J,n.isDefaultPrevented=K,n.nativeEvent=n};var X={configurable:!0,get:function(){return this.class}},nn=l$1.vnode;l$1.vnode=function(n){var t=n.type,e=n.props,u=e;if("string"==typeof t){var o=-1===t.indexOf("-");for(var i in u={},e){var l=e[i];B&&"children"===i&&"noscript"===t||"value"===i&&"defaultValue"in e&&null==l||("defaultValue"===i&&"value"in e&&null==e.value?i="value":"download"===i&&!0===l?l="":/ondoubleclick/i.test(i)?i="ondblclick":/^onchange(textarea|input)/i.test(i+t)&&!H(e.type)?i="oninput":/^onfocus$/i.test(i)?i="onfocusin":/^onblur$/i.test(i)?i="onfocusout":/^on(Ani|Tra|Tou|BeforeInp|Compo)/.test(i)?i=i.toLowerCase():o&&z.test(i)?i=i.replace(/[A-Z0-9]/g,"-$&").toLowerCase():null===l&&(l=void 0),/^oninput$/i.test(i)&&(i=i.toLowerCase(),u[i]&&(i="oninputCapture")),u[i]=l);}"select"==t&&u.multiple&&Array.isArray(u.value)&&(u.value=x$1(e.children).forEach(function(n){n.props.selected=-1!=u.value.indexOf(n.props.value);})),"select"==t&&null!=u.defaultValue&&(u.value=x$1(e.children).forEach(function(n){n.props.selected=u.multiple?-1!=u.defaultValue.indexOf(n.props.value):u.defaultValue==n.props.value;})),n.props=u,e.class!=e.className&&(X.enumerable="className"in e,null!=e.className&&(u.class=e.className),Object.defineProperty(u,"className",X));}n.$$typeof=j,nn&&nn(n);};var tn=l$1.__r;l$1.__r=function(n){tn&&tn(n),n.__c;};function cn(n){return !!n.__k&&(P(null,n),!0)}
+    function g(n,t){for(var e in t)n[e]=t[e];return n}function C(n,t){for(var e in n)if("__source"!==e&&!(e in t))return !0;for(var r in t)if("__source"!==r&&n[r]!==t[r])return !0;return !1}function E(n){this.props=n;}function w(n,e){function r(n){var t=this.props.ref,r=t==n.ref;return !r&&t&&(t.call?t(null):t.current=null),e?!e(this.props,n)||!r:C(this.props,n)}function u(e){return this.shouldComponentUpdate=r,h$1(n,e)}return u.displayName="Memo("+(n.displayName||n.name)+")",u.prototype.isReactComponent=!0,u.__f=!0,u}(E.prototype=new d$1).isPureReactComponent=!0,E.prototype.shouldComponentUpdate=function(n,t){return C(this.props,n)||C(this.state,t)};var R=l$1.__b;l$1.__b=function(n){n.type&&n.type.__f&&n.ref&&(n.props.ref=n.ref,n.ref=null),R&&R(n);};var x="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911;function N(n){function t(t){var e=g({},t);return delete e.ref,n(e,t.ref||null)}return t.$$typeof=x,t.render=t,t.prototype.isReactComponent=t.__f=!0,t.displayName="ForwardRef("+(n.displayName||n.name)+")",t}var O=l$1.__e;l$1.__e=function(n,t,e,r){if(n.then)for(var u,o=t;o=o.__;)if((u=o.__c)&&u.__c)return null==t.__e&&(t.__e=e.__e,t.__k=e.__k),u.__c(n,t);O(n,t,e,r);};var T=l$1.unmount;function I(n,t,e){return n&&(n.__c&&n.__c.__H&&(n.__c.__H.__.forEach(function(n){"function"==typeof n.__c&&n.__c();}),n.__c.__H=null),null!=(n=g({},n)).__c&&(n.__c.__P===e&&(n.__c.__P=t),n.__c=null),n.__k=n.__k&&n.__k.map(function(n){return I(n,t,e)})),n}function L(n,t,e){return n&&(n.__v=null,n.__k=n.__k&&n.__k.map(function(n){return L(n,t,e)}),n.__c&&n.__c.__P===t&&(n.__e&&e.insertBefore(n.__e,n.__d),n.__c.__e=!0,n.__c.__P=e)),n}function U(){this.__u=0,this.t=null,this.__b=null;}function D(n){var t=n.__.__c;return t&&t.__a&&t.__a(n)}function M(){this.u=null,this.o=null;}l$1.unmount=function(n){var t=n.__c;t&&t.__R&&t.__R(),t&&!0===n.__h&&(n.type=null),T&&T(n);},(U.prototype=new d$1).__c=function(n,t){var e=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(e);var u=D(r.__v),o=!1,i=function(){o||(o=!0,e.__R=null,u?u(l):l());};e.__R=i;var l=function(){if(!--r.__u){if(r.state.__a){var n=r.state.__a;r.__v.__k[0]=L(n,n.__c.__P,n.__c.__O);}var t;for(r.setState({__a:r.__b=null});t=r.t.pop();)t.forceUpdate();}},c=!0===t.__h;r.__u++||c||r.setState({__a:r.__b=r.__v.__k[0]}),n.then(i,i);},U.prototype.componentWillUnmount=function(){this.t=[];},U.prototype.render=function(n,e){if(this.__b){if(this.__v.__k){var r=document.createElement("div"),o=this.__v.__k[0].__c;this.__v.__k[0]=I(this.__b,r,o.__O=o.__P);}this.__b=null;}var i=e.__a&&h$1(p$1,null,n.fallback);return i&&(i.__h=null),[h$1(p$1,null,e.__a?null:n.children),i]};var V=function(n,t,e){if(++e[1]===e[0]&&n.o.delete(t),n.props.revealOrder&&("t"!==n.props.revealOrder[0]||!n.o.size))for(e=n.u;e;){for(;e.length>3;)e.pop()();if(e[1]<e[0])break;n.u=e=e[2];}};(M.prototype=new d$1).__a=function(n){var t=this,e=D(t.__v),r=t.o.get(n);return r[0]++,function(u){var o=function(){t.props.revealOrder?(r.push(u),V(t,n,r)):u();};e?e(o):o();}},M.prototype.render=function(n){this.u=null,this.o=new Map;var t=x$1(n.children);n.revealOrder&&"b"===n.revealOrder[0]&&t.reverse();for(var e=t.length;e--;)this.o.set(t[e],this.u=[1,0,this.u]);return n.children},M.prototype.componentDidUpdate=M.prototype.componentDidMount=function(){var n=this;this.o.forEach(function(t,e){V(n,e,t);});};var j="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,z=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,B="undefined"!=typeof document,H=function(n){return ("undefined"!=typeof Symbol&&"symbol"==typeof Symbol()?/fil|che|rad/i:/fil|che|ra/i).test(n)};function Z(n,t,e){return null==t.__k&&(t.textContent=""),P(n,t),"function"==typeof e&&e(),n?n.__c:null}d$1.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(t){Object.defineProperty(d$1.prototype,t,{configurable:!0,get:function(){return this["UNSAFE_"+t]},set:function(n){Object.defineProperty(this,t,{configurable:!0,writable:!0,value:n});}});});var q=l$1.event;function G(){}function J(){return this.cancelBubble}function K(){return this.defaultPrevented}l$1.event=function(n){return q&&(n=q(n)),n.persist=G,n.isPropagationStopped=J,n.isDefaultPrevented=K,n.nativeEvent=n};var X={configurable:!0,get:function(){return this.class}},nn=l$1.vnode;l$1.vnode=function(n){var t=n.type,e=n.props,u=e;if("string"==typeof t){var o=-1===t.indexOf("-");for(var i in u={},e){var l=e[i];B&&"children"===i&&"noscript"===t||"value"===i&&"defaultValue"in e&&null==l||("defaultValue"===i&&"value"in e&&null==e.value?i="value":"download"===i&&!0===l?l="":/ondoubleclick/i.test(i)?i="ondblclick":/^onchange(textarea|input)/i.test(i+t)&&!H(e.type)?i="oninput":/^onfocus$/i.test(i)?i="onfocusin":/^onblur$/i.test(i)?i="onfocusout":/^on(Ani|Tra|Tou|BeforeInp|Compo)/.test(i)?i=i.toLowerCase():o&&z.test(i)?i=i.replace(/[A-Z0-9]/g,"-$&").toLowerCase():null===l&&(l=void 0),/^oninput$/i.test(i)&&(i=i.toLowerCase(),u[i]&&(i="oninputCapture")),u[i]=l);}"select"==t&&u.multiple&&Array.isArray(u.value)&&(u.value=x$1(e.children).forEach(function(n){n.props.selected=-1!=u.value.indexOf(n.props.value);})),"select"==t&&null!=u.defaultValue&&(u.value=x$1(e.children).forEach(function(n){n.props.selected=u.multiple?-1!=u.defaultValue.indexOf(n.props.value):u.defaultValue==n.props.value;})),n.props=u,e.class!=e.className&&(X.enumerable="className"in e,null!=e.className&&(u.class=e.className),Object.defineProperty(u,"className",X));}n.$$typeof=j,nn&&nn(n);};var tn=l$1.__r;l$1.__r=function(n){tn&&tn(n),n.__c;};function cn(n){return !!n.__k&&(P(null,n),!0)}var sn=function(n,t){return n(t)};
 
     function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
     var _=0;function o(o,e,n,t,f){var l,s,u={};for(s in e)"ref"==s?l=e[s]:u[s]=e[s];var a={type:o,props:u,key:n,ref:l,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:--_,__source:f,__self:t};if("function"==typeof o&&(l=o.defaultProps))for(s in l)void 0===u[s]&&(u[s]=l[s]);return l$1.vnode&&l$1.vnode(a),a}
 
-    function styleInject$1(css, ref) {
-      if ( ref === void 0 ) ref = {};
-      var insertAt = ref.insertAt;
-
-      if (!css || typeof document === 'undefined') { return; }
-
-      var head = document.head || document.getElementsByTagName('head')[0];
-      var style = document.createElement('style');
-      style.type = 'text/css';
-
-      if (insertAt === 'top') {
-        if (head.firstChild) {
-          head.insertBefore(style, head.firstChild);
-        } else {
-          head.appendChild(style);
-        }
-      } else {
-        head.appendChild(style);
-      }
-
-      if (style.styleSheet) {
-        style.styleSheet.cssText = css;
-      } else {
-        style.appendChild(document.createTextNode(css));
-      }
-    }
-
-    var css_248z$f = ".c1wupbe700-beta12{background-color:inherit;border-block-end:1px solid var(--rdg-border-color);border-inline-end:1px solid var(--rdg-border-color);contain:strict;contain:size layout style paint;grid-row-start:var(--rdg-grid-row-start);outline:none;overflow:hidden;overflow:clip;padding-block:0;padding-inline:8px;text-overflow:ellipsis;white-space:nowrap}.c1wupbe700-beta12[aria-selected=true]{outline:2px solid var(--rdg-selection-color);outline-offset:-2px}.cd0kgiy700-beta12 .c1wupbe700-beta12{contain:content}.c1730fa4700-beta12{position:sticky;z-index:1}.c9dpaye700-beta12{box-shadow:calc(2px*var(--rdg-sign)) 0 5px -2px hsla(0,0%,53%,.3)}";
-    styleInject$1(css_248z$f,{"insertAt":"top"});
-
-    const cell = "c1wupbe700-beta12";
+    const cell = "c1wupbe7-0-0-beta-19";
     const cellClassname = `rdg-cell ${cell}`;
-    const cellAutoResizeClassname = "cd0kgiy700-beta12";
-    const cellFrozen = "c1730fa4700-beta12";
+    const cellFrozen = "cd0kgiy7-0-0-beta-19";
     const cellFrozenClassname = `rdg-cell-frozen ${cellFrozen}`;
-    const cellFrozenLast = "c9dpaye700-beta12";
+    const cellFrozenLast = "c1730fa47-0-0-beta-19";
     const cellFrozenLastClassname = `rdg-cell-frozen-last ${cellFrozenLast}`;
 
-    var css_248z$e = ".r104f42s700-beta12{--rdg-color:#000;--rdg-border-color:#ddd;--rdg-summary-border-color:#aaa;--rdg-background-color:#fff;--rdg-header-background-color:#f9f9f9;--rdg-row-hover-background-color:#f5f5f5;--rdg-row-selected-background-color:#dbecfa;--row-selected-hover-background-color:#c9e3f8;--rdg-checkbox-color:#005194;--rdg-checkbox-focus-color:#61b8ff;--rdg-checkbox-disabled-border-color:#ccc;--rdg-checkbox-disabled-background-color:#ddd;--rdg-selection-color:#66afe9;--rdg-font-size:14px;content-visibility:auto;background-color:var(--rdg-background-color);block-size:350px;border:1px solid var(--rdg-border-color);box-sizing:border-box;color:var(--rdg-color);color-scheme:var(--rdg-color-scheme,light dark);contain:strict;contain:size layout style paint;display:grid;font-size:var(--rdg-font-size);overflow:auto;user-select:none}@supports not (contain:strict){.r104f42s700-beta12{position:relative;z-index:0}}.r104f42s700-beta12 *,.r104f42s700-beta12 :after,.r104f42s700-beta12 :before{box-sizing:inherit}.r104f42s700-beta12:before{content:\"\";grid-column:1/-1;grid-row:1/-1}.r104f42s700-beta12.rdg-dark{--rdg-color-scheme:dark;--rdg-color:#ddd;--rdg-border-color:#444;--rdg-summary-border-color:#555;--rdg-background-color:#212121;--rdg-header-background-color:#1b1b1b;--rdg-row-hover-background-color:#171717;--rdg-row-selected-background-color:#1a73bc;--row-selected-hover-background-color:#1768ab;--rdg-checkbox-color:#94cfff;--rdg-checkbox-focus-color:#c7e6ff;--rdg-checkbox-disabled-border-color:#000;--rdg-checkbox-disabled-background-color:#333}.r104f42s700-beta12.rdg-light{--rdg-color-scheme:light}@media (prefers-color-scheme:dark){.r104f42s700-beta12:not(.rdg-light){--rdg-color:#ddd;--rdg-border-color:#444;--rdg-summary-border-color:#555;--rdg-background-color:#212121;--rdg-header-background-color:#1b1b1b;--rdg-row-hover-background-color:#171717;--rdg-row-selected-background-color:#1a73bc;--row-selected-hover-background-color:#1768ab;--rdg-checkbox-color:#94cfff;--rdg-checkbox-focus-color:#c7e6ff;--rdg-checkbox-disabled-border-color:#000;--rdg-checkbox-disabled-background-color:#333}}.v7ly7s700-beta12.r1otpg64700-beta12{cursor:move}.fc4f4zb700-beta12{grid-column:1/-1;pointer-events:none;z-index:4}";
-    styleInject$1(css_248z$e,{"insertAt":"top"});
-
-    const root = "r104f42s700-beta12";
+    const root = "r104f42s7-0-0-beta-19";
     const rootClassname = `rdg ${root}`;
-    const viewportDragging = "v7ly7s700-beta12";
+    const viewportDragging = "v7ly7s7-0-0-beta-19";
     const viewportDraggingClassname = `rdg-viewport-dragging ${viewportDragging}`;
-    const focusSinkClassname = "fc4f4zb700-beta12";
+    const focusSinkClassname = "fc4f4zb7-0-0-beta-19";
 
-    var css_248z$d = ".r1otpg64700-beta12{background-color:var(--rdg-background-color);display:contents;line-height:var(--rdg-row-height)}.r1otpg64700-beta12:hover{background-color:var(--rdg-row-hover-background-color)}.r1otpg64700-beta12[aria-selected=true]{background-color:var(--rdg-row-selected-background-color)}.r1otpg64700-beta12[aria-selected=true]:hover{background-color:var(--row-selected-hover-background-color)}.rel5gk2700-beta12{outline:2px solid var(--rdg-selection-color);outline-offset:-2px}.r1qymf1z700-beta12:before{border-inline-start:2px solid var(--rdg-selection-color);content:\"\";display:inline-block;height:100%;inset-inline-start:0;position:sticky}";
-    styleInject$1(css_248z$d,{"insertAt":"top"});
-
-    const row = "r1otpg64700-beta12";
+    const row = "r1otpg647-0-0-beta-19";
     const rowClassname = `rdg-row ${row}`;
-    const rowSelected = "rel5gk2700-beta12";
+    const rowSelected = "rel5gk27-0-0-beta-19";
     const rowSelectedClassname = `rdg-row-selected`;
-    const rowSelectedWithFrozenCell = "r1qymf1z700-beta12";
-
-    var css_248z$c = ".cd9l4jz700-beta12{align-items:center;cursor:pointer;display:flex;inset:0;justify-content:center;margin-inline-end:1px;position:absolute}.c1noyk41700-beta12{all:unset}.cdwjxv8700-beta12{background-color:var(--rdg-background-color);block-size:20px;border:2px solid var(--rdg-border-color);content:\"\";inline-size:20px}.c1noyk41700-beta12:checked+.cdwjxv8700-beta12{background-color:var(--rdg-checkbox-color);outline:4px solid var(--rdg-background-color);outline-offset:-6px}.c1noyk41700-beta12:focus+.cdwjxv8700-beta12{border-color:var(--rdg-checkbox-focus-color)}.cca4mwn700-beta12{cursor:default}.cca4mwn700-beta12 .cdwjxv8700-beta12{background-color:var(--rdg-checkbox-disabled-background-color);border-color:var(--rdg-checkbox-disabled-border-color)}";
-    styleInject$1(css_248z$c,{"insertAt":"top"});
+    const rowSelectedWithFrozenCell = "r1qymf1z7-0-0-beta-19";
 
-    const checkboxLabel = "cd9l4jz700-beta12";
+    const checkboxLabel = "c8rwwhf7-0-0-beta-19";
     const checkboxLabelClassname = `rdg-checkbox-label ${checkboxLabel}`;
-    const checkboxInput = "c1noyk41700-beta12";
+    const checkboxInput = "c1rb4brs7-0-0-beta-19";
     const checkboxInputClassname = `rdg-checkbox-input ${checkboxInput}`;
-    const checkbox = "cdwjxv8700-beta12";
+    const checkbox = "c1bvvwcc7-0-0-beta-19";
     const checkboxClassname = `rdg-checkbox ${checkbox}`;
-    const checkboxLabelDisabled = "cca4mwn700-beta12";
+    const checkboxLabelDisabled = "c1yg790j7-0-0-beta-19";
     const checkboxLabelDisabledClassname = `rdg-checkbox-label-disabled ${checkboxLabelDisabled}`;
-    const CheckboxFormatter = /*#__PURE__*/N(function CheckboxFormatter({
+    function checkboxFormatter({
       onChange,
       ...props
     }, ref) {
@@ -168,17 +128,15 @@
           className: checkboxClassname
         })]
       });
-    });
+    }
 
     const useLayoutEffect = typeof window === 'undefined' ? h : s;
 
     function useFocusRef(isSelected) {
       const ref = _$1(null);
       useLayoutEffect(() => {
-        var _ref$current;
-
         if (!isSelected) return;
-        (_ref$current = ref.current) == null ? void 0 : _ref$current.focus({
+        ref.current?.focus({
           preventScroll: true
         });
       }, [isSelected]);
@@ -206,19 +164,20 @@
         ref,
         tabIndex
       } = useFocusRef(isCellSelected);
-      const Formatter = useDefaultComponents().checkboxFormatter;
-      return /*#__PURE__*/o(Formatter, {
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        ref: ref,
-        tabIndex: tabIndex,
-        disabled: disabled,
-        checked: value,
-        onChange: onChange
+      const checkboxFormatter = useDefaultComponents().checkboxFormatter;
+      return /*#__PURE__*/o(p$1, {
+        children: checkboxFormatter({
+          'aria-label': ariaLabel,
+          'aria-labelledby': ariaLabelledBy,
+          tabIndex,
+          disabled,
+          checked: value,
+          onChange
+        }, ref)
       });
     }
 
-    function ValueFormatter(props) {
+    function valueFormatter(props) {
       try {
         return /*#__PURE__*/o(p$1, {
           children: props.row[props.column.key]
@@ -228,14 +187,15 @@
       }
     }
 
-    var css_248z$b = ".gch972y700-beta12{outline:none}.cz2qf0d700-beta12{stroke:currentColor;stroke-width:1.5px;fill:transparent;margin-inline-start:4px;vertical-align:middle}.cz2qf0d700-beta12>path{transition:d .1s}";
-    styleInject$1(css_248z$b,{"insertAt":"top"});
-
-    const groupCellContent = "gch972y700-beta12";
+    const groupCellContent = "gb8l2vs7-0-0-beta-19";
     const groupCellContentClassname = `rdg-group-cell-content ${groupCellContent}`;
-    const caret = "cz2qf0d700-beta12";
+    const caret = "c1ggynjl7-0-0-beta-19";
     const caretClassname = `rdg-caret ${caret}`;
-    function ToggleGroupFormatter({
+    function toggleGroupFormatter(props) {
+      return /*#__PURE__*/o(ToggleGroup, { ...props
+      });
+    }
+    function ToggleGroup({
       groupKey,
       isExpanded,
       isCellSelected,
@@ -341,8 +301,16 @@
         });
       },
 
-      formatter: SelectFormatter,
-      groupFormatter: SelectGroupFormatter
+      formatter(props) {
+        return /*#__PURE__*/o(SelectFormatter, { ...props
+        });
+      },
+
+      groupFormatter(props) {
+        return /*#__PURE__*/o(SelectGroupFormatter, { ...props
+        });
+      }
+
     };
 
     function getColSpan(column, lastFrozenColumnIndex, args) {
@@ -355,6 +323,13 @@
       return undefined;
     }
 
+    function scrollIntoView(element) {
+      element?.scrollIntoView({
+        inline: 'nearest',
+        block: 'nearest'
+      });
+    }
+
     const nonInputKeys = new Set(['Unidentified', 'Alt', 'AltGraph', 'CapsLock', 'Control', 'Fn', 'FnLock', 'Meta', 'NumLock', 'ScrollLock', 'Shift', 'Tab', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home', 'PageDown', 'PageUp', 'Insert', 'ContextMenu', 'Escape', 'Pause', 'Play', 'PrintScreen', 'F1', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12']);
     function isCtrlKeyHeldDown(e) {
       return (e.ctrlKey || e.metaKey) && e.key !== 'Control';
@@ -373,6 +348,26 @@
       return false;
     }
 
+    const measuringCellClassname = "m1l09lto7-0-0-beta-19";
+    function renderMeasuringCells(viewportColumns) {
+      return /*#__PURE__*/o(p$1, {
+        children: viewportColumns.map(({
+          key,
+          idx,
+          minWidth,
+          maxWidth
+        }) => /*#__PURE__*/o("div", {
+          className: measuringCellClassname,
+          style: {
+            gridColumnStart: idx + 1,
+            minWidth,
+            maxWidth
+          },
+          "data-measuring-cell-key": key
+        }, key))
+      });
+    }
+
     function isSelectedCellEditable({
       selectedPosition,
       columns,
@@ -388,18 +383,29 @@
     }
     function getSelectedCellColSpan({
       rows,
-      summaryRows,
+      topSummaryRows,
+      bottomSummaryRows,
       rowIdx,
       lastFrozenColumnIndex,
       column,
       isGroupRow
     }) {
-      if (rowIdx === -1) {
+      const topSummaryRowsCount = topSummaryRows?.length ?? 0;
+      const minRowIdx = -1 - topSummaryRowsCount;
+
+      if (rowIdx === minRowIdx) {
         return getColSpan(column, lastFrozenColumnIndex, {
           type: 'HEADER'
         });
       }
 
+      if (topSummaryRows && rowIdx > minRowIdx && rowIdx <= topSummaryRowsCount + minRowIdx) {
+        return getColSpan(column, lastFrozenColumnIndex, {
+          type: 'SUMMARY',
+          row: topSummaryRows[rowIdx + topSummaryRowsCount]
+        });
+      }
+
       if (rowIdx >= 0 && rowIdx < rows.length) {
         const row = rows[rowIdx];
 
@@ -413,10 +419,10 @@
         return undefined;
       }
 
-      if (summaryRows) {
+      if (bottomSummaryRows) {
         return getColSpan(column, lastFrozenColumnIndex, {
           type: 'SUMMARY',
-          row: summaryRows[rowIdx - rows.length]
+          row: bottomSummaryRows[rowIdx - rows.length]
         });
       }
 
@@ -427,7 +433,8 @@
       columns,
       colSpanColumns,
       rows,
-      summaryRows,
+      topSummaryRows,
+      bottomSummaryRows,
       minRowIdx,
       maxRowIdx,
       currentPosition: {
@@ -454,7 +461,8 @@
           if (colIdx > nextIdx) break;
           const colSpan = getSelectedCellColSpan({
             rows,
-            summaryRows,
+            topSummaryRows,
+            bottomSummaryRows,
             rowIdx: nextRowIdx,
             lastFrozenColumnIndex,
             column,
@@ -560,8 +568,7 @@
       round,
       floor,
       sign,
-      abs,
-      ceil
+      abs
     } = Math;
     function assertIsValidKeyGetter(keyGetter) {
       if (typeof keyGetter !== 'function') {
@@ -574,13 +581,15 @@
     }) {
       width = max(width, minWidth);
 
-      if (typeof maxWidth === 'number' && maxWidth > minWidth) {
+      if (typeof maxWidth === 'number' && maxWidth >= minWidth) {
         return min(width, maxWidth);
       }
 
       return width;
     }
 
+    const DEFAULT_COLUMN_WIDTH = 'auto';
+    const DEFAULT_COLUMN_MIN_WIDTH = 80;
     function useCalculatedColumns({
       rawColumns,
       columnWidths,
@@ -590,14 +599,12 @@
       rawGroupBy,
       enableVirtualization
     }) {
-      var _defaultColumnOptions, _defaultColumnOptions2, _defaultColumnOptions3, _defaultColumnOptions4;
-
-      const defaultWidth = defaultColumnOptions == null ? void 0 : defaultColumnOptions.width;
-      const defaultMinWidth = (_defaultColumnOptions = defaultColumnOptions == null ? void 0 : defaultColumnOptions.minWidth) != null ? _defaultColumnOptions : 80;
-      const defaultMaxWidth = defaultColumnOptions == null ? void 0 : defaultColumnOptions.maxWidth;
-      const defaultFormatter = (_defaultColumnOptions2 = defaultColumnOptions == null ? void 0 : defaultColumnOptions.formatter) != null ? _defaultColumnOptions2 : ValueFormatter;
-      const defaultSortable = (_defaultColumnOptions3 = defaultColumnOptions == null ? void 0 : defaultColumnOptions.sortable) != null ? _defaultColumnOptions3 : false;
-      const defaultResizable = (_defaultColumnOptions4 = defaultColumnOptions == null ? void 0 : defaultColumnOptions.resizable) != null ? _defaultColumnOptions4 : false;
+      const defaultWidth = defaultColumnOptions?.width ?? DEFAULT_COLUMN_WIDTH;
+      const defaultMinWidth = defaultColumnOptions?.minWidth ?? DEFAULT_COLUMN_MIN_WIDTH;
+      const defaultMaxWidth = defaultColumnOptions?.maxWidth ?? undefined;
+      const defaultFormatter = defaultColumnOptions?.formatter ?? valueFormatter;
+      const defaultSortable = defaultColumnOptions?.sortable ?? false;
+      const defaultResizable = defaultColumnOptions?.resizable ?? false;
       const {
         columns,
         colSpanColumns,
@@ -607,27 +614,23 @@
         const groupBy = [];
         let lastFrozenColumnIndex = -1;
         const columns = rawColumns.map(rawColumn => {
-          var _rawGroupBy$includes, _rawColumn$width, _rawColumn$minWidth, _rawColumn$maxWidth, _rawColumn$sortable, _rawColumn$resizable, _rawColumn$formatter;
-
-          const rowGroup = (_rawGroupBy$includes = rawGroupBy == null ? void 0 : rawGroupBy.includes(rawColumn.key)) != null ? _rawGroupBy$includes : false;
+          const rowGroup = rawGroupBy?.includes(rawColumn.key) ?? false;
           const frozen = rowGroup || rawColumn.frozen || false;
           const column = { ...rawColumn,
             idx: 0,
             frozen,
             isLastFrozenColumn: false,
             rowGroup,
-            width: (_rawColumn$width = rawColumn.width) != null ? _rawColumn$width : defaultWidth,
-            minWidth: (_rawColumn$minWidth = rawColumn.minWidth) != null ? _rawColumn$minWidth : defaultMinWidth,
-            maxWidth: (_rawColumn$maxWidth = rawColumn.maxWidth) != null ? _rawColumn$maxWidth : defaultMaxWidth,
-            sortable: (_rawColumn$sortable = rawColumn.sortable) != null ? _rawColumn$sortable : defaultSortable,
-            resizable: (_rawColumn$resizable = rawColumn.resizable) != null ? _rawColumn$resizable : defaultResizable,
-            formatter: (_rawColumn$formatter = rawColumn.formatter) != null ? _rawColumn$formatter : defaultFormatter
+            width: rawColumn.width ?? defaultWidth,
+            minWidth: rawColumn.minWidth ?? defaultMinWidth,
+            maxWidth: rawColumn.maxWidth ?? defaultMaxWidth,
+            sortable: rawColumn.sortable ?? defaultSortable,
+            resizable: rawColumn.resizable ?? defaultResizable,
+            formatter: rawColumn.formatter ?? defaultFormatter
           };
 
           if (rowGroup) {
-            var _column$groupFormatte;
-
-            (_column$groupFormatte = column.groupFormatter) != null ? _column$groupFormatte : column.groupFormatter = ToggleGroupFormatter;
+            column.groupFormatter ?? (column.groupFormatter = toggleGroupFormatter);
           }
 
           if (frozen) {
@@ -646,7 +649,7 @@
           if (aKey === SELECT_COLUMN_KEY) return -1;
           if (bKey === SELECT_COLUMN_KEY) return 1;
 
-          if (rawGroupBy != null && rawGroupBy.includes(aKey)) {
+          if (rawGroupBy?.includes(aKey)) {
             if (rawGroupBy.includes(bKey)) {
               return rawGroupBy.indexOf(aKey) - rawGroupBy.indexOf(bKey);
             }
@@ -654,7 +657,7 @@
             return -1;
           }
 
-          if (rawGroupBy != null && rawGroupBy.includes(bKey)) return 1;
+          if (rawGroupBy?.includes(bKey)) return 1;
 
           if (frozenA) {
             if (frozenB) return 0;
@@ -689,6 +692,7 @@
         };
       }, [rawColumns, defaultWidth, defaultMinWidth, defaultMaxWidth, defaultFormatter, defaultResizable, defaultSortable, rawGroupBy]);
       const {
+        templateColumns,
         layoutCssVars,
         totalFrozenColumnWidth,
         columnMetrics
@@ -696,48 +700,23 @@
         const columnMetrics = new Map();
         let left = 0;
         let totalFrozenColumnWidth = 0;
-        let templateColumns = '';
-        let allocatedWidth = 0;
-        let unassignedColumnsCount = 0;
+        const templateColumns = [];
 
         for (const column of columns) {
-          let width = getSpecifiedWidth(column, columnWidths, viewportWidth);
+          let width = columnWidths.get(column.key) ?? column.width;
 
-          if (width === undefined) {
-            unassignedColumnsCount++;
-          } else {
+          if (typeof width === 'number') {
             width = clampColumnWidth(width, column);
-            allocatedWidth += width;
-            columnMetrics.set(column, {
-              width,
-              left: 0
-            });
-          }
-        }
-
-        for (const column of columns) {
-          let width;
-
-          if (columnMetrics.has(column)) {
-            const columnMetric = columnMetrics.get(column);
-            columnMetric.left = left;
-            ({
-              width
-            } = columnMetric);
           } else {
-            const unallocatedWidth = viewportWidth - allocatedWidth;
-            const unallocatedColumnWidth = round(unallocatedWidth / unassignedColumnsCount);
-            width = clampColumnWidth(unallocatedColumnWidth, column);
-            allocatedWidth += width;
-            unassignedColumnsCount--;
-            columnMetrics.set(column, {
-              width,
-              left
-            });
+            width = column.minWidth;
           }
 
+          templateColumns.push(`${width}px`);
+          columnMetrics.set(column, {
+            width,
+            left
+          });
           left += width;
-          templateColumns += `${width}px `;
         }
 
         if (lastFrozenColumnIndex !== -1) {
@@ -746,7 +725,7 @@
         }
 
         const layoutCssVars = {
-          gridTemplateColumns: templateColumns
+          gridTemplateColumns: templateColumns.join(' ')
         };
 
         for (let i = 0; i <= lastFrozenColumnIndex; i++) {
@@ -755,11 +734,12 @@
         }
 
         return {
+          templateColumns,
           layoutCssVars,
           totalFrozenColumnWidth,
           columnMetrics
         };
-      }, [columnWidths, columns, viewportWidth, lastFrozenColumnIndex]);
+      }, [columnWidths, columns, lastFrozenColumnIndex]);
       const [colOverscanStartIdx, colOverscanEndIdx] = F(() => {
         if (!enableVirtualization) {
           return [0, columns.length - 1];
@@ -813,6 +793,7 @@
         colSpanColumns,
         colOverscanStartIdx,
         colOverscanEndIdx,
+        templateColumns,
         layoutCssVars,
         columnMetrics,
         lastFrozenColumnIndex,
@@ -821,29 +802,11 @@
       };
     }
 
-    function getSpecifiedWidth({
-      key,
-      width
-    }, columnWidths, viewportWidth) {
-      if (columnWidths.has(key)) {
-        return columnWidths.get(key);
-      }
-
-      if (typeof width === 'number') {
-        return width;
-      }
-
-      if (typeof width === 'string' && /^\d+%$/.test(width)) {
-        return floor(viewportWidth * parseInt(width, 10) / 100);
-      }
-
-      return undefined;
-    }
-
     function useGridDimensions() {
       const gridRef = _$1(null);
       const [inlineSize, setInlineSize] = p(1);
       const [blockSize, setBlockSize] = p(1);
+      const [isWidthInitialized, setWidthInitialized] = p(false);
       useLayoutEffect(() => {
         const {
           ResizeObserver
@@ -861,11 +824,12 @@
         } = gridRef.current.getBoundingClientRect();
         const initialWidth = width - offsetWidth + clientWidth;
         const initialHeight = height - offsetHeight + clientHeight;
-        setInlineSize(handleDevicePixelRatio(initialWidth));
+        setInlineSize(initialWidth);
         setBlockSize(initialHeight);
+        setWidthInitialized(true);
         const resizeObserver = new ResizeObserver(entries => {
           const size = entries[0].contentBoxSize[0];
-          setInlineSize(handleDevicePixelRatio(size.inlineSize));
+          setInlineSize(size.inlineSize);
           setBlockSize(size.blockSize);
         });
         resizeObserver.observe(gridRef.current);
@@ -873,11 +837,7 @@
           resizeObserver.disconnect();
         };
       }, []);
-      return [gridRef, inlineSize, blockSize];
-    }
-
-    function handleDevicePixelRatio(size) {
-      return size - (devicePixelRatio === 1 ? 0 : ceil(devicePixelRatio));
+      return [gridRef, inlineSize, blockSize, isWidthInitialized];
     }
 
     function useLatestFunc(fn) {
@@ -885,9 +845,10 @@
       h(() => {
         ref.current = fn;
       });
-      return T$1((...args) => {
+      const callbackFn = T$1((...args) => {
         ref.current(...args);
       }, []);
+      return fn ? callbackFn : fn;
     }
 
     function useRovingCellRef(isSelected) {
@@ -898,7 +859,9 @@
       }
 
       const ref = T$1(cell => {
-        if (cell === null || cell.contains(document.activeElement)) return;
+        if (cell === null) return;
+        scrollIntoView(cell);
+        if (cell.contains(document.activeElement)) return;
         cell.focus({
           preventScroll: true
         });
@@ -922,12 +885,14 @@
       columns,
       colSpanColumns,
       rows,
-      summaryRows,
+      topSummaryRows,
+      bottomSummaryRows,
       colOverscanStartIdx,
       colOverscanEndIdx,
       lastFrozenColumnIndex,
       rowOverscanStartIdx,
       rowOverscanEndIdx,
+      columnWidths,
       isGroupRow
     }) {
       const startIdx = F(() => {
@@ -965,8 +930,19 @@
             }
           }
 
-          if (summaryRows != null) {
-            for (const row of summaryRows) {
+          if (topSummaryRows != null) {
+            for (const row of topSummaryRows) {
+              if (updateStartIdx(colIdx, getColSpan(column, lastFrozenColumnIndex, {
+                type: 'SUMMARY',
+                row
+              }))) {
+                break;
+              }
+            }
+          }
+
+          if (bottomSummaryRows != null) {
+            for (const row of bottomSummaryRows) {
               if (updateStartIdx(colIdx, getColSpan(column, lastFrozenColumnIndex, {
                 type: 'SUMMARY',
                 row
@@ -978,18 +954,36 @@
         }
 
         return startIdx;
-      }, [rowOverscanStartIdx, rowOverscanEndIdx, rows, summaryRows, colOverscanStartIdx, lastFrozenColumnIndex, colSpanColumns, isGroupRow]);
-      return F(() => {
+      }, [rowOverscanStartIdx, rowOverscanEndIdx, rows, topSummaryRows, bottomSummaryRows, colOverscanStartIdx, lastFrozenColumnIndex, colSpanColumns, isGroupRow]);
+      const {
+        viewportColumns,
+        flexWidthViewportColumns
+      } = F(() => {
         const viewportColumns = [];
+        const flexWidthViewportColumns = [];
 
         for (let colIdx = 0; colIdx <= colOverscanEndIdx; colIdx++) {
           const column = columns[colIdx];
           if (colIdx < startIdx && !column.frozen) continue;
           viewportColumns.push(column);
+
+          if (typeof column.width === 'string') {
+            flexWidthViewportColumns.push(column);
+          }
         }
 
-        return viewportColumns;
+        return {
+          viewportColumns,
+          flexWidthViewportColumns
+        };
       }, [startIdx, colOverscanEndIdx, columns]);
+      const unsizedFlexWidthViewportColumns = F(() => {
+        return flexWidthViewportColumns.filter(column => !columnWidths.has(column.key));
+      }, [flexWidthViewportColumns, columnWidths]);
+      return {
+        viewportColumns,
+        flexWidthViewportColumns: unsizedFlexWidthViewportColumns
+      };
     }
 
     function isReadonlyArray(arr) {
@@ -1040,10 +1034,8 @@
           }
 
           Object.keys(rows).forEach((groupKey, posInSet, keys) => {
-            var _expandedGroupIds$has;
-
             const id = parentId !== undefined ? `${parentId}__${groupKey}` : groupKey;
-            const isExpanded = (_expandedGroupIds$has = expandedGroupIds == null ? void 0 : expandedGroupIds.has(id)) != null ? _expandedGroupIds$has : false;
+            const isExpanded = expandedGroupIds?.has(id) ?? false;
             const {
               childRows,
               childGroups,
@@ -1170,14 +1162,11 @@
       };
     }
 
-    var css_248z$a = ".h1tr5c9i700-beta12{cursor:pointer;display:flex}.h1tr5c9i700-beta12:focus{outline:none}.h19r0msv700-beta12{flex-grow:1;overflow:hidden;overflow:clip;text-overflow:ellipsis}";
-    styleInject$1(css_248z$a,{"insertAt":"top"});
-
-    const headerSortCell = "h1tr5c9i700-beta12";
+    const headerSortCell = "h1e8ezgp7-0-0-beta-19";
     const headerSortCellClassname = `rdg-header-sort-cell ${headerSortCell}`;
-    const headerSortName = "h19r0msv700-beta12";
+    const headerSortName = "h1rrblhe7-0-0-beta-19";
     const headerSortNameClassname = `rdg-header-sort-name ${headerSortName}`;
-    function HeaderRenderer({
+    function headerRenderer({
       column,
       sortDirection,
       priority,
@@ -1203,7 +1192,7 @@
       children,
       isCellSelected
     }) {
-      const SortIcon = useDefaultComponents().sortIcon;
+      const sortStatus = useDefaultComponents().sortStatus;
       const {
         ref,
         tabIndex
@@ -1230,17 +1219,15 @@
           className: headerSortNameClassname,
           children: children
         }), /*#__PURE__*/o("span", {
-          children: [/*#__PURE__*/o(SortIcon, {
-            sortDirection: sortDirection
-          }), priority]
+          children: sortStatus({
+            sortDirection,
+            priority
+          })
         })]
       });
     }
 
-    var css_248z$9 = ".celq7o9700-beta12{touch-action:none}.celq7o9700-beta12:after{content:\"\";cursor:col-resize;inline-size:10px;inset-block-end:0;inset-block-start:0;inset-inline-end:0;position:absolute}";
-    styleInject$1(css_248z$9,{"insertAt":"top"});
-
-    const cellResizable = "celq7o9700-beta12";
+    const cellResizable = "celq7o97-0-0-beta-19";
     const cellResizableClassname = `rdg-cell-resizable ${cellResizable}`;
     function HeaderCell({
       column,
@@ -1255,21 +1242,19 @@
       shouldFocusGrid,
       direction
     }) {
-      var _column$headerRendere, _column$maxWidth;
-
       const isRtl = direction === 'rtl';
       const {
         ref,
         tabIndex,
         onFocus
       } = useRovingCellRef(isCellSelected);
-      const sortIndex = sortColumns == null ? void 0 : sortColumns.findIndex(sort => sort.columnKey === column.key);
+      const sortIndex = sortColumns?.findIndex(sort => sort.columnKey === column.key);
       const sortColumn = sortIndex !== undefined && sortIndex > -1 ? sortColumns[sortIndex] : undefined;
-      const sortDirection = sortColumn == null ? void 0 : sortColumn.direction;
+      const sortDirection = sortColumn?.direction;
       const priority = sortColumn !== undefined && sortColumns.length > 1 ? sortIndex + 1 : undefined;
       const ariaSort = sortDirection && !priority ? sortDirection === 'ASC' ? 'ascending' : 'descending' : undefined;
       const className = getCellClassname(column, column.headerCellClass, column.resizable && cellResizableClassname);
-      const HeaderRenderer$1 = (_column$headerRendere = column.headerRenderer) != null ? _column$headerRendere : HeaderRenderer;
+      const headerRenderer$1 = column.headerRenderer ?? headerRenderer;
 
       function onPointerDown(event) {
         if (event.pointerType === 'mouse' && event.buttons !== 1) {
@@ -1291,6 +1276,7 @@
         }
 
         function onPointerMove(event) {
+          event.preventDefault();
           const {
             right,
             left
@@ -1298,7 +1284,7 @@
           const width = isRtl ? right + offset - event.clientX : event.clientX + offset - left;
 
           if (width > 0) {
-            onColumnResize(column, clampColumnWidth(width, column));
+            onColumnResize(column, width);
           }
         }
 
@@ -1365,11 +1351,11 @@
           return;
         }
 
-        onColumnResize(column, 'auto');
+        onColumnResize(column, 'max-content');
       }
 
       function handleFocus(event) {
-        onFocus == null ? void 0 : onFocus(event);
+        onFocus?.(event);
 
         if (shouldFocusGrid) {
           selectCell(0);
@@ -1385,30 +1371,24 @@
         ref: ref,
         tabIndex: shouldFocusGrid ? 0 : tabIndex,
         className: className,
-        style: { ...getCellStyle(column, colSpan),
-          minWidth: column.minWidth,
-          maxWidth: (_column$maxWidth = column.maxWidth) != null ? _column$maxWidth : undefined
-        },
+        style: getCellStyle(column, colSpan),
         onFocus: handleFocus,
         onClick: onClick,
         onDoubleClick: column.resizable ? onDoubleClick : undefined,
         onPointerDown: column.resizable ? onPointerDown : undefined,
-        children: /*#__PURE__*/o(HeaderRenderer$1, {
-          column: column,
-          sortDirection: sortDirection,
-          priority: priority,
-          onSort: onSort,
-          allRowsSelected: allRowsSelected,
-          onAllRowsSelectionChange: onAllRowsSelectionChange,
-          isCellSelected: isCellSelected
+        children: headerRenderer$1({
+          column,
+          sortDirection,
+          priority,
+          onSort,
+          allRowsSelected,
+          onAllRowsSelectionChange,
+          isCellSelected
         })
       });
     }
 
-    var css_248z$8 = ".h197vzie700-beta12{background-color:var(--rdg-header-background-color);display:contents;font-weight:700;line-height:var(--rdg-header-row-height)}.h197vzie700-beta12>.c1wupbe700-beta12{inset-block-start:0;position:sticky;z-index:2}.h197vzie700-beta12>.c1730fa4700-beta12{z-index:3}";
-    styleInject$1(css_248z$8,{"insertAt":"top"});
-
-    const headerRow = "h197vzie700-beta12";
+    const headerRow = "h197vzie7-0-0-beta-19";
     const headerRowClassname = `rdg-header-row ${headerRow}`;
 
     function HeaderRow({
@@ -1462,12 +1442,9 @@
 
     const HeaderRow$1 = /*#__PURE__*/w(HeaderRow);
 
-    var css_248z$7 = ".c1bmg16t700-beta12,.ccpfvsn700-beta12{background-color:#ccf}.c1bmg16t700-beta12.ccpfvsn700-beta12{background-color:#99f}";
-    styleInject$1(css_248z$7,{"insertAt":"top"});
-
-    const cellCopied = "ccpfvsn700-beta12";
+    const cellCopied = "ccpfvsn7-0-0-beta-19";
     const cellCopiedClassname = `rdg-cell-copied ${cellCopied}`;
-    const cellDraggedOver = "c1bmg16t700-beta12";
+    const cellDraggedOver = "c1bmg16t7-0-0-beta-19";
     const cellDraggedOverClassname = `rdg-cell-dragged-over ${cellDraggedOver}`;
 
     function Cell({
@@ -1499,10 +1476,8 @@
       }
 
       function handleClick() {
-        var _column$editorOptions;
-
-        selectCellWrapper((_column$editorOptions = column.editorOptions) == null ? void 0 : _column$editorOptions.editOnClick);
-        onRowClick == null ? void 0 : onRowClick(row, column);
+        selectCellWrapper(column.editorOptions?.editOnClick);
+        onRowClick?.(row, column);
       }
 
       function handleContextMenu() {
@@ -1511,7 +1486,11 @@
 
       function handleDoubleClick() {
         selectCellWrapper(true);
-        onRowDoubleClick == null ? void 0 : onRowDoubleClick(row, column);
+        onRowDoubleClick?.(row, column);
+      }
+
+      function handleRowChange(newRow) {
+        onRowChange(column, newRow);
       }
 
       return /*#__PURE__*/o("div", {
@@ -1530,11 +1509,11 @@
         onFocus: onFocus,
         ...props,
         children: !column.rowGroup && /*#__PURE__*/o(p$1, {
-          children: [/*#__PURE__*/o(column.formatter, {
-            column: column,
-            row: row,
-            isCellSelected: isCellSelected,
-            onRowChange: onRowChange
+          children: [column.formatter({
+            column,
+            row,
+            isCellSelected,
+            onRowChange: handleRowChange
           }), dragHandle]
         })
       });
@@ -1565,16 +1544,16 @@
       selectCell,
       ...props
     }, ref) {
-      const handleRowChange = useLatestFunc(newRow => {
-        onRowChange(rowIdx, newRow);
+      const handleRowChange = useLatestFunc((column, newRow) => {
+        onRowChange(column, rowIdx, newRow);
       });
 
       function handleDragEnter(event) {
-        setDraggedOverRowIdx == null ? void 0 : setDraggedOverRowIdx(rowIdx);
-        onMouseEnter == null ? void 0 : onMouseEnter(event);
+        setDraggedOverRowIdx?.(rowIdx);
+        onMouseEnter?.(event);
       }
 
-      className = clsx(rowClassname, `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`, rowClass == null ? void 0 : rowClass(row), className, selectedCellIdx === -1 && rowSelectedClassname);
+      className = clsx(rowClassname, `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`, rowClass?.(row), className, selectedCellIdx === -1 && rowSelectedClassname);
       const cells = [];
 
       for (let index = 0; index < viewportColumns.length; index++) {
@@ -1626,7 +1605,11 @@
       });
     }
 
-    const Row$1 = /*#__PURE__*/w( /*#__PURE__*/N(Row));
+    const RowComponent = /*#__PURE__*/w( /*#__PURE__*/N(Row));
+    function defaultRowRenderer(key, props) {
+      return /*#__PURE__*/o(RowComponent, { ...props
+      }, key);
+    }
 
     function GroupCell({
       id,
@@ -1662,24 +1645,21 @@
         },
         onClick: isLevelMatching ? toggleGroup : undefined,
         onFocus: onFocus,
-        children: (!column.rowGroup || groupColumnIndex === column.idx) && column.groupFormatter && /*#__PURE__*/o(column.groupFormatter, {
-          groupKey: groupKey,
-          childRows: childRows,
-          column: column,
-          row: row,
-          isExpanded: isExpanded,
-          isCellSelected: isCellSelected,
-          toggleGroup: toggleGroup
+        children: (!column.rowGroup || groupColumnIndex === column.idx) && column.groupFormatter?.({
+          groupKey,
+          childRows,
+          column,
+          row,
+          isExpanded,
+          isCellSelected,
+          toggleGroup
         })
       }, column.key);
     }
 
     const GroupCell$1 = /*#__PURE__*/w(GroupCell);
 
-    var css_248z$6 = ".gyxx7e9700-beta12:not([aria-selected=true]){background-color:var(--rdg-header-background-color)}.gyxx7e9700-beta12>.c1wupbe700-beta12:not(:last-child):not(.c9dpaye700-beta12){border-inline-end:none}";
-    styleInject$1(css_248z$6,{"insertAt":"top"});
-
-    const groupRow = "gyxx7e9700-beta12";
+    const groupRow = "gyxx7e97-0-0-beta-19";
     const groupRowClassname = `rdg-group-row ${groupRow}`;
 
     function GroupedRow({
@@ -1732,10 +1712,7 @@
 
     const GroupRowRenderer = /*#__PURE__*/w(GroupedRow);
 
-    var css_248z$5 = ".s1n3hxke700-beta12{inset-block-end:var(--rdg-summary-row-bottom);inset-block-start:var(--rdg-summary-row-top)}";
-    styleInject$1(css_248z$5,{"insertAt":"top"});
-
-    const summaryCellClassname = "s1n3hxke700-beta12";
+    const summaryCellClassname = "s1n3hxke7-0-0-beta-19";
 
     function SummaryCell({
       column,
@@ -1750,7 +1727,6 @@
         onFocus
       } = useRovingCellRef(isCellSelected);
       const {
-        summaryFormatter: SummaryFormatter,
         summaryCellClass
       } = column;
       const className = getCellClassname(column, summaryCellClassname, typeof summaryCellClass === 'function' ? summaryCellClass(row) : summaryCellClass);
@@ -1770,22 +1746,22 @@
         style: getCellStyle(column, colSpan),
         onClick: onClick,
         onFocus: onFocus,
-        children: SummaryFormatter && /*#__PURE__*/o(SummaryFormatter, {
-          column: column,
-          row: row,
-          isCellSelected: isCellSelected
+        children: column.summaryFormatter?.({
+          column,
+          row,
+          isCellSelected
         })
       });
     }
 
     const SummaryCell$1 = /*#__PURE__*/w(SummaryCell);
 
-    var css_248z$4 = ".snfqesz700-beta12.r1otpg64700-beta12{line-height:var(--rdg-summary-row-height)}.snfqesz700-beta12.r1otpg64700-beta12>.c1wupbe700-beta12{position:sticky}.s1jijrjz700-beta12>.c1wupbe700-beta12{border-block-start:2px solid var(--rdg-summary-border-color)}";
-    styleInject$1(css_248z$4,{"insertAt":"top"});
-
-    const summaryRow = "snfqesz700-beta12";
-    const summaryRowBorderClassname = "s1jijrjz700-beta12";
+    const summaryRow = "snfqesz7-0-0-beta-19";
+    const topSummaryRow = "t1jijrjz7-0-0-beta-19";
+    const topSummaryRowBorderClassname = "t14bmecc7-0-0-beta-19";
+    const bottomSummaryRowBorderClassname = "b1odhhml7-0-0-beta-19";
     const summaryRowClassname = `rdg-summary-row ${summaryRow}`;
+    const topSummaryRowClassname = `rdg-top-summary-row ${topSummaryRow}`;
 
     function SummaryRow({
       rowIdx,
@@ -1796,6 +1772,7 @@
       bottom,
       lastFrozenColumnIndex,
       selectedCellIdx,
+      lastTopRowIdx,
       selectCell,
       'aria-rowindex': ariaRowIndex
     }) {
@@ -1822,10 +1799,11 @@
         }, column.key));
       }
 
+      const isTop = lastTopRowIdx !== undefined;
       return /*#__PURE__*/o("div", {
         role: "row",
         "aria-rowindex": ariaRowIndex,
-        className: clsx(rowClassname, `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`, summaryRowClassname, rowIdx === 0 && summaryRowBorderClassname, selectedCellIdx === -1 && rowSelectedClassname),
+        className: clsx(rowClassname, `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`, summaryRowClassname, isTop ? [topSummaryRowClassname, lastTopRowIdx === rowIdx && topSummaryRowBorderClassname] : ['rdg-bottom-summary-row', rowIdx === 0 && bottomSummaryRowBorderClassname], selectedCellIdx === -1 && rowSelectedClassname),
         style: { ...getRowStyle(gridRowStart),
           '--rdg-summary-row-top': top !== undefined ? `${top}px` : undefined,
           '--rdg-summary-row-bottom': bottom !== undefined ? `${bottom}px` : undefined
@@ -1836,22 +1814,16 @@
 
     const SummaryRow$1 = /*#__PURE__*/w(SummaryRow);
 
-    var css_248z$3 = ".c1tngyp1700-beta12.rdg-cell{padding:0}";
-    styleInject$1(css_248z$3,{"insertAt":"top"});
-
-    const cellEditing = "c1tngyp1700-beta12";
+    const cellEditing = "c1tngyp17-0-0-beta-19";
     function EditCell({
       column,
       colSpan,
       row,
       onRowChange,
-      closeEditor,
-      scrollToCell
+      closeEditor
     }) {
-      var _column$editorOptions, _column$editorOptions4, _column$editorOptions5;
-
       const frameRequestRef = _$1();
-      const commitOnOutsideClick = ((_column$editorOptions = column.editorOptions) == null ? void 0 : _column$editorOptions.commitOnOutsideClick) !== false;
+      const commitOnOutsideClick = column.editorOptions?.commitOnOutsideClick !== false;
       const commitOnOutsideMouseDown = useLatestFunc(() => {
         onClose(true);
       });
@@ -1884,11 +1856,8 @@
         } else if (event.key === 'Enter') {
           event.stopPropagation();
           onClose(true);
-          scrollToCell();
         } else {
-          var _column$editorOptions2, _column$editorOptions3;
-
-          const onNavigation = (_column$editorOptions2 = (_column$editorOptions3 = column.editorOptions) == null ? void 0 : _column$editorOptions3.onNavigation) != null ? _column$editorOptions2 : onEditorNavigation;
+          const onNavigation = column.editorOptions?.onNavigation ?? onEditorNavigation;
 
           if (!onNavigation(event)) {
             event.stopPropagation();
@@ -1907,7 +1876,7 @@
       const {
         cellClass
       } = column;
-      const className = getCellClassname(column, 'rdg-editor-container', typeof cellClass === 'function' ? cellClass(row) : cellClass, !((_column$editorOptions4 = column.editorOptions) != null && _column$editorOptions4.renderFormatter) && cellEditing);
+      const className = getCellClassname(column, 'rdg-editor-container', typeof cellClass === 'function' ? cellClass(row) : cellClass, !column.editorOptions?.renderFormatter && cellEditing);
       return /*#__PURE__*/o("div", {
         role: "gridcell",
         "aria-colindex": column.idx + 1,
@@ -1918,25 +1887,22 @@
         onKeyDown: onKeyDown,
         onMouseDownCapture: commitOnOutsideClick ? cancelFrameRequest : undefined,
         children: column.editor != null && /*#__PURE__*/o(p$1, {
-          children: [/*#__PURE__*/o(column.editor, {
-            column: column,
-            row: row,
-            onRowChange: onRowChange,
-            onClose: onClose
-          }), ((_column$editorOptions5 = column.editorOptions) == null ? void 0 : _column$editorOptions5.renderFormatter) && /*#__PURE__*/o(column.formatter, {
-            column: column,
-            row: row,
+          children: [column.editor({
+            column,
+            row,
+            onRowChange,
+            onClose
+          }), column.editorOptions?.renderFormatter && column.formatter({
+            column,
+            row,
             isCellSelected: true,
-            onRowChange: onRowChange
+            onRowChange
           })]
         })
       });
     }
 
-    var css_248z$2 = ".cadd3bp700-beta12{background-color:var(--rdg-selection-color);block-size:8px;cursor:move;inline-size:8px;inset-block-end:0;inset-inline-end:0;position:absolute}.cadd3bp700-beta12:hover{background-color:var(--rdg-background-color);block-size:16px;border:2px solid var(--rdg-selection-color);inline-size:16px}";
-    styleInject$1(css_248z$2,{"insertAt":"top"});
-
-    const cellDragHandle = "cadd3bp700-beta12";
+    const cellDragHandle = "cadd3bp7-0-0-beta-19";
     const cellDragHandleClassname = `rdg-cell-drag-handle ${cellDragHandle}`;
     function DragHandle({
       rows,
@@ -2013,7 +1979,7 @@
         }
 
         if (indexes.length > 0) {
-          onRowsChange == null ? void 0 : onRowsChange(updatedRows, {
+          onRowsChange?.(updatedRows, {
             indexes,
             column
           });
@@ -2027,15 +1993,25 @@
       });
     }
 
-    var css_248z$1 = ".a888944700-beta12{fill:currentColor}.a888944700-beta12>path{transition:d .1s}";
-    styleInject$1(css_248z$1,{"insertAt":"top"});
-
-    const arrow = "a888944700-beta12";
+    const arrow = "a1mygwml7-0-0-beta-19";
     const arrowClassname = `rdg-sort-arrow ${arrow}`;
-    function SortIcon({
+    function sortStatus({
+      sortDirection,
+      priority
+    }) {
+      return /*#__PURE__*/o(p$1, {
+        children: [sortIcon({
+          sortDirection
+        }), sortPriority({
+          priority
+        })]
+      });
+    }
+    function sortIcon({
       sortDirection
     }) {
-      return sortDirection !== undefined ? /*#__PURE__*/o("svg", {
+      if (sortDirection === undefined) return null;
+      return /*#__PURE__*/o("svg", {
         viewBox: "0 0 12 8",
         width: "12",
         height: "8",
@@ -2044,7 +2020,12 @@
         children: /*#__PURE__*/o("path", {
           d: sortDirection === 'ASC' ? 'M0 8 6 0 12 8' : 'M0 0 6 8 12 0'
         })
-      }) : null;
+      });
+    }
+    function sortPriority({
+      priority
+    }) {
+      return priority;
     }
 
     const initialPosition = {
@@ -2053,56 +2034,56 @@
       mode: 'SELECT'
     };
 
-    function DataGrid({
-      columns: rawColumns,
-      rows: rawRows,
-      summaryRows,
-      rowKeyGetter,
-      onRowsChange,
-      rowHeight,
-      headerRowHeight: rawHeaderRowHeight,
-      summaryRowHeight: rawSummaryRowHeight,
-      selectedRows,
-      onSelectedRowsChange,
-      sortColumns,
-      onSortColumnsChange,
-      defaultColumnOptions,
-      groupBy: rawGroupBy,
-      rowGrouper,
-      expandedGroupIds,
-      onExpandedGroupIdsChange,
-      onRowClick,
-      onRowDoubleClick,
-      onScroll,
-      onColumnResize,
-      onFill,
-      onCopy,
-      onPaste,
-      cellNavigationMode: rawCellNavigationMode,
-      enableVirtualization,
-      components,
-      className,
-      style,
-      rowClass,
-      direction,
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-      'aria-describedby': ariaDescribedBy,
-      'data-testid': testId
-    }, ref) {
-      var _rowHeight, _ref, _components$rowRender, _ref2, _components$sortIcon, _ref3, _components$checkboxF, _components$noRowsFal, _enableVirtualization, _direction, _summaryRows$length;
-
+    function DataGrid(props, ref) {
+      const {
+        columns: rawColumns,
+        rows: rawRows,
+        topSummaryRows,
+        bottomSummaryRows,
+        rowKeyGetter,
+        onRowsChange,
+        rowHeight: rawRowHeight,
+        headerRowHeight: rawHeaderRowHeight,
+        summaryRowHeight: rawSummaryRowHeight,
+        selectedRows,
+        onSelectedRowsChange,
+        sortColumns,
+        onSortColumnsChange,
+        defaultColumnOptions,
+        groupBy: rawGroupBy,
+        rowGrouper,
+        expandedGroupIds,
+        onExpandedGroupIdsChange,
+        onRowClick,
+        onRowDoubleClick,
+        onScroll,
+        onColumnResize,
+        onFill,
+        onCopy,
+        onPaste,
+        cellNavigationMode: rawCellNavigationMode,
+        enableVirtualization: rawEnableVirtualization,
+        renderers,
+        className,
+        style,
+        rowClass,
+        direction: rawDirection,
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy,
+        'aria-describedby': ariaDescribedBy,
+        'data-testid': testId
+      } = props;
       const defaultComponents = useDefaultComponents();
-      (_rowHeight = rowHeight) != null ? _rowHeight : rowHeight = 35;
-      const headerRowHeight = rawHeaderRowHeight != null ? rawHeaderRowHeight : typeof rowHeight === 'number' ? rowHeight : 35;
-      const summaryRowHeight = rawSummaryRowHeight != null ? rawSummaryRowHeight : typeof rowHeight === 'number' ? rowHeight : 35;
-      const RowRenderer = (_ref = (_components$rowRender = components == null ? void 0 : components.rowRenderer) != null ? _components$rowRender : defaultComponents == null ? void 0 : defaultComponents.rowRenderer) != null ? _ref : Row$1;
-      const sortIcon = (_ref2 = (_components$sortIcon = components == null ? void 0 : components.sortIcon) != null ? _components$sortIcon : defaultComponents == null ? void 0 : defaultComponents.sortIcon) != null ? _ref2 : SortIcon;
-      const checkboxFormatter = (_ref3 = (_components$checkboxF = components == null ? void 0 : components.checkboxFormatter) != null ? _components$checkboxF : defaultComponents == null ? void 0 : defaultComponents.checkboxFormatter) != null ? _ref3 : CheckboxFormatter;
-      const noRowsFallback = (_components$noRowsFal = components == null ? void 0 : components.noRowsFallback) != null ? _components$noRowsFal : defaultComponents == null ? void 0 : defaultComponents.noRowsFallback;
-      const cellNavigationMode = rawCellNavigationMode != null ? rawCellNavigationMode : 'NONE';
-      (_enableVirtualization = enableVirtualization) != null ? _enableVirtualization : enableVirtualization = true;
-      (_direction = direction) != null ? _direction : direction = 'ltr';
+      const rowHeight = rawRowHeight ?? 35;
+      const headerRowHeight = rawHeaderRowHeight ?? (typeof rowHeight === 'number' ? rowHeight : 35);
+      const summaryRowHeight = rawSummaryRowHeight ?? (typeof rowHeight === 'number' ? rowHeight : 35);
+      const rowRenderer = renderers?.rowRenderer ?? defaultComponents?.rowRenderer ?? defaultRowRenderer;
+      const sortStatus$1 = renderers?.sortStatus ?? defaultComponents?.sortStatus ?? sortStatus;
+      const checkboxFormatter$1 = renderers?.checkboxFormatter ?? defaultComponents?.checkboxFormatter ?? checkboxFormatter;
+      const noRowsFallback = renderers?.noRowsFallback ?? defaultComponents?.noRowsFallback;
+      const cellNavigationMode = rawCellNavigationMode ?? 'NONE';
+      const enableVirtualization = rawEnableVirtualization ?? true;
+      const direction = rawDirection ?? 'ltr';
       const [scrollTop, setScrollTop] = p(0);
       const [scrollLeft, setScrollLeft] = p(0);
       const [columnWidths, setColumnWidths] = p(() => new Map());
@@ -2110,24 +2091,24 @@
       const [copiedCell, setCopiedCell] = p(null);
       const [isDragging, setDragging] = p(false);
       const [draggedOverRowIdx, setOverRowIdx] = p(undefined);
-      const [autoResizeColumn, setAutoResizeColumn] = p(null);
       const prevSelectedPosition = _$1(selectedPosition);
       const latestDraggedOverRowIdx = _$1(draggedOverRowIdx);
       const lastSelectedRowIdx = _$1(-1);
       const rowRef = _$1(null);
-      const [gridRef, gridWidth, gridHeight] = useGridDimensions();
+      const [gridRef, gridWidth, gridHeight, isWidthInitialized] = useGridDimensions();
       const headerRowsCount = 1;
-      const summaryRowsCount = (_summaryRows$length = summaryRows == null ? void 0 : summaryRows.length) != null ? _summaryRows$length : 0;
+      const topSummaryRowsCount = topSummaryRows?.length ?? 0;
+      const bottomSummaryRowsCount = bottomSummaryRows?.length ?? 0;
+      const summaryRowsCount = topSummaryRowsCount + bottomSummaryRowsCount;
       const clientHeight = gridHeight - headerRowHeight - summaryRowsCount * summaryRowHeight;
       const isSelectable = selectedRows != null && onSelectedRowsChange != null;
-      const isHeaderRowSelected = selectedPosition.rowIdx === -1;
       const isRtl = direction === 'rtl';
       const leftKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
       const rightKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
       const defaultGridComponents = F(() => ({
-        sortIcon,
-        checkboxFormatter
-      }), [sortIcon, checkboxFormatter]);
+        sortStatus: sortStatus$1,
+        checkboxFormatter: checkboxFormatter$1
+      }), [sortStatus$1, checkboxFormatter$1]);
       const allRowsSelected = F(() => {
         const {
           length
@@ -2139,6 +2120,7 @@
         colSpanColumns,
         colOverscanStartIdx,
         colOverscanEndIdx,
+        templateColumns,
         layoutCssVars,
         columnMetrics,
         lastFrozenColumnIndex,
@@ -2174,7 +2156,10 @@
         expandedGroupIds,
         enableVirtualization
       });
-      const viewportColumns = useViewportColumns({
+      const {
+        viewportColumns,
+        flexWidthViewportColumns
+      } = useViewportColumns({
         columns,
         colSpanColumns,
         colOverscanStartIdx,
@@ -2183,16 +2168,22 @@
         rowOverscanStartIdx,
         rowOverscanEndIdx,
         rows,
-        summaryRows,
+        topSummaryRows,
+        bottomSummaryRows,
+        columnWidths,
         isGroupRow
       });
       const hasGroups = groupBy.length > 0 && typeof rowGrouper === 'function';
       const minColIdx = hasGroups ? -1 : 0;
       const maxColIdx = columns.length - 1;
-      const minRowIdx = -1;
-      const maxRowIdx = headerRowsCount + rows.length + summaryRowsCount - 2;
+      const minRowIdx = -1 - topSummaryRowsCount;
+      const maxRowIdx = rows.length + bottomSummaryRowsCount - 1;
       const selectedCellIsWithinSelectionBounds = isCellWithinSelectionBounds(selectedPosition);
       const selectedCellIsWithinViewportBounds = isCellWithinViewportBounds(selectedPosition);
+      const handleColumnResizeLatest = useLatestFunc(handleColumnResize);
+      const onSortColumnsChangeLatest = useLatestFunc(onSortColumnsChange);
+      const onRowClickLatest = useLatestFunc(onRowClick);
+      const onRowDoubleClickLatest = useLatestFunc(onRowDoubleClick);
       const selectRowLatest = useLatestFunc(selectRow);
       const selectAllRowsLatest = useLatestFunc(selectAllRows);
       const handleFormatterRowChangeLatest = useLatestFunc(updateRow);
@@ -2211,12 +2202,19 @@
       });
       const selectHeaderCellLatest = useLatestFunc(idx => {
         selectCell({
-          rowIdx: -1,
+          rowIdx: minRowIdx,
           idx
         });
       });
-      const selectSummaryCellLatest = useLatestFunc((summaryRow, column) => {
-        const rowIdx = summaryRows.indexOf(summaryRow) + headerRowsCount + rows.length - 1;
+      const selectTopSummaryCellLatest = useLatestFunc((summaryRow, column) => {
+        const rowIdx = topSummaryRows.indexOf(summaryRow);
+        selectCell({
+          rowIdx: rowIdx + minRowIdx + 1,
+          idx: column.idx
+        });
+      });
+      const selectBottomSummaryCellLatest = useLatestFunc((summaryRow, column) => {
+        const rowIdx = bottomSummaryRows.indexOf(summaryRow) + rows.length;
         selectCell({
           rowIdx,
           idx: column.idx
@@ -2230,36 +2228,34 @@
         }
 
         prevSelectedPosition.current = selectedPosition;
-        scrollToCell(selectedPosition);
 
         if (selectedPosition.idx === -1) {
           rowRef.current.focus({
             preventScroll: true
           });
+          scrollIntoView(rowRef.current);
         }
       });
       useLayoutEffect(() => {
-        if (autoResizeColumn === null) return;
-        const columnElement = gridRef.current.querySelector(`[aria-colindex="${autoResizeColumn.idx + 1}"]`);
-        const {
-          width
-        } = columnElement.getBoundingClientRect();
+        if (!isWidthInitialized || flexWidthViewportColumns.length === 0) return;
         setColumnWidths(columnWidths => {
           const newColumnWidths = new Map(columnWidths);
-          newColumnWidths.set(autoResizeColumn.key, width);
+          const grid = gridRef.current;
+
+          for (const column of flexWidthViewportColumns) {
+            const measuringCell = grid.querySelector(`[data-measuring-cell-key="${column.key}"]`);
+            const {
+              width
+            } = measuringCell.getBoundingClientRect();
+            newColumnWidths.set(column.key, width);
+          }
+
           return newColumnWidths;
         });
-        setAutoResizeColumn(null);
-        onColumnResize == null ? void 0 : onColumnResize(autoResizeColumn.idx, width);
-      }, [autoResizeColumn, gridRef, onColumnResize]);
+      }, [isWidthInitialized, flexWidthViewportColumns, gridRef]);
       A(ref, () => ({
         element: gridRef.current,
-
-        scrollToColumn(idx) {
-          scrollToCell({
-            idx
-          });
-        },
+        scrollToColumn,
 
         scrollToRow(rowIdx) {
           const {
@@ -2274,24 +2270,34 @@
 
         selectCell
       }));
-      const handleColumnResize = T$1((column, width) => {
-        if (width === 'auto') {
-          setAutoResizeColumn(column);
-          return;
-        }
-
-        setColumnWidths(columnWidths => {
-          const newColumnWidths = new Map(columnWidths);
-          newColumnWidths.set(column.key, width);
-          return newColumnWidths;
-        });
-        onColumnResize == null ? void 0 : onColumnResize(column.idx, width);
-      }, [onColumnResize]);
       const setDraggedOverRowIdx = T$1(rowIdx => {
         setOverRowIdx(rowIdx);
         latestDraggedOverRowIdx.current = rowIdx;
       }, []);
 
+      function handleColumnResize(column, width) {
+        const {
+          style
+        } = gridRef.current;
+        const newTemplateColumns = [...templateColumns];
+        newTemplateColumns[column.idx] = width === 'max-content' ? width : `${width}px`;
+        style.gridTemplateColumns = newTemplateColumns.join(' ');
+        const measuringCell = gridRef.current.querySelector(`[data-measuring-cell-key="${column.key}"]`);
+        const measuredWidth = measuringCell.getBoundingClientRect().width;
+        const measuredWidthPx = `${measuredWidth}px`;
+
+        if (newTemplateColumns[column.idx] !== measuredWidthPx) {
+          newTemplateColumns[column.idx] = measuredWidthPx;
+          style.gridTemplateColumns = newTemplateColumns.join(' ');
+        }
+
+        if (columnWidths.get(column.key) === measuredWidth) return;
+        const newColumnWidths = new Map(columnWidths);
+        newColumnWidths.set(column.key, measuredWidth);
+        setColumnWidths(newColumnWidths);
+        onColumnResize?.(column.idx, measuredWidth);
+      }
+
       function selectRow({
         row,
         checked,
@@ -2438,16 +2444,18 @@
           scrollTop,
           scrollLeft
         } = event.currentTarget;
-        setScrollTop(scrollTop);
-        setScrollLeft(abs(scrollLeft));
-        onScroll == null ? void 0 : onScroll(event);
+        sn(() => {
+          setScrollTop(scrollTop);
+          setScrollLeft(abs(scrollLeft));
+        });
+        onScroll?.(event);
       }
 
       function getRawRowIdx(rowIdx) {
         return hasGroups ? rawRows.indexOf(rows[rowIdx]) : rowIdx;
       }
 
-      function updateRow(rowIdx, row) {
+      function updateRow(column, rowIdx, row) {
         if (typeof onRowsChange !== 'function') return;
         const rawRowIdx = getRawRowIdx(rowIdx);
         if (row === rawRows[rawRowIdx]) return;
@@ -2455,13 +2463,13 @@
         updatedRows[rawRowIdx] = row;
         onRowsChange(updatedRows, {
           indexes: [rawRowIdx],
-          column: columns[selectedPosition.idx]
+          column
         });
       }
 
       function commitEditorChanges() {
         if (selectedPosition.mode !== 'EDIT') return;
-        updateRow(selectedPosition.rowIdx, selectedPosition.row);
+        updateRow(columns[selectedPosition.idx], selectedPosition.rowIdx, selectedPosition.row);
       }
 
       function handleCopy() {
@@ -2475,7 +2483,7 @@
           row: sourceRow,
           columnKey: sourceColumnKey
         });
-        onCopy == null ? void 0 : onCopy({
+        onCopy?.({
           sourceRow,
           sourceColumnKey
         });
@@ -2490,19 +2498,18 @@
           idx,
           rowIdx
         } = selectedPosition;
+        const targetColumn = columns[idx];
         const targetRow = rawRows[getRawRowIdx(rowIdx)];
         const updatedTargetRow = onPaste({
           sourceRow: copiedCell.row,
           sourceColumnKey: copiedCell.columnKey,
           targetRow,
-          targetColumnKey: columns[idx].key
+          targetColumnKey: targetColumn.key
         });
-        updateRow(rowIdx, updatedTargetRow);
+        updateRow(targetColumn, rowIdx, updatedTargetRow);
       }
 
       function handleCellInput(event) {
-        var _column$editorOptions;
-
         if (!selectedCellIsWithinViewportBounds) return;
         const row = rows[selectedPosition.rowIdx];
         if (isGroupRow(row)) return;
@@ -2524,7 +2531,7 @@
         }
 
         const column = columns[selectedPosition.idx];
-        (_column$editorOptions = column.editorOptions) == null ? void 0 : _column$editorOptions.onCellKeyDown == null ? void 0 : _column$editorOptions.onCellKeyDown(event);
+        column.editorOptions?.onCellKeyDown?.(event);
         if (event.isDefaultPrevented()) return;
 
         if (isCellEditable(selectedPosition) && isDefaultCellInput(event)) {
@@ -2584,7 +2591,7 @@
             originalRow: row
           });
         } else if (isSamePosition(selectedPosition, position)) {
-          scrollToCell(position);
+          scrollIntoView(gridRef.current?.querySelector('[tabindex="0"]'));
         } else {
           setSelectedPosition({ ...position,
             mode: 'SELECT'
@@ -2592,19 +2599,16 @@
         }
       }
 
-      function scrollToCell({
-        idx,
-        rowIdx
-      }) {
+      function scrollToColumn(idx) {
         const {
           current
         } = gridRef;
         if (!current) return;
 
-        if (typeof idx === 'number' && idx > lastFrozenColumnIndex) {
-          var _rowIdx;
-
-          (_rowIdx = rowIdx) != null ? _rowIdx : rowIdx = selectedPosition.rowIdx;
+        if (idx > lastFrozenColumnIndex) {
+          const {
+            rowIdx
+          } = selectedPosition;
           if (!isCellWithinSelectionBounds({
             rowIdx,
             idx
@@ -2620,7 +2624,8 @@
           let right = left + width;
           const colSpan = getSelectedCellColSpan({
             rows,
-            summaryRows,
+            topSummaryRows,
+            bottomSummaryRows,
             rowIdx,
             lastFrozenColumnIndex,
             column,
@@ -2645,17 +2650,6 @@
             current.scrollLeft = (right - clientWidth) * sign;
           }
         }
-
-        if (typeof rowIdx === 'number' && isRowIdxWithinViewportBounds(rowIdx)) {
-          const rowTop = getRowTop(rowIdx);
-          const rowHeight = getRowHeight(rowIdx);
-
-          if (rowTop < scrollTop) {
-            current.scrollTop = rowTop;
-          } else if (rowTop + rowHeight > scrollTop + clientHeight) {
-            current.scrollTop = rowTop + rowHeight - clientHeight;
-          }
-        }
       }
 
       function getNextPosition(key, ctrlKey, shiftKey) {
@@ -2793,7 +2787,8 @@
           columns,
           colSpanColumns,
           rows,
-          summaryRows,
+          topSummaryRows,
+          bottomSummaryRows,
           minRowIdx,
           maxRowIdx,
           lastFrozenColumnIndex,
@@ -2816,14 +2811,15 @@
       }
 
       function getLayoutCssVars() {
-        if (autoResizeColumn === null) return layoutCssVars;
-        const {
-          gridTemplateColumns
-        } = layoutCssVars;
-        const newSizes = gridTemplateColumns.split(' ');
-        newSizes[autoResizeColumn.idx] = 'max-content';
+        if (flexWidthViewportColumns.length === 0) return layoutCssVars;
+        const newTemplateColumns = [...templateColumns];
+
+        for (const column of flexWidthViewportColumns) {
+          newTemplateColumns[column.idx] = column.width;
+        }
+
         return { ...layoutCssVars,
-          gridTemplateColumns: newSizes.join(' ')
+          gridTemplateColumns: newTemplateColumns.join(' ')
         };
       }
 
@@ -2870,7 +2866,7 @@
 
         const onRowChange = (row, commitChanges) => {
           if (commitChanges) {
-            updateRow(selectedPosition.rowIdx, row);
+            updateRow(column, selectedPosition.rowIdx, row);
             closeEditor();
           } else {
             setSelectedPosition(position => ({ ...position,
@@ -2888,10 +2884,7 @@
           colSpan: colSpan,
           row: row,
           onRowChange: onRowChange,
-          closeEditor: closeEditor,
-          scrollToCell: () => {
-            scrollToCell(selectedPosition);
-          }
+          closeEditor: closeEditor
         }, column.key);
       }
 
@@ -2930,7 +2923,7 @@
           }
 
           const row = rows[rowIdx];
-          const gridRowStart = headerRowsCount + rowIdx + 1;
+          const gridRowStart = headerRowsCount + topSummaryRowsCount + rowIdx + 1;
 
           if (isGroupRow(row)) {
             ({
@@ -2941,7 +2934,7 @@
               "aria-level": row.level + 1,
               "aria-setsize": row.setSize,
               "aria-posinset": row.posInSet + 1,
-              "aria-rowindex": headerRowsCount + startRowIndex + 1,
+              "aria-rowindex": headerRowsCount + topSummaryRowsCount + startRowIndex + 1,
               "aria-selected": isSelectable ? isGroupRowSelected : undefined,
               id: row.id,
               groupKey: row.groupKey,
@@ -2966,36 +2959,34 @@
           let isRowSelected = false;
 
           if (typeof rowKeyGetter === 'function') {
-            var _selectedRows$has;
-
             key = rowKeyGetter(row);
-            isRowSelected = (_selectedRows$has = selectedRows == null ? void 0 : selectedRows.has(key)) != null ? _selectedRows$has : false;
+            isRowSelected = selectedRows?.has(key) ?? false;
           } else {
             key = hasGroups ? startRowIndex : rowIdx;
           }
 
-          rowElements.push( /*#__PURE__*/o(RowRenderer, {
-            "aria-rowindex": headerRowsCount + (hasGroups ? startRowIndex : rowIdx) + 1,
-            "aria-selected": isSelectable ? isRowSelected : undefined,
-            rowIdx: rowIdx,
-            row: row,
+          rowElements.push(rowRenderer(key, {
+            'aria-rowindex': headerRowsCount + topSummaryRowsCount + (hasGroups ? startRowIndex : rowIdx) + 1,
+            'aria-selected': isSelectable ? isRowSelected : undefined,
+            rowIdx,
+            row,
             viewportColumns: rowColumns,
-            isRowSelected: isRowSelected,
-            onRowClick: onRowClick,
-            onRowDoubleClick: onRowDoubleClick,
-            rowClass: rowClass,
-            gridRowStart: gridRowStart,
+            isRowSelected,
+            onRowClick: onRowClickLatest,
+            onRowDoubleClick: onRowDoubleClickLatest,
+            rowClass,
+            gridRowStart,
             height: getRowHeight(rowIdx),
             copiedCellIdx: copiedCell !== null && copiedCell.row === row ? columns.findIndex(c => c.key === copiedCell.columnKey) : undefined,
             selectedCellIdx: selectedRowIdx === rowIdx ? selectedIdx : undefined,
             draggedOverCellIdx: getDraggedOverCellIdx(rowIdx),
             setDraggedOverRowIdx: isDragging ? setDraggedOverRowIdx : undefined,
-            lastFrozenColumnIndex: lastFrozenColumnIndex,
+            lastFrozenColumnIndex,
             onRowChange: handleFormatterRowChangeLatest,
             selectCell: selectViewportCellLatest,
             selectedCellDragHandle: getDragHandle(rowIdx),
             selectedCellEditor: getCellEditor(rowIdx)
-          }, key));
+          }));
         }
 
         return rowElements;
@@ -3008,12 +2999,16 @@
 
       let templateRows = `${headerRowHeight}px`;
 
+      if (topSummaryRowsCount > 0) {
+        templateRows += ` repeat(${topSummaryRowsCount}, ${summaryRowHeight}px)`;
+      }
+
       if (rows.length > 0) {
         templateRows += gridTemplateRows;
       }
 
-      if (summaryRowsCount > 0) {
-        templateRows += ` repeat(${summaryRowsCount}, ${summaryRowHeight}px)`;
+      if (bottomSummaryRowsCount > 0) {
+        templateRows += ` repeat(${bottomSummaryRowsCount}, ${summaryRowHeight}px)`;
       }
 
       const isGroupRowFocused = selectedPosition.idx === -1 && selectedPosition.rowIdx !== -2;
@@ -3025,8 +3020,10 @@
         "aria-multiselectable": isSelectable ? true : undefined,
         "aria-colcount": columns.length,
         "aria-rowcount": headerRowsCount + rowsCount + summaryRowsCount,
-        className: clsx(rootClassname, className, isDragging && viewportDraggingClassname, autoResizeColumn !== null && cellAutoResizeClassname),
+        className: clsx(rootClassname, className, isDragging && viewportDraggingClassname),
         style: { ...style,
+          scrollPaddingInlineStart: selectedPosition.idx > lastFrozenColumnIndex ? `${totalFrozenColumnWidth}px` : undefined,
+          scrollPaddingBlock: selectedPosition.rowIdx >= 0 && selectedPosition.rowIdx < rows.length ? `${headerRowHeight + topSummaryRowsCount * summaryRowHeight}px ${bottomSummaryRowsCount * summaryRowHeight}px` : undefined,
           gridTemplateRows: templateRows,
           '--rdg-header-row-height': `${headerRowHeight}px`,
           '--rdg-summary-row-height': `${summaryRowHeight}px`,
@@ -3050,40 +3047,59 @@
           value: defaultGridComponents,
           children: [/*#__PURE__*/o(HeaderRow$1, {
             columns: getRowViewportColumns(-1),
-            onColumnResize: handleColumnResize,
+            onColumnResize: handleColumnResizeLatest,
             allRowsSelected: allRowsSelected,
             onAllRowsSelectionChange: selectAllRowsLatest,
             sortColumns: sortColumns,
-            onSortColumnsChange: onSortColumnsChange,
+            onSortColumnsChange: onSortColumnsChangeLatest,
             lastFrozenColumnIndex: lastFrozenColumnIndex,
-            selectedCellIdx: isHeaderRowSelected ? selectedPosition.idx : undefined,
+            selectedCellIdx: selectedPosition.rowIdx === minRowIdx ? selectedPosition.idx : undefined,
             selectCell: selectHeaderCellLatest,
             shouldFocusGrid: !selectedCellIsWithinSelectionBounds,
             direction: direction
           }), rows.length === 0 && noRowsFallback ? noRowsFallback : /*#__PURE__*/o(p$1, {
-            children: [/*#__PURE__*/o(RowSelectionChangeProvider, {
+            children: [topSummaryRows?.map((row, rowIdx) => {
+              const gridRowStart = headerRowsCount + rowIdx + 1;
+              const summaryRowIdx = rowIdx + minRowIdx + 1;
+              const isSummaryRowSelected = selectedPosition.rowIdx === summaryRowIdx;
+              const top = headerRowHeight + summaryRowHeight * rowIdx;
+              return /*#__PURE__*/o(SummaryRow$1, {
+                "aria-rowindex": gridRowStart,
+                rowIdx: rowIdx,
+                gridRowStart: gridRowStart,
+                row: row,
+                top: top,
+                bottom: undefined,
+                lastTopRowIdx: topSummaryRowsCount - 1,
+                viewportColumns: getRowViewportColumns(summaryRowIdx),
+                lastFrozenColumnIndex: lastFrozenColumnIndex,
+                selectedCellIdx: isSummaryRowSelected ? selectedPosition.idx : undefined,
+                selectCell: selectTopSummaryCellLatest
+              }, rowIdx);
+            }), /*#__PURE__*/o(RowSelectionChangeProvider, {
               value: selectRowLatest,
               children: getViewportRows()
-            }), summaryRows == null ? void 0 : summaryRows.map((row, rowIdx) => {
-              const gridRowStart = headerRowsCount + rows.length + rowIdx + 1;
-              const summaryRowIdx = headerRowsCount + rows.length + rowIdx - 1;
+            }), bottomSummaryRows?.map((row, rowIdx) => {
+              const gridRowStart = headerRowsCount + topSummaryRowsCount + rows.length + rowIdx + 1;
+              const summaryRowIdx = rows.length + rowIdx;
               const isSummaryRowSelected = selectedPosition.rowIdx === summaryRowIdx;
-              const top = clientHeight > totalRowHeight ? gridHeight - summaryRowHeight * (summaryRows.length - rowIdx) : undefined;
-              const bottom = top === undefined ? summaryRowHeight * (summaryRows.length - 1 - rowIdx) : undefined;
+              const top = clientHeight > totalRowHeight ? gridHeight - summaryRowHeight * (bottomSummaryRows.length - rowIdx) : undefined;
+              const bottom = top === undefined ? summaryRowHeight * (bottomSummaryRows.length - 1 - rowIdx) : undefined;
               return /*#__PURE__*/o(SummaryRow$1, {
-                "aria-rowindex": headerRowsCount + rowsCount + rowIdx + 1,
+                "aria-rowindex": headerRowsCount + topSummaryRowsCount + rowsCount + rowIdx + 1,
                 rowIdx: rowIdx,
                 gridRowStart: gridRowStart,
                 row: row,
                 top: top,
                 bottom: bottom,
+                lastTopRowIdx: undefined,
                 viewportColumns: getRowViewportColumns(summaryRowIdx),
                 lastFrozenColumnIndex: lastFrozenColumnIndex,
                 selectedCellIdx: isSummaryRowSelected ? selectedPosition.idx : undefined,
-                selectCell: selectSummaryCellLatest
+                selectCell: selectBottomSummaryCellLatest
               }, rowIdx);
             })]
-          })]
+          }), renderMeasuringCells(viewportColumns)]
         })]
       });
     }
@@ -3094,9 +3110,6 @@
 
     const DataGrid$1 = /*#__PURE__*/N(DataGrid);
 
-    var css_248z$g = ".t16y9g8l700-beta12{appearance:none;background-color:var(--rdg-background-color);block-size:100%;border:2px solid #ccc;box-sizing:border-box;color:var(--rdg-color);font-family:inherit;font-size:var(--rdg-font-size);inline-size:100%;padding-block:0;padding-inline:6px;vertical-align:top}.t16y9g8l700-beta12:focus{border-color:var(--rdg-selection-color);outline:none}.t16y9g8l700-beta12::placeholder{color:#999;opacity:1}";
-    styleInject$1(css_248z$g,{"insertAt":"top"});
-
     function useData(widget) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
         var columns = F(function () { return widget.columns(); }, [widget, widget.dataChecksum()]);
@@ -3209,7 +3222,7 @@
             }
             setRows(items);
         }, [listColumns, data, sort]);
-        return h$1(DataGrid$1, { columns: listColumns, headerRowHeight: 24, rows: rows, rowKeyGetter: rowKeyGetter, rowHeight: 20, components: { noRowsFallback: h$1(EmptyRowsRenderer, { message: table.noDataMessage() }) }, className: table.darkMode() ? "rdg-dark" : "rdg-light", sortColumns: sortColumn ? [sortColumn] : [], onSortColumnsChange: onSortColumnsChange, selectedRows: selectedRows, onSelectedRowsChange: multiSelect ? onSelectedRowsChange : undefined, onRowClick: multiSelect ? undefined : onRowClick, "aria-describedby": "", "aria-label": "", "aria-labelledby": "", style: { height: "100%" } });
+        return h$1(DataGrid$1, { columns: listColumns, headerRowHeight: 24, rows: rows, rowKeyGetter: rowKeyGetter, rowHeight: 20, renderers: { noRowsFallback: h$1(EmptyRowsRenderer, { message: table.noDataMessage() }) }, className: table.darkMode() ? "rdg-dark" : "rdg-light", sortColumns: sortColumn ? [sortColumn] : [], onSortColumnsChange: onSortColumnsChange, selectedRows: selectedRows, onSelectedRowsChange: multiSelect ? onSelectedRowsChange : undefined, onRowClick: multiSelect ? undefined : onRowClick, "aria-describedby": "", "aria-label": "", "aria-labelledby": "", style: { height: "100%" } });
     };
 
     function styleInject(css, ref) {