diff --git a/.changeset/cyan-drinks-poke.md b/.changeset/cyan-drinks-poke.md new file mode 100644 index 00000000000..621f4e77e82 --- /dev/null +++ b/.changeset/cyan-drinks-poke.md @@ -0,0 +1,5 @@ +--- +"@razorpay/blade": patch +--- + +fix(Table): table sticky column overlapping with relative cell diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 66ea177cff4..8aaa490e6ed 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -16,7 +16,7 @@ import { TableContext } from './TableContext'; import { ComponentIds } from './componentIds'; import { checkboxCellWidth, - firstColumnStickyHeaderFooterZIndex, + firstColumnStickyZIndex, refreshWrapperZIndex, tableBackgroundColor, tablePagination, @@ -169,14 +169,14 @@ const _Table = ({ &:nth-of-type(1) { left: 0 !important; position: sticky !important; - z-index: ${firstColumnStickyHeaderFooterZIndex} !important; + z-index: ${firstColumnStickyZIndex} !important; } ${ selectionType === 'multiple' && `&:nth-of-type(2) { left: ${checkboxCellWidth}px !important; position: sticky !important; - z-index: ${firstColumnStickyHeaderFooterZIndex} !important; + z-index: ${firstColumnStickyZIndex} !important; } ` }` @@ -186,14 +186,14 @@ const _Table = ({ &:nth-of-type(1) { left: 0 !important; position: sticky !important; - z-index: ${firstColumnStickyHeaderFooterZIndex} !important; + z-index: ${firstColumnStickyZIndex} !important; } ${ selectionType === 'multiple' && `&:nth-of-type(2) { left: ${checkboxCellWidth}px !important; position: sticky !important; - z-index: ${firstColumnStickyHeaderFooterZIndex} !important; + z-index: ${firstColumnStickyZIndex} !important; } ` }` @@ -203,12 +203,14 @@ const _Table = ({ &:nth-of-type(1) { left: 0 !important; position: sticky !important; + z-index: ${firstColumnStickyZIndex} !important; } ${ selectionType === 'multiple' && `&:nth-of-type(2) { left: ${checkboxCellWidth}px !important; position: sticky !important; + z-index: ${firstColumnStickyZIndex} !important; } ` }` @@ -230,6 +232,7 @@ const _Table = ({ `, HeaderCell: ` position: ${shouldHeaderBeSticky ? 'sticky' : 'relative'}; + top: ${shouldHeaderBeSticky ? '0' : undefined}; ${firstColumnStickyHeaderCellCSS} `, diff --git a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap index 553043dc63c..91b6d573528 100644 --- a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap +++ b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap @@ -386,7 +386,7 @@ exports[` should render table 1`] = ` role="rowheader" >
should render table 1`] = ` should render table 1`] = ` should render table 1`] = ` should render table 1`] = ` should render table 1`] = ` should render table with TableEditableCell and Bordered cells role="rowheader" > should render table with TableEditableCell and Bordered cells should render table with TableEditableCell and Bordered cells should render table with TableEditableCell and Bordered cells should render table with TableEditableCell and Bordered cells should render table with TableEditableCell and Bordered cells should render table with comfortable rowDensity 1`] = ` role="rowheader" > should render table with comfortable rowDensity 1`] = ` should render table with comfortable rowDensity 1`] = ` should render table with comfortable rowDensity 1`] = ` should render table with comfortable rowDensity 1`] = ` should render table with comfortable rowDensity 1`] = ` should render table with compact rowDensity 1`] = ` role="rowheader" > should render table with compact rowDensity 1`] = ` should render table with compact rowDensity 1`] = ` should render table with compact rowDensity 1`] = ` should render table with compact rowDensity 1`] = ` should render table with compact rowDensity 1`] = ` should render table with isRefreshing 1`] = ` role="rowheader" > should render table with isRefreshing 1`] = ` should render table with isRefreshing 1`] = ` should render table with isRefreshing 1`] = ` should render table with isRefreshing 1`] = ` should render table with isRefreshing 1`] = ` should render table with showStripedRows 1`] = ` role="rowheader" > should render table with showStripedRows 1`] = ` should render table with showStripedRows 1`] = ` should render table with showStripedRows 1`] = ` should render table with showStripedRows 1`] = ` should render table with showStripedRows 1`] = ` should render table with sticky header, footer & first column role="rowheader" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column role="row" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column role="row" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column role="row" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column role="row" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column role="row" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column role="row" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column role="row" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column role="row" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column role="row" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column role="row" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column