ydb-embedded-ui 22.0.0 → 22.2.0

package/src/components/InfoViewer/schemaInfo/utils.tsx

@@ -184,6 +184,8 @@ export function buildFulltextIndexSettingsInfo(
             filter_length_max: (v) => (typeof v === 'number' ? formatNumber(v) : v),
             use_filter_snowball: (v) =>
                 v === true ? i18n('filter_enabled') : i18n('filter_disabled'),
+            use_filter_superlemmer: (v) =>
+                v === true ? i18n('filter_enabled') : i18n('filter_disabled'),
         },
         labels: {
             tokenizer: i18n('field_tokenizer'),
@@ -198,6 +200,7 @@ export function buildFulltextIndexSettingsInfo(
             filter_length_min: i18n('field_filter_length_min'),
             filter_length_max: i18n('field_filter_length_max'),
             use_filter_snowball: i18n('field_use_filter_snowball'),
+            use_filter_superlemmer: i18n('field_use_filter_superlemmer'),
         },
     });
 
@@ -216,6 +219,7 @@ export function buildFulltextIndexSettingsInfo(
         filter_length_min,
         filter_length_max,
         use_filter_snowball,
+        use_filter_superlemmer,
     } = analyzers ?? {};
     if (tokenizer !== undefined) {
         info.push(fulltextIndexAnalyzersFormatter('tokenizer', tokenizer));
@@ -257,6 +261,11 @@ export function buildFulltextIndexSettingsInfo(
     if (use_filter_snowball !== undefined) {
         info.push(fulltextIndexAnalyzersFormatter('use_filter_snowball', use_filter_snowball));
     }
+    if (use_filter_superlemmer !== undefined) {
+        info.push(
+            fulltextIndexAnalyzersFormatter('use_filter_superlemmer', use_filter_superlemmer),
+        );
+    }
 
     return info;
 }

package/src/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -4,6 +4,7 @@ import type {NodeAddress} from '../../types/additionalProps';
 import type {TNodeInfo, TSystemStateInfo} from '../../types/api/nodes';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {checkIsStorageNode, isUnavailableNode} from '../../utils/nodes';
+import type {PreparedNodeSystemState} from '../../utils/nodes';
 import {EntityName} from '../EntityName/EntityName';
 import {StatusColor} from '../StatusColor/StatusColor';
 import {NodeEndpointsTooltipContent} from '../TooltipsContent';
@@ -21,6 +22,27 @@ interface NodeHostWrapperProps {
     statusForIcon?: 'SystemState' | 'ConnectStatus';
 }
 
+export function getNodeHostPath(node: PreparedNodeSystemState, database?: string) {
+    if (!node.Host || node.NodeId === undefined || isUnavailableNode(node)) {
+        return undefined;
+    }
+
+    const databaseInPath = checkIsStorageNode(node) ? undefined : (database ?? node.TenantName);
+
+    return getDefaultNodePath(
+        {id: node.NodeId, activeTab: node.TenantName ? 'tablets' : 'storage'},
+        {database: databaseInPath},
+    );
+}
+
+export function getNodeHostLabel(node: PreparedNodeSystemState) {
+    return (
+        [node.NodeId, node.Host]
+            .filter((value) => value !== undefined && value !== null && value !== '')
+            .join(', ') || EMPTY_DATA_PLACEHOLDER
+    );
+}
+
 export const NodeHostWrapper = ({
     node,
     database,
@@ -34,19 +56,7 @@ export const NodeHostWrapper = ({
 
     const isNodeAvailable = !isUnavailableNode(node);
 
-    // Storage nodes do not belong to any specific database.
-    // Including a database in the path would filter data on the node page by that database,
-    // but for storage nodes this would result in no data being shown.
-    // Database from node data cannot be used, because we use database ids when uiFactory.useDatabaseId
-    // https://github.com/ydb-platform/ydb-embedded-ui/issues/3006
-    const databaseInPath = checkIsStorageNode(node) ? undefined : (database ?? node.TenantName);
-
-    const nodePath = isNodeAvailable
-        ? getDefaultNodePath(
-              {id: node.NodeId, activeTab: node.TenantName ? 'tablets' : 'storage'},
-              {database: databaseInPath},
-          )
-        : undefined;
+    const nodePath = getNodeHostPath(node, database);
 
     return (
         <EntityName

package/src/components/PDiskInfo/PDiskInfo.tsx

@@ -5,6 +5,7 @@ import {valueIsDefined} from '../../utils';
 import {formatBytes} from '../../utils/bytesParsers';
 import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
 import {createPDiskDeveloperUILink, useHasDeveloperUi} from '../../utils/developerUI/developerUI';
+import {formatPDiskType} from '../../utils/disks/getPDiskType';
 import type {PreparedPDisk} from '../../utils/disks/types';
 import {getPDiskCapacityInfoItems, toInfoViewerItems} from '../DiskCapacityInfo/DiskCapacityInfo';
 import type {InfoViewerItem} from '../InfoViewer';
@@ -57,7 +58,7 @@ function getPDiskInfo<T extends PreparedPDisk>({
     const generalInfo: InfoViewerItem[] = [];
 
     if (valueIsDefined(Category)) {
-        generalInfo.push({label: pDiskInfoKeyset('type'), value: Type});
+        generalInfo.push({label: pDiskInfoKeyset('type'), value: formatPDiskType(Type)});
     }
     if (valueIsDefined(Path)) {
         generalInfo.push({label: pDiskInfoKeyset('path'), value: Path});

package/src/components/PDiskPopup/PDiskPopup.tsx

@@ -12,6 +12,7 @@ import {BRAND_BUTTON_CLASS, EMPTY_DATA_PLACEHOLDER} from '../../utils/constants'
 import {createPDiskDeveloperUILink, useHasDeveloperUi} from '../../utils/developerUI/developerUI';
 import {getStateSeverity} from '../../utils/disks/calculatePDiskSeverity';
 import {NUMERIC_SEVERITY_TO_LABEL_VIEW} from '../../utils/disks/constants';
+import {formatPDiskType} from '../../utils/disks/getPDiskType';
 import type {PreparedPDisk} from '../../utils/disks/types';
 import {useTypedSelector} from '../../utils/hooks';
 import {useDatabaseFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
@@ -41,7 +42,10 @@ export const preparePDiskData = (
     const {AvailableSize, TotalSize, NodeId, Path, Realtime, Type, Device} = data;
 
     const pdiskData: YDBDefinitionListItem[] = [
-        {name: pDiskPopupKeyset('label_type'), content: Type || pDiskPopupKeyset('value_unknown')},
+        {
+            name: pDiskPopupKeyset('label_type'),
+            content: formatPDiskType(Type) || pDiskPopupKeyset('value_unknown'),
+        },
     ];
 
     if (NodeId) {

package/src/components/PaginatedTable/KeyboardNavigation.tsx

@@ -0,0 +1,30 @@
+import type React from 'react';
+
+import {KEYBOARD_FOCUS_ACTIVE_CLASS_NAME} from '../TableKeyboardNavigation/utils';
+
+import {KeyboardRowContext, useKeyboardNavigation} from './useKeyboardNavigation';
+import type {KeyboardNavigationParams} from './useKeyboardNavigation';
+
+interface KeyboardNavigationProps extends Omit<KeyboardNavigationParams, 'tableRef'> {
+    tableRef: React.RefObject<HTMLDivElement>;
+    children: React.ReactNode;
+    className?: string;
+}
+
+export function KeyboardNavigation({children, className, ...params}: KeyboardNavigationProps) {
+    const keyboard = useKeyboardNavigation(params);
+    const tableClassName = [
+        className,
+        keyboard.focusedIndex !== undefined ? KEYBOARD_FOCUS_ACTIVE_CLASS_NAME : undefined,
+    ]
+        .filter(Boolean)
+        .join(' ');
+
+    return (
+        <div className={tableClassName} {...keyboard.tableProps}>
+            <KeyboardRowContext.Provider value={keyboard.focusedIndex}>
+                {children}
+            </KeyboardRowContext.Provider>
+        </div>
+    );
+}

package/src/components/PaginatedTable/PaginatedTable.scss

@@ -57,6 +57,16 @@
         }
     }
 
+    .ydb-keyboard-focused-row {
+        background: var(--paginated-table-hover-color);
+    }
+
+    &.ydb-keyboard-focus-active {
+        #{$block}__row:hover:not(.ydb-keyboard-focused-row) {
+            background: transparent !important;
+        }
+    }
+
     &__head {
         z-index: 2;
         @include mixins.sticky-top();

package/src/components/PaginatedTable/PaginatedTable.tsx

@@ -1,10 +1,20 @@
 import React from 'react';
 
+import isEqual from 'lodash/isEqual';
+import omit from 'lodash/omit';
+import {useStore} from 'react-redux';
+
+import type {RootState} from '../../store';
+import {tableDataApi} from '../../store/reducers/tableData';
+
+import {KeyboardNavigation} from './KeyboardNavigation';
 import {usePaginatedTableState} from './PaginatedTableContext';
 import {TableChunksRenderer} from './TableChunksRenderer';
 import {TableHead} from './TableHead';
 import type {PaginatedTableId} from './constants';
 import {DEFAULT_TABLE_ROW_HEIGHT} from './constants';
+import {getTableChunkQueryParams} from './getTableChunkQueryParams';
+import {getChunkLookupRevision, isChunkLookupPending} from './rowLookup';
 import {b} from './shared';
 import type {
     Column,
@@ -38,6 +48,9 @@ export interface PaginatedTableProps<T, F> {
     onDataFetched?: (data: PaginatedTableData<T>) => void;
     keepCache?: boolean;
     fetchOverscan?: number;
+    onKeyboardActivate?: (row: T) => void;
+    getKeyboardRowKey?: (row: T) => string | number | undefined;
+    getKeyboardRowLabel?: (row: T) => string | undefined;
 }
 
 const DEFAULT_PAGINATION_LIMIT = 20;
@@ -60,15 +73,19 @@ export const PaginatedTable = <T, F>({
     onDataFetched,
     keepCache = true,
     fetchOverscan,
+    onKeyboardActivate,
+    getKeyboardRowKey,
+    getKeyboardRowLabel,
 }: PaginatedTableProps<T, F>) => {
+    const store = useStore<RootState>();
     // Get state and setters from context
-    const {tableState, setSortParams, setTotalEntities, setFoundEntities, setIsInitialLoad} =
-        usePaginatedTableState();
+    const {tableState, noBatching, setSortParams, dispatchCounts} = usePaginatedTableState();
 
     const {sortParams, foundEntities} = tableState;
     const activeSortParams = isSortColumnAvailable(sortParams, columns) ? sortParams : undefined;
 
     const tableRef = React.useRef<HTMLDivElement>(null);
+    const activeChunkOffsetsRef = React.useRef<number[]>([]);
 
     // this prevent situation when filters are new, but active chunks is not yet recalculated (it will be done to the next rendrer, so we bring filters change on the next render too)
     const [filters, setFilters] = React.useState(rawFilters);
@@ -77,16 +94,123 @@ export const PaginatedTable = <T, F>({
         setFilters(rawFilters);
     }, [rawFilters]);
 
-    const handleDataFetched = React.useCallback(
-        (data?: PaginatedTableData<T>) => {
-            if (data) {
-                setTotalEntities(data.total);
-                setFoundEntities(data.found);
-                setIsInitialLoad(false);
-                onDataFetched?.(data);
+    const nextCountsQuery = omit(
+        getTableChunkQueryParams({
+            offset: 0,
+            limit: chunkSize,
+            fetchData,
+            filters,
+            sortParams: activeSortParams,
+            columns,
+            tableName,
+            noBatching,
+        }),
+        'offset',
+        'fetchData',
+    );
+    const [countsQuery, setCountsQuery] = React.useState(nextCountsQuery);
+
+    // Resizing columns must not replay cached chunk responses through a new callback.
+    if (!isEqual(countsQuery, nextCountsQuery)) {
+        setCountsQuery(nextCountsQuery);
+    }
+
+    const getQueryParams = (offset: number) =>
+        getTableChunkQueryParams({
+            offset,
+            limit: chunkSize,
+            fetchData,
+            filters: rawFilters,
+            sortParams: activeSortParams,
+            columns,
+            tableName,
+            noBatching,
+        });
+
+    const getRow = (index: number) => {
+        const offset = Math.floor(index / chunkSize) * chunkSize;
+        const queryParams = getQueryParams(offset);
+        const {data} = tableDataApi.endpoints.fetchTableChunk.select(queryParams)(store.getState());
+        return data?.data[index - offset] as T | undefined;
+    };
+
+    const getRowKey = (index: number) => {
+        const row = getRow(index);
+        return row === undefined ? undefined : getKeyboardRowKey?.(row);
+    };
+
+    const getRowLabel = (index: number) => {
+        const row = getRow(index);
+        return row === undefined ? undefined : getKeyboardRowLabel?.(row);
+    };
+
+    const getActiveChunkLookupStates = () => {
+        const state = store.getState();
+        return activeChunkOffsetsRef.current.map((offset) => {
+            const queryState = tableDataApi.endpoints.fetchTableChunk.select(
+                getQueryParams(offset),
+            )(state);
+            return {
+                offset,
+                status: queryState.status,
+                fulfilledTimeStamp: queryState.fulfilledTimeStamp,
+            };
+        });
+    };
+
+    const getRowLookupRevision = (revision?: string) =>
+        getChunkLookupRevision(getActiveChunkLookupStates(), revision);
+
+    const findRowIndex = (key: string | number, previousIndex: number) => {
+        if (getRowKey(previousIndex) === key) {
+            return previousIndex;
+        }
+        const state = store.getState();
+        const queryParams = getQueryParams(0);
+        const cachedArgs = tableDataApi.util.selectCachedArgsForQuery(state, 'fetchTableChunk');
+        for (const args of cachedArgs) {
+            if (
+                !isEqual(
+                    {...args, offset: 0, fetchData: undefined},
+                    {...queryParams, fetchData: undefined},
+                )
+            ) {
+                continue;
+            }
+            const {data} = tableDataApi.endpoints.fetchTableChunk.select(args)(state);
+            const index = data?.data.findIndex((row) => getKeyboardRowKey?.(row as T) === key);
+            if (index !== undefined && index >= 0) {
+                return args.offset + index;
             }
+        }
+        return undefined;
+    };
+
+    const isRowLookupPending = (revision: string | undefined) =>
+        isChunkLookupPending(getActiveChunkLookupStates(), revision);
+
+    const handleActiveChunkOffsetsChange = React.useCallback((offsets: number[]) => {
+        activeChunkOffsetsRef.current = offsets;
+    }, []);
+
+    const activateRow = (index: number) => {
+        const row = getRow(index);
+        if (row !== undefined) {
+            onKeyboardActivate?.(row);
+        }
+    };
+
+    const handleDataFetched = React.useCallback(
+        (data: PaginatedTableData<T>) => {
+            dispatchCounts({
+                type: 'dataReceived',
+                query: countsQuery,
+                total: data.total,
+                found: data.found,
+            });
+            onDataFetched?.(data);
         },
-        [onDataFetched, setFoundEntities, setIsInitialLoad, setTotalEntities],
+        [countsQuery, dispatchCounts, onDataFetched],
     );
 
     // Set will-change: transform on scroll container if not already set
@@ -100,15 +224,9 @@ export const PaginatedTable = <T, F>({
         }
     }, [scrollContainerRef.current]);
 
-    // Reset table on initialization and filters change
     React.useLayoutEffect(() => {
-        const defaultTotal = initialEntitiesCount || 0;
-        const defaultFound = initialEntitiesCount || 1;
-
-        setTotalEntities(defaultTotal);
-        setFoundEntities(defaultFound);
-        setIsInitialLoad(true);
-    }, [initialEntitiesCount, setTotalEntities, setFoundEntities, setIsInitialLoad]);
+        dispatchCounts({type: 'initialize', query: countsQuery, initialEntitiesCount});
+    }, [countsQuery, initialEntitiesCount, dispatchCounts]);
 
     const renderTable = () => (
         <table className={b('table')}>
@@ -130,6 +248,7 @@ export const PaginatedTable = <T, F>({
                     renderErrorMessage={renderErrorMessage}
                     renderEmptyDataMessage={renderEmptyDataMessage}
                     onDataFetched={handleDataFetched}
+                    onActiveChunkOffsetsChange={handleActiveChunkOffsetsChange}
                     keepCache={keepCache}
                     fetchOverscan={fetchOverscan}
                 />
@@ -138,8 +257,23 @@ export const PaginatedTable = <T, F>({
     );
 
     return (
-        <div ref={tableRef} className={b(null, containerClassName)}>
+        <KeyboardNavigation
+            tableRef={tableRef}
+            scrollContainerRef={scrollContainerRef}
+            onActivate={onKeyboardActivate ? activateRow : undefined}
+            getRowKey={getKeyboardRowKey ? getRowKey : undefined}
+            getRowLabel={getKeyboardRowLabel ? getRowLabel : undefined}
+            findRowIndex={getKeyboardRowKey ? findRowIndex : undefined}
+            getRowLookupRevision={getKeyboardRowKey ? getRowLookupRevision : undefined}
+            isRowLookupPending={getKeyboardRowKey ? isRowLookupPending : undefined}
+            subscribe={store.subscribe}
+            rowCount={foundEntities}
+            rowHeight={rowHeight}
+            filters={rawFilters}
+            sortParams={activeSortParams}
+            className={b(null, containerClassName)}
+        >
             {renderTable()}
-        </div>
+        </KeyboardNavigation>
     );
 };

package/src/components/PaginatedTable/PaginatedTableContext.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import type {TableCountsAction} from './tableCounts';
+import {tableCountsReducer} from './tableCounts';
 import type {PaginatedTableState} from './types';
 
 // Default state for the table
@@ -18,18 +20,14 @@ interface PaginatedTableStateContextType {
 
     // Granular setters
     setSortParams: (params: PaginatedTableState['sortParams']) => void;
-    setTotalEntities: (total: number) => void;
-    setFoundEntities: (found: number) => void;
-    setIsInitialLoad: (isInitial: boolean) => void;
+    dispatchCounts: React.Dispatch<TableCountsAction>;
 }
 
 // Creating the context with default values
 export const PaginatedTableStateContext = React.createContext<PaginatedTableStateContextType>({
     tableState: defaultTableState,
     setSortParams: () => undefined,
-    setTotalEntities: () => undefined,
-    setFoundEntities: () => undefined,
-    setIsInitialLoad: () => undefined,
+    dispatchCounts: () => undefined,
 });
 
 // Provider component props
@@ -45,18 +43,17 @@ export const PaginatedTableProvider = ({
     initialState = {},
     noBatching,
 }: PaginatedTableStateProviderProps) => {
-    // Use individual state variables for each field
     const [sortParams, setSortParams] = React.useState<PaginatedTableState['sortParams']>(
         initialState.sortParams ?? defaultTableState.sortParams,
     );
-    const [totalEntities, setTotalEntities] = React.useState<number>(
-        initialState.totalEntities ?? defaultTableState.totalEntities,
-    );
-    const [foundEntities, setFoundEntities] = React.useState<number>(
-        initialState.foundEntities ?? defaultTableState.foundEntities,
-    );
-    const [isInitialLoad, setIsInitialLoad] = React.useState<boolean>(
-        initialState.isInitialLoad ?? defaultTableState.isInitialLoad,
+    const [{totalEntities, foundEntities, isInitialLoad}, dispatchCounts] = React.useReducer(
+        tableCountsReducer,
+        {
+            totalEntities: initialState.totalEntities ?? defaultTableState.totalEntities,
+            foundEntities: initialState.foundEntities ?? defaultTableState.foundEntities,
+            isInitialLoad: initialState.isInitialLoad ?? defaultTableState.isInitialLoad,
+            hasLoadedData: initialState.isInitialLoad === false,
+        },
     );
 
     // Construct tableState from individual state variables
@@ -70,15 +67,13 @@ export const PaginatedTableProvider = ({
         [sortParams, totalEntities, foundEntities, isInitialLoad],
     );
 
-    // Create the context value with the constructed tableState and direct setters
+    // Create the context value with the constructed tableState and its update functions
     const contextValue = React.useMemo(
         () => ({
             tableState,
             noBatching,
             setSortParams,
-            setTotalEntities,
-            setFoundEntities,
-            setIsInitialLoad,
+            dispatchCounts,
         }),
         [tableState, noBatching],
     );

package/src/components/PaginatedTable/PaginatedTableWithLayout.tsx

@@ -16,6 +16,7 @@ export interface PaginatedTableWithLayoutProps {
     initialState?: Partial<PaginatedTableState>;
     fullHeight?: boolean;
     noBatching?: boolean;
+    inheritKeyboardNavigation?: boolean;
 }
 
 const TableWrapper = ({
@@ -88,10 +89,14 @@ export const PaginatedTableWithLayout = ({
     initialState,
     noBatching,
     fullHeight = true,
+    inheritKeyboardNavigation = false,
 }: PaginatedTableWithLayoutProps) => {
     return (
         <PaginatedTableProvider initialState={initialState} noBatching={noBatching}>
-            <TableWithControlsLayout fullHeight={fullHeight}>
+            <TableWithControlsLayout
+                fullHeight={fullHeight}
+                inheritKeyboardNavigation={inheritKeyboardNavigation}
+            >
                 <ControlsSection controls={controls} extraControls={extraControls} />
                 <ErrorSection error={error} />
                 <TableWrapper table={table} tableWrapperProps={tableWrapperProps} />

package/src/components/PaginatedTable/ResizeablePaginatedTable.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type {ColumnWidthByName} from '@gravity-ui/react-data-table';
 
 import {useTableResize} from '../../utils/hooks/useTableResize';
@@ -29,7 +31,10 @@ export function ResizeablePaginatedTable<T, F>({
     const [tableColumnsWidth, setTableColumnsWidth, isTableWidthLoading] =
         useTableResize(columnsWidthLSKey);
 
-    const updatedColumns = updateColumnsWidth(columns, tableColumnsWidth);
+    const updatedColumns = React.useMemo(
+        () => updateColumnsWidth(columns, tableColumnsWidth),
+        [columns, tableColumnsWidth],
+    );
 
     if (isTableWidthLoading) {
         return <TableSkeleton />;

package/src/components/PaginatedTable/TableChunk.tsx

@@ -9,7 +9,7 @@ import {ResponseError} from '../Errors/ResponseError';
 import {usePaginatedTableState} from './PaginatedTableContext';
 import {EmptyTableRow, LoadingTableRow, TableRow} from './TableRow';
 import type {PaginatedTableId} from './constants';
-import {shouldSendColumnIds} from './constants';
+import {getTableChunkQueryParams} from './getTableChunkQueryParams';
 import i18n from './i18n';
 import type {
     Column,
@@ -42,7 +42,7 @@ interface TableChunkProps<T, F> {
     onRowClick?: OnRowClick<T>;
     renderErrorMessage?: RenderErrorMessage;
     renderEmptyDataMessage?: RenderEmptyDataMessage;
-    onDataFetched: (data?: PaginatedTableData<T>) => void;
+    onDataFetched: (data: PaginatedTableData<T>) => void;
 
     keepCache?: boolean;
 }
@@ -71,25 +71,16 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {noBatching} = usePaginatedTableState();
 
-    const hasColumnsIdsInRequest = shouldSendColumnIds(tableName);
-
-    const columnsIds = React.useMemo(
-        () =>
-            // sort ids to prevent refetch if only order was changed
-            hasColumnsIdsInRequest ? columns.map((column) => column.name).toSorted() : [],
-        [columns, hasColumnsIdsInRequest],
-    );
-
-    const queryParams = {
+    const queryParams = getTableChunkQueryParams({
         offset: id * chunkSize,
         limit: chunkSize,
-        fetchData: fetchData as FetchData<T, unknown>,
+        fetchData,
         filters,
         sortParams,
-        columnsIds,
+        columns,
         tableName,
         noBatching,
-    };
+    });
 
     tableDataApi.useFetchTableChunkQuery(queryParams, {
         skip: isTimeoutActive || !shouldFetch,
@@ -113,8 +104,9 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
         };
     }, [shouldFetch, isTimeoutActive]);
 
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
         if (currentData) {
+            // Consumers derive row dimensions from the response before loaded rows are painted.
             onDataFetched({
                 ...currentData,
                 data: currentData.data as T[],
@@ -159,6 +151,7 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
             <TableRow
                 key={index}
                 row={rowData as T}
+                rowIndex={id * chunkSize + index}
                 columns={columns}
                 height={rowHeight}
                 getRowClassName={getRowClassName}

package/src/components/PaginatedTable/TableChunksRenderer.tsx

@@ -30,7 +30,8 @@ export interface TableChunksRendererProps<T, F> {
     onRowClick?: OnRowClick<T>;
     renderErrorMessage?: RenderErrorMessage;
     renderEmptyDataMessage?: RenderEmptyDataMessage;
-    onDataFetched: (data?: PaginatedTableData<T>) => void;
+    onDataFetched: (data: PaginatedTableData<T>) => void;
+    onActiveChunkOffsetsChange: (offsets: number[]) => void;
     keepCache: boolean;
     fetchOverscan?: number;
 }
@@ -51,6 +52,7 @@ export const TableChunksRenderer = <T, F>({
     renderErrorMessage,
     renderEmptyDataMessage,
     onDataFetched,
+    onActiveChunkOffsetsChange,
     keepCache,
     fetchOverscan,
 }: TableChunksRendererProps<T, F>) => {
@@ -63,6 +65,16 @@ export const TableChunksRenderer = <T, F>({
         fetchOverscan,
     });
 
+    const activeChunkOffsets = React.useMemo(
+        () => chunkStates.flatMap((state, index) => (state.shouldFetch ? [index * chunkSize] : [])),
+        [chunkSize, chunkStates],
+    );
+
+    React.useLayoutEffect(() => {
+        onActiveChunkOffsetsChange(activeChunkOffsets);
+        return () => onActiveChunkOffsetsChange([]);
+    }, [activeChunkOffsets, onActiveChunkOffsetsChange]);
+
     const lastChunkSize = React.useMemo(() => {
         // If foundEntities = 0, there will only first chunk
         // Display it with 1 row, to display empty data message