fix: old table styling

razorpay · Jan 21, 2025 · e8b7f4d · e8b7f4d
1 parent 39dc02a
commit e8b7f4d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx
@@ -725,7 +725,7 @@ const _Table = forwardRef(
             )}
             {toolbar}
             <StyledReactTable
-              role="grid"
+              role={isVirtualized ? 'grid' : 'table'}
               layout={{ fixedHeader: true, horizontalScroll: true, isDiv: true }}
               data={data}
               // @ts-expect-error ignore this, theme clashes with styled-component's theme. We're using useTheme from blade to get actual theme

diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx
@@ -260,14 +260,20 @@ export const CellWrapper = styled(BaseBox)<{
 
 const _TableCell = ({ children, _hasPadding, ...rest }: TableCellProps): React.ReactElement => {
   const isChildrenString = typeof children === 'string';
-  const { selectionType, rowDensity, showStripedRows, backgroundColor } = useTableContext();
+  const {
+    selectionType,
+    rowDensity,
+    showStripedRows,
+    backgroundColor,
+    isVirtualized,
+  } = useTableContext();
   const isSelectable = selectionType !== 'none';
 
   return (
     <StyledCell
       tabIndex={0}
       role="cell"
-      as="td"
+      as={isVirtualized ? 'td' : undefined}
       $backgroundColor={backgroundColor}
       {...metaAttribute({ name: MetaConstants.TableCell })}
       {...makeAnalyticsAttribute(rest)}
@@ -437,6 +443,7 @@ const _TableRow = <Item,>({
     setDisabledRows,
     showBorderedCells,
     setHasHoverActions,
+    isVirtualized,
   } = useTableContext();
   const isSelectable = selectionType !== 'none';
   const isMultiSelect = selectionType === 'multiple';
@@ -475,8 +482,8 @@ const _TableRow = <Item,>({
       {...makeAccessible({ selected: isSelected })}
       {...metaAttribute({ name: MetaConstants.TableRow, testID })}
       {...makeAnalyticsAttribute(rest)}
-      role="row"
-      as="tr"
+      role={isVirtualized ? 'row' : undefined}
+      as={isVirtualized ? 'tr' : undefined}
     >
       {isMultiSelect && (
         <TableCheckboxCell

diff --git a/packages/blade/src/components/Table/TableEditableCell.web.tsx b/packages/blade/src/components/Table/TableEditableCell.web.tsx
@@ -69,12 +69,12 @@ const _TableEditableCell = ({
   errorText,
   successText,
 }: TableEditableCellProps): React.ReactElement => {
-  const { rowDensity, showStripedRows, backgroundColor } = useTableContext();
+  const { rowDensity, showStripedRows, backgroundColor, isVirtualized } = useTableContext();
 
   return (
     <StyledEditableCell
       role="cell"
-      as="td"
+      as={isVirtualized ? 'td' : undefined}
       $backgroundColor={backgroundColor}
       $rowDensity={rowDensity}
       {...metaAttribute({ name: MetaConstants.TableCell })}
@@ -134,13 +134,13 @@ const _TableEditableCell = ({
 const TableEditableDropdownCell = (
   dropdownProps: TableEditableDropdownCellProps,
 ): React.ReactElement => {
-  const { rowDensity, showStripedRows, backgroundColor } = useTableContext();
+  const { rowDensity, showStripedRows, backgroundColor, isVirtualized } = useTableContext();
 
   return (
     <TableEditableCellContext.Provider value={{ isInsideTableEditableCell: true }}>
       <StyledEditableCell
         role="cell"
-        as="td"
+        as={isVirtualized ? 'td' : undefined}
         $backgroundColor={backgroundColor}
         $rowDensity={rowDensity}
         {...metaAttribute({ name: MetaConstants.TableCell })}