[fix] Resolve table height issue in boards (#2949)

aimhubio · Aug 2, 2023 · d68bd02 · d68bd02
1 parent e6d2d99
commit d68bd02
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 64 deletions.
diff --git a/src/aimcore/web/ui/src/components/kit_v2/Table/Table.style.ts b/src/aimcore/web/ui/src/components/kit_v2/Table/Table.style.ts
@@ -1,14 +1,7 @@
 import { styled } from 'config/stitches';
 
-const TableCellStyled = styled('td', {
-  p: '$3 $7',
-  height: '$3',
-  border: '1px solid  rgba(180, 191, 202, 0.3)',
-  verticalAlign: 'middle',
-  whiteSpace: 'nowrap',
-  '.AudiosList': {
-    height: 'unset !important',
-  },
+const TableContainerStyled = styled('div', {
+  overflow: 'auto',
 });
 
 const TableStyled = styled('table', {
@@ -34,6 +27,8 @@ const TableStyled = styled('table', {
   },
 });
 
+const TableHeaderStyled = styled('thead', {});
+
 const TableHeadStyled = styled('th', {
   height: '$9',
   p: '0 $7',
@@ -63,9 +58,19 @@ const TableRowStyled = styled('tr', {
   },
 });
 
-const TableHeaderStyled = styled('thead', {});
+const TableCellStyled = styled('td', {
+  p: '$3 $7',
+  height: '$3',
+  border: '1px solid  rgba(180, 191, 202, 0.3)',
+  verticalAlign: 'middle',
+  whiteSpace: 'nowrap',
+  '.AudiosList': {
+    height: 'unset !important',
+  },
+});
 
 export {
+  TableContainerStyled,
   TableCellStyled,
   TableStyled,
   TableHeadStyled,

diff --git a/src/aimcore/web/ui/src/components/kit_v2/Table/Table.tsx b/src/aimcore/web/ui/src/components/kit_v2/Table/Table.tsx
@@ -14,7 +14,7 @@ import {
   TableRow,
 } from './components';
 import { TableProps } from './Table.d';
-import { TableStyled } from './Table.style';
+import { TableContainerStyled, TableStyled } from './Table.style';
 
 function Table({
   data,
@@ -91,51 +91,63 @@ function Table({
     }
   }
 
+  let height = undefined;
+
+  if (tableRef.current?.offsetHeight) {
+    height = tableRef.current.offsetHeight;
+
+    if (height > 600) {
+      height = 600;
+    }
+  }
+
   return (
-    <TableStyled
-      className={classNames('AimTable', className)}
-      ref={tableRef}
-      {...rest}
-    >
-      <TableHeader>
-        <TableRow>
-          {withSelect ? <TableHead>#</TableHead> : null}
-          {Object.keys(data).map((header: string, index: number) => (
-            <TableHead key={index}>{header}</TableHead>
-          ))}
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {transformedData.map((item: Record<string, any>, index: number) => {
-          return (
-            <TableRow
-              isFocused={
-                focusedRow !== undefined ? focusedRow === index : false
-              }
-              data-index={index}
-              onClick={handleRowFocus}
-              key={index}
-            >
-              {withSelect ? (
-                <TableCell>
-                  <Checkbox
-                    data-index={index}
-                    checked={selectedRows?.includes(index)}
-                    onCheckedChange={(checked) =>
-                      handleRowSelect(checked, index)
-                    }
-                    onClick={(e: any) => e.stopPropagation()}
-                  />
-                </TableCell>
-              ) : null}
-              {columnKeys.map((key: string) => {
-                return <TableCell key={key}>{item[key]}</TableCell>;
-              })}
-            </TableRow>
-          );
-        })}
-      </TableBody>
-    </TableStyled>
+    <TableContainerStyled css={{ minHeight: height }}>
+      <TableStyled
+        className={classNames('AimTable', className)}
+        ref={tableRef}
+        {...rest}
+      >
+        <TableHeader>
+          <TableRow>
+            {withSelect ? <TableHead>#</TableHead> : null}
+            {Object.keys(data).map((header: string, index: number) => (
+              <TableHead key={index}>{header}</TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {transformedData.map((item: Record<string, any>, index: number) => {
+            return (
+              <TableRow
+                isFocused={
+                  focusedRow !== undefined ? focusedRow === index : false
+                }
+                data-index={index}
+                onClick={handleRowFocus}
+                key={index}
+              >
+                {withSelect ? (
+                  <TableCell>
+                    <Checkbox
+                      data-index={index}
+                      checked={selectedRows?.includes(index)}
+                      onCheckedChange={(checked) =>
+                        handleRowSelect(checked, index)
+                      }
+                      onClick={(e: any) => e.stopPropagation()}
+                    />
+                  </TableCell>
+                ) : null}
+                {columnKeys.map((key: string) => {
+                  return <TableCell key={key}>{item[key]}</TableCell>;
+                })}
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </TableStyled>
+    </TableContainerStyled>
   );
 }
 

diff --git a/src/aimcore/web/ui/src/pages/Board/components/VisualizationElements/TableVizElement.tsx b/src/aimcore/web/ui/src/pages/Board/components/VisualizationElements/TableVizElement.tsx
@@ -1,15 +1,13 @@
-import { Box, Table } from 'components/kit_v2';
+import { Table } from 'components/kit_v2';
 
 function TableVizElement(props: any) {
   return (
-    <Box css={{ overflow: 'auto' }}>
-      <Table
-        data={props.data}
-        withSelect={props.options.selectable_rows}
-        onRowFocus={props.callbacks.on_row_focus}
-        onRowSelect={props.callbacks.on_row_select}
-      />
-    </Box>
+    <Table
+      data={props.data}
+      withSelect={props.options.selectable_rows}
+      onRowFocus={props.callbacks.on_row_focus}
+      onRowSelect={props.callbacks.on_row_select}
+    />
   );
 }