diff --git a/frontend/src/container/GridTableComponent/index.tsx b/frontend/src/container/GridTableComponent/index.tsx
index 676a745b65..fbd3892c48 100644
--- a/frontend/src/container/GridTableComponent/index.tsx
+++ b/frontend/src/container/GridTableComponent/index.tsx
@@ -4,7 +4,7 @@ import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { Events } from 'constants/events';
 import { QueryTable } from 'container/QueryTable';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
-import { cloneDeep, get, isEmpty, set } from 'lodash-es';
+import { cloneDeep, get, isEmpty } from 'lodash-es';
 import { memo, ReactNode, useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { eventEmitter } from 'utils/getEventEmitter';
@@ -38,15 +38,13 @@ function GridTableComponent({
 	const createDataInCorrectFormat = useCallback(
 		(dataSource: RowData[]): RowData[] =>
 			dataSource.map((d) => {
-				const finalObject = {};
+				const finalObject: Record<string, number | string> = {};
 
 				// we use the order of the columns here to have similar download as the user view
+				// the [] access for the object is used because the titles can contain dot(.) as well
 				columns.forEach((k) => {
-					set(
-						finalObject,
-						get(k, 'title', '') as string,
-						get(d, get(k, 'dataIndex', ''), 'n/a'),
-					);
+					finalObject[`${get(k, 'title', '')}`] =
+						d[`${get(k, 'dataIndex', '')}`] || 'n/a';
 				});
 				return finalObject as RowData;
 			}),
@@ -86,6 +84,7 @@ function GridTableComponent({
 		applyColumnUnits,
 		originalDataSource,
 	]);
+
 	useEffect(() => {
 		if (tableProcessedDataRef) {
 			// eslint-disable-next-line no-param-reassign