diff --git a/frontend/src/components/TableRenderer/utils.ts b/frontend/src/components/TableRenderer/utils.ts
new file mode 100644
index 0000000000..1e3ccc3cd2
--- /dev/null
+++ b/frontend/src/components/TableRenderer/utils.ts
@@ -0,0 +1,22 @@
+import { ColumnType } from 'antd/es/table';
+import { ColumnsType } from 'antd/lib/table';
+
+export const generatorResizeTableColumns = <T>({
+	baseColumnOptions,
+	dynamicColumnOption,
+}: GeneratorResizeTableColumnsProp<T>): ColumnsType<T> =>
+	baseColumnOptions.map((config: ColumnType<T>) => {
+		const { key } = config;
+		const extraConfig = dynamicColumnOption.find(
+			(dynamicConfigItem) => dynamicConfigItem.key === key,
+		);
+		return {
+			...config,
+			...extraConfig?.columnOption,
+		};
+	});
+
+interface GeneratorResizeTableColumnsProp<T> {
+	baseColumnOptions: ColumnsType<T>;
+	dynamicColumnOption: { key: string; columnOption: ColumnType<T> }[];
+}
diff --git a/frontend/src/container/ServiceApplication/Columns/BaseColumnOptions.ts b/frontend/src/container/ServiceApplication/Columns/BaseColumnOptions.ts
new file mode 100644
index 0000000000..7978073bab
--- /dev/null
+++ b/frontend/src/container/ServiceApplication/Columns/BaseColumnOptions.ts
@@ -0,0 +1,36 @@
+import { ColumnsType } from 'antd/es/table';
+import { ServicesList } from 'types/api/metrics/getService';
+
+import {
+	ColumnKey,
+	ColumnTitle,
+	ColumnWidth,
+	SORTING_ORDER,
+} from './ColumnContants';
+
+export const baseColumnOptions: ColumnsType<ServicesList> = [
+	{
+		title: ColumnTitle[ColumnKey.Application],
+		dataIndex: ColumnKey.Application,
+		width: ColumnWidth.Application,
+		key: ColumnKey.Application,
+	},
+	{
+		dataIndex: ColumnKey.P99,
+		key: ColumnKey.P99,
+		width: ColumnWidth.P99,
+		defaultSortOrder: SORTING_ORDER,
+	},
+	{
+		title: ColumnTitle[ColumnKey.ErrorRate],
+		dataIndex: ColumnKey.ErrorRate,
+		key: ColumnKey.ErrorRate,
+		width: 150,
+	},
+	{
+		title: ColumnTitle[ColumnKey.Operations],
+		dataIndex: ColumnKey.Operations,
+		key: ColumnKey.Operations,
+		width: ColumnWidth.Operations,
+	},
+];
diff --git a/frontend/src/container/ServiceApplication/Columns/ServiceColumn.ts b/frontend/src/container/ServiceApplication/Columns/ServiceColumn.ts
index b290e8409c..b0487b8915 100644
--- a/frontend/src/container/ServiceApplication/Columns/ServiceColumn.ts
+++ b/frontend/src/container/ServiceApplication/Columns/ServiceColumn.ts
@@ -1,54 +1,58 @@
-import type { ColumnsType } from 'antd/es/table';
+import type { ColumnsType, ColumnType } from 'antd/es/table';
+import { generatorResizeTableColumns } from 'components/TableRenderer/utils';
 import { ServicesList } from 'types/api/metrics/getService';
 
-import {
-	ColumnKey,
-	ColumnTitle,
-	ColumnWidth,
-	SORTING_ORDER,
-} from './ColumnContants';
+import { baseColumnOptions } from './BaseColumnOptions';
+import { ColumnKey, ColumnTitle } from './ColumnContants';
 import { getColumnSearchProps } from './GetColumnSearchProps';
 
 export const getColumns = (
 	search: string,
 	isMetricData: boolean,
-): ColumnsType<ServicesList> => [
-	{
-		title: ColumnTitle[ColumnKey.Application],
-		dataIndex: ColumnKey.Application,
-		width: ColumnWidth.Application,
-		key: ColumnKey.Application,
-		...getColumnSearchProps('serviceName', search),
-	},
-	{
-		title: `${ColumnTitle[ColumnKey.P99]}${
-			isMetricData ? ' (in ns)' : ' (in ms)'
-		}`,
-		dataIndex: ColumnKey.P99,
-		key: ColumnKey.P99,
-		width: ColumnWidth.P99,
-		defaultSortOrder: SORTING_ORDER,
-		sorter: (a: ServicesList, b: ServicesList): number => a.p99 - b.p99,
-		render: (value: number): string => {
-			if (Number.isNaN(value)) return '0.00';
-			return isMetricData ? value.toFixed(2) : (value / 1000000).toFixed(2);
+): ColumnsType<ServicesList> => {
+	const dynamicColumnOption: {
+		key: string;
+		columnOption: ColumnType<ServicesList>;
+	}[] = [
+		{
+			key: ColumnKey.Application,
+			columnOption: {
+				...getColumnSearchProps('serviceName', search),
+			},
 		},
-	},
-	{
-		title: ColumnTitle[ColumnKey.ErrorRate],
-		dataIndex: ColumnKey.ErrorRate,
-		key: ColumnKey.ErrorRate,
-		width: 150,
-		sorter: (a: ServicesList, b: ServicesList): number =>
-			a.errorRate - b.errorRate,
-		render: (value: number): string => value.toFixed(2),
-	},
-	{
-		title: ColumnTitle[ColumnKey.Operations],
-		dataIndex: ColumnKey.Operations,
-		key: ColumnKey.Operations,
-		width: ColumnWidth.Operations,
-		sorter: (a: ServicesList, b: ServicesList): number => a.callRate - b.callRate,
-		render: (value: number): string => value.toFixed(2),
-	},
-];
+		{
+			key: ColumnKey.P99,
+			columnOption: {
+				title: `${ColumnTitle[ColumnKey.P99]}${
+					isMetricData ? ' (in ns)' : ' (in ms)'
+				}`,
+				sorter: (a: ServicesList, b: ServicesList): number => a.p99 - b.p99,
+				render: (value: number): string => {
+					if (Number.isNaN(value)) return '0.00';
+					return isMetricData ? value.toFixed(2) : (value / 1000000).toFixed(2);
+				},
+			},
+		},
+		{
+			key: ColumnKey.ErrorRate,
+			columnOption: {
+				sorter: (a: ServicesList, b: ServicesList): number =>
+					a.errorRate - b.errorRate,
+				render: (value: number): string => value.toFixed(2),
+			},
+		},
+		{
+			key: ColumnKey.Operations,
+			columnOption: {
+				sorter: (a: ServicesList, b: ServicesList): number =>
+					a.callRate - b.callRate,
+				render: (value: number): string => value.toFixed(2),
+			},
+		},
+	];
+
+	return generatorResizeTableColumns<ServicesList>({
+		baseColumnOptions,
+		dynamicColumnOption,
+	});
+};