npm - @hpcc-js/dgrid2 - Versions diffs - 2.3.6 → 2.3.8 - Mend

@hpcc-js/dgrid2 2.3.6 → 2.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/index.es6.js +491 -478
package/dist/index.es6.js.map +1 -1
package/dist/index.js +491 -478
package/dist/index.js.map +1 -1
package/dist/index.min.js +1 -1
package/dist/index.min.js.map +1 -1
package/package.json +6 -6
package/src/__package__.ts +2 -2
package/src/reactTable.tsx +1 -1
package/types/__package__.d.ts +2 -2
package/types-3.4/__package__.d.ts +2 -2

package/dist/index.es6.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { format, timeParse, timeFormat, publish, HTMLWidget } from '@hpcc-js/common';
 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.
@@ -71,80 +71,40 @@ var n,l$1,u$1,t$1,o$2,r$2,f$1={},e$1=[],c$1=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|m
 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) {
@@ -164,17 +124,15 @@ const CheckboxFormatter = /*#__PURE__*/N(function CheckboxFormatter({
       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]);
@@ -202,19 +160,20 @@ function SelectCellFormatter({
     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]
@@ -224,14 +183,15 @@ function ValueFormatter(props) {
   }
 }
-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,
@@ -337,8 +297,16 @@ const SelectColumn = {
     });
   },
