feat(explorer): enable table export in Logs and Traces table tabs

Mounts ExportMenu on the Logs and Traces Table tabs, feeding the same query the rendered table uses (stagedQuery fallback parity) — exports match the on-screen table's merge, naming and column order. Header rows are class-driven, right-aligned, gated on data presence.

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -3,7 +3,7 @@ import { Button, Popover, Tooltip } from 'antd';
 import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
-import { useExportRawData } from 'hooks/useDownloadOptionsMenu/useDownloadOptionsMenu';
+import { useExportRawData } from 'hooks/useExportData/useServerExport';
 import { Download, LoaderCircle } from '@signozhq/icons';
 import { DataSource } from 'types/common/queryBuilder';
 

frontend/src/components/ExportMenu/ExportMenu.styles.scss

@@ -0,0 +1,46 @@
+.export-menu-popover {
+	.ant-popover-inner {
+		border-radius: 4px;
+		background-color: var(--l2-background);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		padding: 0 8px 12px 8px;
+		margin: 6px 0;
+	}
+
+	.export-options-container {
+		width: 240px;
+		border-radius: 4px;
+
+		.title {
+			display: flex;
+			color: var(--l1-foreground);
+			font-family: Inter;
+			font-size: 11px;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 18px;
+			letter-spacing: 0.88px;
+			text-transform: uppercase;
+			margin-bottom: 8px;
+		}
+
+		.export-format {
+			padding: 12px 4px;
+			display: flex;
+			flex-direction: column;
+
+			:global(.ant-radio-wrapper) {
+				color: var(--l1-foreground);
+				font-family: Inter;
+				font-size: 13px;
+			}
+		}
+
+		.export-button {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+}

frontend/src/components/ExportMenu/ExportMenu.tsx

@@ -0,0 +1,107 @@
+import { Download, LoaderCircle } from '@signozhq/icons';
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { Typography } from '@signozhq/ui/typography';
+import { Button, Popover, Tooltip } from 'antd';
+import {
+	ClientExportData,
+	useClientExport,
+} from 'hooks/useExportData/useClientExport';
+import { ExportFormat } from 'lib/exportData/types';
+import { useCallback, useMemo, useState } from 'react';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import './ExportMenu.styles.scss';
+
+interface ExportMenuProps {
+	dataSource: DataSource;
+	// The queryRange response object the view holds — the hook picks the
+	// serializer (timeseries / table) from what it carries.
+	data: ClientExportData;
+	query?: Query;
+	yAxisUnit?: string;
+	fileName?: string;
+}
+
+// Download menu for in-memory query results (client-side serialization).
+// The raw/list backend export keeps its own menu in DownloadOptionsMenu.
+export default function ExportMenu({
+	dataSource,
+	data,
+	query,
+	yAxisUnit,
+	fileName,
+}: ExportMenuProps): JSX.Element {
+	const [exportFormat, setExportFormat] = useState<string>(ExportFormat.Csv);
+	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
+
+	const { isExporting, handleExport: handleClientExport } = useClientExport({
+		data,
+		query,
+		yAxisUnit,
+		fileName,
+	});
+
+	const handleExport = useCallback((): void => {
+		setIsPopoverOpen(false);
+		handleClientExport({ format: exportFormat as ExportFormat });
+	}, [exportFormat, handleClientExport]);
+
+	const popoverContent = useMemo(
+		() => (
+			<div
+				className="export-options-container"
+				role="dialog"
+				aria-label="Export options"
+				aria-modal="true"
+			>
+				<div className="export-format">
+					<Typography.Text className="title">FORMAT</Typography.Text>
+					<RadioGroup value={exportFormat} onChange={setExportFormat}>
+						<RadioGroupItem value={ExportFormat.Csv}>csv</RadioGroupItem>
+						<RadioGroupItem value={ExportFormat.Jsonl}>jsonl</RadioGroupItem>
+					</RadioGroup>
+				</div>
+
+				<Button
+					type="primary"
+					icon={<Download size={16} />}
+					onClick={handleExport}
+					className="export-button"
+					disabled={isExporting}
+					loading={isExporting}
+				>
+					Export
+				</Button>
+			</div>
+		),
+		[exportFormat, isExporting, handleExport],
+	);
+
+	return (
+		<Popover
+			content={popoverContent}
+			trigger="click"
+			placement="bottomRight"
+			arrow={false}
+			open={isPopoverOpen}
+			onOpenChange={setIsPopoverOpen}
+			rootClassName="export-menu-popover"
+		>
+			<Tooltip title="Download" placement="top">
+				<Button
+					className="periscope-btn ghost"
+					icon={
+						isExporting ? (
+							<LoaderCircle size={14} className="animate-spin" />
+						) : (
+							<Download size={14} />
+						)
+					}
+					data-testid={`export-menu-${dataSource}`}
+					disabled={isExporting}
+				/>
+			</Tooltip>
+		</Popover>
+	);
+}

frontend/src/components/ExportMenu/__tests__/ExportMenu.test.tsx

@@ -0,0 +1,85 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { DataSource } from 'types/common/queryBuilder';
+
+import ExportMenu from '../ExportMenu';
+
+const mockHandleExport = jest.fn();
+let mockIsExporting = false;
+
+jest.mock('hooks/useExportData/useClientExport', () => ({
+	useClientExport: (): unknown => ({
+		isExporting: mockIsExporting,
+		handleExport: mockHandleExport,
+	}),
+}));
+
+const data = {
+	statusCode: 200,
+	error: null,
+	message: '',
+	payload: { data: { result: [], resultType: 'time_series' } },
+} as unknown as MetricQueryRangeSuccessResponse;
+
+const TEST_ID = `export-menu-${DataSource.LOGS}`;
+
+function renderMenu(): void {
+	render(
+		<ExportMenu
+			dataSource={DataSource.LOGS}
+			data={data}
+			fileName="logs-timeseries"
+		/>,
+	);
+}
+
+describe('ExportMenu', () => {
+	beforeEach(() => {
+		mockHandleExport.mockReset();
+		mockIsExporting = false;
+	});
+
+	it('renders the download trigger button', () => {
+		renderMenu();
+		expect(screen.getByTestId(TEST_ID)).toBeInTheDocument();
+	});
+
+	it('shows only format options — no shape, row-count, or column controls', () => {
+		renderMenu();
+		fireEvent.click(screen.getByTestId(TEST_ID));
+
+		expect(screen.getByText('FORMAT')).toBeInTheDocument();
+		expect(screen.getByRole('radio', { name: 'csv' })).toBeInTheDocument();
+		expect(screen.getByRole('radio', { name: 'jsonl' })).toBeInTheDocument();
+
+		expect(screen.queryByText('Number of Rows')).not.toBeInTheDocument();
+		expect(screen.queryByText('Columns')).not.toBeInTheDocument();
+		expect(screen.queryByRole('radio', { name: 'long' })).not.toBeInTheDocument();
+		expect(screen.queryByRole('radio', { name: 'wide' })).not.toBeInTheDocument();
+	});
+
+	it('exports as csv by default', () => {
+		renderMenu();
+		fireEvent.click(screen.getByTestId(TEST_ID));
+		fireEvent.click(screen.getByText('Export'));
+
+		expect(mockHandleExport).toHaveBeenCalledTimes(1);
+		expect(mockHandleExport).toHaveBeenCalledWith({ format: 'csv' });
+	});
+
+	it('exports as jsonl when selected', () => {
+		renderMenu();
+		fireEvent.click(screen.getByTestId(TEST_ID));
+		fireEvent.click(screen.getByRole('radio', { name: 'jsonl' }));
+		fireEvent.click(screen.getByText('Export'));
+
+		expect(mockHandleExport).toHaveBeenCalledWith({ format: 'jsonl' });
+	});
+
+	it('disables the trigger while an export is in progress', () => {
+		mockIsExporting = true;
+		renderMenu();
+
+		expect(screen.getByTestId(TEST_ID)).toBeDisabled();
+	});
+});

frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss

@@ -182,6 +182,14 @@
 				flex: 1;
 				min-height: 0;
 				overflow-y: visible;
+
+				.table-view-container-header {
+					display: flex;
+					justify-content: flex-end;
+					align-items: center;
+					padding: 12px;
+					flex-shrink: 0;
+				}
 			}
 
 			.time-series-view-container {
@@ -191,14 +199,6 @@
 				min-height: 0;
 				overflow-y: visible;
 
-				.time-series-view-container-header {
-					display: flex;
-					justify-content: flex-start;
-					align-items: center;
-					padding: 12px;
-					flex-shrink: 0;
-				}
-
 				.time-series-view {
 					flex-shrink: 0;
 					height: 65vh;

frontend/src/container/LogsExplorerViews/index.tsx

@@ -18,13 +18,18 @@ import { ENTITY_VERSION_V5 } from 'constants/app';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
 import { QueryParams } from 'constants/query';
-import { initialFilters, PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	initialFilters,
+	initialQueriesMap,
+	PANEL_TYPES,
+} from 'constants/queryBuilder';
 import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import GoToTop from 'container/GoToTop';
 import LogsExplorerChart from 'container/LogsExplorerChart';
 import LogsExplorerList from 'container/LogsExplorerList';
+import ExportMenu from 'components/ExportMenu/ExportMenu';
 import LogsExplorerTable from 'container/LogsExplorerTable';
 import {
 	getExportQueryData,
@@ -32,7 +37,6 @@ import {
 	getListQuery,
 	getQueryByPanelType,
 } from 'container/LogsExplorerViews/explorerUtils';
-import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsFilter';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange';
@@ -461,23 +465,32 @@ function LogsExplorerViewsContainer({
 					)}
 					{selectedPanelType === PANEL_TYPES.TIME_SERIES && !showLiveLogs && (
 						<div className="time-series-view-container">
-							<div className="time-series-view-container-header">
-								<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
-							</div>
 							<TimeSeriesView
 								isLoading={isLoading || isFetching}
 								data={data}
 								isError={isError}
 								error={error as APIError}
 								yAxisUnit={yAxisUnit}
+								onYAxisUnitChange={onUnitChange}
 								isFilterApplied={!isEmpty(listQuery?.filters?.items)}
 								dataSource={DataSource.LOGS}
 								setWarning={setWarning}
+								allowExport
 							/>
 						</div>
 					)}
 					{selectedPanelType === PANEL_TYPES.TABLE && !showLiveLogs && (
 						<div className="table-view-container">
+							{data && !isError && (
+								<div className="table-view-container-header">
+									<ExportMenu
+										dataSource={DataSource.LOGS}
+										data={data}
+										query={stagedQuery || initialQueriesMap.metrics}
+										fileName="logs-table"
+									/>
+								</div>
+							)}
 							<LogsExplorerTable
 								data={
 									(data?.payload?.data?.newResult?.data?.result ||

frontend/src/container/MetricsExplorer/Explorer/TimeSeries.tsx

@@ -311,6 +311,7 @@ function TimeSeries({
 									dataSource={DataSource.METRICS}
 									error={queries[index].error as APIError}
 									setWarning={setWarning}
+									allowExport
 								/>
 							</div>
 						);

frontend/src/container/TimeSeriesView/TimeSeriesView.styles.scss

@@ -3,6 +3,14 @@
 	min-height: 350px;
 	padding: 0px 12px;
 
+	&__header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 12px 0;
+		flex-shrink: 0;
+	}
+
 	.ant-card-body {
 		height: 50vh;
 		min-height: 350px;

frontend/src/container/TimeSeriesView/TimeSeriesView.tsx

@@ -16,6 +16,7 @@ import Uplot from 'components/Uplot';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
+import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsFilter';
 import { getLocalStorageGraphVisibilityState } from 'container/GridCardLayout/GridCard/utils';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import EmptyMetricsSearch from 'container/MetricsExplorer/Explorer/EmptyMetricsSearch';
@@ -41,11 +42,14 @@ import { SuccessResponse, Warning } from 'types/api';
 import { LegendPosition } from 'types/api/dashboard/getAll';
 import APIError from 'types/api/error';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { QueryRangeResponseV5 } from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import uPlot from 'uplot';
 import { getTimeRange } from 'utils/getTimeRange';
 
+import ExportMenu from 'components/ExportMenu/ExportMenu';
+
 import './TimeSeriesView.styles.scss';
 
 function TimeSeriesView({
@@ -59,6 +63,8 @@ function TimeSeriesView({
 	setWarning,
 	panelType = PANEL_TYPES.TIME_SERIES,
 	stackBarChart = false,
+	allowExport = false,
+	onYAxisUnitChange,
 }: TimeSeriesViewProps): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
 
@@ -244,10 +250,32 @@ function TimeSeriesView({
 		[baseChartOptions, stackedBands],
 	);
 
+	const showExport = allowExport && !!data?.rawV5Response;
+	const showHeader = showExport || !!onYAxisUnitChange;
+
 	return (
 		<div className="time-series-view">
 			{isError && error && <ErrorInPlace error={error as APIError} />}
 
+			{showHeader && (
+				<div className="time-series-view__header">
+					<div>
+						{onYAxisUnitChange && (
+							<BuilderUnitsFilter onChange={onYAxisUnitChange} yAxisUnit={yAxisUnit} />
+						)}
+					</div>
+					{showExport && data?.rawV5Response && (
+						<ExportMenu
+							dataSource={dataSource}
+							yAxisUnit={yAxisUnit}
+							data={data}
+							query={currentQuery}
+							fileName={`${dataSource}-timeseries`}
+						/>
+					)}
+				</div>
+			)}
+
 			<div
 				className="graph-container"
 				style={{ height: '100%', width: '100%' }}
@@ -295,7 +323,11 @@ function TimeSeriesView({
 }
 
 interface TimeSeriesViewProps {
-	data?: SuccessResponse<MetricRangePayloadProps> & { warning?: Warning };
+	data?: SuccessResponse<MetricRangePayloadProps> & {
+		warning?: Warning;
+		rawV5Response?: QueryRangeResponseV5;
+		legendMap?: Record<string, string>;
+	};
 	yAxisUnit?: string;
 	isLoading: boolean;
 	isError: boolean;
@@ -305,6 +337,11 @@ interface TimeSeriesViewProps {
 	setWarning?: Dispatch<SetStateAction<Warning | undefined>>;
 	panelType?: PANEL_TYPES;
 	stackBarChart?: boolean;
+	// Opt-in: render the client-side export menu (Logs explorer for now).
+	allowExport?: boolean;
+	// Opt-in: render the y-axis unit selector in the header (views without their
+	// own selector, e.g. Logs). Metrics keeps its separate YAxisUnitSelector.
+	onYAxisUnitChange?: (value: string) => void;
 }
 
 TimeSeriesView.defaultProps = {

frontend/src/container/TimeSeriesView/__tests__/TimeSeriesView.test.tsx

@@ -0,0 +1,138 @@
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+// eslint-disable-next-line no-restricted-imports
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import store from 'store';
+import { DataSource } from 'types/common/queryBuilder';
+
+import TimeSeriesView from '../TimeSeriesView';
+
+jest.mock('components/Uplot', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="uplot-chart" />,
+}));
+
+jest.mock('components/ExportMenu/ExportMenu', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="timeseries-export-menu" />,
+}));
+
+jest.mock('container/QueryBuilder/filters/BuilderUnitsFilter', () => ({
+	BuilderUnitsFilter: (): JSX.Element => (
+		<div data-testid="builder-units-filter" />
+	),
+}));
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: (): unknown => ({ currentQuery: null }),
+}));
+
+jest.mock('lib/uPlotLib/getUplotChartOptions', () => ({
+	getUPlotChartOptions: (): unknown => ({}),
+}));
+
+jest.mock('lib/uPlotLib/utils/getUplotChartData', () => ({
+	getUPlotChartData: (): number[][] => [
+		[1, 2],
+		[3, 4],
+	],
+}));
+
+jest.mock(
+	'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils',
+	() => ({ stackSeries: (): unknown => ({ data: [], bands: [] }) }),
+);
+
+jest.mock('container/GridCardLayout/GridCard/utils', () => ({
+	getLocalStorageGraphVisibilityState: (): unknown => ({
+		graphVisibilityStates: [],
+	}),
+}));
+
+jest.mock('providers/Timezone', () => ({
+	useTimezone: (): unknown => ({ timezone: { value: 'UTC' } }),
+}));
+
+jest.mock('hooks/useDimensions', () => ({
+	useResizeObserver: (): unknown => ({ width: 800, height: 400 }),
+}));
+
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+const mockStore = configureStore([])({ ...store.getState() });
+
+const rawV5Response = {
+	type: 'time_series',
+	data: { results: [] },
+	meta: {},
+};
+
+function makeData(withRawV5: boolean): any {
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: { data: { result: [], resultType: '' } },
+		...(withRawV5 ? { rawV5Response, legendMap: {} } : {}),
+	};
+}
+
+function renderView(props: {
+	allowExport?: boolean;
+	withRawV5?: boolean;
+	onYAxisUnitChange?: (value: string) => void;
+}): ReturnType<typeof render> {
+	const { allowExport, withRawV5 = true, onYAxisUnitChange } = props;
+	return render(
+		<Provider store={mockStore}>
+			<MemoryRouter>
+				<TimeSeriesView
+					isLoading={false}
+					isError={false}
+					isFilterApplied
+					dataSource={DataSource.LOGS}
+					data={makeData(withRawV5)}
+					allowExport={allowExport}
+					onYAxisUnitChange={onYAxisUnitChange}
+				/>
+			</MemoryRouter>
+		</Provider>,
+	);
+}
+
+describe('TimeSeriesView header gating', () => {
+	it('renders the export menu when allowExport is set and raw V5 data is present', () => {
+		const { queryByTestId } = renderView({ allowExport: true });
+		expect(queryByTestId('timeseries-export-menu')).toBeInTheDocument();
+	});
+
+	it('renders no export menu without allowExport', () => {
+		const { queryByTestId } = renderView({});
+		expect(queryByTestId('timeseries-export-menu')).not.toBeInTheDocument();
+	});
+
+	it('renders no export menu when the raw V5 response is missing', () => {
+		const { queryByTestId } = renderView({ allowExport: true, withRawV5: false });
+		expect(queryByTestId('timeseries-export-menu')).not.toBeInTheDocument();
+	});
+
+	it('renders the unit selector only when onYAxisUnitChange is passed', () => {
+		const withUnit = renderView({ onYAxisUnitChange: jest.fn() });
+		expect(withUnit.queryByTestId('builder-units-filter')).toBeInTheDocument();
+		withUnit.unmount();
+
+		const withoutUnit = renderView({ allowExport: true });
+		expect(
+			withoutUnit.queryByTestId('builder-units-filter'),
+		).not.toBeInTheDocument();
+	});
+
+	it('renders no header row when neither export nor unit selector is enabled', () => {
+		const { container } = renderView({ withRawV5: false });
+		expect(container.querySelector('.time-series-view__header')).toBeNull();
+	});
+});

frontend/src/container/TimeSeriesView/utils.ts

@@ -1,10 +1,41 @@
 import { SuccessResponse } from 'types/api/index';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { QueryRangeResponseV5, TimeSeriesData } from 'types/api/v5/queryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
 
+type ConvertibleData = SuccessResponse<MetricRangePayloadProps> & {
+	rawV5Response?: QueryRangeResponseV5;
+};
+
+// Applies the same ns→ms conversion to the raw V5 tree, so client-side export
+// serializes the values the chart displays (not the original nanoseconds).
+function convertRawV5ValuesToMs(
+	response: QueryRangeResponseV5,
+): QueryRangeResponseV5 {
+	if (response.type !== 'time_series') {
+		return response;
+	}
+
+	const results = (response.data.results as TimeSeriesData[]).map((result) => ({
+		...result,
+		aggregations: (result.aggregations ?? []).map((bucket) => ({
+			...bucket,
+			series: (bucket.series ?? []).map((series) => ({
+				...series,
+				values: (series.values ?? []).map((value) => ({
+					...value,
+					value: value.value / 1000000,
+				})),
+			})),
+		})),
+	}));
+
+	return { ...response, data: { ...response.data, results } };
+}
+
 export const convertDataValueToMs = (
-	data?: SuccessResponse<MetricRangePayloadProps>,
-): SuccessResponse<MetricRangePayloadProps> | undefined => {
+	data?: ConvertibleData,
+): ConvertibleData | undefined => {
 	const convertedData = data;
 
 	const convertedResult: QueryData[] = data?.payload?.data?.result
@@ -22,5 +53,11 @@ export const convertDataValueToMs = (
 		convertedData.payload.data.result = convertedResult;
 	}
 
+	if (convertedData?.rawV5Response) {
+		convertedData.rawV5Response = convertRawV5ValuesToMs(
+			convertedData.rawV5Response,
+		);
+	}
+
 	return convertedData;
 };

frontend/src/container/TracesExplorer/TableView/TableView.styles.scss

@@ -0,0 +1,7 @@
+.traces-table-view-header {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	padding: 12px;
+	flex-shrink: 0;
+}

frontend/src/container/TracesExplorer/TableView/index.tsx

@@ -10,6 +10,7 @@ import {
 import { useSelector } from 'react-redux';
 import { Space } from 'antd';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import ExportMenu from 'components/ExportMenu/ExportMenu';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -20,8 +21,11 @@ import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import APIError from 'types/api/error';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
+import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import './TableView.styles.scss';
+
 function TableView({
 	setWarning,
 	setIsLoadingQueries,
@@ -97,6 +101,16 @@ function TableView({
 	return (
 		<Space.Compact block direction="vertical">
 			{isError && error && <ErrorInPlace error={error as APIError} />}
+			{!isError && data && (
+				<div className="traces-table-view-header">
+					<ExportMenu
+						dataSource={DataSource.TRACES}
+						data={data}
+						query={stagedQuery || initialQueriesMap.traces}
+						fileName="traces-table"
+					/>
+				</div>
+			)}
 			{!isError && (
 				<QueryTable
 					query={stagedQuery || initialQueriesMap.traces}

frontend/src/hooks/useExportData/__tests__/useClientExport.test.ts

@@ -0,0 +1,186 @@
+import { act, renderHook } from '@testing-library/react';
+import { downloadFile } from 'lib/exportData/downloadFile';
+import { ExportFormat } from 'lib/exportData/types';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { useClientExport } from '../useClientExport';
+
+jest.mock('lib/exportData/downloadFile', () => ({
+	...jest.requireActual('lib/exportData/downloadFile'),
+	downloadFile: jest.fn(),
+}));
+
+const mockMessageError = jest.fn();
+jest.mock('antd', () => {
+	const actual = jest.requireActual('antd');
+	return {
+		...actual,
+		message: { error: (...args: unknown[]): void => mockMessageError(...args) },
+	};
+});
+
+const mockDownloadFile = downloadFile as jest.Mock;
+
+const query = {
+	queryType: 'builder',
+	builder: {
+		queryData: [
+			{
+				queryName: 'A',
+				dataSource: 'logs',
+				aggregations: [{ expression: 'count()' }],
+				groupBy: [],
+				legend: '',
+			},
+		],
+		queryFormulas: [],
+	},
+} as unknown as Query;
+
+function timeSeriesData(): MetricQueryRangeSuccessResponse {
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: { data: { result: [], resultType: 'time_series' } },
+		legendMap: { A: '{{service}}' },
+		rawV5Response: {
+			type: 'time_series',
+			data: {
+				results: [
+					{
+						queryName: 'A',
+						aggregations: [
+							{
+								index: 0,
+								alias: '',
+								meta: {},
+								series: [
+									{
+										labels: [{ key: { name: 'service' }, value: 'a' }],
+										values: [{ timestamp: 1000, value: 12 }],
+									},
+								],
+							},
+						],
+					},
+				],
+			},
+			meta: {},
+		},
+	} as unknown as MetricQueryRangeSuccessResponse;
+}
+
+function scalarData(): MetricQueryRangeSuccessResponse {
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: {
+			data: {
+				resultType: 'scalar',
+				result: [
+					{
+						queryName: 'A',
+						legend: '',
+						series: null,
+						list: null,
+						table: {
+							columns: [
+								{
+									name: 'service.name',
+									id: 'service.name',
+									queryName: 'A',
+									isValueColumn: false,
+								},
+								{ name: 'count()', id: 'A', queryName: 'A', isValueColumn: true },
+							],
+							rows: [{ data: { 'service.name': 'frontend', A: 120 } }],
+						},
+					},
+				],
+			},
+		},
+	} as unknown as MetricQueryRangeSuccessResponse;
+}
+
+describe('useClientExport', () => {
+	beforeEach(() => jest.clearAllMocks());
+
+	it('dispatches timeseries data to the timeseries serializer (csv)', () => {
+		const { result } = renderHook(() =>
+			useClientExport({ data: timeSeriesData(), query, fileName: 'chart' }),
+		);
+
+		act(() => {
+			result.current.handleExport({ format: ExportFormat.Csv });
+		});
+
+		expect(mockDownloadFile).toHaveBeenCalledTimes(1);
+		const [content, name, mime] = mockDownloadFile.mock.calls[0];
+		expect(name).toMatch(/^chart-\d{4}-\d{2}-\d{2}_\d{2}-\d{2}-\d{2}\.csv$/);
+		expect(mime).toContain('text/csv');
+		expect(content).toContain('service');
+	});
+
+	it('dispatches scalar (table) data to the table serializer', () => {
+		const { result } = renderHook(() =>
+			useClientExport({ data: scalarData(), query, fileName: 'table' }),
+		);
+
+		act(() => {
+			result.current.handleExport({ format: ExportFormat.Csv });
+		});
+
+		expect(mockDownloadFile).toHaveBeenCalledTimes(1);
+		const [content, name] = mockDownloadFile.mock.calls[0];
+		expect(name).toMatch(/^table-\d{4}-\d{2}-\d{2}_\d{2}-\d{2}-\d{2}\.csv$/);
+		expect(content).toContain('service.name');
+		expect(content).toContain('frontend');
+		expect(content).toContain('120');
+	});
+
+	it('exports as JSONL with the ndjson mime', () => {
+		const { result } = renderHook(() =>
+			useClientExport({ data: timeSeriesData(), query }),
+		);
+
+		act(() => {
+			result.current.handleExport({ format: ExportFormat.Jsonl });
+		});
+
+		const [content, name, mime] = mockDownloadFile.mock.calls[0];
+		expect(name).toMatch(/^export-\d{4}-\d{2}-\d{2}_\d{2}-\d{2}-\d{2}\.jsonl$/);
+		expect(mime).toContain('ndjson');
+		expect(content).toContain('"series"');
+	});
+
+	it('does nothing when there is no data', () => {
+		const { result } = renderHook(() => useClientExport({ query }));
+
+		act(() => {
+			result.current.handleExport({ format: ExportFormat.Csv });
+		});
+
+		expect(mockDownloadFile).not.toHaveBeenCalled();
+		expect(mockMessageError).not.toHaveBeenCalled();
+	});
+
+	it('shows an error for unsupported result types', () => {
+		const raw = {
+			statusCode: 200,
+			error: null,
+			message: '',
+			payload: { data: { result: [], resultType: '' } },
+		} as unknown as MetricQueryRangeSuccessResponse;
+		const { result } = renderHook(() => useClientExport({ data: raw, query }));
+
+		act(() => {
+			result.current.handleExport({ format: ExportFormat.Csv });
+		});
+
+		expect(mockDownloadFile).not.toHaveBeenCalled();
+		expect(mockMessageError).toHaveBeenCalled();
+	});
+});

frontend/src/hooks/useExportData/useClientExport.ts

@@ -0,0 +1,110 @@
+import { message } from 'antd';
+import {
+	downloadFile,
+	getTimestampedFileName,
+} from 'lib/exportData/downloadFile';
+import { exportScalarData } from 'lib/exportData/exportScalarData';
+import { exportTimeseriesData } from 'lib/exportData/exportTimeseriesData';
+import { toCsv } from 'lib/exportData/toCsv';
+import { toJsonl } from 'lib/exportData/toJsonl';
+import { ExportFormat, SerializedTable } from 'lib/exportData/types';
+import { useCallback, useState } from 'react';
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryRangeResponseV5, TimeSeriesData } from 'types/api/v5/queryRange';
+
+const FORMAT_META: Record<ExportFormat, { mime: string; extension: string }> = {
+	[ExportFormat.Csv]: { mime: 'text/csv;charset=utf-8;', extension: 'csv' },
+	[ExportFormat.Jsonl]: {
+		mime: 'application/x-ndjson;charset=utf-8;',
+		extension: 'jsonl',
+	},
+};
+
+/** The queryRange response object views hold — structural (params left
+ * unconstrained) so both explorer variants assign cleanly. */
+export type ClientExportData = SuccessResponse<MetricRangePayloadProps> & {
+	rawV5Response?: QueryRangeResponseV5;
+	legendMap?: Record<string, string>;
+};
+
+// Picks the serializer from what the queryRange response carries: timeseries
+// queries surface the raw V5 tree (rawV5Response); table queries carry the
+// formatForWeb webTables payload (resultType 'scalar'). raw/trace stay
+// server-exported via useServerExport.
+function serialize(
+	data: ClientExportData,
+	yAxisUnit?: string,
+	query?: Query,
+): SerializedTable {
+	if (data.rawV5Response?.type === 'time_series') {
+		return exportTimeseriesData({
+			data: data.rawV5Response.data.results as TimeSeriesData[],
+			yAxisUnit,
+			legendMap: data.legendMap,
+			query,
+		});
+	}
+
+	if (data.payload?.data?.resultType === 'scalar' && query) {
+		return exportScalarData({ data, query });
+	}
+
+	throw new Error('Export is not supported for this result type');
+}
+
+interface UseClientExportProps {
+	// The queryRange response object the view already holds — the hook picks
+	// the serializer from what it carries.
+	data?: ClientExportData;
+	// The builder query behind the response — series/column names resolve
+	// aggregation aliases/expressions from it, exactly like the chart does.
+	query?: Query;
+	yAxisUnit?: string;
+	fileName?: string;
+}
+
+interface ClientExportOptions {
+	format: ExportFormat;
+}
+
+interface UseClientExportReturn {
+	isExporting: boolean;
+	handleExport: (options: ClientExportOptions) => void;
+}
+
+// Frontend-driven export: serializes in-memory query results and downloads them
+// client-side. Backend-driven export lives in useServerExport.
+export function useClientExport({
+	data,
+	query,
+	yAxisUnit,
+	fileName = 'export',
+}: UseClientExportProps): UseClientExportReturn {
+	const [isExporting, setIsExporting] = useState<boolean>(false);
+
+	const handleExport = useCallback(
+		({ format }: ClientExportOptions): void => {
+			if (!data) {
+				return;
+			}
+
+			setIsExporting(true);
+			try {
+				const table = serialize(data, yAxisUnit, query);
+				const content =
+					format === ExportFormat.Jsonl ? toJsonl(table) : toCsv(table);
+				const { mime, extension } = FORMAT_META[format];
+				downloadFile(content, getTimestampedFileName(fileName, extension), mime);
+			} catch {
+				message.error('Failed to export data. Please try again.');
+			} finally {
+				setIsExporting(false);
+			}
+		},
+		[data, query, yAxisUnit, fileName],
+	);
+
+	return { isExporting, handleExport };
+}

frontend/src/lib/dashboard/getQueryResults.ts

@@ -22,7 +22,11 @@ import { SuccessResponseV2, Warning } from 'types/api';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
-import { ExecStats, MetricRangePayloadV5 } from 'types/api/v5/queryRange';
+import {
+	ExecStats,
+	MetricRangePayloadV5,
+	QueryRangeResponseV5,
+} from 'types/api/v5/queryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
@@ -192,6 +196,8 @@ export async function GetMetricQueryRange(
 		| SuccessResponseV2<MetricRangePayloadV5>;
 	let warning: Warning | undefined;
 	let meta: ExecStats | undefined;
+	// Raw V5 response, kept before it's converted to legacy — powers client-side export.
+	let rawV5Response: QueryRangeResponseV5 | undefined;
 
 	const panelType = props.originalGraphType || props.graphType;
 
@@ -268,6 +274,8 @@ export async function GetMetricQueryRange(
 				endTime: props.end * 1000,
 			});
 
+			rawV5Response = publicResponse.data.data;
+
 			// Convert V5 response to legacy format for components
 			response = convertV5ResponseToLegacy(
 				{
@@ -288,6 +296,8 @@ export async function GetMetricQueryRange(
 				headers,
 			);
 
+			rawV5Response = v5Response.data.data;
+
 			// Convert V5 response to legacy format for components
 			response = convertV5ResponseToLegacy(
 				{
@@ -366,6 +376,8 @@ export async function GetMetricQueryRange(
 		...response,
 		warning,
 		meta,
+		rawV5Response,
+		legendMap,
 	};
 }
 

frontend/src/lib/exportData/__tests__/downloadFile.test.ts

@@ -0,0 +1,56 @@
+import { downloadFile, getTimestampedFileName } from '../downloadFile';
+
+// jsdom doesn't implement the object-URL APIs; define stubs so jest.spyOn can wrap them.
+if (typeof URL.createObjectURL !== 'function') {
+	URL.createObjectURL = (): string => '';
+}
+if (typeof URL.revokeObjectURL !== 'function') {
+	URL.revokeObjectURL = (): void => undefined;
+}
+
+describe('downloadFile', () => {
+	afterEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	it('builds a blob anchor, clicks it, and revokes the object URL', () => {
+		const click = jest.fn();
+		const remove = jest.fn();
+		const anchor = {
+			href: '',
+			download: '',
+			click,
+			remove,
+		} as unknown as HTMLAnchorElement;
+
+		(
+			jest.spyOn(document, 'createElement') as unknown as jest.Mock
+		).mockReturnValue(anchor);
+		const createObjectURL = jest
+			.spyOn(URL, 'createObjectURL')
+			.mockReturnValue('blob:mock');
+		const revokeObjectURL = jest.spyOn(URL, 'revokeObjectURL');
+
+		downloadFile('hello', 'export.csv', 'text/csv');
+
+		expect(anchor.download).toBe('export.csv');
+		expect(anchor.href).toBe('blob:mock');
+		expect(click).toHaveBeenCalledTimes(1);
+		expect(createObjectURL).toHaveBeenCalled();
+		expect(revokeObjectURL).toHaveBeenCalledWith('blob:mock');
+	});
+});
+
+describe('getTimestampedFileName', () => {
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
+	it('appends a local timestamp between base and extension', () => {
+		jest.useFakeTimers().setSystemTime(new Date(2026, 6, 8, 14, 32, 5));
+
+		expect(getTimestampedFileName('logs-timeseries', 'csv')).toBe(
+			'logs-timeseries-2026-07-08_14-32-05.csv',
+		);
+	});
+});

frontend/src/lib/exportData/__tests__/exportScalarData.test.ts

@@ -0,0 +1,94 @@
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { exportScalarData } from '../exportScalarData';
+
+const query = {
+	queryType: 'builder',
+	builder: {
+		queryData: [
+			{
+				queryName: 'A',
+				dataSource: 'logs',
+				aggregations: [{ expression: 'count()' }],
+				groupBy: [
+					{ key: 'service.name', dataType: 'string', type: 'tag', id: 'svc' },
+				],
+				legend: '',
+			},
+		],
+		queryFormulas: [],
+	},
+} as unknown as Query;
+
+function makeResponse(
+	tables: {
+		queryName: string;
+		columns: { name: string; id?: string; isValueColumn: boolean }[];
+		rows: Record<string, string | number>[];
+	}[],
+): SuccessResponse<MetricRangePayloadProps> {
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: {
+			data: {
+				resultType: 'scalar',
+				result: tables.map((table) => ({
+					queryName: table.queryName,
+					legend: '',
+					series: null,
+					list: null,
+					table: {
+						columns: table.columns.map((col) => ({
+							...col,
+							queryName: table.queryName,
+						})),
+						rows: table.rows.map((row) => ({ data: row })),
+					},
+				})),
+			},
+		},
+	} as unknown as SuccessResponse<MetricRangePayloadProps>;
+}
+
+describe('exportScalarData', () => {
+	it('serializes the table exactly as QueryTable prepares it', () => {
+		const data = makeResponse([
+			{
+				queryName: 'A',
+				columns: [
+					{ name: 'service.name', id: 'service.name', isValueColumn: false },
+					{ name: 'count()', id: 'A', isValueColumn: true },
+				],
+				rows: [
+					{ 'service.name': 'frontend', A: 120 },
+					{ 'service.name': 'cart', A: 80 },
+				],
+			},
+		]);
+
+		const table = exportScalarData({ data, query });
+
+		// group + aggregation columns, raw values, on-screen order — inherited
+		// 1:1 from createTableColumnsFromQuery (the renderer's own preparer)
+		expect(table).toStrictEqual({
+			headers: ['service.name', 'count()'],
+			rows: [
+				['frontend', 120],
+				['cart', 80],
+			],
+		});
+	});
+
+	it('returns an empty table for an empty response', () => {
+		const table = exportScalarData({
+			data: makeResponse([]),
+			query,
+		});
+
+		expect(table.rows).toStrictEqual([]);
+	});
+});

frontend/src/lib/exportData/__tests__/exportTableData.test.ts

@@ -0,0 +1,58 @@
+import { exportTableData } from '../exportTableData';
+
+const columns = [
+	{ name: 'service.name', key: 'service.name' },
+	{ name: 'count()', key: 'A', isValueColumn: true },
+	{ name: 'avg(duration)', key: 'B', isValueColumn: true },
+];
+
+describe('exportTableData', () => {
+	it('serializes raw values in display column order', () => {
+		const table = exportTableData({
+			columns,
+			dataSource: [
+				{ 'service.name': 'frontend', A: 120, B: 45.5 },
+				{ 'service.name': 'cart', A: 80, B: 12 },
+			],
+		});
+
+		expect(table).toStrictEqual({
+			headers: ['service.name', 'count()', 'avg(duration)'],
+			rows: [
+				['frontend', 120, 45.5],
+				['cart', 80, 12],
+			],
+		});
+	});
+
+	it('appends column units to value columns only, skipping display-only ids', () => {
+		const table = exportTableData({
+			columns,
+			dataSource: [{ 'service.name': 'frontend', A: 120, B: 45.5 }],
+			columnUnits: { A: 'short', B: 'ms', 'service.name': 'ms' },
+		});
+
+		// group column never gets a unit; 'short' is display-only and skipped
+		expect(table.headers).toStrictEqual([
+			'service.name',
+			'count()',
+			'avg(duration) (ms)',
+		]);
+	});
+
+	it('marks missing cells as blank gaps', () => {
+		const table = exportTableData({
+			columns,
+			dataSource: [{ 'service.name': 'frontend', A: 120 }],
+		});
+
+		expect(table.rows).toStrictEqual([['frontend', 120, '']]);
+	});
+
+	it('returns a headers-only table for empty data', () => {
+		expect(exportTableData({ columns, dataSource: [] })).toStrictEqual({
+			headers: ['service.name', 'count()', 'avg(duration)'],
+			rows: [],
+		});
+	});
+});

frontend/src/lib/exportData/__tests__/exportTimeseriesData.test.ts

@@ -0,0 +1,200 @@
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { TimeSeries, TimeSeriesData } from 'types/api/v5/queryRange';
+
+import { exportTimeseriesData } from '../exportTimeseriesData';
+
+const iso = (ms: number): string => new Date(ms).toISOString();
+
+function makeSeries(
+	labels: Record<string, string>,
+	values: [number, number][],
+): TimeSeries {
+	return {
+		labels: Object.entries(labels).map(([name, value]) => ({
+			key: { name },
+			value,
+		})),
+		values: values.map(([timestamp, value]) => ({ timestamp, value })),
+	};
+}
+
+function makeQuery(
+	queryName: string,
+	buckets: { index?: number; alias?: string; series: TimeSeries[] }[],
+): TimeSeriesData {
+	return {
+		queryName,
+		aggregations: buckets.map((bucket, i) => ({
+			index: bucket.index ?? i,
+			alias: bucket.alias ?? '',
+			meta: {},
+			series: bucket.series,
+		})),
+	};
+}
+
+describe('exportTimeseriesData', () => {
+	it('one row per point: query column, label columns, unit in value header, legend naming', () => {
+		const data = [
+			makeQuery('A', [
+				{
+					series: [
+						makeSeries({ service_name: 'frontend' }, [
+							[1000, 12],
+							[2000, 15],
+						]),
+					],
+				},
+			]),
+		];
+
+		const table = exportTimeseriesData({
+			data,
+			yAxisUnit: 'ms',
+			legendMap: { A: '{{service_name}}' },
+		});
+
+		expect(table.headers).toStrictEqual([
+			'timestamp',
+			'query',
+			'series',
+			'service_name',
+			'value (ms)',
+		]);
+		expect(table.rows).toStrictEqual([
+			[iso(1000), 'A', 'frontend', 'frontend', 12],
+			[iso(2000), 'A', 'frontend', 'frontend', 15],
+		]);
+	});
+
+	it('no legend falls back to the label-set name from getLabelName', () => {
+		const data = [
+			makeQuery('A', [
+				{ series: [makeSeries({ service_name: 'frontend' }, [[1000, 12]])] },
+			]),
+		];
+
+		const table = exportTimeseriesData({ data });
+
+		expect(table.rows).toStrictEqual([
+			[iso(1000), 'A', '{service_name="frontend"}', 'frontend', 12],
+		]);
+	});
+
+	it('omits display-only format ids (short/none) from headers', () => {
+		const data = [
+			makeQuery('A', [{ series: [makeSeries({ service: 'a' }, [[1000, 1]])] }]),
+		];
+
+		const short = exportTimeseriesData({ data, yAxisUnit: 'short' });
+		expect(short.headers[short.headers.length - 1]).toBe('value');
+
+		const none = exportTimeseriesData({ data, yAxisUnit: 'none' });
+		expect(none.headers[none.headers.length - 1]).toBe('value');
+	});
+
+	it('multi-query: query is its own column; label keys are unioned', () => {
+		const data = [
+			makeQuery('A', [{ series: [makeSeries({ service: 'x' }, [[1000, 1]])] }]),
+			makeQuery('B', [{ series: [makeSeries({ service: 'y' }, [[1000, 2]])] }]),
+		];
+
+		const table = exportTimeseriesData({
+			data,
+			legendMap: { A: '{{service}}', B: '{{service}}' },
+		});
+
+		expect(table.headers).toStrictEqual([
+			'timestamp',
+			'query',
+			'series',
+			'service',
+			'value',
+		]);
+		expect(table.rows).toStrictEqual([
+			[iso(1000), 'A', 'x', 'x', 1],
+			[iso(1000), 'B', 'y', 'y', 2],
+		]);
+	});
+
+	it('multi-aggregation with the builder query: names match the chart legend', () => {
+		const data = [
+			makeQuery('A', [
+				{ index: 0, alias: '__result_0', series: [makeSeries({}, [[1000, 5]])] },
+				{
+					index: 1,
+					alias: '__result_1',
+					series: [makeSeries({}, [[1000, 300]])],
+				},
+			]),
+			makeQuery('B', [
+				{
+					index: 0,
+					alias: '__result_0',
+					series: [
+						makeSeries({ 'cloud.account.id': 'signoz-staging' }, [[1000, 7]]),
+					],
+				},
+			]),
+		];
+
+		const query = {
+			queryType: 'builder',
+			builder: {
+				queryData: [
+					{
+						queryName: 'A',
+						dataSource: 'logs',
+						aggregations: [
+							{ expression: 'count()' },
+							{ expression: 'avg(code.lineno)' },
+						],
+						groupBy: [],
+					},
+					{
+						queryName: 'B',
+						dataSource: 'logs',
+						aggregations: [{ expression: 'count()' }],
+						groupBy: [{ key: 'cloud.account.id' }],
+					},
+				],
+				queryFormulas: [],
+			},
+		} as unknown as Query;
+
+		const table = exportTimeseriesData({ data, query });
+
+		expect(table.rows).toStrictEqual([
+			[iso(1000), 'A', 'count()-A', '', 5],
+			[iso(1000), 'A', 'avg(code.lineno)-A', '', 300],
+			[iso(1000), 'B', '{cloud.account.id="signoz-staging"}', 'signoz-staging', 7],
+		]);
+	});
+
+	it('multi-aggregation without the builder query: falls back to base names', () => {
+		const data = [
+			makeQuery('A', [
+				{ index: 0, alias: '__result_0', series: [makeSeries({}, [[1000, 5]])] },
+				{
+					index: 1,
+					alias: '__result_1',
+					series: [makeSeries({}, [[1000, 300]])],
+				},
+			]),
+		];
+
+		const table = exportTimeseriesData({ data });
+
+		expect(table.rows).toStrictEqual([
+			[iso(1000), 'A', 'A', 5],
+			[iso(1000), 'A', 'A', 300],
+		]);
+	});
+
+	it('empty data: returns a headers-only table', () => {
+		expect(exportTimeseriesData({ data: [] })).toStrictEqual({
+			headers: ['timestamp', 'query', 'series', 'value'],
+			rows: [],
+		});
+	});
+});

frontend/src/lib/exportData/__tests__/formatters.test.ts

@@ -0,0 +1,42 @@
+import { toCsv } from '../toCsv';
+import { toJsonl } from '../toJsonl';
+import { SerializedTable } from '../types';
+
+const table: SerializedTable = {
+	headers: ['timestamp', 'value'],
+	rows: [
+		['t1', 12],
+		['t2', 15],
+	],
+};
+
+describe('toCsv', () => {
+	it('emits a header row then one row per record, in column order', () => {
+		expect(toCsv(table).split(/\r?\n/)).toStrictEqual([
+			'timestamp,value',
+			't1,12',
+			't2,15',
+		]);
+	});
+
+	it('quotes values containing the delimiter', () => {
+		const csv = toCsv({ headers: ['name', 'value'], rows: [['a,b', 1]] });
+		expect(csv.split(/\r?\n/)).toStrictEqual(['name,value', '"a,b",1']);
+	});
+
+	it('emits only the header row when there are no data rows', () => {
+		expect(toCsv({ headers: ['timestamp'], rows: [] })).toBe('timestamp\r\n');
+	});
+});
+
+describe('toJsonl', () => {
+	it('emits one JSON object per row keyed by header', () => {
+		expect(toJsonl(table)).toBe(
+			'{"timestamp":"t1","value":12}\n{"timestamp":"t2","value":15}',
+		);
+	});
+
+	it('emits an empty string when there are no rows', () => {
+		expect(toJsonl({ headers: ['timestamp'], rows: [] })).toBe('');
+	});
+});

frontend/src/lib/exportData/downloadFile.ts

@@ -0,0 +1,29 @@
+/** Triggers a browser download of in-memory string content as a file. */
+export function downloadFile(
+	content: string,
+	fileName: string,
+	mime: string,
+): void {
+	const blob = new Blob([content], { type: mime });
+	const url = URL.createObjectURL(blob);
+	const link = document.createElement('a');
+	link.href = url;
+	link.download = fileName;
+	link.click();
+	link.remove();
+	URL.revokeObjectURL(url);
+}
+
+/** `base` + local timestamp + extension, e.g. `logs-timeseries-2026-07-08_14-32-05.csv`.
+ * Keeps repeated exports from colliding and records when the export was taken. */
+export function getTimestampedFileName(
+	base: string,
+	extension: string,
+): string {
+	const now = new Date();
+	const pad = (value: number): string => String(value).padStart(2, '0');
+	const stamp = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(
+		now.getDate(),
+	)}_${pad(now.getHours())}-${pad(now.getMinutes())}-${pad(now.getSeconds())}`;
+	return `${base}-${stamp}.${extension}`;
+}

frontend/src/lib/exportData/exportScalarData.ts

@@ -0,0 +1,48 @@
+import { createTableColumnsFromQuery } from 'lib/query/createTableColumnsFromQuery';
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryDataV3 } from 'types/api/widgets/getQuery';
+
+import { exportTableData } from './exportTableData';
+import { SerializedTable } from './types';
+
+interface ExportScalarDataArgs {
+	// The queryRange response object the table mount already holds (the
+	// formatForWeb payload carrying webTables).
+	data?: SuccessResponse<MetricRangePayloadProps>;
+	query: Query;
+}
+
+/**
+ * Serializes a scalar/table queryRange response into a table — via
+ * createTableColumnsFromQuery, the exact preparer QueryTable renders from, so
+ * the export inherits the on-screen merge, naming and column order 1:1.
+ */
+export function exportScalarData({
+	data,
+	query,
+}: ExportScalarDataArgs): SerializedTable {
+	const queryTableData = (data?.payload?.data?.newResult?.data?.result ||
+		data?.payload?.data?.result ||
+		[]) as QueryDataV3[];
+
+	const { columns, dataSource } = createTableColumnsFromQuery({
+		query,
+		queryTableData,
+	});
+
+	return exportTableData({
+		// antd widens title/dataIndex; createTableColumnsFromQuery always sets strings
+		columns: columns.map((column) => {
+			const rawIndex = 'dataIndex' in column ? column.dataIndex : undefined;
+			const key =
+				typeof rawIndex === 'string' || typeof rawIndex === 'number'
+					? String(rawIndex)
+					: '';
+			const name = typeof column.title === 'string' ? column.title : key;
+			return { name, key: key || name };
+		}),
+		dataSource: dataSource as unknown as Record<string, unknown>[],
+	});
+}

frontend/src/lib/exportData/exportTableData.ts

@@ -0,0 +1,46 @@
+import { SerializedTable } from './types';
+import { withUnit } from './withUnit';
+
+/** Generic table-model column — any prepared table (QueryTable, dashboard
+ * tables, plain antd tables) adapts to this in a line or two. */
+export interface ExportTableColumn {
+	/** Display name, used as the export header (column order = array order). */
+	name: string;
+	/** Key into each dataSource record. */
+	key: string;
+	isValueColumn?: boolean;
+}
+
+interface ExportTableDataArgs {
+	columns: ExportTableColumn[];
+	dataSource: Record<string, unknown>[];
+	/** Per-column display unit, keyed by column key (dashboards; absent in explorer). */
+	columnUnits?: Record<string, string>;
+}
+
+/**
+ * Serializes a prepared table model into a format-agnostic table — raw values
+ * in display column order (lossless; no cell formatting applied).
+ */
+export function exportTableData({
+	columns,
+	dataSource,
+	columnUnits,
+}: ExportTableDataArgs): SerializedTable {
+	const headers = columns.map((column) =>
+		column.isValueColumn
+			? withUnit(column.name, columnUnits?.[column.key])
+			: column.name,
+	);
+
+	const rows = dataSource.map((record) =>
+		columns.map((column) => {
+			const value = record[column.key];
+			return value === undefined || value === null
+				? ''
+				: (value as string | number);
+		}),
+	);
+
+	return { headers, rows };
+}

frontend/src/lib/exportData/exportTimeseriesData.ts

@@ -0,0 +1,150 @@
+import { getLegend } from 'lib/dashboard/getQueryResults';
+import getLabelName from 'lib/getLabelName';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { TimeSeries, TimeSeriesData } from 'types/api/v5/queryRange';
+import { QueryData } from 'types/api/widgets/getQuery';
+
+import { SerializedTable } from './types';
+import { withUnit } from './withUnit';
+
+interface ExportTimeseriesDataArgs {
+	data: TimeSeriesData[];
+	yAxisUnit?: string;
+	legendMap?: Record<string, string>;
+	// The builder query that produced the data — lets series names resolve
+	// aggregation aliases/expressions exactly like the chart legend does.
+	query?: Query;
+}
+
+// One row of the flattened V5 tree: a single (query, aggregation, label-set) series.
+interface FlatSeries {
+	queryName: string;
+	labels: Record<string, string>;
+	name: string;
+	values: { timestamp: number; value: number }[];
+}
+
+// V5 labels [{key:{name}, value}] → {name: value} (the getLabelName contract).
+function foldLabels(labels: TimeSeries['labels']): Record<string, string> {
+	const record: Record<string, string> = {};
+	(labels ?? []).forEach((label) => {
+		if (label.key?.name) {
+			record[label.key.name] = String(label.value);
+		}
+	});
+	return record;
+}
+
+// Series display name, matching the chart legend: getLabelName for the base
+// (legend template / label-set), then getLegend to resolve the aggregation
+// alias/expression from the builder query (the response only carries
+// auto-generated `__result_N` aliases). Same chain the uPlot layer uses.
+function seriesName(args: {
+	labels: Record<string, string>;
+	queryName: string;
+	legend: string;
+	aggIndex: number;
+	alias: string;
+	query?: Query;
+}): string {
+	const { labels, queryName, legend, aggIndex, alias, query } = args;
+	const baseName = getLabelName(labels, queryName, legend);
+
+	if (!query) {
+		return baseName;
+	}
+
+	const legacySeries = {
+		queryName,
+		metric: labels,
+		values: [],
+		metaData: { alias, index: aggIndex, queryName },
+	} as QueryData;
+
+	return getLegend(legacySeries, query, baseName);
+}
+
+// Walk results → aggregations → series into a flat, named list.
+function flatten(
+	data: TimeSeriesData[],
+	legendMap?: Record<string, string>,
+	query?: Query,
+): FlatSeries[] {
+	const flat: FlatSeries[] = [];
+	data.forEach((result) => {
+		const queryName = result.queryName ?? '';
+		const legend = legendMap?.[queryName] ?? '';
+		(result.aggregations ?? []).forEach((bucket) => {
+			(bucket.series ?? []).forEach((series) => {
+				const labels = foldLabels(series.labels);
+				flat.push({
+					queryName,
+					labels,
+					name: seriesName({
+						labels,
+						queryName,
+						legend,
+						aggIndex: bucket.index ?? 0,
+						alias: bucket.alias ?? '',
+						query,
+					}),
+					values: (series.values ?? []).map((value) => ({
+						timestamp: value.timestamp,
+						value: value.value,
+					})),
+				});
+			});
+		});
+	});
+	return flat;
+}
+
+function toIso(timestamp: number): string {
+	return new Date(timestamp).toISOString();
+}
+
+// Tidy (LONG) layout: one row per (series, timestamp). query is its own column.
+function buildTable(flat: FlatSeries[], yAxisUnit?: string): SerializedTable {
+	const labelKeySet = new Set<string>();
+	flat.forEach((series) => {
+		Object.keys(series.labels).forEach((key) => labelKeySet.add(key));
+	});
+	const labelKeys = Array.from(labelKeySet).sort();
+
+	const headers = [
+		'timestamp',
+		'query',
+		'series',
+		...labelKeys,
+		withUnit('value', yAxisUnit),
+	];
+
+	const rows: (string | number)[][] = [];
+	flat.forEach((series) => {
+		series.values.forEach(({ timestamp, value }) => {
+			rows.push([
+				toIso(timestamp),
+				series.queryName,
+				series.name,
+				...labelKeys.map((key) => series.labels[key] ?? ''),
+				value,
+			]);
+		});
+	});
+
+	return { headers, rows };
+}
+
+/**
+ * Serializes a V5 time_series result into a format-agnostic tidy table — one
+ * row per (series, timestamp), labels as columns, raw values.
+ * Pure — walks the V5 tree directly; series names match the chart legend.
+ */
+export function exportTimeseriesData({
+	data,
+	yAxisUnit,
+	legendMap,
+	query,
+}: ExportTimeseriesDataArgs): SerializedTable {
+	return buildTable(flatten(data, legendMap, query), yAxisUnit);
+}

frontend/src/lib/exportData/toCsv.ts

@@ -0,0 +1,8 @@
+import { unparse } from 'papaparse';
+
+import { SerializedTable } from './types';
+
+/** Serializes a table to CSV. `fields` pins column order regardless of row keys. */
+export function toCsv(table: SerializedTable): string {
+	return unparse({ fields: table.headers, data: table.rows });
+}

frontend/src/lib/exportData/toJsonl.ts

@@ -0,0 +1,12 @@
+import { SerializedTable } from './types';
+
+/** Serializes a table to newline-delimited JSON: one object per row, keyed by header. */
+export function toJsonl(table: SerializedTable): string {
+	return table.rows
+		.map((row) =>
+			JSON.stringify(
+				Object.fromEntries(table.headers.map((header, i) => [header, row[i]])),
+			),
+		)
+		.join('\n');
+}

frontend/src/lib/exportData/types.ts

@@ -0,0 +1,13 @@
+/** Format-agnostic tabular result produced by every exporter. Consumed by the
+ * CSV/JSONL formatters */
+export interface SerializedTable {
+	headers: string[];
+	// One entry per header, in header order. Empty string marks a gap.
+	rows: (string | number)[][];
+}
+
+/** File formats a client-side export can be downloaded as. */
+export enum ExportFormat {
+	Csv = 'csv',
+	Jsonl = 'jsonl',
+}

frontend/src/lib/exportData/withUnit.ts

@@ -0,0 +1,11 @@
+// Display-format ids, not physical units — meaningful on a chart axis
+// (compact-number formatting) but misleading in an export header.
+const DISPLAY_ONLY_UNITS = new Set(['short', 'none']);
+
+/** Appends a unit to a header: `value` → `value (ms)`. Skips display-only ids. */
+export function withUnit(header: string, unit?: string): string {
+	if (!unit || DISPLAY_ONLY_UNITS.has(unit)) {
+		return header;
+	}
+	return `${header} (${unit})`;
+}

frontend/src/pages/TracesExplorer/TimeSeriesView/index.tsx

@@ -10,7 +10,6 @@ import { useSelector } from 'react-redux';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { BuilderUnitsFilter } from 'container/QueryBuilder/filters';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
@@ -116,9 +115,6 @@ function TimeSeriesViewContainer({
 
 	return (
 		<div className="trace-explorer-time-series-view-container">
-			<div className="trace-explorer-time-series-view-container-header">
-				<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
-			</div>
 			<TimeSeriesView
 				isFilterApplied={isFilterApplied}
 				isError={isError}
@@ -126,8 +122,10 @@ function TimeSeriesViewContainer({
 				isLoading={isLoading || isFetching}
 				data={responseData}
 				yAxisUnit={yAxisUnit}
+				onYAxisUnitChange={onUnitChange}
 				dataSource={dataSource}
 				setWarning={setWarning}
+				allowExport
 			/>
 		</div>
 	);

frontend/src/types/api/metrics/getQueryRange.ts

@@ -8,7 +8,11 @@ import {
 	IClickHouseQuery,
 	IPromQLQuery,
 } from '../queryBuilder/queryBuilderData';
-import { ExecStats, QueryRangeRequestV5 } from '../v5/queryRange';
+import {
+	ExecStats,
+	QueryRangeRequestV5,
+	QueryRangeResponseV5,
+} from '../v5/queryRange';
 import { QueryData, QueryDataV3 } from '../widgets/getQuery';
 
 export type QueryRangePayload = {
@@ -48,6 +52,9 @@ export interface MetricQueryRangeSuccessResponse extends SuccessResponse<
 > {
 	warning?: Warning;
 	meta?: ExecStats;
+	// Raw V5 response (pre-legacy-conversion) + per-query legend map, for client-side export.
+	rawV5Response?: QueryRangeResponseV5;
+	legendMap?: Record<string, string>;
 }
 
 export interface MetricRangePayloadV3 {