From 7ed7afc46a21f13d4c9da6ed9ae9c73b011e7968 Mon Sep 17 00:00:00 2001
From: Bianca Del Carretto <bianca.delcarretto@wyscout.com>
Date: Sun, 28 Jun 2020 15:17:23 +0200
Subject: [PATCH] memoize itemCount and itemData and fix header table height
 (#171)

---
 src/components/DomEventsTable.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/DomEventsTable.js b/src/components/DomEventsTable.js
index 17752e4d..18c88643 100644
--- a/src/components/DomEventsTable.js
+++ b/src/components/DomEventsTable.js
@@ -159,10 +159,15 @@ const DomEventsTable = ({
     </IconButton>
   );
 
+  const [itemCount, itemData] = useMemo(() => {
+    const eventsFiltered = data.filter(filterData);
+    return [eventsFiltered.length, eventsFiltered];
+  }, [data, filterData]);
+
   return (
     <div className="editor p-4 md:h-56 flex-auto overflow-hidden">
       <div className="h-56 md:h-full w-full flex flex-col">
-        <div className="h-8 flex items-center w-full text-sm font-bold">
+        <div className="h-10 flex items-center w-full text-sm font-bold">
           <div
             className="p-2 w-16 cursor-pointer flex justify-between items-center"
             onClick={onChangeSortDirection}
@@ -214,8 +219,8 @@ const DomEventsTable = ({
                   mode={appendMode}
                   ref={listRef}
                   height={height}
-                  itemCount={data.filter(filterData).length}
-                  itemData={data.filter(filterData)}
+                  itemCount={itemCount}
+                  itemData={itemData}
                   itemSize={32}
                   width={width}
                   outerElementType={VirtualScrollable}