-  formatter: SelectFormatter,
-  groupFormatter: SelectGroupFormatter
+  formatter(props) {
+    return /*#__PURE__*/o(SelectFormatter, { ...props
+    });
+  },
+  groupFormatter(props) {
+    return /*#__PURE__*/o(SelectGroupFormatter, { ...props
+    });
+  }
 };
 function getColSpan(column, lastFrozenColumnIndex, args) {
@@ -351,6 +319,13 @@ function getColSpan(column, lastFrozenColumnIndex, args) {
   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';
@@ -369,6 +344,26 @@ function onEditorNavigation({
   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,
@@ -384,18 +379,29 @@ function isCellEditable(column, row) {
 }
 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];
@@ -409,10 +415,10 @@ function getSelectedCellColSpan({
     return undefined;
   }
-  if (summaryRows) {
+  if (bottomSummaryRows) {
     return getColSpan(column, lastFrozenColumnIndex, {
       type: 'SUMMARY',
-      row: summaryRows[rowIdx - rows.length]
+      row: bottomSummaryRows[rowIdx - rows.length]
     });
   }
@@ -423,7 +429,8 @@ function getNextSelectedCellPosition({
   columns,
   colSpanColumns,
   rows,
-  summaryRows,
+  topSummaryRows,
+  bottomSummaryRows,
   minRowIdx,
   maxRowIdx,
   currentPosition: {
@@ -450,7 +457,8 @@ function getNextSelectedCellPosition({
       if (colIdx > nextIdx) break;
       const colSpan = getSelectedCellColSpan({
         rows,
-        summaryRows,
+        topSummaryRows,
+        bottomSummaryRows,
         rowIdx: nextRowIdx,
         lastFrozenColumnIndex,
         column,
@@ -556,8 +564,7 @@ const {
   round,
   floor,
   sign,
-  abs,
-  ceil
+  abs
 } = Math;
 function assertIsValidKeyGetter(keyGetter) {
   if (typeof keyGetter !== 'function') {
@@ -570,13 +577,15 @@ function clampColumnWidth(width, {
 }) {
   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,
@@ -586,14 +595,12 @@ function useCalculatedColumns({
   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,
@@ -603,27 +610,23 @@ function useCalculatedColumns({
     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) {
@@ -642,7 +645,7 @@ function useCalculatedColumns({
       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);
         }
@@ -650,7 +653,7 @@ function useCalculatedColumns({
         return -1;
       }
-      if (rawGroupBy != null && rawGroupBy.includes(bKey)) return 1;
+      if (rawGroupBy?.includes(bKey)) return 1;
       if (frozenA) {
         if (frozenB) return 0;
@@ -685,6 +688,7 @@ function useCalculatedColumns({
     };
   }, [rawColumns, defaultWidth, defaultMinWidth, defaultMaxWidth, defaultFormatter, defaultResizable, defaultSortable, rawGroupBy]);
   const {
+    templateColumns,
     layoutCssVars,
     totalFrozenColumnWidth,
     columnMetrics
@@ -692,48 +696,23 @@ function useCalculatedColumns({
     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) {
@@ -742,7 +721,7 @@ function useCalculatedColumns({
     }
     const layoutCssVars = {
-      gridTemplateColumns: templateColumns
+      gridTemplateColumns: templateColumns.join(' ')
     };
     for (let i = 0; i <= lastFrozenColumnIndex; i++) {
@@ -751,11 +730,12 @@ function useCalculatedColumns({
     }
     return {
+      templateColumns,
       layoutCssVars,
       totalFrozenColumnWidth,
       columnMetrics
     };
-  }, [columnWidths, columns, viewportWidth, lastFrozenColumnIndex]);
+  }, [columnWidths, columns, lastFrozenColumnIndex]);
   const [colOverscanStartIdx, colOverscanEndIdx] = F(() => {
     if (!enableVirtualization) {
       return [0, columns.length - 1];
@@ -809,6 +789,7 @@ function useCalculatedColumns({
     colSpanColumns,
     colOverscanStartIdx,
     colOverscanEndIdx,
+    templateColumns,
     layoutCssVars,
     columnMetrics,
     lastFrozenColumnIndex,
@@ -817,29 +798,11 @@ function useCalculatedColumns({
   };
 }
-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
@@ -857,11 +820,12 @@ function useGridDimensions() {
     } = 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);
@@ -869,11 +833,7 @@ function useGridDimensions() {
       resizeObserver.disconnect();
     };
   }, []);
-  return [gridRef, inlineSize, blockSize];
-}
-function handleDevicePixelRatio(size) {
-  return size - (devicePixelRatio === 1 ? 0 : ceil(devicePixelRatio));
+  return [gridRef, inlineSize, blockSize, isWidthInitialized];
 }
 function useLatestFunc(fn) {
@@ -881,9 +841,10 @@ function useLatestFunc(fn) {
   h(() => {
     ref.current = fn;
   });
-  return T$1((...args) => {
+  const callbackFn = T$1((...args) => {
     ref.current(...args);
   }, []);
+  return fn ? callbackFn : fn;
 }
 function useRovingCellRef(isSelected) {
@@ -894,7 +855,9 @@ function useRovingCellRef(isSelected) {
   }
   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
     });
@@ -918,12 +881,14 @@ function useViewportColumns({
   columns,
   colSpanColumns,
   rows,
-  summaryRows,
+  topSummaryRows,
+  bottomSummaryRows,
   colOverscanStartIdx,
   colOverscanEndIdx,
   lastFrozenColumnIndex,
   rowOverscanStartIdx,
   rowOverscanEndIdx,
+  columnWidths,
   isGroupRow
 }) {
   const startIdx = F(() => {
@@ -961,8 +926,19 @@ function useViewportColumns({
         }
       }
-      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
@@ -974,18 +950,36 @@ function useViewportColumns({
     }
     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) {
@@ -1036,10 +1030,8 @@ function useViewportRows({
       }
       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,
@@ -1166,14 +1158,11 @@ function useViewportRows({
   };
 }
-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,
@@ -1199,7 +1188,7 @@ function SortableHeaderCell({
   children,
   isCellSelected
 }) {
-  const SortIcon = useDefaultComponents().sortIcon;
+  const sortStatus = useDefaultComponents().sortStatus;
   const {
     ref,
     tabIndex
@@ -1226,17 +1215,15 @@ function SortableHeaderCell({
       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,
@@ -1251,21 +1238,19 @@ function HeaderCell({
   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) {
@@ -1287,6 +1272,7 @@ function HeaderCell({
     }
     function onPointerMove(event) {
+      event.preventDefault();
       const {
         right,
         left
@@ -1294,7 +1280,7 @@ function HeaderCell({
       const width = isRtl ? right + offset - event.clientX : event.clientX + offset - left;
       if (width > 0) {
-        onColumnResize(column, clampColumnWidth(width, column));
+        onColumnResize(column, width);
       }
     }
@@ -1361,11 +1347,11 @@ function HeaderCell({
       return;
     }
-    onColumnResize(column, 'auto');
+    onColumnResize(column, 'max-content');
   }
   function handleFocus(event) {
-    onFocus == null ? void 0 : onFocus(event);
+    onFocus?.(event);
     if (shouldFocusGrid) {
       selectCell(0);
@@ -1381,30 +1367,24 @@ function HeaderCell({
     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({
@@ -1458,12 +1438,9 @@ function HeaderRow({
 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({
@@ -1495,10 +1472,8 @@ function Cell({
   }
   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() {
@@ -1507,7 +1482,11 @@ function Cell({
   function handleDoubleClick() {
     selectCellWrapper(true);
-    onRowDoubleClick == null ? void 0 : onRowDoubleClick(row, column);
+    onRowDoubleClick?.(row, column);
+  }
+  function handleRowChange(newRow) {
+    onRowChange(column, newRow);
   }
   return /*#__PURE__*/o("div", {
@@ -1526,11 +1505,11 @@ function Cell({
     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]
     })
   });
@@ -1561,16 +1540,16 @@ function Row({
   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++) {
@@ -1622,7 +1601,11 @@ function Row({
   });
 }
-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,
@@ -1658,24 +1641,21 @@ function GroupCell({
     },
     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({
@@ -1728,10 +1708,7 @@ function GroupedRow({
 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,
@@ -1746,7 +1723,6 @@ function SummaryCell({
     onFocus
   } = useRovingCellRef(isCellSelected);
   const {
-    summaryFormatter: SummaryFormatter,
     summaryCellClass
   } = column;
   const className = getCellClassname(column, summaryCellClassname, typeof summaryCellClass === 'function' ? summaryCellClass(row) : summaryCellClass);
@@ -1766,22 +1742,22 @@ function SummaryCell({
     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,
@@ -1792,6 +1768,7 @@ function SummaryRow({
   bottom,
   lastFrozenColumnIndex,
   selectedCellIdx,
+  lastTopRowIdx,
   selectCell,
   'aria-rowindex': ariaRowIndex
 }) {
@@ -1818,10 +1795,11 @@ function SummaryRow({
     }, 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
@@ -1832,22 +1810,16 @@ function SummaryRow({
 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);
   });
@@ -1880,11 +1852,8 @@ function EditCell({
     } 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();
@@ -1903,7 +1872,7 @@ function EditCell({
   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,
@@ -1914,25 +1883,22 @@ function EditCell({
     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,
@@ -2009,7 +1975,7 @@ function DragHandle({
     }
     if (indexes.length > 0) {
-      onRowsChange == null ? void 0 : onRowsChange(updatedRows, {
+      onRowsChange?.(updatedRows, {
         indexes,
         column
       });
@@ -2023,15 +1989,25 @@ function DragHandle({
   });
 }
-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",
@@ -2040,7 +2016,12 @@ function SortIcon({
     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 = {
@@ -2049,56 +2030,56 @@ const initialPosition = {
   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());
@@ -2106,24 +2087,24 @@ function DataGrid({
   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
@@ -2135,6 +2116,7 @@ function DataGrid({
     colSpanColumns,
     colOverscanStartIdx,
     colOverscanEndIdx,
+    templateColumns,
     layoutCssVars,
     columnMetrics,
     lastFrozenColumnIndex,
@@ -2170,7 +2152,10 @@ function DataGrid({
     expandedGroupIds,
     enableVirtualization
   });
-  const viewportColumns = useViewportColumns({
+  const {
+    viewportColumns,
+    flexWidthViewportColumns
+  } = useViewportColumns({
     columns,
     colSpanColumns,
     colOverscanStartIdx,
@@ -2179,16 +2164,22 @@ function DataGrid({
     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);
@@ -2207,12 +2198,19 @@ function DataGrid({
   });
   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
@@ -2226,36 +2224,34 @@ function DataGrid({
     }
     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 {
@@ -2270,24 +2266,34 @@ function DataGrid({
     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,
@@ -2434,16 +2440,18 @@ function DataGrid({
       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;
@@ -2451,13 +2459,13 @@ function DataGrid({
     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() {
@@ -2471,7 +2479,7 @@ function DataGrid({
       row: sourceRow,
       columnKey: sourceColumnKey
     });
-    onCopy == null ? void 0 : onCopy({
+    onCopy?.({
       sourceRow,
       sourceColumnKey
     });
@@ -2486,19 +2494,18 @@ function DataGrid({
       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;
@@ -2520,7 +2527,7 @@ function DataGrid({
     }
     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)) {
@@ -2580,7 +2587,7 @@ function DataGrid({
         originalRow: row
       });
     } else if (isSamePosition(selectedPosition, position)) {
-      scrollToCell(position);
+      scrollIntoView(gridRef.current?.querySelector('[tabindex="0"]'));
     } else {
       setSelectedPosition({ ...position,
         mode: 'SELECT'
@@ -2588,19 +2595,16 @@ function DataGrid({
     }
   }
-  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
@@ -2616,7 +2620,8 @@ function DataGrid({
       let right = left + width;
       const colSpan = getSelectedCellColSpan({
         rows,
-        summaryRows,
+        topSummaryRows,
+        bottomSummaryRows,
         rowIdx,
         lastFrozenColumnIndex,
         column,
@@ -2641,17 +2646,6 @@ function DataGrid({
         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) {
@@ -2789,7 +2783,8 @@ function DataGrid({
       columns,
       colSpanColumns,
       rows,
-      summaryRows,
+      topSummaryRows,
+      bottomSummaryRows,
       minRowIdx,
       maxRowIdx,
       lastFrozenColumnIndex,
@@ -2812,14 +2807,15 @@ function DataGrid({
   }
   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(' ')
     };
   }
@@ -2866,7 +2862,7 @@ function DataGrid({
     const onRowChange = (row, commitChanges) => {
       if (commitChanges) {
-        updateRow(selectedPosition.rowIdx, row);
+        updateRow(column, selectedPosition.rowIdx, row);
         closeEditor();
       } else {
         setSelectedPosition(position => ({ ...position,
@@ -2884,10 +2880,7 @@ function DataGrid({
       colSpan: colSpan,
       row: row,
       onRowChange: onRowChange,
-      closeEditor: closeEditor,
-      scrollToCell: () => {
-        scrollToCell(selectedPosition);
-      }
+      closeEditor: closeEditor
     }, column.key);
   }
@@ -2926,7 +2919,7 @@ function DataGrid({
       }
       const row = rows[rowIdx];
-      const gridRowStart = headerRowsCount + rowIdx + 1;
+      const gridRowStart = headerRowsCount + topSummaryRowsCount + rowIdx + 1;
       if (isGroupRow(row)) {
         ({
@@ -2937,7 +2930,7 @@ function DataGrid({
           "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,
@@ -2962,36 +2955,34 @@ function DataGrid({
       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;
@@ -3004,12 +2995,16 @@ function DataGrid({
   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;
@@ -3021,8 +3016,10 @@ function DataGrid({
     "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`,
@@ -3046,40 +3043,59 @@ function DataGrid({
       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)]
     })]
   });
 }
@@ -3090,9 +3106,6 @@ function isSamePosition(p1, p2) {
 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()]);
@@ -3205,7 +3218,7 @@ var ReactTable = function (_a) {
         }
         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) {