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/tokens.ts b/packages/blade/src/components/Table/tokens.ts index 3c873397388..68730a4dc12 100644 --- a/packages/blade/src/components/Table/tokens.ts +++ b/packages/blade/src/components/Table/tokens.ts @@ -1,7 +1,7 @@ import { AlertCircleIcon, CheckIcon } from '~components/Icons'; import { size } from '~tokens/global'; -const firstColumnStickyHeaderFooterZIndex = 2; +const firstColumnStickyZIndex = 2; const refreshWrapperZIndex = 3; @@ -145,7 +145,7 @@ export { tablePagination, refreshWrapperZIndex, tableBackgroundColor, - firstColumnStickyHeaderFooterZIndex, + firstColumnStickyZIndex, checkboxCellWidth, tableEditableCellRowDensityToInputSizeMap, validationStateToInputTrailingIconMap,