feat: DataTable component optimization

new-lamassu-admin/src/components/tables/DataTable.js

@@ -110,11 +110,12 @@ const DataTable = ({
   const classes = useStyles({ width })
 
   const expandRow = id => {
+    cache.clear(id)
     setExpanded(id === expanded ? null : id)
   }
 
   const cache = new CellMeasurerCache({
-    defaultHeight: 62,
+    defaultHeight: 58,
     fixedWidth: true
   })
 
@@ -126,20 +127,22 @@ const DataTable = ({
         key={key}
         parent={parent}
         rowIndex={index}>
-        <div style={style}>
+        {({ registerChild }) => (
-          <Row
+          <div ref={registerChild} style={style}>
-            width={width}
+            <Row
-            id={index}
+              width={width}
-            expWidth={expWidth}
+              id={index}
-            elements={elements}
+              expWidth={expWidth}
-            data={data[index]}
+              elements={elements}
-            Details={Details}
+              data={data[index]}
-            expanded={index === expanded}
+              Details={Details}
-            expandRow={expandRow}
+              expanded={index === expanded}
-            expandable={expandable}
+              expandRow={expandRow}
-            onClick={onClick}
+              expandable={expandable}
-          />
+              onClick={onClick}
-        </div>
+            />
+          </div>
+        )}
       </CellMeasurer>
     )
   }
@@ -173,7 +176,7 @@ const DataTable = ({
                 rowCount={data.length}
                 rowHeight={cache.rowHeight}
                 rowRenderer={rowRenderer}
-                overscanRowCount={50}
+                overscanRowCount={5}
                 deferredMeasurementCache={cache}
               />
             )}