From ceae152991c2f63c76ebb6ca7ce7ab68f29d421d Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Mon, 22 Nov 2021 10:01:55 -0800
Subject: [PATCH] [REVERT ME] Repro / testing

---
 src-docs/src/views/datagrid/datagrid.js | 62 +++++++++++++++++++++----
 1 file changed, 52 insertions(+), 10 deletions(-)

diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js
index d2780c5d3b5..c603c930e6f 100644
--- a/src-docs/src/views/datagrid/datagrid.js
+++ b/src-docs/src/views/datagrid/datagrid.js
@@ -32,6 +32,7 @@ import {
   EuiPopover,
   EuiText,
   EuiTitle,
+  EuiRange,
 } from '../../../../src/components/';
 const DataContext = createContext();
 
@@ -400,23 +401,64 @@ export default () => {
     console.log(eventData);
   });
 
+  const [data, setData] = useState(raw_data);
+  const [rowCount, setRowCount] = useState(15);
+  const sliceData = useCallback((e) => {
+    const newRowCount = Number(e.target.value);
+    const newData = raw_data.slice(0, newRowCount);
+    setData(newData);
+    setRowCount(newRowCount);
+  }, []);
+  const setRowCountInput = (
+    <EuiRange
+      min={0}
+      max={100}
+      step={5}
+      showLabels
+      showRange
+      showInput
+      onChange={sliceData}
+      value={rowCount}
+    />
+  );
+
   return (
-    <DataContext.Provider value={raw_data}>
+    <DataContext.Provider value={data}>
+      {setRowCountInput}
+      <div style={{ height: '300px', overflow: 'scroll' }}>
+        <EuiDataGrid
+          aria-label="Data grid demo"
+          columns={columns}
+          columnVisibility={{ visibleColumns, setVisibleColumns }}
+          trailingControlColumns={trailingControlColumns}
+          rowCount={rowCount}
+          renderCellValue={renderCellValue}
+          inMemory={{ level: 'sorting' }}
+          sorting={{ columns: sortingColumns, onSort }}
+          pagination={{
+            ...pagination,
+            pageSizeOptions: [10, 50, 100],
+            onChangeItemsPerPage: onChangeItemsPerPage,
+            onChangePage: onChangePage,
+          }}
+          onColumnResize={onColumnResize.current}
+        />
+      </div>
       <EuiDataGrid
         aria-label="Data grid demo"
         columns={columns}
         columnVisibility={{ visibleColumns, setVisibleColumns }}
         trailingControlColumns={trailingControlColumns}
-        rowCount={raw_data.length}
+        rowCount={rowCount}
         renderCellValue={renderCellValue}
-        inMemory={{ level: 'sorting' }}
-        sorting={{ columns: sortingColumns, onSort }}
-        pagination={{
-          ...pagination,
-          pageSizeOptions: [10, 50, 100],
-          onChangeItemsPerPage: onChangeItemsPerPage,
-          onChangePage: onChangePage,
-        }}
+        // inMemory={{ level: 'sorting' }}
+        // sorting={{ columns: sortingColumns, onSort }}
+        // pagination={{
+        //   ...pagination,
+        //   pageSizeOptions: [10, 50, 100],
+        //   onChangeItemsPerPage: onChangeItemsPerPage,
+        //   onChangePage: onChangePage,
+        // }}
         onColumnResize={onColumnResize.current}
       />
     </DataContext.Provider>