perf(ui): virtualized schema table for better performance when render…

…ing wide table definitions with many columns.
stanbaker · Oct 25, 2022 · 94e52c5 · 94e52c5
1 parent 775d2b0
commit 94e52c5
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/datahub-web-react/package.json b/datahub-web-react/package.json
@@ -88,6 +88,7 @@
         "styled-components": "^5.2.1",
         "typescript": "^4.1.3",
         "uuid": "^8.3.2",
+        "virtuallist-antd": "^0.7.4",
         "vx": "^0.0.1",
         "web-vitals": "^0.2.4",
         "yamljs": "^0.3.0"

diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { ColumnsType } from 'antd/es/table';
+import { VList } from 'virtuallist-antd';
 import styled from 'styled-components';
-import {} from 'antd';
 import {
     EditableSchemaMetadata,
     ForeignKeyConstraint,
@@ -17,7 +17,6 @@ import useUsageStatsRenderer from './utils/useUsageStatsRenderer';
 import useTagsAndTermsRenderer from './utils/useTagsAndTermsRenderer';
 import ExpandIcon from './components/ExpandIcon';
 import { StyledTable } from '../../../components/styled/StyledTable';
-import { SchemaRow } from './components/SchemaRow';
 import { FkContext } from './utils/selectedFkContext';
 import useSchemaBlameRenderer from './utils/useSchemaBlameRenderer';
 import { ANTD_GRAY } from '../../../constants';
@@ -194,11 +193,8 @@ export default function SchemaTable({
                     columns={allColumns}
                     dataSource={rows}
                     rowKey="fieldPath"
-                    components={{
-                        body: {
-                            row: SchemaRow,
-                        },
-                    }}
+                    scroll={{ y: '100vh', x: '100%' }}
+                    components={VList({ height: 'auto' })}
                     expandable={{
                         expandedRowKeys: [...Array.from(expandedRows)],
                         defaultExpandAllRows: false,

diff --git a/datahub-web-react/yarn.lock b/datahub-web-react/yarn.lock
@@ -16791,6 +16791,11 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
+virtuallist-antd@^0.7.4:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/virtuallist-antd/-/virtuallist-antd-0.7.4.tgz#759a28ccdf1dda295d33867ee9197519bd5ad6e2"
+  integrity sha512-MNzhQa34VAuLZO265FIhzDv6rzsRDOQMgxo3AL0HLq+hSVpqTmIp8sjBdFLnk+8yQh6SsBb1FZ/IjOlXF0vbmw==
+
 vm-browserify@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"