diff --git a/src/helpers/useDebouncedValue.ts b/src/helpers/useDebouncedValue.ts
new file mode 100644
index 0000000..d1316e7
--- /dev/null
+++ b/src/helpers/useDebouncedValue.ts
@@ -0,0 +1,14 @@
+import {useEffect, useState} from 'react';
+
+/** Delays a changing value without duplicating timer lifecycle handling in consumers. */
+export function useDebouncedValue<T>(value: T, delay: number): T {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+
+    useEffect(() => {
+        const timeoutId = setTimeout(() => setDebouncedValue(value), delay);
+
+        return () => clearTimeout(timeoutId);
+    }, [delay, value]);
+
+    return debouncedValue;
+}
diff --git a/src/index.ts b/src/index.ts
index f37e5fd..3203425 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -8,3 +8,4 @@ export * from './types/tutorial';
 export * from './types/navigation';
 export * from './types/pathEditor';
 export * from './types/errorTree';
+export * from './types/queryStatistics';
diff --git a/src/modules/QueryStatistics/QueryStatistics.scss b/src/modules/QueryStatistics/QueryStatistics.scss
new file mode 100644
index 0000000..c6b7f40
--- /dev/null
+++ b/src/modules/QueryStatistics/QueryStatistics.scss
@@ -0,0 +1,3 @@
+.qp-query-statistics {
+    min-width: 0;
+}
diff --git a/src/modules/QueryStatistics/QueryStatistics.tsx b/src/modules/QueryStatistics/QueryStatistics.tsx
new file mode 100644
index 0000000..6f1c7b2
--- /dev/null
+++ b/src/modules/QueryStatistics/QueryStatistics.tsx
@@ -0,0 +1,125 @@
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import cn from 'bem-cn-lite';
+
+import {useDebouncedValue} from '../../helpers/useDebouncedValue';
+import type {QueryStatisticsColumn, QueryStatisticsProps} from '../../types/queryStatistics';
+import {
+    collectQueryStatisticsGroupIds,
+    filterQueryStatistics,
+    flattenQueryStatistics,
+} from './helpers';
+import {QueryStatisticsTable} from './internal/QueryStatisticsTable';
+import {QueryStatisticsToolbar} from './internal/QueryStatisticsToolbar';
+
+import './QueryStatistics.scss';
+
+const block = cn('qp-query-statistics');
+const DEFAULT_VISIBLE_COLUMNS: QueryStatisticsColumn[] = ['min', 'max', 'avg', 'sum', 'count'];
+const DEFAULT_SEARCH_DEBOUNCE_MS = 500;
+
+function setsEqual(left: Set<string>, right: Set<string>) {
+    return left.size === right.size && Array.from(left).every((value) => right.has(value));
+}
+
+export function QueryStatistics({
+    data,
+    visibleColumns = DEFAULT_VISIBLE_COLUMNS,
+    columnConfig,
+    extraColumns,
+    className,
+    virtual = false,
+    fixedHeader = false,
+    formatValue,
+    search: controlledSearch,
+    defaultSearch = '',
+    onSearchUpdate,
+    expandedIds: controlledExpandedIds,
+    defaultExpandedIds,
+    onExpandedIdsChange,
+    searchDebounceMs = DEFAULT_SEARCH_DEBOUNCE_MS,
+}: QueryStatisticsProps) {
+    const groupIds = useMemo(() => collectQueryStatisticsGroupIds(data), [data]);
+    const knownGroupIdsRef = useRef(new Set(groupIds));
+    const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState(
+        () => new Set(defaultExpandedIds ?? groupIds),
+    );
+    const [uncontrolledSearch, setUncontrolledSearch] = useState(defaultSearch);
+    const search = controlledSearch ?? uncontrolledSearch;
+    const expandedIds = useMemo(
+        () => new Set(controlledExpandedIds ?? uncontrolledExpandedIds),
+        [controlledExpandedIds, uncontrolledExpandedIds],
+    );
+    const debouncedSearch = useDebouncedValue(search, searchDebounceMs);
+
+    const updateSearch = useCallback(
+        (value: string) => {
+            if (controlledSearch === undefined) setUncontrolledSearch(value);
+            onSearchUpdate?.(value);
+        },
+        [controlledSearch, onSearchUpdate],
+    );
+    const updateExpandedIds = useCallback(
+        (next: Set<string>) => {
+            if (controlledExpandedIds === undefined) setUncontrolledExpandedIds(next);
+            onExpandedIdsChange?.(Array.from(next));
+        },
+        [controlledExpandedIds, onExpandedIdsChange],
+    );
+
+    useEffect(() => {
+        const currentGroupIds = new Set(groupIds);
+        const previousGroupIds = knownGroupIdsRef.current;
+        const next = new Set(Array.from(expandedIds).filter((id) => currentGroupIds.has(id)));
+        groupIds.forEach((id) => {
+            if (!previousGroupIds.has(id)) next.add(id);
+        });
+        if (!setsEqual(expandedIds, next)) updateExpandedIds(next);
+        knownGroupIdsRef.current = currentGroupIds;
+    }, [expandedIds, groupIds, updateExpandedIds]);
+
+    const filtered = useMemo(
+        () => filterQueryStatistics(data, debouncedSearch),
+        [data, debouncedSearch],
+    );
+    const effectiveExpandedIds = useMemo(
+        () => new Set([...expandedIds, ...filtered.forcedExpandedIds]),
+        [expandedIds, filtered.forcedExpandedIds],
+    );
+    const rows = useMemo(
+        () => flattenQueryStatistics(filtered.data, effectiveExpandedIds),
+        [effectiveExpandedIds, filtered.data],
+    );
+    const toggleGroup = useCallback(
+        (id: string) => {
+            const next = new Set(expandedIds);
+            if (next.has(id)) next.delete(id);
+            else next.add(id);
+            updateExpandedIds(next);
+        },
+        [expandedIds, updateExpandedIds],
+    );
+
+    return (
+        <div className={block(null, className)}>
+            <QueryStatisticsToolbar
+                search={search}
+                hasGroups={Boolean(groupIds.length)}
+                onSearchUpdate={updateSearch}
+                onExpandAll={() => updateExpandedIds(new Set(groupIds))}
+                onCollapseAll={() => updateExpandedIds(new Set())}
+            />
+            <QueryStatisticsTable
+                rows={rows}
+                visibleColumns={visibleColumns}
+                columnConfig={columnConfig}
+                extraColumns={extraColumns}
+                expandedIds={effectiveExpandedIds}
+                fixedHeader={fixedHeader}
+                virtual={virtual}
+                formatValue={formatValue}
+                isSearching={Boolean(search)}
+                onToggleGroup={toggleGroup}
+            />
+        </div>
+    );
+}
diff --git a/src/modules/QueryStatistics/helpers.ts b/src/modules/QueryStatistics/helpers.ts
new file mode 100644
index 0000000..04c7444
--- /dev/null
+++ b/src/modules/QueryStatistics/helpers.ts
@@ -0,0 +1,96 @@
+import type {
+    QueryStatisticsGroup,
+    QueryStatisticsItem,
+    QueryStatisticsMetric,
+} from '../../types/queryStatistics';
+
+export type QueryStatisticsRow = {item: QueryStatisticsItem; level: number};
+
+export type FilterQueryStatisticsResult = {
+    data: QueryStatisticsItem[];
+    forcedExpandedIds: Set<string>;
+};
+
+export function isQueryStatisticsGroup(item: QueryStatisticsItem): item is QueryStatisticsGroup {
+    return Array.isArray(item.children);
+}
+
+export function isQueryStatisticsMetric(item: QueryStatisticsItem): item is QueryStatisticsMetric {
+    return !isQueryStatisticsGroup(item);
+}
+
+export function getQueryStatisticsValue(
+    item: QueryStatisticsMetric,
+    column: keyof QueryStatisticsMetric['values'],
+) {
+    if (column !== 'avg' || item.values.avg !== undefined) {
+        return item.values[column];
+    }
+
+    const {count, sum} = item.values;
+    return count === undefined || count === 0 || sum === undefined ? undefined : sum / count;
+}
+
+export function collectQueryStatisticsGroupIds(data: QueryStatisticsItem[]): string[] {
+    return data.flatMap((item) =>
+        isQueryStatisticsGroup(item) && item.children.length > 0
+            ? [item.id, ...collectQueryStatisticsGroupIds(item.children)]
+            : [],
+    );
+}
+
+function addSubtreeGroupIds(item: QueryStatisticsGroup, target: Set<string>) {
+    if (item.children.length > 0) {
+        target.add(item.id);
+    }
+    item.children.forEach((child) => {
+        if (isQueryStatisticsGroup(child)) {
+            addSubtreeGroupIds(child, target);
+        }
+    });
+}
+
+function matchesSearch(item: QueryStatisticsItem, search: string) {
+    return [item.name, item.description, item.unit]
+        .filter(Boolean)
+        .some((value) => value?.toLocaleLowerCase().includes(search));
+}
+
+export function filterQueryStatistics(
+    data: QueryStatisticsItem[],
+    search: string,
+): FilterQueryStatisticsResult {
+    const normalizedSearch = search.trim().toLocaleLowerCase();
+    if (!normalizedSearch) return {data, forcedExpandedIds: new Set()};
+
+    const forcedExpandedIds = new Set<string>();
+    const filterItems = (items: QueryStatisticsItem[]): QueryStatisticsItem[] =>
+        items.flatMap<QueryStatisticsItem>((item) => {
+            if (!isQueryStatisticsGroup(item)) {
+                return matchesSearch(item, normalizedSearch) ? [item] : [];
+            }
+            if (matchesSearch(item, normalizedSearch)) {
+                addSubtreeGroupIds(item, forcedExpandedIds);
+                return [item];
+            }
+            const children = filterItems(item.children);
+            if (!children.length) return [];
+            if (item.children.length > 0) forcedExpandedIds.add(item.id);
+            return [{...item, children}];
+        });
+
+    return {data: filterItems(data), forcedExpandedIds};
+}
+
+export function flattenQueryStatistics(
+    data: QueryStatisticsItem[],
+    expandedIds: Set<string>,
+    level = 0,
+): QueryStatisticsRow[] {
+    return data.flatMap((item) => [
+        {item, level},
+        ...(isQueryStatisticsGroup(item) && expandedIds.has(item.id)
+            ? flattenQueryStatistics(item.children, expandedIds, level + 1)
+            : []),
+    ]);
+}
diff --git a/src/modules/QueryStatistics/i18n/dicts.ts b/src/modules/QueryStatistics/i18n/dicts.ts
new file mode 100644
index 0000000..4fa3a86
--- /dev/null
+++ b/src/modules/QueryStatistics/i18n/dicts.ts
@@ -0,0 +1,4 @@
+import en from './en.json';
+import ru from './ru.json';
+
+export default {en, ru};
diff --git a/src/modules/QueryStatistics/i18n/en.json b/src/modules/QueryStatistics/i18n/en.json
new file mode 100644
index 0000000..b9606ea
--- /dev/null
+++ b/src/modules/QueryStatistics/i18n/en.json
@@ -0,0 +1,16 @@
+{
+  "action_collapse-all": "Collapse all",
+  "action_collapse-group": "Collapse group",
+  "action_expand-all": "Expand all",
+  "action_expand-group": "Expand group",
+  "field_avg": "Avg",
+  "field_count": "Count",
+  "field_description": "Description",
+  "field_last": "Last",
+  "field_max": "Max",
+  "field_metric": "Metric",
+  "field_min": "Min",
+  "field_search": "Search",
+  "field_sum": "Sum",
+  "field_unit": "Unit"
+}
diff --git a/src/modules/QueryStatistics/i18n/index.ts b/src/modules/QueryStatistics/i18n/index.ts
new file mode 100644
index 0000000..72b98b4
--- /dev/null
+++ b/src/modules/QueryStatistics/i18n/index.ts
@@ -0,0 +1,4 @@
+import {addI18Keysets} from '../../../i18n';
+import dicts from './dicts';
+
+export default addI18Keysets('qp:query-statistics', dicts);
diff --git a/src/modules/QueryStatistics/i18n/ru.json b/src/modules/QueryStatistics/i18n/ru.json
new file mode 100644
index 0000000..b165690
--- /dev/null
+++ b/src/modules/QueryStatistics/i18n/ru.json
@@ -0,0 +1,16 @@
+{
+  "action_collapse-all": "Свернуть все",
+  "action_collapse-group": "Свернуть группу",
+  "action_expand-all": "Развернуть все",
+  "action_expand-group": "Развернуть группу",
+  "field_avg": "Среднее",
+  "field_count": "Количество",
+  "field_description": "Описание",
+  "field_last": "Последнее",
+  "field_max": "Максимум",
+  "field_metric": "Метрика",
+  "field_min": "Минимум",
+  "field_search": "Поиск",
+  "field_sum": "Сумма",
+  "field_unit": "Единица измерения"
+}
diff --git a/src/modules/QueryStatistics/index.ts b/src/modules/QueryStatistics/index.ts
new file mode 100644
index 0000000..4336712
--- /dev/null
+++ b/src/modules/QueryStatistics/index.ts
@@ -0,0 +1,13 @@
+export {QueryStatistics} from './QueryStatistics';
+export type {
+    QueryStatisticsColumn,
+    QueryStatisticsColumnConfig,
+    QueryStatisticsExtraColumn,
+    QueryStatisticsExtraColumnContext,
+    QueryStatisticsFormatValueContext,
+    QueryStatisticsGroup,
+    QueryStatisticsItem,
+    QueryStatisticsMetric,
+    QueryStatisticsProps,
+    QueryStatisticsValues,
+} from '../../types/queryStatistics';
diff --git a/src/modules/QueryStatistics/internal/MetricCell.scss b/src/modules/QueryStatistics/internal/MetricCell.scss
new file mode 100644
index 0000000..d28f388
--- /dev/null
+++ b/src/modules/QueryStatistics/internal/MetricCell.scss
@@ -0,0 +1,12 @@
+.qp-query-statistics-metric-cell {
+    &__indent { display: inline-flex; flex-shrink: 0; }
+    &__indent-step { width: var(--g-spacing-10); flex-shrink: 0; }
+    &__row-button,
+    &__row-icon,
+    &__info-icon { flex-shrink: 0; }
+    &__name { min-width: 0; white-space: nowrap; }
+    &__info-icon { margin-inline-start: var(--g-spacing-1); color: var(--g-color-text-secondary); vertical-align: text-bottom; }
+    &__tooltip { display: grid; gap: var(--g-spacing-2); max-width: 24rem; }
+    &__tooltip-row { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--g-spacing-2); }
+    &__tooltip-label { color: var(--g-color-text-secondary); }
+}
diff --git a/src/modules/QueryStatistics/internal/MetricCell.tsx b/src/modules/QueryStatistics/internal/MetricCell.tsx
new file mode 100644
index 0000000..b0eecfe
--- /dev/null
+++ b/src/modules/QueryStatistics/internal/MetricCell.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import {
+    ChartLine,
+    ChevronDown,
+    ChevronRight,
+    CircleQuestion,
+    FolderArrowRight,
+} from '@gravity-ui/icons';
+import {Button, Flex, Icon, Tooltip} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+
+import type {QueryStatisticsItem} from '../../../types/queryStatistics';
+import {type QueryStatisticsRow, isQueryStatisticsGroup} from '../helpers';
+import i18n from '../i18n';
+
+import './MetricCell.scss';
+
+const block = cn('qp-query-statistics-metric-cell');
+
+function MetricInfo({item}: {item: QueryStatisticsItem}) {
+    const hasInfo = Boolean(item.description || item.unit);
+    const content = (
+        <span className={block('name')} tabIndex={hasInfo ? 0 : undefined}>
+            {item.name}
+            {hasInfo && <Icon data={CircleQuestion} size={14} className={block('info-icon')} />}
+        </span>
+    );
+
+    if (!hasInfo) return content;
+
+    return <Tooltip content={<MetricTooltip item={item} />}>{content}</Tooltip>;
+}
+
+function MetricTooltip({item}: {item: QueryStatisticsItem}) {
+    return (
+        <span className={block('tooltip')}>
+            {item.description && (
+                <span className={block('tooltip-row')}>
+                    <span className={block('tooltip-label')}>{i18n('field_description')}</span>
+                    <span>{item.description}</span>
+                </span>
+            )}
+            {item.unit && (
+                <span className={block('tooltip-row')}>
+                    <span className={block('tooltip-label')}>{i18n('field_unit')}</span>
+                    <span>{item.unit}</span>
+                </span>
+            )}
+        </span>
+    );
+}
+
+function Indent({level}: {level: number}) {
+    if (!level) return null;
+    return (
+        <span className={block('indent')} aria-hidden="true">
+            {Array.from({length: level}, (_, index) => (
+                <span className={block('indent-step')} key={index} />
+            ))}
+        </span>
+    );
+}
+
+export type MetricCellProps = {
+    row: QueryStatisticsRow;
+    expanded: boolean;
+    onToggle: (id: string) => void;
+};
+
+export function MetricCell({row, expanded, onToggle}: MetricCellProps) {
+    const {item, level} = row;
+    const isGroup = isQueryStatisticsGroup(item);
+
+    return (
+        <Flex alignItems="center" gap={2} className={block()}>
+            <Indent level={level} />
+            {isGroup ? (
+                <React.Fragment>
+                    <Button
+                        view="flat"
+                        size="xs"
+                        aria-label={
+                            expanded ? i18n('action_collapse-group') : i18n('action_expand-group')
+                        }
+                        aria-expanded={expanded}
+                        onClick={() => onToggle(item.id)}
+                        className={block('row-button')}
+                    >
+                        <Icon data={expanded ? ChevronDown : ChevronRight} size={16} />
+                    </Button>
+                    <Icon data={FolderArrowRight} size={16} className={block('row-icon')} />
+                </React.Fragment>
+            ) : (
+                <Icon data={ChartLine} size={16} className={block('row-icon')} />
+            )}
+            <MetricInfo item={item} />
+        </Flex>
+    );
+}
diff --git a/src/modules/QueryStatistics/internal/QueryStatisticsTable.scss b/src/modules/QueryStatistics/internal/QueryStatisticsTable.scss
new file mode 100644
index 0000000..75cda3c
--- /dev/null
+++ b/src/modules/QueryStatistics/internal/QueryStatisticsTable.scss
@@ -0,0 +1,8 @@
+.qp-query-statistics-table { max-width: 100%; overflow-x: auto;
+    &_fixed { overflow: visible; }
+    .qp-data-table { min-width: 55rem; }
+    &__metric-column,
+    &__value-column { border: 0; border-block-end: 1px solid var(--g-color-line-generic); }
+    &__metric-column { min-width: 19rem; }
+    &__value-column { min-width: 8rem; }
+}
diff --git a/src/modules/QueryStatistics/internal/QueryStatisticsTable.tsx b/src/modules/QueryStatistics/internal/QueryStatisticsTable.tsx
new file mode 100644
index 0000000..8e4a2c1
--- /dev/null
+++ b/src/modules/QueryStatistics/internal/QueryStatisticsTable.tsx
@@ -0,0 +1,135 @@
+import React, {useMemo} from 'react';
+import BaseDataTable, {type Column} from '@gravity-ui/react-data-table';
+import {DataTable} from '../../../components';
+import type {
+    QueryStatisticsColumn,
+    QueryStatisticsExtraColumn,
+    QueryStatisticsFormatValueContext,
+} from '../../../types/queryStatistics';
+import {
+    type QueryStatisticsRow,
+    getQueryStatisticsValue,
+    isQueryStatisticsGroup,
+    isQueryStatisticsMetric,
+} from '../helpers';
+import i18n from '../i18n';
+import {MetricCell} from './MetricCell';
+
+import './QueryStatisticsTable.scss';
+
+const NO_VALUE = '—';
+const block = 'qp-query-statistics-table';
+const COLUMN_TITLES: Record<QueryStatisticsColumn, () => string> = {
+    min: () => i18n('field_min'),
+    max: () => i18n('field_max'),
+    avg: () => i18n('field_avg'),
+    sum: () => i18n('field_sum'),
+    count: () => i18n('field_count'),
+    last: () => i18n('field_last'),
+};
+
+export type QueryStatisticsTableProps = {
+    rows: QueryStatisticsRow[];
+    visibleColumns: QueryStatisticsColumn[];
+    columnConfig?: Partial<
+        Record<QueryStatisticsColumn, {title?: React.ReactNode; width?: string}>
+    >;
+    extraColumns?: QueryStatisticsExtraColumn[];
+    expandedIds: Set<string>;
+    fixedHeader: boolean;
+    virtual: boolean;
+    formatValue?: (
+        value: number | undefined,
+        context: QueryStatisticsFormatValueContext,
+    ) => React.ReactNode;
+    isSearching: boolean;
+    onToggleGroup: (id: string) => void;
+};
+
+export function QueryStatisticsTable({
+    rows,
+    visibleColumns,
+    columnConfig,
+    extraColumns,
+    expandedIds,
+    fixedHeader,
+    virtual,
+    formatValue,
+    isSearching,
+    onToggleGroup,
+}: QueryStatisticsTableProps) {
+    const numberFormatter = useMemo(
+        () => new Intl.NumberFormat(undefined, {maximumFractionDigits: 6}),
+        [],
+    );
+    const columns = useMemo<Array<Column<QueryStatisticsRow>>>(() => {
+        const metricColumn: Column<QueryStatisticsRow> = {
+            name: 'metric',
+            header: i18n('field_metric'),
+            className: `${block}__metric-column`,
+            width: '40%',
+            sortable: false,
+            render: ({row}) => (
+                <MetricCell
+                    row={row}
+                    expanded={isQueryStatisticsGroup(row.item) && expandedIds.has(row.item.id)}
+                    onToggle={onToggleGroup}
+                />
+            ),
+        };
+        const valueColumns = visibleColumns.map<Column<QueryStatisticsRow>>((column) => ({
+            name: column,
+            header: columnConfig?.[column]?.title ?? COLUMN_TITLES[column](),
+            className: `${block}__value-column`,
+            width: columnConfig?.[column]?.width ?? '12%',
+            align: BaseDataTable.RIGHT,
+            sortable: false,
+            render: ({row}) => {
+                if (!isQueryStatisticsMetric(row.item)) return NO_VALUE;
+                const value = getQueryStatisticsValue(row.item, column);
+                if (formatValue) return formatValue(value, {column, item: row.item});
+                return value === undefined || !Number.isFinite(value)
+                    ? NO_VALUE
+                    : numberFormatter.format(value);
+            },
+        }));
+        const customColumns = (extraColumns ?? []).map<Column<QueryStatisticsRow>>((column) => ({
+            name: column.id,
+            header: column.title,
+            width: column.width ?? '12%',
+            className: `${block}__value-column`,
+            sortable: false,
+            render: ({row}) => column.render({item: row.item, level: row.level}),
+        }));
+        return [metricColumn, ...valueColumns, ...customColumns];
+    }, [
+        columnConfig,
+        expandedIds,
+        extraColumns,
+        formatValue,
+        numberFormatter,
+        onToggleGroup,
+        visibleColumns,
+    ]);
+
+    return (
+        <div className={block + (fixedHeader ? ` ${block}_fixed` : '')}>
+            <DataTable<QueryStatisticsRow>
+                columns={columns}
+                data={rows}
+                loaded
+                emptyVariant={isSearching ? 'nothing-found' : 'no-data'}
+                rowKey={(row) => row.item.id}
+                settings={{
+                    displayIndices: false,
+                    sortable: false,
+                    stripedRows: false,
+                    dynamicRender: virtual,
+                    dynamicRenderType: 'uniform',
+                    stickyHead: fixedHeader ? BaseDataTable.MOVING : undefined,
+                    syncHeadOnResize: fixedHeader,
+                }}
+            />
+        </div>
+    );
+}
diff --git a/src/modules/QueryStatistics/internal/QueryStatisticsToolbar.scss b/src/modules/QueryStatistics/internal/QueryStatisticsToolbar.scss
new file mode 100644
index 0000000..ea822f1
--- /dev/null
+++ b/src/modules/QueryStatistics/internal/QueryStatisticsToolbar.scss
@@ -0,0 +1 @@
+.qp-query-statistics-toolbar { margin-block-end: var(--g-spacing-4); max-width: 34rem; }
diff --git a/src/modules/QueryStatistics/internal/QueryStatisticsToolbar.tsx b/src/modules/QueryStatistics/internal/QueryStatisticsToolbar.tsx
new file mode 100644
index 0000000..2f9c8d1
--- /dev/null
+++ b/src/modules/QueryStatistics/internal/QueryStatisticsToolbar.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import {ChevronsDown, ChevronsUp} from '@gravity-ui/icons';
+import {Button, Icon} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+
+import {SearchWithButtons} from '../../../components';
+import i18n from '../i18n';
+
+import './QueryStatisticsToolbar.scss';
+
+const block = cn('qp-query-statistics-toolbar');
+
+export type QueryStatisticsToolbarProps = {
+    search: string;
+    hasGroups: boolean;
+    onSearchUpdate: (value: string) => void;
+    onExpandAll: () => void;
+    onCollapseAll: () => void;
+};
+
+export function QueryStatisticsToolbar({
+    search,
+    hasGroups,
+    onSearchUpdate,
+    onExpandAll,
+    onCollapseAll,
+}: QueryStatisticsToolbarProps) {
+    const buttons = [
+        <Button
+            key="expand"
+            size="m"
+            aria-label={i18n('action_expand-all')}
+            title={i18n('action_expand-all')}
+            disabled={!hasGroups}
+            onClick={onExpandAll}
+        >
+            <Icon data={ChevronsDown} size={16} />
+        </Button>,
+        <Button
+            key="collapse"
+            size="m"
+            aria-label={i18n('action_collapse-all')}
+            title={i18n('action_collapse-all')}
+            disabled={!hasGroups}
+            onClick={onCollapseAll}
+        >
+            <Icon data={ChevronsUp} size={16} />
+        </Button>,
+    ];
+
+    return (
+        <SearchWithButtons
+            value={search}
+            placeholder={i18n('field_search')}
+            hasClear
+            onUpdate={onSearchUpdate}
+            endButtons={buttons}
+            className={block()}
+        />
+    );
+}
diff --git a/src/modules/QueryStatistics/story/QueryStatistics.stories.tsx b/src/modules/QueryStatistics/story/QueryStatistics.stories.tsx
new file mode 100644
index 0000000..c9ceb86
--- /dev/null
+++ b/src/modules/QueryStatistics/story/QueryStatistics.stories.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+
+import type {QueryStatisticsItem} from '../../../types/queryStatistics';
+import {QueryStatistics} from '../QueryStatistics';
+
+const data: QueryStatisticsItem[] = [
+    {
+        id: 'input',
+        name: 'Input',
+        children: [
+            {
+                id: 'input.rows',
+                name: 'Rows',
+                description: 'Number of rows read from the input',
+                values: {min: 0, max: 1600, sum: 4200, count: 4, last: 1400},
+            },
+            {
+                id: 'input.weight',
+                name: 'Data weight',
+                unit: 'bytes',
+                values: {min: 1024, max: 1048576, avg: 120000.25, sum: 2097152, count: 4},
+            },
+        ],
+    },
+];
+
+const largeData: QueryStatisticsItem[] = Array.from({length: 12}, (_group, groupIndex) => ({
+    id: `group-${groupIndex}`,
+    name: `Group ${groupIndex + 1} with a deliberately long name for horizontal scrolling`,
+    children: Array.from({length: 25}, (_metric, metricIndex) => ({
+        id: `group-${groupIndex}.metric-${metricIndex}`,
+        name: `Metric ${metricIndex + 1}`,
+        values: {
+            min: metricIndex,
+            max: metricIndex * 10,
+            sum: metricIndex * 100,
+            count: metricIndex + 1,
+            last: metricIndex * 5,
+        },
+    })),
+}));
+
+const meta: Meta<typeof QueryStatistics> = {
+    title: 'Modules/QueryStatistics',
+    component: QueryStatistics,
+    tags: ['autodocs'],
+    args: {data},
+};
+
+export default meta;
+type Story = StoryObj<typeof QueryStatistics>;
+
+export const Default: Story = {};
+
+export const ConfiguredColumns: Story = {
+    args: {
+        visibleColumns: ['last', 'avg', 'count'],
+        columnConfig: {last: {title: 'Latest value', width: '20%'}},
+        extraColumns: [{id: 'unit', title: 'Unit', render: ({item}) => item.unit ?? '—'}],
+    },
+};
+
+export const VirtualAndFixed: Story = {
+    args: {data: largeData, virtual: true, fixedHeader: true},
+    render: (args) => (
+        <div style={{height: 360, maxWidth: 1100, overflow: 'auto'}}>
+            <QueryStatistics {...args} />
+        </div>
+    ),
+};
diff --git a/src/modules/index.ts b/src/modules/index.ts
index 30dbff1..f22ef7c 100644
--- a/src/modules/index.ts
+++ b/src/modules/index.ts
@@ -28,6 +28,19 @@ export {NavigationDetail} from './NavigationDetail';
 export type {NavigationDetailProps} from './NavigationDetail';
 export {NavigationSchema, buildSchemaColumns, filterSchema} from './NavigationSchema';
 export type {NavigationSchemaProps, NavigationSchemaViewConfig} from './NavigationSchema';
