chore: add data attributes in TabNav & Table components (#2462)

* chore: add data attributes in TabNav & Table components

* Create stupid-apples-fry.md

* chore: update snap

* chore: update snaps

---------

Co-authored-by: tewarig <[email protected]>

Author: anuraghazra

.changeset/stupid-apples-fry.md

@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+chore(blade): add data attributes in TabNav & Table components

packages/blade/src/components/Table/TableBody.web.tsx

@@ -309,6 +309,7 @@ const _TableCell = ({ children, _hasPadding, ...rest }: TableCellProps): React.R
           // allow text to wrap, so that if the <Text> overflows it can truncate
           whiteSpace="normal"
           position="relative"
+          {...metaAttribute({ name: MetaConstants.TableCellWrapper })}
         >
           {isChildrenString ? (
             <Text size="medium" truncateAfterLines={1}>

packages/blade/src/components/Table/TableHeader.web.tsx

@@ -53,7 +53,10 @@ const SortIcon = ({
   const upArrowColor = isSorted && isSortReversed ? activeColor : defaultColor;
   const downArrowColor = isSorted && !isSortReversed ? activeColor : defaultColor;
   return (
-    <SortButton {...makeAccessible({ label: 'Toggle Sort', role: 'button' })}>
+    <SortButton
+      {...metaAttribute({ name: MetaConstants.TableSortButton })}
+      {...makeAccessible({ label: 'Toggle Sort', role: 'button' })}
+    >
       <svg width={20} height={20} fill="none">
         <path
           fill={upArrowColor}

packages/blade/src/components/Table/TablePagination.web.tsx

@@ -26,10 +26,15 @@ import { useTheme } from '~components/BladeProvider';
 import { throwBladeError } from '~utils/logger';
 import { getFocusRingStyles } from '~utils/getFocusRingStyles';
 import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';
+import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 
 const pageSizeOptions: NonNullable<TablePaginationCommonProps['defaultPageSize']>[] = [10, 25, 50];
 
-const PageSelectionButton = styled.button<{ isSelected?: boolean }>(({ theme, isSelected }) => ({
+const PageSelectionButton = styled.button.attrs(() => {
+  return {
+    ...metaAttribute({ name: MetaConstants.TablePageSelectionButton }),
+  };
+})<{ isSelected?: boolean }>(({ theme, isSelected }) => ({
   backgroundColor: isSelected
     ? getIn(theme.colors, tablePagination.pageSelectionButton.backgroundColorSelected)
     : 'transparent',