Remove Extra Pagination

Author: chandanasirigineedi

clients/ui/frontend/src/shared/components/table/TableBase.tsx

@@ -124,7 +124,7 @@ const TableBase = <T,>({
   const selectAllRef = React.useRef(null);
   const showPagination = enablePagination;
 
-  const pagination = (variant: 'top' | 'bottom') => (
+  const pagination = (variant: 'bottom') => (
     <Pagination
       isCompact
       {...(!disableItemCount && { itemCount })}
@@ -214,57 +214,57 @@ const TableBase = <T,>({
   const renderRows = () =>
     loading
       ? // compute the number of items in the upcoming page
-        new Array(
-          itemCount === 0
-            ? skeletonRowCount || rowHeightsRef.current?.length || MIN_PAGE_SIZE
-            : Math.max(0, Math.min(perPage, itemCount - perPage * (page - 1))),
-        )
-          .fill(undefined)
-          .map((_, i) => {
-            // Set the height to the last known row height or otherwise the same height as the first row.
-            // When going to a previous page, the number of rows may be greater than the current.
+      new Array(
+        itemCount === 0
+          ? skeletonRowCount || rowHeightsRef.current?.length || MIN_PAGE_SIZE
+          : Math.max(0, Math.min(perPage, itemCount - perPage * (page - 1))),
+      )
+        .fill(undefined)
+        .map((_, i) => {
+          // Set the height to the last known row height or otherwise the same height as the first row.
+          // When going to a previous page, the number of rows may be greater than the current.
 
-            const getRow = () => (
-              <Tr
-                key={`skeleton-${i}`}
-                {...skeletonRowProps}
-                style={{
-                  ...(skeletonRowProps.style || {}),
-                  height: rowHeightsRef.current?.[i] || rowHeightsRef.current?.[0],
-                }}
-              >
-                {columns.map((col) => (
-                  <Td
-                    key={col.field}
-                    // assign classes to reserve space
-                    className={
-                      col.field === CHECKBOX_FIELD_ID || col.field === EXPAND_FIELD_ID
-                        ? 'pf-c-table__toggle'
-                        : col.field === KEBAB_FIELD_ID
-                          ? 'pf-c-table__action'
-                          : undefined
-                    }
-                  >
-                    {
-                      // render placeholders to reserve space
-                      col.field === EXPAND_FIELD_ID || col.field === KEBAB_FIELD_ID ? (
-                        <div style={{ width: 46 }} />
-                      ) : col.field === CHECKBOX_FIELD_ID ? (
-                        <div style={{ width: 13 }} />
-                      ) : (
-                        <Skeleton width="50%" />
-                      )
-                    }
-                  </Td>
-                ))}
-              </Tr>
-            );
-            return disableRowRenderSupport ? (
-              <Tbody key={`skeleton-tbody-${i}`}>{getRow()}</Tbody>
-            ) : (
-              getRow()
-            );
-          })
+          const getRow = () => (
+            <Tr
+              key={`skeleton-${i}`}
+              {...skeletonRowProps}
+              style={{
+                ...(skeletonRowProps.style || {}),
+                height: rowHeightsRef.current?.[i] || rowHeightsRef.current?.[0],
+              }}
+            >
+              {columns.map((col) => (
+                <Td
+                  key={col.field}
+                  // assign classes to reserve space
+                  className={
+                    col.field === CHECKBOX_FIELD_ID || col.field === EXPAND_FIELD_ID
+                      ? 'pf-c-table__toggle'
+                      : col.field === KEBAB_FIELD_ID
+                        ? 'pf-c-table__action'
+                        : undefined
+                  }
+                >
+                  {
+                    // render placeholders to reserve space
+                    col.field === EXPAND_FIELD_ID || col.field === KEBAB_FIELD_ID ? (
+                      <div style={{ width: 46 }} />
+                    ) : col.field === CHECKBOX_FIELD_ID ? (
+                      <div style={{ width: 13 }} />
+                    ) : (
+                      <Skeleton width="50%" />
+                    )
+                  }
+                </Td>
+              ))}
+            </Tr>
+          );
+          return disableRowRenderSupport ? (
+            <Tbody key={`skeleton-tbody-${i}`}>{getRow()}</Tbody>
+          ) : (
+            getRow()
+          );
+        })
       : data.map((row, rowIndex) => rowRenderer(row, rowIndex));
 
   const table = (
@@ -299,7 +299,7 @@ const TableBase = <T,>({
                 align={{ default: 'alignEnd' }}
                 className="pf-v6-u-pr-lg"
               >
-                {pagination('top')}
+
               </ToolbarItem>
             )}
           </ToolbarContent>