chore: make some fields required in perses replicated spec

docs/api/openapi.yml

@@ -2432,13 +2432,6 @@ components:
         url:
           type: string
       type: object
-    DashboardPanelDisplay:
-      properties:
-        description:
-          type: string
-        name:
-          type: string
-      type: object
     DashboardTextVariableSpec:
       properties:
         constant:
@@ -2559,13 +2552,12 @@ components:
             $ref: '#/components/schemas/DashboardtypesDatasourceSpec'
           type: object
         display:
-          $ref: '#/components/schemas/CommonDisplay'
+          $ref: '#/components/schemas/DashboardtypesDisplay'
         duration:
           type: string
         layouts:
           items:
             $ref: '#/components/schemas/DashboardtypesLayout'
-          nullable: true
           type: array
         links:
           items:
@@ -2574,7 +2566,6 @@ components:
         panels:
           additionalProperties:
             $ref: '#/components/schemas/DashboardtypesPanel'
-          nullable: true
           type: object
         refreshInterval:
           type: string
@@ -2582,10 +2573,19 @@ components:
           items:
             $ref: '#/components/schemas/DashboardtypesVariable'
           type: array
+      required:
+      - display
+      - variables
+      - panels
+      - layouts
+      - duration
       type: object
     DashboardtypesDatasourcePlugin:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesDatasourcePluginVariantStruct'
+      required:
+      - kind
+      - spec
     DashboardtypesDatasourcePluginKind:
       enum:
       - signoz/Datasource
@@ -2612,6 +2612,15 @@ components:
         plugin:
           $ref: '#/components/schemas/DashboardtypesDatasourcePlugin'
       type: object
+    DashboardtypesDisplay:
+      properties:
+        description:
+          type: string
+        name:
+          type: string
+      required:
+      - name
+      type: object
     DashboardtypesDynamicVariableSpec:
       properties:
         name:
@@ -2731,6 +2740,9 @@ components:
     DashboardtypesLayout:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpec'
+      required:
+      - kind
+      - spec
     DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpec:
       properties:
         kind:
@@ -2790,7 +2802,7 @@ components:
         defaultValue:
           $ref: '#/components/schemas/VariableDefaultValue'
         display:
-          $ref: '#/components/schemas/VariableDisplay'
+          $ref: '#/components/schemas/DashboardtypesDisplay'
         name:
           type: string
         plugin:
@@ -2798,6 +2810,8 @@ components:
         sort:
           nullable: true
           type: string
+      required:
+      - display
       type: object
     DashboardtypesNumberPanelSpec:
       properties:
@@ -2817,6 +2831,9 @@ components:
           $ref: '#/components/schemas/DashboardtypesPanelKind'
         spec:
           $ref: '#/components/schemas/DashboardtypesPanelSpec'
+      required:
+      - kind
+      - spec
       type: object
     DashboardtypesPanelFormatting:
       properties:
@@ -2838,6 +2855,9 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
+      required:
+      - kind
+      - spec
     DashboardtypesPanelPluginKind:
       enum:
       - signoz/TimeSeriesPanel
@@ -2935,7 +2955,7 @@ components:
     DashboardtypesPanelSpec:
       properties:
         display:
-          $ref: '#/components/schemas/DashboardPanelDisplay'
+          $ref: '#/components/schemas/DashboardtypesDisplay'
         links:
           items:
             $ref: '#/components/schemas/DashboardLink'
@@ -2945,7 +2965,12 @@ components:
         queries:
           items:
             $ref: '#/components/schemas/DashboardtypesQuery'
+          nullable: true
           type: array
+      required:
+      - display
+      - plugin
+      - queries
       type: object
     DashboardtypesPatchOp:
       enum:
@@ -3014,6 +3039,9 @@ components:
           $ref: '#/components/schemas/Querybuildertypesv5RequestType'
         spec:
           $ref: '#/components/schemas/DashboardtypesQuerySpec'
+      required:
+      - kind
+      - spec
       type: object
     DashboardtypesQueryPlugin:
       oneOf:
@@ -3023,6 +3051,9 @@ components:
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5PromQuery'
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5ClickHouseQuery'
       - $ref: '#/components/schemas/DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5QueryBuilderTraceOperator'
+      required:
+      - kind
+      - spec
     DashboardtypesQueryPluginKind:
       enum:
       - signoz/BuilderQuery
@@ -3110,6 +3141,8 @@ components:
           type: string
         plugin:
           $ref: '#/components/schemas/DashboardtypesQueryPlugin'
+      required:
+      - plugin
       type: object
     DashboardtypesQueryVariableSpec:
       properties:
@@ -3280,6 +3313,9 @@ components:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec'
       - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec'
+      required:
+      - kind
+      - spec
     DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec:
       properties:
         kind:
@@ -3309,6 +3345,9 @@ components:
       - $ref: '#/components/schemas/DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesDynamicVariableSpec'
       - $ref: '#/components/schemas/DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesQueryVariableSpec'
       - $ref: '#/components/schemas/DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesCustomVariableSpec'
+      required:
+      - kind
+      - spec
     DashboardtypesVariablePluginKind:
       enum:
       - signoz/DynamicVariable

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -3152,17 +3152,6 @@ export interface DashboardLinkDTO {
 	url?: string;
 }
 
-export interface DashboardPanelDisplayDTO {
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	name?: string;
-}
-
 export interface VariableDisplayDTO {
 	/**
 	 * @type string
@@ -3867,6 +3856,17 @@ export type DashboardtypesDashboardSpecDTODatasources = {
 export enum DashboardtypesPanelKindDTO {
 	Panel = 'Panel',
 }
+export interface DashboardtypesDisplayDTO {
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+}
+
 export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTOKind {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 }
@@ -4415,42 +4415,36 @@ export interface DashboardtypesQuerySpecDTO {
 	 * @type string
 	 */
 	name?: string;
-	plugin?: DashboardtypesQueryPluginDTO;
+	plugin: DashboardtypesQueryPluginDTO;
 }
 
 export interface DashboardtypesQueryDTO {
-	kind?: Querybuildertypesv5RequestTypeDTO;
-	spec?: DashboardtypesQuerySpecDTO;
+	kind: Querybuildertypesv5RequestTypeDTO;
+	spec: DashboardtypesQuerySpecDTO;
 }
 
 export interface DashboardtypesPanelSpecDTO {
-	display?: DashboardPanelDisplayDTO;
+	display: DashboardtypesDisplayDTO;
 	/**
 	 * @type array
 	 */
 	links?: DashboardLinkDTO[];
-	plugin?: DashboardtypesPanelPluginDTO;
+	plugin: DashboardtypesPanelPluginDTO;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	queries?: DashboardtypesQueryDTO[];
+	queries: DashboardtypesQueryDTO[] | null;
 }
 
 export interface DashboardtypesPanelDTO {
-	kind?: DashboardtypesPanelKindDTO;
-	spec?: DashboardtypesPanelSpecDTO;
+	kind: DashboardtypesPanelKindDTO;
+	spec: DashboardtypesPanelSpecDTO;
 }
 
