diff --git a/frontend/src/container/TracesExplorer/TableView/index.tsx b/frontend/src/container/TracesExplorer/TableView/index.tsx
new file mode 100644
index 0000000000..11f27f6201
--- /dev/null
+++ b/frontend/src/container/TracesExplorer/TableView/index.tsx
@@ -0,0 +1,53 @@
+import { Space } from 'antd';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { QueryTable } from 'container/QueryTable';
+import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { memo } from 'react';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+function TableView(): JSX.Element {
+ const { stagedQuery, panelType } = useQueryBuilder();
+
+ const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector<
+ AppState,
+ GlobalReducer
+ >((state) => state.globalTime);
+
+ const { data, isLoading } = useGetQueryRange(
+ {
+ query: stagedQuery || initialQueriesMap.traces,
+ graphType: panelType || PANEL_TYPES.TABLE,
+ selectedTime: 'GLOBAL_TIME',
+ globalSelectedInterval: globalSelectedTime,
+ params: {
+ dataSource: 'traces',
+ },
+ },
+ {
+ queryKey: [
+ REACT_QUERY_KEY.GET_QUERY_RANGE,
+ globalSelectedTime,
+ maxTime,
+ minTime,
+ stagedQuery,
+ ],
+ enabled: !!stagedQuery && panelType === PANEL_TYPES.TABLE,
+ },
+ );
+
+ return (
+
+
+
+ );
+}
+
+export default memo(TableView);
diff --git a/frontend/src/pages/TracesExplorer/utils.tsx b/frontend/src/pages/TracesExplorer/utils.tsx
index c2aa7b58ce..dc3f1197b3 100644
--- a/frontend/src/pages/TracesExplorer/utils.tsx
+++ b/frontend/src/pages/TracesExplorer/utils.tsx
@@ -3,6 +3,7 @@ import TabLabel from 'components/TabLabel';
import { PANEL_TYPES } from 'constants/queryBuilder';
import TimeSeriesView from 'container/TimeSeriesView';
import ListView from 'container/TracesExplorer/ListView';
+import TableView from 'container/TracesExplorer/TableView';
import TracesView from 'container/TracesExplorer/TracesView';
import { DataSource } from 'types/common/queryBuilder';
@@ -42,4 +43,9 @@ export const getTabsItems = ({
key: PANEL_TYPES.TIME_SERIES,
children: ,
},
+ {
+ label: 'Table View',
+ key: PANEL_TYPES.TABLE,
+ children: ,
+ },
];
diff --git a/frontend/src/types/api/widgets/getQuery.ts b/frontend/src/types/api/widgets/getQuery.ts
index f60eebc0bb..0b36af1541 100644
--- a/frontend/src/types/api/widgets/getQuery.ts
+++ b/frontend/src/types/api/widgets/getQuery.ts
@@ -5,10 +5,7 @@ export interface PayloadProps {
result: QueryData[];
}
-export type ListItem = {
- timestamp: string;
- data: Omit;
-};
+export type ListItem = { timestamp: string; data: Omit };
export interface QueryData {
metric: {