Table: Add initial row index (#82200)

* Add initial row index prop in table

packages/grafana-ui/src/components/Table/RowsList.tsx

@@ -44,6 +44,7 @@ interface RowsListProps {
   onCellFilterAdded?: TableFilterActionCallback;
   timeRange?: TimeRange;
   footerPaginationEnabled: boolean;
+  initialRowIndex?: number;
 }
 
 export const RowsList = (props: RowsListProps) => {
@@ -66,9 +67,10 @@ export const RowsList = (props: RowsListProps) => {
     listHeight,
     listRef,
     enableSharedCrosshair = false,
+    initialRowIndex = undefined,
   } = props;
 
-  const [rowHighlightIndex, setRowHighlightIndex] = useState<number | undefined>(undefined);
+  const [rowHighlightIndex, setRowHighlightIndex] = useState<number | undefined>(initialRowIndex);
 
   const theme = useTheme2();
   const panelContext = usePanelContext();
@@ -203,6 +205,7 @@ export const RowsList = (props: RowsListProps) => {
     ({ index, style, rowHighlightIndex }: { index: number; style: CSSProperties; rowHighlightIndex?: number }) => {
       const indexForPagination = rowIndexForPagination(index);
       const row = rows[indexForPagination];
+      let additionalProps: React.HTMLAttributes<HTMLDivElement> = {};
 
       prepareRow(row);
 
@@ -210,11 +213,13 @@ export const RowsList = (props: RowsListProps) => {
 
       if (rowHighlightIndex !== undefined && row.index === rowHighlightIndex) {
         style = { ...style, backgroundColor: theme.components.table.rowHoverBackground };
+        additionalProps = {
+          'aria-selected': 'true',
+        };
       }
-
       return (
         <div
-          {...row.getRowProps({ style })}
+          {...row.getRowProps({ style, ...additionalProps })}
           className={cx(tableStyles.row, expandedRowStyle)}
           onMouseEnter={() => onRowHover(index, data)}
           onMouseLeave={onRowLeave}

packages/grafana-ui/src/components/Table/Table.test.tsx

@@ -89,6 +89,7 @@ function getTestContext(propOverrides: Partial<Props> = {}) {
     onSortByChange,
     onCellFilterAdded,
     onColumnResize,
+    initialRowIndex: undefined,
   };
 
   Object.assign(props, propOverrides);
@@ -657,4 +658,19 @@ describe('Table', () => {
       expect(subTable.style.height).toBe('108px');
     });
   });
+
+  describe('when mounted with scrolled to specific row', () => {
+    it('the row should be visible', async () => {
+      getTestContext({
+        initialRowIndex: 2,
+      });
+      expect(getTable()).toBeInTheDocument();
+
+      const rows = within(getTable()).getAllByRole('row');
+      expect(rows).toHaveLength(5);
+
+      let selected = within(getTable()).getByRole('row', { selected: true });
+      expect(selected).toBeVisible();
+    });
+  });
 });

packages/grafana-ui/src/components/Table/Table.tsx

@@ -48,6 +48,7 @@ export const Table = memo((props: Props) => {
     cellHeight = TableCellHeight.Sm,
     timeRange,
     enableSharedCrosshair = false,
+    initialRowIndex = undefined,
   } = props;
 
   const listRef = useRef<VariableSizeList>(null);
@@ -307,6 +308,7 @@ export const Table = memo((props: Props) => {
                 tableStyles={tableStyles}
                 footerPaginationEnabled={Boolean(enablePagination)}
                 enableSharedCrosshair={enableSharedCrosshair}
+                initialRowIndex={initialRowIndex}
               />
             </div>
           ) : (

packages/grafana-ui/src/components/Table/types.ts

@@ -97,6 +97,8 @@ export interface Props {
   /** @alpha Used by SparklineCell when provided */
   timeRange?: TimeRange;
   enableSharedCrosshair?: boolean;
+  // The index of the field value that the table will initialize scrolled to
+  initialRowIndex?: number;
 }
 
 /**