adjust grid row count calculation (#403)

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

client/src/components/grid/Grid.tsx

@@ -103,7 +103,7 @@ const AttuGrid: FC<AttuGridType> = props => {
     rowCount = 20,
     rowsPerPage = 10,
     tableHeaderHeight = 46,
-    rowHeight = 49,
+    rowHeight = 43,
     pagerHeight = 52,
     primaryKey = 'id',
     showToolbar = false,
@@ -181,17 +181,14 @@ const AttuGrid: FC<AttuGridType> = props => {
   const calculateRowCountAndPageSize = () => {
     if (tableRef.current && rowHeight > 0) {
       const containerHeight: number = tableRef.current.offsetHeight;
+      const hasToolbar = toolbarConfigs.length > 0;
+      const totleHeight =
+        containerHeight -
+        tableHeaderHeight -
+        (showPagination ? pagerHeight : 0) -
+        (hasToolbar ? 34 : 0);
 
-      const rowCount = Math.floor(
-        (containerHeight -
-          tableHeaderHeight -
-          (showPagination ? pagerHeight : 0)) /
-          rowHeight
-      );
-
-      // console.log('calc', tableRef.current.offsetHeight);
-      // console.log(rowCount, containerHeight, tableHeaderHeight);
-      setLoadingRowCount(rowCount);
+      const rowCount = Math.floor(totleHeight / rowHeight);
 
       if (setRowsPerPage) {
         setRowsPerPage(rowCount);

client/src/components/grid/Table.tsx

@@ -46,7 +46,7 @@ const useStyles = makeStyles(theme => ({
   },
   tableCell: {
     background: theme.palette.common.white,
-    padding: `${theme.spacing(1.5)} `,
+    padding: theme.spacing(1, 1.5),
   },
   cellContainer: {
     display: 'flex',

client/src/pages/collections/Collections.tsx

@@ -646,6 +646,7 @@ const Collections = () => {
           page={currentPage}
           onPageChange={handlePageChange}
           rowsPerPage={pageSize}
+          rowHeight={49}
           setRowsPerPage={handlePageSize}
           isLoading={loading}
           handleSort={handleGridSort}

client/src/pages/query/Query.tsx

@@ -390,6 +390,7 @@ const Query = () => {
         isLoading={!!tableLoading}
         rows={queryResult.data}
         rowCount={total}
+        rowHeight={43}
         selected={selectedData}
         setSelected={onSelectChange}
         page={currentPage}