improve grid (#582)

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

client/src/components/grid/Grid.tsx

@@ -200,16 +200,16 @@ const AttuGrid: FC<AttuGridType> = props => {
   };
 
   useEffect(() => {
-    const timer = setTimeout(() => {
+    // const timer = setTimeout(() => {
       calculateRowCountAndPageSize();
-    }, 0);
+    // }, 16);
     // Add event listener for window resize
     window.addEventListener('resize', calculateRowCountAndPageSize);
 
     // Clean up event listener on unmount
     return () => {
       window.removeEventListener('resize', calculateRowCountAndPageSize);
-      clearTimeout(timer);
+      // clearTimeout(timer);
     };
   }, [tableHeaderHeight, rowHeight]);
 

client/src/components/grid/Table.tsx

@@ -134,29 +134,30 @@ const EnhancedTable: FC<TableType> = props => {
   return (
     <TableContainer className={classes.root}>
       <Box height="100%" className={classes.box}>
-        <Table
-          stickyHeader
-          className={classes.table}
-          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 && (
+        {!isLoading && (
+          <Table
+            stickyHeader
+            className={classes.table}
+            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} />
+            )}
+
             <TableBody>
               {rows && rows.length ? (
                 rows.map((row, index) => {
@@ -288,8 +289,9 @@ const EnhancedTable: FC<TableType> = props => {
                 </tr>
               )}
             </TableBody>
-          )}
-        </Table>
+          </Table>
+        )}
+
         {isLoading && <LoadingTable count={loadingRowCount} />}
       </Box>
     </TableContainer>

client/src/components/grid/TableHead.tsx

@@ -25,12 +25,15 @@ const useStyles = makeStyles(theme => ({
   },
   tableCell: {
     // background: theme.palette.common.t,
-    padding: theme.spacing(1.5),
+    padding: 0,
     // borderBottom: 'none',
   },
   tableHeader: {
+    padding: theme.spacing(1.5),
     color: 'rgba(0, 0, 0, 0.6)',
     fontWeight: 500,
+    maxHeight: 45,
+    overflow: 'hidden',
   },
   tableRow: {
     // borderBottom: '1px solid rgba(0, 0, 0, 0.6);',

client/src/hooks/Pagination.ts

@@ -4,7 +4,7 @@ import { ColDefinitionsType, SortType } from '../components/grid/Types';
 
 export const usePaginationHook = (list: any[]) => {
   const [currentPage, setCurrentPage] = useState(0);
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useState(0);
   const [orderBy, setOrderBy] = useState('');
   const [order, setOrder] = useState<'asc' | 'desc'>('asc');
   const [sortType, setSortType] = useState<SortType>('number');