fix(legacy-table): container height on tall headers (apache#398)

* fix(legacy-table): container height on tall headers * fix(legacy-table): possible undefined lint error
zhaoyongjie · Nov 25, 2021 · 9048425 · 9048425
1 parent ac32188
commit 9048425
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/...superset-ui-plugins/packages/superset-ui-legacy-plugin-chart-table/src/ReactDataTable.tsx b/...superset-ui-plugins/packages/superset-ui-legacy-plugin-chart-table/src/ReactDataTable.tsx
@@ -185,9 +185,13 @@ export default function ReactDataTable(props: DataTableProps) {
     const dataTable = $root.find('table').DataTable(options);
 
     // adjust table height
-    const scrollHeadHeight = 34;
-    const paginationHeight = hasPagination ? 35 : 0;
-    const searchBarHeight = hasPagination || includeSearch ? 35 : 0;
+    const scrollHeadHeight = $root.find('.dataTables_scrollHead').height() || 0;
+    const paginationHeight = $root.find('.dataTables_paginate').height() || 0;
+    const searchBarHeight =
+      $root
+        .find('.dataTables_length,.dataTables_filter')
+        .closest('.row')
+        .height() || 0;
     const scrollBodyHeight = viewportHeight - scrollHeadHeight - paginationHeight - searchBarHeight;
     $root.find('.dataTables_scrollBody').css('max-height', scrollBodyHeight);
 
@@ -238,7 +242,7 @@ export default function ReactDataTable(props: DataTableProps) {
                   style={{
                     backgroundImage: keyIsMetric ? cellBar(key, val as number) : undefined,
                   }}
-                  title={keyIsMetric || percentMetricsSet.has(key) ? (val as string) : ''}
+                  title={keyIsMetric || percentMetricsSet.has(key) ? String(val) : ''}
                 >
                   {isHtml ? null : text}
                 </td>

diff --git a/...ges/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-table/birth_names.json b/...ges/superset-ui-plugins-demo/storybook/stories/legacy-plugin-chart-table/birth_names.json
@@ -168,7 +168,7 @@
       "gender": "gender",
       "name": "name",
       "num": "num",
-      "state": "state",
+      "state": "state (this is a very very very long column)",
       "sum_boys": "sum_boys",
       "sum_girls": "sum_girls"
     },