feat: enable pagination for service listing,key operations,explorer table and dashboard table (#5625)

frontend/src/container/MetricsApplication/TopOperationsTable.tsx

@@ -164,6 +164,12 @@ function TopOperationsTable({
 
 	const downloadableData = convertedTracesToDownloadData(data);
 
+	const paginationConfig = {
+		pageSize: 10,
+		showSizeChanger: false,
+		hideOnSinglePage: true,
+	};
+
 	return (
 		<div className="top-operation">
 			<div className="top-operation--download">
@@ -181,6 +187,7 @@ function TopOperationsTable({
 				tableLayout="fixed"
 				dataSource={data}
 				rowKey="name"
+				pagination={paginationConfig}
 			/>
 		</div>
 	);

frontend/src/container/QueryTable/QueryTable.tsx

@@ -48,6 +48,12 @@ export function QueryTable({
 
 	const tableColumns = modifyColumns ? modifyColumns(newColumns) : newColumns;
 
+	const paginationConfig = {
+		pageSize: 10,
+		showSizeChanger: false,
+		hideOnSinglePage: true,
+	};
+
 	return (
 		<div className="query-table">
 			{isDownloadEnabled && (
@@ -64,6 +70,7 @@ export function QueryTable({
 				tableLayout="fixed"
 				dataSource={newDataSource}
 				scroll={{ x: true }}
+				pagination={paginationConfig}
 				// eslint-disable-next-line react/jsx-props-no-spreading
 				{...props}
 			/>