Fix 227 issue

community-edition/packages/react-virtual-list-pro/src/StickyRowsContainer.js

@@ -37,7 +37,7 @@ const StickyRowsContainer = (props) => {
             }
             return result;
         });
-        rowsToTranslate.forEach((rowToTranslate, i) => {
+        rowsToTranslate.forEach((_rowToTranslate, i) => {
             const rowToTranslateIndex = rowsToTranslateIndexes[i];
             const domNode = domNodeRef.current;
             const rowNode = domNode.children[rowToTranslateIndex];
@@ -84,7 +84,7 @@ const StickyRowsContainer = (props) => {
             //rows with a bigger scale will slide under those with a lesser scale
             // on scrolling
             [...domNode.children].forEach((c, i) => {
-                c.style.zIndex = 1000 - i;
+                c.style.zIndex = `${1000 - i}`;
                 totalHeight += c.offsetHeight;
             });
             currentHeightRef.current = totalHeight;

community-edition/packages/react-virtual-list-pro/src/StickyRowsContainer.tsx

@@ -26,7 +26,7 @@ const StickyRowsContainer = (props: TypeProps) => {
   const [content, setContent] = useState<JSX.Element | null>(null);
 
   const currentHeightRef = useRef<number>(0);
-  const domNodeRef = useRef<HTMLElement>(null);
+  const domNodeRef = useRef<HTMLDivElement>(null);
 
   const nonEmptyRowElementsRefRef = useRef<any>(null);
   const rowElementsRef = useRef<any>(null);
@@ -46,7 +46,7 @@ const StickyRowsContainer = (props: TypeProps) => {
     // we can cancel all transforms
     if (enteringRow == null) {
       scrollTopRef.current = scrollTop;
-      const domNode = domNodeRef.current;
+      const domNode: any = domNodeRef.current;
       [...domNode.children].forEach(rowNode => {
         rowNode.style.transform = `translate3d(0px, 0px, 0px)`;
       });
@@ -65,10 +65,10 @@ const StickyRowsContainer = (props: TypeProps) => {
       return result;
     });
 
-    rowsToTranslate.forEach((rowToTranslate, i) => {
+    rowsToTranslate.forEach((_rowToTranslate, i) => {
       const rowToTranslateIndex = rowsToTranslateIndexes[i];
       const domNode = domNodeRef.current;
-      const rowNode = domNode!.children[rowToTranslateIndex];
+      const rowNode: any = domNode!.children[rowToTranslateIndex];
 
       if (rowNode) {
         const y =
@@ -122,15 +122,15 @@ const StickyRowsContainer = (props: TypeProps) => {
   };
 
   useLayoutEffect(() => {
-    const domNode = domNodeRef.current;
+    const domNode: any = domNodeRef.current;
 
     let totalHeight = 0;
     if (domNode && domNode.children) {
       // make top rows zIndex bigger, so
       //rows with a bigger scale will slide under those with a lesser scale
       // on scrolling
-      [...domNode.children].forEach((c, i) => {
-        c.style.zIndex = 1000 - i;
+      [...domNode.children].forEach((c: HTMLDivElement, i: number) => {
+        c.style.zIndex = `${1000 - i}`;
         totalHeight += c.offsetHeight;
       });
 
@@ -159,18 +159,20 @@ const StickyRowsContainer = (props: TypeProps) => {
     <div
       className={StickyRowsContainerClassName}
       ref={domNodeRef}
-      style={{
-        position: stickyString,
-        top: 0,
-        left: 0,
-        right: 0,
-        height: 0,
-        zIndex: 1,
-        contain: 'layout',
-        [props.rtl ? 'transform' : '']: props.rtl
-          ? `translate3d(${props.stickyOffset}px, 0px, 0px)`
-          : '',
-      }}
+      style={
+        {
+          position: stickyString,
+          top: 0,
+          left: 0,
+          right: 0,
+          height: 0,
+          zIndex: 1,
+          contain: 'layout',
+          [props.rtl ? 'transform' : '']: props.rtl
+            ? `translate3d(${props.stickyOffset}px, 0px, 0px)`
+            : '',
+        } as any
+      }
     >
       {content}
     </div>

examples/pages/prop-columns/index.page.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-import DataGrid from '@inovua/reactdatagrid-enterprise';
+import DataGrid from '../../../enterprise-edition';
 
 import people from '../people';
 
@@ -32,7 +32,7 @@ const times = (arr, n) => {
 const defaultGroupBy = ['country'];
 
 const defaultCellSelection = { '0-4,id': true, '0-4,desc': true };
-class App extends React.Component {
+class App extends React.Component<{}, { columns: any[]; dataSource: any[] }> {
   constructor(props) {
     super(props);
     this.state = {

examples/pages/prop-stickyGroupRows/index.page.tsx

@@ -31,23 +31,17 @@ const columns = [
 
 const App = () => {
   const [defaultGroupBy, setDefaultGroupBy] = useState(['country']);
-  const [stickyGroupRows, setStickyGroupRows] = useState(false);
+  const [stickyGroupRows, setStickyGroupRows] = useState(true);
 
   return (
     <div>
       <div style={{ marginBottom: 20 }}>
-        <CheckBox
-          theme="default-dark"
-          checked={stickyGroupRows}
-          onChange={setStickyGroupRows}
-        >
+        <CheckBox checked={stickyGroupRows} onChange={setStickyGroupRows}>
           Use sticky group rows
         </CheckBox>
       </div>
       <ReactDataGrid
         idProperty="id"
-        theme="default-dark"
-        licenseKey={process.env.NEXT_PUBLIC_LICENSE_KEY}
         style={gridStyle}
         stickyGroupRows={stickyGroupRows}
         stickyTreeNodes

examples/pages/prop-stickyGroupRows/sticky-issue.page.tsx

@@ -0,0 +1,114 @@
+import React, { useState, useCallback } from 'react';
+import ReactDataGrid from '@inovua/reactdatagrid-enterprise';
+import CheckBox from '@inovua/reactdatagrid-community/packages/CheckBox';
+
+const gridStyle = { minHeight: 400 };
+
+const columns = [
+  {
+    name: 'id',
+    type: 'number',
+    defaultWidth: 80,
+    groupBy: false,
+    header: 'Id',
+    defaultVisible: false,
+  },
+  { name: 'name', defaultFlex: 1, header: 'Name' },
+  { name: 'country', defaultWidth: 150, header: 'Country' },
+  { name: 'city', defaultWidth: 150, header: 'City' },
+  { name: 'age', defaultWidth: 100, type: 'number', header: 'Age' },
+  { name: 'email', defaultWidth: 150, defaultFlex: 1, header: 'Email' },
+];
+
+const App = () => {
+  const [people] = useState([
+    {
+      id: 1,
+      name: 'George',
+      country: 'UK',
+      city: 'London',
+      age: 30,
+      email: '[email protected]',
+    },
+    {
+      id: 2,
+      name: 'Joe',
+      country: 'USA',
+      city: 'New York',
+      age: 70,
+      email: '[email protected]',
+    },
+
+    //
+    // Workaround #1: It expands fine if there is more than 1 in the group by.
+    //
+    // {
+    //   id: 3,
+    //   name: "Peter",
+    //   country: "UK",
+    //   city: "York",
+    //   age: 34,
+    //   email: "[email protected]"
+    // },
+
+    {
+      id: 4,
+      name: 'Fiona',
+      country: 'USA',
+      city: 'Orlando',
+      age: 60,
+      email: '[email protected]',
+    },
+  ]);
+
+  const [defaultGroupBy] = useState(['country', 'city']);
+
+  const [stickyGroupRows, setStickyGroupRows] = useState(true);
+
+  const [collapsedGroups, setCollapsedGroups] = useState(true);
+  const [expandedGroups, setExpandedGroups] = useState({});
+
+  const onGroupCollapseChange = useCallback((cGroups, eGroups) => {
+    setCollapsedGroups(cGroups);
+    setExpandedGroups(eGroups);
+  }, []);
+
+  return (
+    <div>
+      <div style={{ marginBottom: 20 }}>
+        <CheckBox checked={stickyGroupRows} onChange={setStickyGroupRows}>
+          stickyGroupRows
+        </CheckBox>
+      </div>
+      <ReactDataGrid
+        idProperty="id"
+        style={gridStyle}
+        stickyGroupRows={stickyGroupRows} // If this is removed there is no problem.
+        defaultGroupBy={defaultGroupBy}
+        columns={columns}
+        dataSource={people}
+        columnUserSelect={true}
+        disableGroupByToolbar
+        showGroupSummaryRow={true}
+        onGroupCollapseChange={onGroupCollapseChange}
+        collapsedGroups={collapsedGroups}
+        expandedGroups={expandedGroups}
+        groupColumn={{
+          defaultWidth: 280,
+          renderGroupValue: ({ value, data }) => {
+            return (
+              <React.Fragment>
+                {value}{' '}
+                {`(${data.array.length} person${
+                  data.array.length > 1 ? 's' : ''
+                })`}
+              </React.Fragment>
+            );
+          },
+        }}
+      />
+    </div>
+  );
+};
+
+export default () => <App />;