Merge pull request #273 from kube-HPC/fix-scroll-pipeline-algo

fix scroll pipeline and algo
kube-HPC · Feb 19, 2023 · b90e671 · b90e671
2 parents fd9c62a + 111efc6
commit b90e671
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 16 deletions.
diff --git a/src/Routes/Tables/Algorithms/index.js b/src/Routes/Tables/Algorithms/index.js
@@ -7,15 +7,22 @@ import { Collapse } from 'react-collapse';
 import { Space } from 'antd';
 import { filterToggeledVar, algorithmsListVar } from 'cache';
 import { ALGORITHMS_QUERY } from 'graphql/queries';
+import { useVT } from 'virtualizedtableforantd4';
+import styled from 'styled-components';
 import OverviewDrawer from './OverviewDrawer';
 import usePath from './usePath';
 import EditDrawer from './EditDrawer';
 import algorithmColumns from './columns';
 import AlgorithmsQueryTable from './AlgorithmsQueryTable';
 
 const rowKey = ({ name }) => `algorithm-${name}`;
-
+const TableAlgorithms = styled(Table)`
+  .ant-table-body {
+    min-height: 80vh;
+  }
+`;
 const AlgorithmsTable = () => {
+  const [vt] = useVT(() => ({ scroll: { y: 600 } }), []);
   const filterToggeled = useReactiveVar(filterToggeledVar);
   const algorithmsList = useReactiveVar(algorithmsListVar);
 
@@ -63,14 +70,9 @@ const AlgorithmsTable = () => {
           />
         </Collapse>
 
-        <Table
-          pagination={{
-            position: ['bottomCenter'],
-            pageSize: '12',
-            hideOnSinglePage: true,
-            showSizeChanger: false,
-            size: 'large',
-          }}
+        <TableAlgorithms
+          scroll={{ y: 600 }} // It's important for using VT!!! DO NOT FORGET!!!
+          components={vt}
           rowKey={rowKey}
           dataSource={algorithmsList}
           columns={algorithmColumns}

diff --git a/src/Routes/Tables/Pipelines/index.js b/src/Routes/Tables/Pipelines/index.js
@@ -71,17 +71,13 @@ const PipelinesTable = () => {
         </Collapse>
 
         <Table
-          pagination={{
-            position: ['bottomCenter'],
-            pageSize: '11',
-            hideOnSinglePage: true,
-            showSizeChanger: false,
-            size: 'large',
-          }}
           rowKey={rowKey}
           dataSource={pipelineList}
           columns={pipelineColumns}
           onRow={onRow}
+          scroll={{
+            y: '80vh',
+          }}
         />
       </Space>