-export type DashboardtypesDashboardSpecDTOPanelsAnyOf = {
+export type DashboardtypesDashboardSpecDTOPanels = {
 	[key: string]: DashboardtypesPanelDTO;
 };
 
-/**
- * @nullable
- */
-export type DashboardtypesDashboardSpecDTOPanels =
-	DashboardtypesDashboardSpecDTOPanelsAnyOf | null;
-
 export enum DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpecDTOKind {
 	Grid = 'Grid',
 }
@@ -4547,7 +4541,7 @@ export interface DashboardtypesListVariableSpecDTO {
 	 */
 	customAllValue?: string;
 	defaultValue?: VariableDefaultValueDTO;
-	display?: VariableDisplayDTO;
+	display: DashboardtypesDisplayDTO;
 	/**
 	 * @type string
 	 */
@@ -4589,23 +4583,23 @@ export interface DashboardtypesDashboardSpecDTO {
 	 * @type object
 	 */
 	datasources?: DashboardtypesDashboardSpecDTODatasources;
-	display?: CommonDisplayDTO;
+	display: DashboardtypesDisplayDTO;
 	/**
 	 * @type string
 	 */
-	duration?: string;
+	duration: string;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	layouts?: DashboardtypesLayoutDTO[] | null;
+	layouts: DashboardtypesLayoutDTO[];
 	/**
 	 * @type array
 	 */
 	links?: DashboardLinkDTO[];
 	/**
-	 * @type object,null
+	 * @type object
 	 */
-	panels?: DashboardtypesDashboardSpecDTOPanels;
+	panels: DashboardtypesDashboardSpecDTOPanels;
 	/**
 	 * @type string
 	 */
@@ -4613,7 +4607,7 @@ export interface DashboardtypesDashboardSpecDTO {
 	/**
 	 * @type array
 	 */
-	variables?: DashboardtypesVariableDTO[];
+	variables: DashboardtypesVariableDTO[];
 }
 
 export enum DashboardtypesDatasourcePluginKindDTO {

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -192,7 +192,7 @@ function FieldsSelector({
 		() =>
 			fields.map((f) => ({
 				...f,
-				key: f.key ?? buildCompositeKey(f.name, f.fieldContext, f.fieldDataType),
+				key: f.key ?? buildCompositeKey(f.name, f.fieldContext),
 			})),
 		[fields],
 	);

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -52,20 +52,14 @@ function OtherFields({
 		const normalizedSuggestions: TelemetryFieldKey[] = suggestions.map(
 			(attr) => ({
 				...attr,
-				key: buildCompositeKey(
-					attr.name,
-					attr.fieldContext as string,
-					attr.fieldDataType as string | undefined,
-				),
+				key: buildCompositeKey(attr.name, attr.fieldContext as string),
 				signal: attr.signal as SignalType,
 				fieldContext: attr.fieldContext as FieldContext,
 				fieldDataType: attr.fieldDataType as FieldDataType,
 			}),
 		);
 		const addedIds = new Set(
-			addedFields.map(
-				(f) => f.key ?? buildCompositeKey(f.name, f.fieldContext, f.fieldDataType),
-			),
+			addedFields.map((f) => f.key ?? buildCompositeKey(f.name, f.fieldContext)),
 		);
 		return normalizedSuggestions.filter(
 			(attr) => !addedIds.has(attr.key as string),

frontend/src/components/Traces/TableView/useTracesTableColumns.tsx

@@ -1,58 +0,0 @@
-import { useMemo, type ReactElement } from 'react';
-
-import TanStackTable from 'components/TanStackTableView';
-import type { TableColumnDef } from 'components/TanStackTableView/types';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
-import type { TelemetryFieldKey } from 'types/api/v5/queryRange';
-
-type UseTracesTableColumnsProps<TRow> = {
-	/** Pinned / always-on columns owned by the consumer (e.g. timestamp for List view, the 5 static columns for Traces grouped view). */
-	baseColumns: TableColumnDef<TRow>[];
-	/** Dynamic columns sourced from `selectColumns` (List view). Omit or pass [] for views without a picker (Traces grouped). */
-	fields?: TelemetryFieldKey[];
-};
-
-/**
- * Shared column builder for the trace list view and the trace (group-by-trace) view.
- *
- * Composition: `[...baseColumns, ...fields.map(makeUserFieldCol)]`. Each view owns its
- * `baseColumns` inline so view-specific changes (timestamp formatting on list, static-column
- * cell renderers on grouped) stay localized. The shared piece is `makeUserFieldCol` — the
- * dynamic-field factory that consumes `selectColumns` for the list view.
- */
-export function useTracesTableColumns<TRow>({
-	baseColumns,
-	fields = [],
-}: UseTracesTableColumnsProps<TRow>): TableColumnDef<TRow>[] {
-	return useMemo<TableColumnDef<TRow>[]>(
-		() => [...baseColumns, ...fields.map((f) => makeUserFieldCol<TRow>(f))],
-		[baseColumns, fields],
-	);
-}
-
-function makeUserFieldCol<TRow>(f: TelemetryFieldKey): TableColumnDef<TRow> {
-	const col: TableColumnDef<Record<string, unknown>> = {
-		id: buildCompositeKey(f.name, f.fieldContext, f.fieldDataType),
-		header: f.name,
-		accessorFn: (row): unknown => row[f.name],
-		enableRemove: true,
-		width: { min: 192 },
-		cell: ({ value }): ReactElement => (
-			<TanStackTable.Text>{stringifyCellValue(value)}</TanStackTable.Text>
-		),
-	};
-	return col as TableColumnDef<TRow>;
-}
-
-function stringifyCellValue(value: unknown): string {
-	if (value == null) {
-		return '';
-	}
-	if (typeof value === 'string') {
-		return value;
-	}
-	if (typeof value === 'number' || typeof value === 'boolean') {
-		return String(value);
-	}
-	return JSON.stringify(value);
-}

frontend/src/constants/localStorage.ts

@@ -11,7 +11,6 @@ export enum LOCALSTORAGE {
 	TRACES_LIST_OPTIONS = 'TRACES_LIST_OPTIONS',
 	GRAPH_VISIBILITY_STATES = 'GRAPH_VISIBILITY_STATES',
 	TRACES_LIST_COLUMNS = 'TRACES_LIST_COLUMNS',
-	TRACES_VIEW_COLUMNS = 'TRACES_VIEW_COLUMNS',
 	LOGS_LIST_COLUMNS = 'LOGS_LIST_COLUMNS',
 	LOGS_LIST_COLUMN_SIZING = 'LOGS_LIST_COLUMN_SIZING',
 	LOGGED_IN_USER_NAME = 'LOGGED_IN_USER_NAME',

frontend/src/container/OptionsMenu/constants.ts

@@ -56,7 +56,7 @@ export function dedupeColumnsByCompositeKey(
 	const seen = new Set<string>();
 	let hasDuplicate = false;
 	const deduped = columns.filter((c) => {
-		const key = buildCompositeKey(c.name, c.fieldContext, c.fieldDataType);
+		const key = buildCompositeKey(c.name, c.fieldContext);
 		if (seen.has(key)) {
 			hasDuplicate = true;
 			return false;

frontend/src/container/OptionsMenu/useOptionsMenu.ts

@@ -281,8 +281,7 @@ const useOptionsMenu = ({
 	const handleRemoveSelectedColumn = useCallback(
 		(columnKey: string) => {
 			const newSelectedColumns = preferences?.columns?.filter(
-				(f) =>
-					buildCompositeKey(f.name, f.fieldContext, f.fieldDataType) !== columnKey,
+				(f) => buildCompositeKey(f.name, f.fieldContext) !== columnKey,
 			);
 
 			if (!newSelectedColumns?.length && dataSource !== DataSource.LOGS) {
@@ -365,10 +364,7 @@ const useOptionsMenu = ({
 		(orderedIds: string[]): void => {
 			const current = preferences?.columns ?? [];
 			const byCompositeKey = new Map(
-				current.map((f) => [
-					buildCompositeKey(f.name, f.fieldContext, f.fieldDataType),
-					f,
-				]),
+				current.map((f) => [buildCompositeKey(f.name, f.fieldContext), f]),
 			);
 			const reordered = orderedIds
 				.map((id) => byCompositeKey.get(id))

frontend/src/container/OptionsMenu/utils.ts

@@ -15,15 +15,8 @@ export const getOptionsFromKeys = (
 	);
 };
 
-// Composite column id. Disambiguates same-name fields by `context` and `dataType`
-// (e.g. attribute.http.status_code ships as both number and string). Each arg
-// is appended only when truthy. `dataType` is optional — logs callers stay on
-// the 2-arg form until parity lands.
-export const buildCompositeKey = (
-	name: string,
-	context?: string,
-	dataType?: string,
-): string => {
-	const withContext = context ? `${context}.${name}` : name;
-	return dataType ? `${withContext}.${dataType}` : withContext;
-};
+// Composite identity for a column. Disambiguates same-name fields across
+// different fieldContexts (e.g. resource.service.name vs attribute.service.name).
+// Falls back to bare name when context is missing.
+export const buildCompositeKey = (name: string, context?: string): string =>
+	context ? `${context}.${name}` : name;

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

@@ -2,37 +2,62 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Settings } from '@signozhq/icons';
 import FieldsSelector from 'components/FieldsSelector';
+import Controls, { ControlsProps } from 'container/Controls';
 import { OptionsMenuConfig } from 'container/OptionsMenu/types';
+import useQueryPagination from 'hooks/queryPagination/useQueryPagination';
 import { DataSource } from 'types/common/queryBuilder';
 
 import styles from './Controls.module.scss';
 
 function TraceExplorerControls({
+	isLoading,
+	totalCount,
+	perPageOptions,
 	config,
+	showSizeChanger = true,
 }: TraceExplorerControlsProps): JSX.Element | null {
 	const { t } = useTranslation(['trace']);
 	const [isFieldsSelectorOpen, setIsFieldsSelectorOpen] = useState(false);
 
-	if (!config?.fieldsSelector) {
-		return null;
-	}
+	const {
+		pagination,
+		handleCountItemsPerPageChange,
+		handleNavigateNext,
+		handleNavigatePrevious,
+	} = useQueryPagination(totalCount, perPageOptions);
 
 	return (
 		<div className={styles.container}>
-			<div
-				className={styles.optionsTrigger}
-				onClick={(): void => setIsFieldsSelectorOpen(true)}
-			>
-				{t('options_menu.options')}
-				<Settings size="md" />
-			</div>
-			<FieldsSelector
-				isOpen={isFieldsSelectorOpen}
-				title="Edit columns"
-				fields={config.fieldsSelector.value}
-				onFieldsChange={config.fieldsSelector.onFieldsChange}
-				onClose={(): void => setIsFieldsSelectorOpen(false)}
-				signal={DataSource.TRACES}
+			{config?.fieldsSelector && (
+				<>
+					<div
+						className={styles.optionsTrigger}
+						onClick={(): void => setIsFieldsSelectorOpen(true)}
+					>
+						{t('options_menu.options')}
+						<Settings size="md" />
+					</div>
+					<FieldsSelector
+						isOpen={isFieldsSelectorOpen}
+						title="Edit columns"
+						fields={config.fieldsSelector.value}
+						onFieldsChange={config.fieldsSelector.onFieldsChange}
+						onClose={(): void => setIsFieldsSelectorOpen(false)}
+						signal={DataSource.TRACES}
+					/>
+				</>
+			)}
+
+			<Controls
+				isLoading={isLoading}
+				totalCount={totalCount}
+				offset={pagination.offset}
+				countPerPage={pagination.limit}
+				perPageOptions={perPageOptions}
+				handleCountItemsPerPageChange={handleCountItemsPerPageChange}
+				handleNavigateNext={handleNavigateNext}
+				handleNavigatePrevious={handleNavigatePrevious}
+				showSizeChanger={showSizeChanger}
 			/>
 		</div>
 	);
@@ -42,8 +67,16 @@ TraceExplorerControls.defaultProps = {
 	config: null,
 };
 
-type TraceExplorerControlsProps = {
+type TraceExplorerControlsProps = Pick<
+	ControlsProps,
+	'isLoading' | 'totalCount' | 'perPageOptions'
+> & {
 	config?: OptionsMenuConfig | null;
+	showSizeChanger?: boolean;
+};
+
+TraceExplorerControls.defaultProps = {
+	showSizeChanger: true,
 };
 
 export default memo(TraceExplorerControls);

frontend/src/container/TracesExplorer/ListView/configs.tsx

@@ -1,3 +1,12 @@
 import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
 
+export const defaultSelectedColumns: string[] = [
+	'service.name',
+	'name',
+	'duration_nano',
+	'http_method',
+	'response_status_code',
+	'timestamp',
+];
+
 export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];

frontend/src/container/TracesExplorer/ListView/index.test.tsx

@@ -54,17 +54,18 @@ const renderListView = (
 	);
 };
 
-// Helper to verify all controls are visible.
-// Pagination controls were removed in the TanStack-table migration (infinite
-// scroll replaces page-by-page navigation), so only the order-by combobox +
-// options trigger remain in the top toolbar.
+// Helper to verify all controls are visible
 const verifyControlsVisibility = (): void => {
 	// Order by controls
 	expect(screen.getByText(/Order by/i)).toBeInTheDocument();
 
-	// At least one combobox (order-by); page-size selector is gone post-migration.
+	// Pagination controls
+	expect(screen.getByRole('button', { name: /previous/i })).toBeInTheDocument();
+	expect(screen.getByRole('button', { name: /next/i })).toBeInTheDocument();
+
+	// Items per page selector (there are multiple comboboxes, so we check for at least 2)
 	const comboboxes = screen.getAllByRole('combobox');
-	expect(comboboxes.length).toBeGreaterThanOrEqual(1);
+	expect(comboboxes.length).toBeGreaterThanOrEqual(2);
 
 	// Options menu (settings button) - check for translation key or actual text
 	expect(screen.getByText(/options_menu.options|options/i)).toBeInTheDocument();
@@ -151,10 +152,15 @@ describe('Traces ListView - Error and Empty States', () => {
 				expect(screen.getByText(/Order by/i)).toBeInTheDocument();
 			});
 
-			// Order-by combobox should be interactive (pagination buttons removed
-			// after the TanStack migration switched List view to infinite scroll).
+			// Order by controls should be interactive
 			const comboboxes = screen.getAllByRole('combobox');
-			expect(comboboxes.length).toBeGreaterThanOrEqual(1);
+			expect(comboboxes.length).toBeGreaterThanOrEqual(2);
+
+			// Pagination controls should be present
+			const previousButton = screen.getByRole('button', { name: /previous/i });
+			const nextButton = screen.getByRole('button', { name: /next/i });
+			expect(previousButton).toBeInTheDocument();
+			expect(nextButton).toBeInTheDocument();
 
 			// Options menu should be clickable
 			const optionsButton = screen.getByText(/options_menu.options|options/i);
@@ -169,9 +175,9 @@ describe('Traces ListView - Error and Empty States', () => {
 				expect(screen.getByText(/No traces yet/i)).toBeInTheDocument();
 			});
 
-			// At least the order-by combobox should be interactive.
+			// All controls should be interactive
 			const comboboxes = screen.getAllByRole('combobox');
-			expect(comboboxes.length).toBeGreaterThanOrEqual(1);
+			expect(comboboxes.length).toBeGreaterThanOrEqual(2);
 
 			// Options menu should be clickable
 			const optionsButton = screen.getByText(/options_menu.options|options/i);

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

@@ -10,16 +10,14 @@ import {
 } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
-import { ArrowUp10, Minus } from '@signozhq/icons';
 import logEvent from 'api/common/logEvent';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
-import TanStackTable from 'components/TanStackTableView';
-import { useTracesTableColumns } from 'components/Traces/TableView/useTracesTableColumns';
+import { ResizeTable } from 'components/ResizeTable';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
@@ -30,28 +28,24 @@ import TraceExplorerControls from 'container/TracesExplorer/Controls';
 import { getListViewQuery } from 'container/TracesExplorer/explorerUtils';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { Pagination } from 'hooks/queryPagination';
+import { getDefaultPaginationConfig } from 'hooks/queryPagination/utils';
+import useUrlQueryData from 'hooks/useUrlQueryData';
+import { ArrowUp10, Minus } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import APIError from 'types/api/error';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { getAbsoluteUrl } from 'utils/basePath';
 
 import { TracesLoading } from '../TraceLoading/TraceLoading';
-import { Container } from './styles';
-import {
-	getTraceLink,
-	makeListFieldCol,
-	makeTimestampCol,
-	SpanRow,
-	transformSpanRows,
-} from './utils';
+import { defaultSelectedColumns, PER_PAGE_OPTIONS } from './configs';
+import { Container, tableStyles } from './styles';
+import { getListColumns, transformDataWithDate } from './utils';
 
 import './ListView.styles.scss';
 
-const PAGE_SIZE = 50;
-
 interface ListViewProps {
 	isFilterApplied: boolean;
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
@@ -65,7 +59,6 @@ function ListView({
 	setIsLoadingQueries,
 	queryKeyRef,
 }: ListViewProps): JSX.Element {
-	const history = useHistory();
 	const { stagedQuery, panelType: panelTypeFromQueryBuilder } =
 		useQueryBuilder();
 
@@ -84,22 +77,25 @@ function ListView({
 		storageKey: LOCALSTORAGE.TRACES_LIST_OPTIONS,
 		dataSource: DataSource.TRACES,
 		aggregateOperator: 'count',
+		initialOptions: {
+			selectColumns: defaultSelectedColumns,
+		},
 	});
 
-	// Infinite-scroll state — owned by this view.
-	const [pagination, setPagination] = useState<{
-		offset: number;
-		limit: number;
-	}>({
-		offset: 0,
-		limit: PAGE_SIZE,
-	});
-	const [accumulatedRows, setAccumulatedRows] = useState<SpanRow[]>([]);
-	const [hasMore, setHasMore] = useState(true);
+	const { queryData: paginationQueryData } = useUrlQueryData<Pagination>(
+		QueryParams.pagination,
+	);
+	const paginationConfig =
+		paginationQueryData ?? getDefaultPaginationConfig(PER_PAGE_OPTIONS);
 
-	// Stable sorted-name signature for the queryKey + reset trigger.
+	const requestQuery = useMemo(
+		() => getListViewQuery(stagedQuery || initialQueriesMap.traces, orderBy),
+		[stagedQuery, orderBy],
+	);
+
+	// TEMP — remove after traces moves to TanStack table.
 	// - Drag updates selectColumns; raw queryKey would churn on reorder.
-	// - Trace API fetches only listed columns → add/remove must refetch from scratch.
+	// - Trace API fetches only listed columns → add/remove must refetch.
 	// - Sorted-name signature: stable on reorder, changes on add/remove.
 	const selectColumnsSignature = useMemo(
 		() =>
@@ -110,25 +106,6 @@ function ListView({
 		[options?.selectColumns],
 	);
 
-	// Reset accumulator + offset whenever the underlying query identity changes.
-	useEffect(() => {
-		setPagination({ offset: 0, limit: PAGE_SIZE });
-		setAccumulatedRows([]);
-		setHasMore(true);
-	}, [
-		stagedQuery?.id,
-		globalSelectedTime,
-		maxTime,
-		minTime,
-		orderBy,
-		selectColumnsSignature,
-	]);
-
-	const requestQuery = useMemo(
-		() => getListViewQuery(stagedQuery || initialQueriesMap.traces, orderBy),
-		[stagedQuery, orderBy],
-	);
-
 	const queryKey = useMemo(
 		() => [
 			REACT_QUERY_KEY.GET_QUERY_RANGE,
@@ -137,18 +114,18 @@ function ListView({
 			minTime,
 			stagedQuery,
 			panelType,
-			pagination,
+			paginationConfig,
 			selectColumnsSignature,
 			orderBy,
 		],
 		[
-			globalSelectedTime,
-			maxTime,
-			minTime,
 			stagedQuery,
 			panelType,
-			pagination,
+			globalSelectedTime,
+			paginationConfig,
 			selectColumnsSignature,
+			maxTime,
+			minTime,
 			orderBy,
 		],
 	);
@@ -167,14 +144,16 @@ function ListView({
 				dataSource: 'traces',
 			},
 			tableParams: {
-				pagination,
+				pagination: paginationConfig,
 				selectColumns: options?.selectColumns,
 			},
 		},
+		// ENTITY_VERSION_V4,
 		ENTITY_VERSION_V5,
 		{
 			queryKey,
 			enabled:
+				// don't make api call while the time range state in redux is loading
 				!timeRangeUpdateLoading &&
 				!!stagedQuery &&
 				panelType === PANEL_TYPES.LIST &&
@@ -189,19 +168,6 @@ function ListView({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [data?.payload, data?.warning]);
 
-	// Append fetched page to accumulator (replace when offset === 0).
-	const responseResult = data?.payload?.data?.newResult?.data?.result;
-	useEffect(() => {
-		if (!responseResult) {
-			return;
-		}
-		const newRows = transformSpanRows(responseResult);
-		setAccumulatedRows((prev) =>
-			pagination.offset === 0 ? newRows : [...prev, ...newRows],
-		);
-		setHasMore(newRows.length >= pagination.limit);
-	}, [responseResult, pagination.offset, pagination.limit]);
-
 	useEffect(() => {
 		if (isLoading || isFetching) {
 			setIsLoadingQueries(true);
@@ -210,50 +176,68 @@ function ListView({
 		}
 	}, [isLoading, isFetching, setIsLoadingQueries]);
 
-	useEffect(() => {
-		if (!isLoading && !isFetching && !isError && accumulatedRows.length !== 0) {
-			void logEvent('Traces Explorer: Data present', { panelType });
-		}
-	}, [isLoading, isFetching, isError, accumulatedRows.length, panelType]);
+	const dataLength =
+		data?.payload?.data?.newResult?.data?.result[0]?.list?.length;
+	const totalCount = useMemo(() => dataLength || 0, [dataLength]);
 
-	const handleEndReached = useCallback(() => {
-		if (!hasMore) {
-			return;
-		}
-		setPagination((p) => ({ ...p, offset: p.offset + p.limit }));
-	}, [hasMore]);
+	const queryTableDataResult = data?.payload?.data?.newResult?.data?.result;
+	const queryTableData = useMemo(
+		() => queryTableDataResult || [],
+		[queryTableDataResult],
+	);
+
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	const columns = useMemo(
+		() =>
+			getListColumns(
+				options?.selectColumns || [],
+				formatTimezoneAdjustedTimestamp,
+			),
+		[options?.selectColumns, formatTimezoneAdjustedTimestamp],
+	);
+
+	const transformedQueryTableData = useMemo(
+		() => transformDataWithDate(queryTableData) || [],
+		[queryTableData],
+	);
+
+	const handleDragColumn = useCallback(
+		(fromIndex: number, toIndex: number): void => {
+			const reordered = [...columns];
+			const [moved] = reordered.splice(fromIndex, 1);
+			reordered.splice(toIndex, 0, moved);
+			// `key` is the composite (fieldContext.name) — disambiguates same-name fields.
+			const orderedIds = reordered
+				.map((c) => String(c.key || ('dataIndex' in c && c.dataIndex) || ''))
+				.filter(Boolean);
+			config?.addColumn?.onReorder(orderedIds);
+		},
+		[columns, config],
+	);
 
 	const handleOrderChange = useCallback((value: string) => {
 		setOrderBy(value);
 	}, []);
 
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	const baseColumns = useMemo(
-		() => [
-			makeTimestampCol(formatTimezoneAdjustedTimestamp),
-			...(options?.selectColumns ?? []).map(makeListFieldCol),
-		],
-		[formatTimezoneAdjustedTimestamp, options?.selectColumns],
-	);
-
-	const tableColumns = useTracesTableColumns<SpanRow>({ baseColumns });
-
-	const handleRowClick = useCallback(
-		(row: SpanRow): void => {
-			history.push(getTraceLink(row));
-		},
-		[history],
-	);
-
-	const handleRowClickNewTab = useCallback((row: SpanRow): void => {
-		window.open(
-			getAbsoluteUrl(getTraceLink(row)),
-			'_blank',
-			'noopener,noreferrer',
-		);
-	}, []);
+	const isDataAbsent =
+		!isLoading &&
+		!isFetching &&
+		!isError &&
+		transformedQueryTableData.length === 0;
 
+	useEffect(() => {
+		if (
+			!isLoading &&
+			!isFetching &&
+			!isError &&
+			transformedQueryTableData.length !== 0
+		) {
+			logEvent('Traces Explorer: Data present', {
+				panelType,
+			});
+		}
+	}, [isLoading, isFetching, isError, transformedQueryTableData, panelType]);
 	return (
 		<Container>
 			<div className="trace-explorer-controls">
@@ -274,54 +258,39 @@ function ListView({
 					selectedColumns={options?.selectColumns}
 				/>
 
-				<TraceExplorerControls config={config} />
+				<TraceExplorerControls
+					isLoading={isFetching}
+					totalCount={totalCount}
+					config={config}
+					perPageOptions={PER_PAGE_OPTIONS}
+				/>
 			</div>
 
 			{isError && error && <ErrorInPlace error={error as APIError} />}
 
-			{(isLoading || isFetching) && accumulatedRows.length === 0 && (
+			{(isLoading || (isFetching && transformedQueryTableData.length === 0)) && (
 				<TracesLoading />
 			)}
 
-			{!isLoading &&
-				!isFetching &&
-				!isError &&
-				!isFilterApplied &&
-				accumulatedRows.length === 0 && <NoLogs dataSource={DataSource.TRACES} />}
+			{isDataAbsent && !isFilterApplied && (
+				<NoLogs dataSource={DataSource.TRACES} />
+			)}
 
-			{!isLoading &&
-				!isFetching &&
-				accumulatedRows.length === 0 &&
-				!isError &&
-				isFilterApplied && (
-					<EmptyLogsSearch dataSource={DataSource.TRACES} panelType="LIST" />
-				)}
+			{isDataAbsent && isFilterApplied && (
+				<EmptyLogsSearch dataSource={DataSource.TRACES} panelType="LIST" />
+			)}
 
-			{accumulatedRows.length !== 0 && (
-				<div
-					style={{
-						flex: 1,
-						minHeight: 0,
-						display: 'flex',
-						flexDirection: 'column',
-					}}
-				>
-					<TanStackTable<SpanRow>
-						data={accumulatedRows}
-						columns={tableColumns}
-						columnStorageKey={LOCALSTORAGE.TRACES_LIST_COLUMNS}
-						respectColumnOrder={false}
-						cellTypographySize="medium"
-						isLoading={isLoading || isFetching}
-						onEndReached={handleEndReached}
-						onColumnOrderChange={(cols): void =>
-							config?.addColumn?.onReorder(cols.map((c) => c.id))
-						}
-						onColumnRemove={config?.addColumn?.onRemove}
-						onRowClick={handleRowClick}
-						onRowClickNewTab={handleRowClickNewTab}
-					/>
-				</div>
+			{!isError && transformedQueryTableData.length !== 0 && (
+				<ResizeTable
+					tableLayout="fixed"
+					pagination={false}
+					scroll={{ x: 'max-content' }}
+					loading={isFetching}
+					style={tableStyles}
+					dataSource={transformedQueryTableData}
+					columns={columns}
+					onDragColumn={handleDragColumn}
+				/>
 			)}
 		</Container>
 	);

frontend/src/container/TracesExplorer/ListView/styles.ts

@@ -1,8 +1,7 @@
 import { CSSProperties } from 'react';
+import { Typography } from '@signozhq/ui/typography';
 import styled from 'styled-components';
 
-// Kept for legacy antd consumers (TracesTableComponent, LogsPanelComponent).
-// The TanStack ListView doesn't use it.
 export const tableStyles: CSSProperties = {
 	cursor: 'unset',
 };
@@ -10,30 +9,13 @@ export const tableStyles: CSSProperties = {
 export const Container = styled.div`
 	display: flex;
 	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	// Fallback: the page-level CSS chain (.trace-explorer-page → .trace-explorer →
-	// .traces-explorer-views) isn't a flex column today, so flex:1 alone has nothing
-	// to flex against. Anchor a height via the viewport so react-virtuoso (inside
-	// TanStackTable) has a sized parent to render into.
-	height: calc(100vh - 240px);
-	min-height: 400px;
-
-	// Match logs explorer table typography (mirrors LogsExplorerList.style.scss).
-	font-family: 'Space Mono', monospace;
-
-	// Row hover affordance — TanStack's row hover reads var(--row-hover-bg) with no
-	// fallback, so without setting it hover is invisible.
-	--row-hover-bg: var(--l1-border);
-
-	// Small leading gap before the pinned timestamp column. No drag handle here
-	// (pinned columns aren't movable), so we don't need the full 12px we use in
-	// the grouped Traces view — 5px just keeps the text off the table edge.
-	--tanstack-cell-padding-left-first-column: 5px;
-
-	// Allow dynamic-field cells to clamp to 3 lines (matches old LineClampedText
-	// behavior). Header + intrinsic columns stay 1-line by their own settings.
-	--tanstack-plain-body-line-clamp: 3;
-
 	--typography-color: var(--l1-foreground);
 `;
+
+export const ErrorText = styled(Typography)`
+	text-align: center;
+`;
+
+export const DateText = styled(Typography)`
+	min-width: 145px;
+`;

frontend/src/container/TracesExplorer/ListView/utils.tsx

@@ -3,8 +3,6 @@ import type { TableColumnsType as ColumnsType } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
-import TanStackTable from 'components/TanStackTableView';
-import type { TableColumnDef } from 'components/TanStackTableView/types';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
 import { buildCompositeKey } from 'container/OptionsMenu/utils';
@@ -16,14 +14,6 @@ import LineClampedText from 'periscope/components/LineClampedText/LineClampedTex
 import { ILog } from 'types/api/logs/log';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
 
-// `BlockLink`, `getListColumns`, `transformDataWithDate` are kept for legacy
-// antd consumers. `getTraceLink` is shared with the TanStack ListView, which
-// otherwise uses `make*Col` / `SpanRow` / `transformSpanRows`.
-
-// ---------------------------------------------------------------------------
-// Legacy antd consumers
-// ---------------------------------------------------------------------------
-
 export function BlockLink({
 	children,
 	to,
@@ -51,43 +41,12 @@ export const transformDataWithDate = (
 	data[0]?.list?.map(({ data, timestamp }) => ({ ...data, date: timestamp })) ||
 	[];
 
-/**
- * Reads camelCase OR snake_case at runtime — both legacy `RowData` and the new
- * `SpanRow` (each used by different ListView/utils consumers) satisfy
- * `Record<string, unknown>` because their named props are subtypes of `unknown`.
- */
-export const getTraceLink = (record: Record<string, unknown>): string => {
-	const traceId = readId(record.traceID) || readId(record.trace_id);
-	const spanId = readId(record.spanID) || readId(record.span_id);
-	return `${ROUTES.TRACE}/${traceId}${formUrlParams({
-		spanId,
+export const getTraceLink = (record: RowData): string =>
+	`${ROUTES.TRACE}/${record.traceID || record.trace_id}${formUrlParams({
+		spanId: record.spanID || record.span_id,
 		levelUp: 0,
 		levelDown: 0,
 	})}`;
-};
-
-function readId(value: unknown): string {
-	if (typeof value === 'string') {
-		return value;
-	}
-	if (typeof value === 'number') {
-		return String(value);
-	}
-	return '';
-}
-
-function stringifyCellValue(value: unknown): string {
-	if (value == null) {
-		return '';
-	}
-	if (typeof value === 'string') {
-		return value;
-	}
-	if (typeof value === 'number' || typeof value === 'boolean') {
-		return String(value);
-	}
-	return JSON.stringify(value);
-}
 
 export const getListColumns = (
 	selectedColumns: TelemetryFieldKey[],
@@ -177,107 +136,3 @@ export const getListColumns = (
 
 	return [...initialColumns, ...columns];
 };
-
-// ---------------------------------------------------------------------------
-// TanStack ListView (current)
-// ---------------------------------------------------------------------------
-
-// Span row shape for the trace list view. Known intrinsic fields explicit; the
-// rest of the row comes from user-selected dynamic columns (selectColumns), hence
-// the Record intersection. `timestamp` is added by transformSpanRows from the
-// API's wrapping ListItem.timestamp (data itself omits it).
-export type SpanRow = {
-	trace_id: string;
-	span_id: string;
-	timestamp: string;
-} & Record<string, unknown>;
-
-export const transformSpanRows = (data: QueryDataV3[]): SpanRow[] => {
-	const list = data[0]?.list;
-	if (!list) {
-		return [];
-	}
-	return list.map((item) => ({
-		...(item.data as Record<string, unknown>),
-		timestamp: item.timestamp,
-	})) as unknown as SpanRow[];
-};
-
-// Field-name allowlists that drive signal-specific cell rendering (kept from the
-// pre-TanStack getListColumns). Both legacy camelCase + snake_case variants are
-// listed because the API has shipped both over time.
-const STATUS_FIELD_NAMES = new Set([
-	'httpMethod',
-	'http_method',
-	'responseStatusCode',
-	'response_status_code',
-]);
-const DURATION_FIELD_NAMES = new Set(['durationNano', 'duration_nano']);
-
-type TimestampFormatter = (
-	input: TimestampInput,
-	format?: string,
-) => string | number;
-
-export function makeTimestampCol(
-	formatTimezoneAdjustedTimestamp: TimestampFormatter,
-): TableColumnDef<SpanRow> {
-	return {
-		id: buildCompositeKey('timestamp', 'span'),
-		header: 'Timestamp',
-		accessorFn: (row): unknown => row.timestamp,
-		// Pinned left as a visual anchor during horizontal scroll. Trade-off: the
-		// sticky-positioning + cell `overflow: hidden` in TanStackTable.module.scss
-		// makes the right-edge resize handle effectively unhittable for pinned
-		// columns — accepted.
-		pin: 'left',
-		canBeHidden: false,
-		enableRemove: false,
-		width: { default: 170, min: 170 },
-		cell: ({ value }): JSX.Element => {
-			const ts = value as string | number;
-			const formatted =
-				typeof ts === 'string'
-					? formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.ISO_DATETIME_MS)
-					: formatTimezoneAdjustedTimestamp(
-							ts / 1e6,
-							DATE_TIME_FORMATS.ISO_DATETIME_MS,
-						);
-			return <TanStackTable.Text>{String(formatted)}</TanStackTable.Text>;
-		},
-	};
-}
-
-export function makeListFieldCol(
-	f: TelemetryFieldKey,
-): TableColumnDef<SpanRow> {
-	return {
-		id: buildCompositeKey(f.name, f.fieldContext, f.fieldDataType),
-		header: f.name,
-		accessorFn: (row): unknown => row[f.name],
-		enableRemove: true,
-		width: { min: 192 },
-		cell: ({ value }): JSX.Element => {
-			if (value === '' || value == null) {
-				return <TanStackTable.Text data-testid={f.name}>N/A</TanStackTable.Text>;
-			}
-			const text = stringifyCellValue(value);
-			if (STATUS_FIELD_NAMES.has(f.name)) {
-				return (
-					<Badge data-testid={f.name} color="sakura" variant="outline">
-						{text}
-					</Badge>
-				);
-			}
-			if (DURATION_FIELD_NAMES.has(f.name)) {
-				return (
-					<TanStackTable.Text data-testid={f.name}>
-						{getMs(text)}
-						ms
-					</TanStackTable.Text>
-				);
-			}
-			return <TanStackTable.Text data-testid={f.name}>{text}</TanStackTable.Text>;
-		},
-	};
-}

frontend/src/container/TracesExplorer/TracesView/configs.tsx

@@ -1,69 +1,50 @@
-import TanStackTable from 'components/TanStackTableView';
-import type { TableColumnDef } from 'components/TanStackTableView/types';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
+import { generatePath, Link } from 'react-router-dom';
+import type { TableColumnsType as ColumnsType } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import ROUTES from 'constants/routes';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
+import { ListItem } from 'types/api/widgets/getQuery';
 
 export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
 
-// Trace-grouped (group-by-trace) row shape. Distinct from logs' `ListItem.data`
-// (which is `Omit<ILog, 'timestamp' | 'span_id'>` — the legacy logs shape).
-// Trace rows ship trace-summary fields; runtime keys often contain dots (e.g.
-// `service.name`), so the row indexes via string keys, not nested-property access.
-export type TraceRow = {
-	'service.name': string;
-	name: string;
-	duration_nano: number | string;
-	span_count: number | string;
-	trace_id: string;
-};
-
-export const columns: TableColumnDef<TraceRow>[] = [
+export const columns: ColumnsType<ListItem['data']> = [
 	{
-		id: buildCompositeKey('service.name', 'resource'),
-		header: 'Root Service Name',
-		accessorFn: (row): unknown => row['service.name'],
-		cell: ({ value }): JSX.Element => (
-			<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
-		),
-		width: { min: 192 },
+		title: 'Root Service Name',
+		dataIndex: 'service.name',
+		key: 'serviceName',
 	},
 	{
-		id: 'name',
-		header: 'Root Operation Name',
-		accessorFn: (row): unknown => row.name,
-		cell: ({ value }): JSX.Element => (
-			<TanStackTable.Text data-testid="trace-id">
-				{String(value ?? '')}
-			</TanStackTable.Text>
-		),
-		width: { min: 200 },
+		title: 'Root Operation Name',
+		dataIndex: 'name',
+		key: 'name',
 	},
 	{
-		id: 'duration_nano',
-		header: 'Root Duration (in ms)',
-		accessorFn: (row): unknown => row.duration_nano,
-		cell: ({ value }): JSX.Element => (
-			<TanStackTable.Text>{getMs(String(value))}ms</TanStackTable.Text>
+		title: 'Root Duration (in ms)',
+		dataIndex: 'duration_nano',
+		key: 'durationNano',
+		render: (duration: number): JSX.Element => (
+			<Typography>{getMs(String(duration))}ms</Typography>
 		),
-		width: { min: 130 },
 	},
 	{
-		id: 'span_count',
-		header: 'No of Spans',
-		accessorFn: (row): unknown => row.span_count,
-		cell: ({ value }): JSX.Element => (
-			<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
-		),
-		width: { min: 100 },
+		title: 'No of Spans',
+		dataIndex: 'span_count',
+		key: 'span_count',
 	},
 	{
-		id: 'trace_id',
-		header: 'TraceID',
-		accessorFn: (row): unknown => row.trace_id,
-		cell: ({ value }): JSX.Element => (
-			<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
+		title: 'TraceID',
+		dataIndex: 'trace_id',
+		key: 'traceID',
+		render: (traceID: string): JSX.Element => (
+			<Link
+				to={generatePath(ROUTES.TRACE_DETAIL, {
+					id: traceID,
+				})}
+				data-testid="trace-id"
+			>
+				{traceID}
+			</Link>
 		),
-		width: { min: 250 },
 	},
 ];

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

@@ -4,44 +4,38 @@ import {
 	memo,
 	MutableRefObject,
 	SetStateAction,
-	useCallback,
 	useEffect,
 	useMemo,
-	useState,
 } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { generatePath, useHistory } from 'react-router-dom';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import TanStackTable from 'components/TanStackTableView';
-import { useTracesTableColumns } from 'components/Traces/TableView/useTracesTableColumns';
+import { ResizeTable } from 'components/ResizeTable';
 import { ENTITY_VERSION_V5 } from 'constants/app';
-import { LOCALSTORAGE } from 'constants/localStorage';
+import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import ROUTES from 'constants/routes';
 import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
 import NoLogs from 'container/NoLogs/NoLogs';
 import { getListViewQuery } from 'container/TracesExplorer/explorerUtils';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Pagination } from 'hooks/queryPagination';
+import useUrlQueryData from 'hooks/useUrlQueryData';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import APIError from 'types/api/error';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { getAbsoluteUrl } from 'utils/basePath';
 import DOCLINKS from 'utils/docLinks';
 
+import TraceExplorerControls from '../Controls';
 import { TracesLoading } from '../TraceLoading/TraceLoading';
-import { columns as baseColumns, TraceRow } from './configs';
+import { columns, PER_PAGE_OPTIONS } from './configs';
 import { ActionsContainer, Container } from './styles';
 
-const PAGE_SIZE = 50;
-
 interface TracesViewProps {
 	isFilterApplied: boolean;
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
@@ -55,7 +49,6 @@ function TracesView({
 	setIsLoadingQueries,
 	queryKeyRef,
 }: TracesViewProps): JSX.Element {
-	const history = useHistory();
 	const { stagedQuery, panelType } = useQueryBuilder();
 
 	const {
@@ -64,20 +57,9 @@ function TracesView({
 		minTime,
 	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
 
-	// Infinite-scroll state — owned by this view.
-	const [pagination, setPagination] = useState<Pagination>({
-		offset: 0,
-		limit: PAGE_SIZE,
-	});
-	const [accumulatedRows, setAccumulatedRows] = useState<TraceRow[]>([]);
-	const [hasMore, setHasMore] = useState(true);
-
-	// Reset accumulator + offset whenever the underlying query identity changes.
-	useEffect(() => {
-		setPagination({ offset: 0, limit: PAGE_SIZE });
-		setAccumulatedRows([]);
-		setHasMore(true);
-	}, [stagedQuery?.id, globalSelectedTime, maxTime, minTime]);
+	const { queryData: paginationQueryData } = useUrlQueryData<Pagination>(
+		QueryParams.pagination,
+	);
 
 	const transformedQuery = useMemo(
 		() => getListViewQuery(stagedQuery || initialQueriesMap.traces),
@@ -92,9 +74,16 @@ function TracesView({
 			minTime,
 			stagedQuery,
 			panelType,
-			pagination,
+			paginationQueryData,
+		],
+		[
+			globalSelectedTime,
+			maxTime,
+			minTime,
+			stagedQuery,
+			panelType,
+			paginationQueryData,
 		],
-		[globalSelectedTime, maxTime, minTime, stagedQuery, panelType, pagination],
 	);
 
 	if (queryKeyRef) {
@@ -111,7 +100,7 @@ function TracesView({
 				dataSource: 'traces',
 			},
 			tableParams: {
-				pagination,
+				pagination: paginationQueryData,
 			},
 		},
 		ENTITY_VERSION_V5,
@@ -128,20 +117,11 @@ function TracesView({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [data?.payload, data?.warning]);
 
-	// Append fetched page to accumulator (replace when offset === 0).
-	const responseList = data?.payload?.data?.newResult?.data?.result?.[0]?.list;
-	useEffect(() => {
-		if (!responseList) {
-			return;
-		}
-		// API returns trace-summary rows; the `ListItem.data` static type is the
-		// legacy logs shape, so route through `unknown` to land on `TraceRow`.
-		const newRows = responseList.map((li) => li.data) as unknown as TraceRow[];
-		setAccumulatedRows((prev) =>
-			pagination.offset === 0 ? newRows : [...prev, ...newRows],
-		);
-		setHasMore(newRows.length >= pagination.limit);
-	}, [responseList, pagination.offset, pagination.limit]);
+	const responseData = data?.payload?.data?.newResult?.data?.result[0]?.list;
+	const tableData = useMemo(
+		() => responseData?.map((listItem) => listItem.data),
+		[responseData],
+	);
 
 	useEffect(() => {
 		if (isLoading || isFetching) {
@@ -152,48 +132,16 @@ function TracesView({
 	}, [isLoading, isFetching, setIsLoadingQueries]);
 
 	useEffect(() => {
-		if (!isLoading && !isFetching && !isError && accumulatedRows.length !== 0) {
-			void logEvent('Traces Explorer: Data present', {
+		if (!isLoading && !isFetching && !isError && (tableData || []).length !== 0) {
+			logEvent('Traces Explorer: Data present', {
 				panelType: 'TRACE',
 			});
 		}
-	}, [isLoading, isFetching, isError, accumulatedRows.length]);
+	}, [isLoading, isFetching, isError, panelType, tableData]);
 
-	const handleEndReached = useCallback(() => {
-		if (!hasMore) {
-			return;
-		}
-		setPagination((p) => ({ ...p, offset: p.offset + p.limit }));
-	}, [hasMore]);
-
-	const tableColumns = useTracesTableColumns<TraceRow>({ baseColumns });
-
-	const handleRowClick = useCallback(
-		(row: TraceRow): void => {
-			const traceId = String(row.trace_id);
-			history.push(generatePath(ROUTES.TRACE_DETAIL, { id: traceId }));
-		},
-		[history],
-	);
-
-	const handleRowClickNewTab = useCallback((row: TraceRow): void => {
-		const traceId = String(row.trace_id);
-		const path = generatePath(ROUTES.TRACE_DETAIL, { id: traceId });
-		window.open(getAbsoluteUrl(path), '_blank', 'noopener,noreferrer');
-	}, []);
-
-	//oxlint-disable-next-line no-console
-	console.log('TracesView rendered with rows:', {
-		accumulatedRows,
-		tableColumns,
-		isLoading,
-		isFetching,
-		isError,
-		error,
-	});
 	return (
 		<Container>
-			{accumulatedRows.length !== 0 && (
+			{(tableData || []).length !== 0 && (
 				<ActionsContainer>
 					<Typography>
 						This tab only shows Root Spans. More details
@@ -202,12 +150,20 @@ function TracesView({
 							here
 						</Typography.Link>
 					</Typography>
+
+					<div className="trace-explorer-controls">
+						<TraceExplorerControls
+							isLoading={isLoading}
+							totalCount={responseData?.length || 0}
+							perPageOptions={PER_PAGE_OPTIONS}
+						/>
+					</div>
 				</ActionsContainer>
 			)}
 
 			{isError && error && <ErrorInPlace error={error as APIError} />}
 
-			{(isLoading || isFetching) && accumulatedRows.length === 0 && (
+			{(isLoading || (isFetching && (tableData || []).length === 0)) && (
 				<TracesLoading />
 			)}
 
@@ -215,36 +171,25 @@ function TracesView({
 				!isFetching &&
 				!isError &&
 				!isFilterApplied &&
-				accumulatedRows.length === 0 && <NoLogs dataSource={DataSource.TRACES} />}
+				(tableData || []).length === 0 && <NoLogs dataSource={DataSource.TRACES} />}
 
 			{!isLoading &&
 				!isFetching &&
-				accumulatedRows.length === 0 &&
+				(tableData || []).length === 0 &&
 				!isError &&
 				isFilterApplied && (
 					<EmptyLogsSearch dataSource={DataSource.TRACES} panelType="TRACE" />
 				)}
 
-			{accumulatedRows.length !== 0 && (
-				<div
-					style={{
-						flex: 1,
-						minHeight: 0,
-						display: 'flex',
-						flexDirection: 'column',
-					}}
-				>
-					<TanStackTable<TraceRow>
-						data={accumulatedRows}
-						columns={tableColumns}
-						columnStorageKey={LOCALSTORAGE.TRACES_VIEW_COLUMNS}
-						cellTypographySize="medium"
-						isLoading={isLoading || isFetching}
-						onEndReached={handleEndReached}
-						onRowClick={handleRowClick}
-						onRowClickNewTab={handleRowClickNewTab}
-					/>
-				</div>
+			{(tableData || []).length !== 0 && (
+				<ResizeTable
+					loading={isLoading}
+					columns={columns}
+					tableLayout="fixed"
+					dataSource={tableData}
+					scroll={{ x: true }}
+					pagination={false}
+				/>
 			)}
 		</Container>
 	);

frontend/src/container/TracesExplorer/TracesView/styles.ts

@@ -3,16 +3,6 @@ import styled from 'styled-components';
 export const Container = styled.div`
 	display: flex;
 	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	height: calc(100vh - 240px);
-	min-height: 400px;
-
-	// Row hover affordance
-	--row-hover-bg: var(--l1-border);
-
-	// Breathing room before the first column so cell content doesn't hug the corner.
-	--tanstack-cell-padding-left-first-column: 12px;
 `;
 
 export const ActionsContainer = styled.div`

frontend/src/pages/TracesExplorer/index.tsx

@@ -24,6 +24,7 @@ import {
 	getQueryByPanelType,
 } from 'container/TracesExplorer/explorerUtils';
 import ListView from 'container/TracesExplorer/ListView';
+import { defaultSelectedColumns } from 'container/TracesExplorer/ListView/configs';
 import QuerySection from 'container/TracesExplorer/QuerySection';
 import TableView from 'container/TracesExplorer/TableView';
 import TracesView from 'container/TracesExplorer/TracesView';
@@ -79,6 +80,9 @@ function TracesExplorer(): JSX.Element {
 		storageKey: LOCALSTORAGE.TRACES_LIST_OPTIONS,
 		dataSource: DataSource.TRACES,
 		aggregateOperator: 'noop',
+		initialOptions: {
+			selectColumns: defaultSelectedColumns,
+		},
 	});
 
 	const [searchParams] = useSearchParams();

frontend/src/providers/preferences/sync/usePreferenceSync.ts

@@ -3,9 +3,9 @@ import { useEffect, useState } from 'react';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import {
 	defaultLogsSelectedColumns,
-	defaultTraceSelectedColumns,
 	ensureLogsRequiredColumns,
 } from 'container/OptionsMenu/constants';
+import { defaultSelectedColumns as defaultTracesSelectedColumns } from 'container/TracesExplorer/ListView/configs';
 import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -69,7 +69,7 @@ export function usePreferenceSync({
 			};
 		}
 		if (dataSource === DataSource.TRACES) {
-			columns = parsedExtraData?.selectColumns || defaultTraceSelectedColumns;
+			columns = parsedExtraData?.selectColumns || defaultTracesSelectedColumns;
 		}
 		setSavedViewPreferences({ columns, formatting });
 	}, [viewsData, dataSource, savedViewId, mode]);

pkg/types/dashboardtypes/perses_dashboard.go

@@ -12,7 +12,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/types/tagtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
-	"github.com/perses/spec/go/common"
 	"k8s.io/apimachinery/pkg/util/validation"
 )
 
@@ -158,9 +157,6 @@ func (p *PostableDashboardV2) UnmarshalJSON(data []byte) error {
 		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s", err.Error())
 	}
 	*p = PostableDashboardV2(tmp)
-	if p.Spec.Display == nil {
-		p.Spec.Display = &common.Display{}
-	}
 	if !p.GenerateName && p.Spec.Display.Name == "" {
 		p.Spec.Display.Name = p.Name
 	}
@@ -187,7 +183,7 @@ func (p *PostableDashboardV2) validateName() error {
 	if p.Name != "" {
 		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "name must be empty when generateName is true, got %q", p.Name)
 	}
-	if p.Spec.Display == nil || p.Spec.Display.Name == "" {
+	if p.Spec.Display.Name == "" {
 		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.display.name is required when generateName is true")
 	}
 	return nil
@@ -331,9 +327,6 @@ func (u *UpdatableDashboardV2) UnmarshalJSON(data []byte) error {
 		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s", err.Error())
 	}
 	*u = UpdatableDashboardV2(tmp)
-	if u.Spec.Display == nil {
-		u.Spec.Display = &common.Display{}
-	}
 	if u.Spec.Display.Name == "" {
 		u.Spec.Display.Name = u.Name
 	}

pkg/types/dashboardtypes/perses_dashboard_convertors_test.go

@@ -8,10 +8,9 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/coretypes"
-	"github.com/SigNoz/signoz/pkg/types/tagtypes"
 	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/SigNoz/signoz/pkg/types/tagtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
-	"github.com/perses/spec/go/common"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
 )
@@ -166,7 +165,7 @@ func TestPostableDashboardV2NewDashboardV2(t *testing.T) {
 			DashboardV2MetadataBase: DashboardV2MetadataBase{SchemaVersion: SchemaVersion},
 			GenerateName:            true,
 			Spec: DashboardSpec{
-				Display: &common.Display{Name: "My Dashboard!"},
+				Display: Display{Name: "My Dashboard!"},
 			},
 		}
 

pkg/types/dashboardtypes/perses_dashboard_data.go

@@ -17,12 +17,12 @@ import (
 // occurrence is replaced with a typed SigNoz plugin whose OpenAPI schema is a
 // per-site discriminated oneOf.
 type DashboardSpec struct {
-	Display         *common.Display            `json:"display,omitempty"`
+	Display         Display                    `json:"display" required:"true"`
 	Datasources     map[string]*DatasourceSpec `json:"datasources,omitempty"`
-	Variables       []Variable                 `json:"variables,omitempty"`
-	Panels          map[string]*Panel          `json:"panels"`
-	Layouts         []Layout                   `json:"layouts"`
-	Duration        common.DurationString      `json:"duration"`
+	Variables       []Variable                 `json:"variables" required:"true" nullable:"false"`
+	Panels          map[string]*Panel          `json:"panels" required:"true" nullable:"false"`
+	Layouts         []Layout                   `json:"layouts" required:"true" nullable:"false"`
+	Duration        common.DurationString      `json:"duration"  required:"true" nullable:"false"`
 	RefreshInterval common.DurationString      `json:"refreshInterval,omitempty"`
 	Links           []dashboard.Link           `json:"links,omitempty"`
 }

pkg/types/dashboardtypes/perses_plugin_wrappers.go

@@ -18,8 +18,8 @@ import (
 // ══════════════════════════════════════════════
 
 type PanelPlugin struct {
-	Kind PanelPluginKind `json:"kind"`
-	Spec any             `json:"spec"`
+	Kind PanelPluginKind `json:"kind" required:"true"`
+	Spec any             `json:"spec" required:"true"`
 }
 
 // PrepareJSONSchema drops the reflected struct shape (type: object, properties)
@@ -72,8 +72,8 @@ func (v PanelPluginVariant[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
 // ══════════════════════════════════════════════
 
 type QueryPlugin struct {
-	Kind QueryPluginKind `json:"kind"`
-	Spec any             `json:"spec"`
+	Kind QueryPluginKind `json:"kind" required:"true"`
+	Spec any             `json:"spec" required:"true"`
 }
 
 func (QueryPlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
@@ -123,8 +123,8 @@ func (v QueryPluginVariant[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
 // ══════════════════════════════════════════════
 
 type VariablePlugin struct {
-	Kind VariablePluginKind `json:"kind"`
-	Spec any                `json:"spec"`
+	Kind VariablePluginKind `json:"kind" required:"true"`
+	Spec any                `json:"spec" required:"true"`
 }
 
 func (VariablePlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
@@ -171,8 +171,8 @@ func (v VariablePluginVariant[S]) PrepareJSONSchema(s *jsonschema.Schema) error
 // ══════════════════════════════════════════════
 
 type DatasourcePlugin struct {
-	Kind DatasourcePluginKind `json:"kind"`
-	Spec any                  `json:"spec"`
+	Kind DatasourcePluginKind `json:"kind" required:"true"`
+	Spec any                  `json:"spec" required:"true"`
 }
 
 func (DatasourcePlugin) PrepareJSONSchema(s *jsonschema.Schema) error {

pkg/types/dashboardtypes/perses_replicas.go

@@ -13,6 +13,11 @@ import (
 	"github.com/swaggest/jsonschema-go"
 )
 
+type Display struct {
+	Name        string `json:"name" required:"true"`
+	Description string `json:"description,omitempty"`
+}
+
 // ══════════════════════════════════════════════
 // Datasource
 // ══════════════════════════════════════════════
@@ -28,8 +33,8 @@ type DatasourceSpec struct {
 // ══════════════════════════════════════════════
 
 type Panel struct {
-	Kind PanelKind `json:"kind"`
-	Spec PanelSpec `json:"spec"`
+	Kind PanelKind `json:"kind" required:"true"`
+	Spec PanelSpec `json:"spec" required:"true"`
 }
 
 // PanelKind is the panel envelope discriminator. Perses leaves it a free
@@ -54,10 +59,10 @@ func (k *PanelKind) UnmarshalJSON(data []byte) error {
 }
 
 type PanelSpec struct {
-	Display *dashboard.PanelDisplay `json:"display,omitempty"`
-	Plugin  PanelPlugin             `json:"plugin"`
-	Queries []Query                 `json:"queries,omitempty"`
-	Links   []dashboard.Link        `json:"links,omitempty"`
+	Display Display          `json:"display" required:"true"`
+	Plugin  PanelPlugin      `json:"plugin" required:"true"`
+	Queries []Query          `json:"queries" required:"true"`
+	Links   []dashboard.Link `json:"links,omitempty"`
 }
 
 // ══════════════════════════════════════════════
@@ -65,13 +70,13 @@ type PanelSpec struct {
 // ══════════════════════════════════════════════
 
 type Query struct {
-	Kind qb.RequestType `json:"kind"`
-	Spec QuerySpec      `json:"spec"`
+	Kind qb.RequestType `json:"kind" required:"true"`
+	Spec QuerySpec      `json:"spec" required:"true"`
 }
 
 type QuerySpec struct {
 	Name   string      `json:"name,omitempty"`
-	Plugin QueryPlugin `json:"plugin"`
+	Plugin QueryPlugin `json:"plugin" required:"true"`
 }
 
 // ══════════════════════════════════════════════
@@ -82,8 +87,8 @@ type QuerySpec struct {
 // *dashboard.TextVariableSpec by UnmarshalJSON based on Kind. The schema is a
 // discriminated oneOf (see JSONSchemaOneOf).
 type Variable struct {
-	Kind variable.Kind `json:"kind"`
-	Spec any           `json:"spec"`
+	Kind variable.Kind `json:"kind" required:"true"`
+	Spec any           `json:"spec" required:"true"`
 }
 
 func (Variable) PrepareJSONSchema(s *jsonschema.Schema) error {
@@ -135,7 +140,7 @@ func (v VariableEnvelope[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
 // ListVariableSpec mirrors dashboard.ListVariableSpec (variable.ListSpec
 // fields + Name) but with a typed VariablePlugin replacing common.Plugin.
 type ListVariableSpec struct {
-	Display         *variable.Display      `json:"display,omitempty"`
+	Display         Display                `json:"display" required:"true"`
 	DefaultValue    *variable.DefaultValue `json:"defaultValue,omitempty"`
 	AllowAllValue   bool                   `json:"allowAllValue"`
 	AllowMultiple   bool                   `json:"allowMultiple"`
@@ -155,8 +160,8 @@ type ListVariableSpec struct {
 // based on Kind. No plugin is involved, so we reuse the Perses spec types as
 // leaf imports.
 type Layout struct {
-	Kind dashboard.LayoutKind `json:"kind"`
-	Spec any                  `json:"spec"`
+	Kind dashboard.LayoutKind `json:"kind" required:"true"`
+	Spec any                  `json:"spec" required:"true"`
 }
 
 // layoutSpecs is the layout sum type factory. Perses only defines