+export {QueryStatistics} from './QueryStatistics';
+export type {
+    QueryStatisticsColumn,
+    QueryStatisticsColumnConfig,
+    QueryStatisticsExtraColumn,
+    QueryStatisticsExtraColumnContext,
+    QueryStatisticsFormatValueContext,
+    QueryStatisticsGroup,
+    QueryStatisticsItem,
+    QueryStatisticsMetric,
+    QueryStatisticsProps,
+    QueryStatisticsValues,
+} from './QueryStatistics';
 export {NavigationPreview, buildPreviewColumns, filterPreviewRows} from './NavigationPreview';
 export type {NavigationPreviewProps, NavigationPreviewViewConfig} from './NavigationPreview';
 export {NavigationMeta, buildMetaGroups} from './NavigationMeta';
diff --git a/src/types/queryStatistics.ts b/src/types/queryStatistics.ts
new file mode 100644
index 0000000..df1974b
--- /dev/null
+++ b/src/types/queryStatistics.ts
@@ -0,0 +1,67 @@
+import type {ReactNode} from 'react';
+
+export type QueryStatisticsColumn = 'min' | 'max' | 'avg' | 'sum' | 'count' | 'last';
+
+export type QueryStatisticsValues = Partial<Record<QueryStatisticsColumn, number>>;
+
+type QueryStatisticsItemBase = {
+    id: string;
+    name: string;
+    description?: string;
+    unit?: string;
+};
+
+export type QueryStatisticsMetric = QueryStatisticsItemBase & {
+    values: QueryStatisticsValues;
+    children?: never;
+};
+
+export type QueryStatisticsGroup = QueryStatisticsItemBase & {
+    children: QueryStatisticsItem[];
+    values?: never;
+};
+
+export type QueryStatisticsItem = QueryStatisticsMetric | QueryStatisticsGroup;
+
+export type QueryStatisticsFormatValueContext = {
+    column: QueryStatisticsColumn;
+    item: QueryStatisticsMetric;
+};
+
+export type QueryStatisticsColumnConfig = {
+    title?: ReactNode;
+    width?: string;
+};
+
+export type QueryStatisticsExtraColumnContext = {
+    item: QueryStatisticsItem;
+    level: number;
+};
+
+export type QueryStatisticsExtraColumn = {
+    id: string;
+    title: ReactNode;
+    width?: string;
+    render: (context: QueryStatisticsExtraColumnContext) => ReactNode;
+};
+
+export type QueryStatisticsProps = {
+    data: QueryStatisticsItem[];
+    visibleColumns?: QueryStatisticsColumn[];
+    columnConfig?: Partial<Record<QueryStatisticsColumn, QueryStatisticsColumnConfig>>;
+    extraColumns?: QueryStatisticsExtraColumn[];
+    className?: string;
+    virtual?: boolean;
+    fixedHeader?: boolean;
+    formatValue?: (
+        value: number | undefined,
+        context: QueryStatisticsFormatValueContext,
+    ) => ReactNode;
+    search?: string;
+    defaultSearch?: string;
+    onSearchUpdate?: (value: string) => void;
+    expandedIds?: string[];
+    defaultExpandedIds?: string[];
+    onExpandedIdsChange?: (ids: string[]) => void;
+    searchDebounceMs?: number;
+};
diff --git a/src/widgets/QueriesNavigation/QueriesNavigation.stories.tsx b/src/widgets/QueriesNavigation/QueriesNavigation.stories.tsx
index a8c7fc4..0ab1501 100644
--- a/src/widgets/QueriesNavigation/QueriesNavigation.stories.tsx
+++ b/src/widgets/QueriesNavigation/QueriesNavigation.stories.tsx
@@ -53,64 +53,64 @@ const defaultActions: NavigationHeaderAction[] = [
 
 const CLUSTERS: NavigationCluster[] = [
     {
-        id: 'arnold',
-        title: 'Arnold',
+        id: 'northstar',
+        title: 'Northstar',
         color: 'white',
         backgroundColor: 'rgba(218, 68, 83, 1)',
         description: 'Production',
     },
     {
-        id: 'freud',
-        title: 'Freud',
+        id: 'cedar',
+        title: 'Cedar',
         color: 'white',
         backgroundColor: 'rgba(127, 130, 133, 1)',
         description: 'Production',
     },
     {
-        id: 'hahn',
-        title: 'Hahn',
+        id: 'sequoia',
+        title: 'Sequoia',
         color: 'white',
         backgroundColor: 'rgba(215, 112, 173, 1)',
         description: 'Production',
     },
     {
-        id: 'yp-sas-test',
-        title: 'YP-Sas-Test',
+        id: 'pioneer-test',
+        title: 'Pioneer-Test',
         color: 'white',
         backgroundColor: 'rgba(150, 122, 220, 1)',
         description: 'Testing',
     },
     {
-        id: 'zeno',
-        title: 'Zeno',
+        id: 'orbit',
+        title: 'Orbit',
         color: 'white',
         backgroundColor: 'rgba(233, 87, 63, 1)',
         description: 'Production',
     },
     {
-        id: 'ada',
-        title: 'Ada',
+        id: 'lighthouse',
+        title: 'Lighthouse',
         color: 'white',
         backgroundColor: 'rgba(67, 68, 69, 1)',
         description: 'Production',
     },
     {
-        id: 'arnold-gnd',
-        title: 'Arnold-GND',
+        id: 'northstar-gnd',
+        title: 'Northstar-GND',
         color: 'white',
         backgroundColor: 'rgba(140, 193, 82, 1)',
         description: 'tesdting',
     },
     {
-        id: 'deimos',
-        title: 'Deimos',
+        id: 'harbor',
+        title: 'Harbor',
         color: 'white',
         backgroundColor: 'rgba(55, 188, 155, 1)',
         description: 'Production',
     },
     {
-        id: 'freud-gnd',
-        title: 'Freud-GND',
+        id: 'cedar-gnd',
+        title: 'Cedar-GND',
         color: 'white',
         backgroundColor: 'rgba(140, 193, 82, 1)',
         description: 'Prestable',
@@ -129,18 +129,27 @@ const ITEM_NAMES: Array<Pick<NavigationItem, 'title' | 'kind' | 'hasChildren' |
 const getPathDepth = (path: string | undefined): number =>
     (path ?? '').split('/').filter(Boolean).length;
 
-const getItemsForPath = (path: string | undefined): NavigationItem[] => {
+const getItemsForPath = (
+    path: string | undefined,
+    sort: NavigationSortOrder = 'asc',
+): NavigationItem[] => {
     if (getPathDepth(path) > 1) {
         return [];
     }
 
-    return ITEM_NAMES.map(({title, kind, hasChildren, disabled}) => ({
-        path: `${path ?? ''}/${title}`,
-        title,
-        kind,
-        hasChildren,
-        disabled,
-    }));
+    return [...ITEM_NAMES]
+        .sort(({title: leftTitle}, {title: rightTitle}) =>
+            sort === 'asc'
+                ? leftTitle.localeCompare(rightTitle)
+                : rightTitle.localeCompare(leftTitle),
+        )
+        .map(({title, kind, hasChildren, disabled}) => ({
+            path: `${path ?? ''}/${title}`,
+            title,
+            kind,
+            hasChildren,
+            disabled,
+        }));
 };
 
 export default meta;
@@ -190,7 +199,7 @@ const useLocationState = (initial: NavigationLocation) => {
 const useNavigationStoryState = (initial: NavigationLocation) => {
     const {location, onUpdate} = useLocationState(initial);
     const [sort, setSort] = useState<NavigationSortOrder>('asc');
-    const items = getItemsForPath(location.path);
+    const items = getItemsForPath(location.path, sort);
 
     return {location, onUpdate, sort, setSort, items};
 };
@@ -257,7 +266,7 @@ const LoadingStory = () => {
 };
 
 const EmptyStory = () => {
-    const {location, onUpdate} = useLocationState({cluster: 'arnold', path: '/home/empty'});
+    const {location, onUpdate} = useLocationState({cluster: 'northstar', path: '/home/empty'});
 
     return (
         <div style={{width: 300, height: 500}}>
@@ -272,7 +281,7 @@ const EmptyStory = () => {
 };
 
 const EmptySearchStory = () => {
-    const {location, onUpdate} = useLocationState({cluster: 'arnold', path: '/home'});
+    const {location, onUpdate} = useLocationState({cluster: 'northstar', path: '/home'});
     const [search, setSearch] = useState('no-such-item');
 
     return (
@@ -312,8 +321,8 @@ const CUSTOM_CLUSTERS: CustomCluster[] = CLUSTERS.map((cluster) => ({
     env: cluster.description ?? 'Unknown',
 }));
 
-const getCustomItemsForPath = (path: string | undefined): CustomItem[] =>
-    getItemsForPath(path).map((item, index) => ({
+const getCustomItemsForPath = (path: string | undefined, sort: NavigationSortOrder): CustomItem[] =>
+    getItemsForPath(path, sort).map((item, index) => ({
         ...item,
         owner: index % 2 === 0 ? 'robot' : 'user',
     }));
@@ -329,7 +338,7 @@ const CustomRowsStory = () => {
                 header={{actions: defaultActions, onLoadSuggestions: mockLoadPathSuggestions}}
                 onUpdate={onUpdate}
                 clusters={CUSTOM_CLUSTERS}
-                items={getCustomItemsForPath(location.path)}
+                items={getCustomItemsForPath(location.path, sort)}
                 sort={{value: sort, onUpdate: setSort}}
                 renderClusterItem={({cluster}) => (
                     <Flex alignItems="center" gap={2} style={{width: '100%', padding: '0 8px'}}>
@@ -359,7 +368,7 @@ const CustomRowsStory = () => {
 };
 
 const CustomDetailResolverStory = () => {
-    const {location, onUpdate} = useLocationState({cluster: 'arnold', path: '/home'});
+    const {location, onUpdate} = useLocationState({cluster: 'northstar', path: '/home'});
     const [openedItem, setOpenedItem] = useState<NavigationItem | undefined>(undefined);
 
     const resolveDetail = createNavigationDetailResolver({