ui: fix unstable grid rendering (#899)

* part1

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

* fix: fix unstable table rendering

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

---------

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

client/src/components/grid/Table.tsx

@@ -13,7 +13,6 @@ import EditableTableHead from './TableEditableHead';
 import ActionBar from './ActionBar';
 import LoadingTable from './LoadingTable';
 import CopyButton from '../advancedSearch/CopyButton';
-import { useTranslation } from 'react-i18next';
 import type { Theme } from '@mui/material/styles';
 import type { TableType } from './Types';
 
@@ -45,7 +44,6 @@ const EnhancedTable: FC<TableType> = props => {
     orderBy,
     rowDecorator = () => ({}),
   } = props;
-  const { t: commonTrans } = useTranslation();
 
   const hasData = rows && rows.length > 0;
 
@@ -59,33 +57,33 @@ const EnhancedTable: FC<TableType> = props => {
       })}
     >
       <Box height="100%">
-        {!isLoading && (
-          <Table
-            stickyHeader
-            sx={{
-              minWidth: '100%',
-              height: hasData ? 'auto' : '100%',
-            }}
-            aria-labelledby="tableTitle"
-            size="medium"
-            aria-label="enhanced table"
-          >
-            {!headEditable ? (
-              <EnhancedTableHead
-                colDefinitions={colDefinitions}
-                numSelected={selected.length}
-                order={order}
-                orderBy={orderBy}
-                onSelectAllClick={onSelectedAll}
-                handleSort={handleSort}
-                rowCount={rows.length}
-                openCheckBox={openCheckBox}
-                disableSelect={disableSelect}
-              />
-            ) : (
-              <EditableTableHead editHeads={editHeads} />
-            )}
+        <Table
+          stickyHeader
+          sx={{
+            minWidth: '100%',
+            height: hasData ? 'auto' : '100%',
+          }}
+          aria-labelledby="tableTitle"
+          size="medium"
+          aria-label="enhanced table"
+        >
+          {!headEditable ? (
+            <EnhancedTableHead
+              colDefinitions={colDefinitions}
+              numSelected={selected.length}
+              order={order}
+              orderBy={orderBy}
+              onSelectAllClick={onSelectedAll}
+              handleSort={handleSort}
+              rowCount={rows.length}
+              openCheckBox={openCheckBox}
+              disableSelect={disableSelect}
+            />
+          ) : (
+            <EditableTableHead editHeads={editHeads} />
+          )}
 
+          {!isLoading ? (
             <TableBody>
               {hasData ? (
                 rows.map((row, index) => {
@@ -290,10 +288,28 @@ const EnhancedTable: FC<TableType> = props => {
                 </TableRow>
               )}
             </TableBody>
-          </Table>
-        )}
-
-        {isLoading && <LoadingTable />}
+          ) : (
+            <TableBody>
+              <TableRow>
+                <TableCell
+                  sx={theme => ({
+                    paddingTop: theme.spacing(6),
+                    textAlign: 'center',
+                    letterSpacing: '0.5px',
+                    color: theme.palette.text.secondary,
+                  })}
+                  colSpan={
+                    openCheckBox
+                      ? colDefinitions.length + 1
+                      : colDefinitions.length
+                  }
+                >
+                  <LoadingTable />
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          )}
+        </Table>
       </Box>
     </TableContainer>
   );

client/src/components/grid/TableHead.tsx

@@ -23,6 +23,10 @@ const VisuallyHiddenTypography = styled(Typography)(({ theme }) => ({
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
   padding: 0,
+  minWidth: '120px',
+  '&:first-of-type': {
+    minWidth: '50px',
+  },
 }));
 
 const StyledTableHeader = styled(Typography)(({ theme }) => ({
@@ -31,6 +35,7 @@ const StyledTableHeader = styled(Typography)(({ theme }) => ({
   maxHeight: 45,
   overflow: 'hidden',
   whiteSpace: 'nowrap',
+  width: '100%',
 }));
 
 const StyledTableRow = styled(TableRow)(({ theme }) => ({
@@ -107,8 +112,9 @@ const EnhancedTableHead: FC<TableHeadType> = props => {
                     orderBy === (headCell.sortBy || headCell.id) ? order : 'asc'
                   }
                   onClick={createSortHandler(headCell.sortBy || headCell.id)}
+                  sx={cellStyle}
                 >
-                  <StyledTableHeader variant="body1">
+                  <StyledTableHeader variant="body1" sx={cellStyle}>
                     {headerFormatter(headCell)}
                   </StyledTableHeader>
 
@@ -121,7 +127,7 @@ const EnhancedTableHead: FC<TableHeadType> = props => {
                   ) : null}
                 </TableSortLabel>
               ) : (
-                <StyledTableHeader variant="body1">
+                <StyledTableHeader variant="body1" sx={cellStyle}>
                   {headerFormatter(headCell)}
                 </StyledTableHeader>
               )}