Make table size adjustable according to table rows and columns

* Provide a unique key prop to the table component to force it to fully re-render when the key changes, which will force table to adjust its size. Issue Resolved opensearch-project#5440 Signed-off-by: Anan Z <[email protected]>
ananzh · Feb 5, 2024 · 80cb5bd · 80cb5bd
1 parent 7c0bd9f
commit 80cb5bd
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -53,6 +53,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Discover] Fix missing index pattern field from breaking Discover [#5626](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5626)
 - [BUG] Remove duplicate sample data as id 90943e30-9a47-11e8-b64d-95841ca0b247 ([5668](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5668))
 - [BUG][Multiple Datasource] Fix datasource testing connection unexpectedly passed with wrong endpoint [#5663](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5663)
+- [BUG][Discover] Make table size adjustable according to table rows and columns ([#5514](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5514))
 
 ### 🚞 Infrastructure
 

diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx b/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx
@@ -85,11 +85,6 @@ export const DiscoverTable = ({ rows }: Props) => {
     return null;
   }
 
-  if (!rows || rows.length === 0) {
-    // TODO: handle better
-    return <div>{'loading...'}</div>;
-  }
-
   return (
     <DataGridTable
       columns={columns}

diff --git a/src/plugins/discover/public/application/view_components/canvas/index.tsx b/src/plugins/discover/public/application/view_components/canvas/index.tsx
@@ -89,6 +89,12 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
   }, [dispatch, filteredColumns, indexPattern]);
 
   const timeField = indexPattern?.timeFieldName ? indexPattern.timeFieldName : undefined;
+  const lastColumn = columns ? columns[columns.length - 1] : '';
+
+  if (!rows || rows.length === 0) {
+    // TODO: handle better
+    return <div>{'loading...'}</div>;
+  }
 
   return (
     <EuiPanel
@@ -118,7 +124,7 @@ export default function DiscoverCanvas({ setHeaderActionMenu, history }: ViewPro
               <MemoizedDiscoverChartContainer {...fetchState} />
             </EuiPanel>
           </EuiPanel>
-          <MemoizedDiscoverTable rows={rows} />
+          <MemoizedDiscoverTable key={`table-${rows?.length}-${lastColumn}`} rows={rows} />
         </>
       )}
     </EuiPanel>