dev v3 natidere testing pagescanner

src/table/analytics-metadata/interfaces.ts

@@ -55,6 +55,9 @@ export interface GeneratedAnalyticsMetadataTableComponent {
     sortingColumnId?: string;
     sortingDescending?: string;
     variant: string;
+    columnsLabel?: string[] | LabelIdentifier[];
+    selectedItemsLabel?: string | Array<Array<string | LabelIdentifier>>;
+    selectedItems?: string[];
   };
   innerContext?: {
     position: string;

src/table/analytics-metadata/styles.scss

@@ -6,3 +6,7 @@
 .header-cell-text {
   /* used in analytics metadata */
 }
+
+.body-cell-content {
+  /* used in analytics metadata */
+}

src/table/body-cell/td-element.tsx

@@ -15,6 +15,7 @@ import { StickyColumnsModel, useStickyCellStyles } from '../sticky-columns';
 import { getTableCellRoleProps, TableRole } from '../table-role';
 import { getStickyClassNames } from '../utils';
 
+import analyticsSelectors from '../analytics-metadata/styles.css.js';
 import tableStyles from '../styles.css.js';
 import styles from './styles.css.js';
 
@@ -165,7 +166,15 @@ export const TableTdElement = React.forwardRef<HTMLTableCellElement, TableTdElem
           </div>
         )}
 
-        <div className={clsx(styles['body-cell-content'], wrapLines && styles['body-cell-wrap'])}>{children}</div>
+        <div
+          className={clsx(
+            styles['body-cell-content'],
+            analyticsSelectors['body-cell-content'],
+            wrapLines && styles['body-cell-wrap']
+          )}
+        >
+          {children}
+        </div>
       </Element>
     );
   }

src/table/header-cell/th-element.tsx

@@ -15,6 +15,7 @@ import { getTableColHeaderRoleProps, TableRole } from '../table-role';
 import { getStickyClassNames } from '../utils';
 import { SortingStatus } from './utils';
 
+import analyticsSelectors from '../analytics-metadata/styles.css.js';
 import tableStyles from '../styles.css.js';
 import styles from './styles.css.js';
 
@@ -80,6 +81,7 @@ export function TableThElement({
       className={clsx(
         styles['header-cell'],
         styles[`header-cell-variant-${variant}`],
+        analyticsSelectors['body-cell-content'],
         sticky && styles['header-cell-sticky'],
         resizable && styles['header-cell-resizable'],
         stuck && styles['header-cell-stuck'],

src/table/index.tsx

@@ -11,9 +11,13 @@
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import { GeneratedAnalyticsMetadataTableComponent } from './analytics-metadata/interfaces';
+import { useExpandableTableProps } from './expandable-rows/expandable-rows-utils';
 import { getSortingColumnId } from './header-cell/utils';
 import { TableForwardRefType, TableProps } from './interfaces';
 import InternalTable, { InternalTableAsSubstep } from './internal';
+import { getItemKey } from './utils';
+
+import analyticsSelectors from './analytics-metadata/styles.css.js';
 
 export { TableProps };
 const Table = React.forwardRef(
@@ -34,6 +38,15 @@
       (props.visibleColumns && props.visibleColumns.length < props.columnDefinitions.length) ||
       props.columnDisplay?.some(col => !col.visible);
     const hasStickyColumns = !!props.stickyColumns?.first || !!props.stickyColumns?.last;
+
+    // Process expandable rows to get allItems (including expanded children)
+    const { allItems } = useExpandableTableProps({
+      items,
+      expandableRows: props.expandableRows,
+      trackBy: props.trackBy,
+      ariaLabels: props.ariaLabels,
+    });
+
     const baseComponentProps = useBaseComponent(
       'Table',
       {
@@ -84,6 +97,41 @@
       },
     };
 
+    const columns = props.columnDefinitions.map((colDef, colIndex) => {
+      const headerPosition = colIndex + (props.selectionType ? 2 : 1);
+
+      return {
+        selector: `thead th:nth-child(${headerPosition}) .${analyticsSelectors['header-cell-text']}`,
+        root: 'self' as const,
+      };
+    });
+
+    analyticsComponentMetadata.properties.columnsLabel = columns;
+
+    if (props.trackBy && selectedItems.length > 0) {
+      analyticsComponentMetadata.properties.selectedItems = selectedItems.map(
+        (item, index) => `${getItemKey(props.trackBy, item, index)}`
+      );
+
+      const selectedItemsLabel = selectedItems.map((item, itemIndex) => {
+        const rowIndexInItems = allItems.findIndex(
+          i => getItemKey(props.trackBy, i, allItems.indexOf(i)) === getItemKey(props.trackBy, item, itemIndex)
+        );
+        const rowNumber = rowIndexInItems + 1; // CSS nth-child is 1-based
+
+        return props.columnDefinitions.map((colDef, colIndex) => {
+          const cellPosition = colIndex + (props.selectionType ? 2 : 1);
+
+          return {
+            selector: `tbody tr:nth-child(${rowNumber}) > :nth-child(${cellPosition}) .${analyticsSelectors['body-cell-content']}`,
+            root: 'self' as const,
+          };
+        });
+      });
+
+      analyticsComponentMetadata.properties.selectedItemsLabel = selectedItemsLabel;
+    }
+
     const sortingColumnId = getSortingColumnId(props.columnDefinitions, props.sortingColumn);
     if (sortingColumnId) {
       analyticsComponentMetadata.properties.sortingColumnId = sortingColumnId;
@@ -100,7 +148,7 @@
       ...props,
       ...baseComponentProps,
       ref,
       ...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata }),
     };
 
     const collectionPreferencesMetadata = {