diff --git a/packages/blade/src/components/Table/Table.tsx b/packages/blade/src/components/Table/Table.tsx index 9367c67ee19..150c39a170e 100644 --- a/packages/blade/src/components/Table/Table.tsx +++ b/packages/blade/src/components/Table/Table.tsx @@ -11,7 +11,11 @@ import styled from 'styled-components'; import type { TableContextType } from './TableContext'; import { TableProvider } from './TableContext'; import { ComponentIds } from './componentIds'; -import { tablePagination } from './tokens'; +import { + firstColumnStickyHeaderFooterZIndex, + refreshWrapperZIndex, + tablePagination, +} from './tokens'; import type { TableHeaderCellProps } from './TableHeader'; import { makeBorderSize, useTheme } from '~utils'; import { getComponentId, isValidAllowedChildren } from '~utils/isValidAllowedChildren'; @@ -225,14 +229,14 @@ const Table = ({ &:nth-of-type(1) { left: 0 !important; position: sticky !important; - z-index: 2 !important; + z-index: ${firstColumnStickyHeaderFooterZIndex} !important; } ${ selectionType === 'multiple' && `&:nth-of-type(2) { left: 44px !important; position: sticky !important; - z-index: 2 !important; + z-index: ${firstColumnStickyHeaderFooterZIndex} !important; } ` }` @@ -242,14 +246,14 @@ const Table = ({ &:nth-of-type(1) { left: 0 !important; position: sticky !important; - z-index: 2 !important; + z-index: ${firstColumnStickyHeaderFooterZIndex} !important; } ${ selectionType === 'multiple' && `&:nth-of-type(2) { left: 44px !important; position: sticky !important; - z-index: 2 !important; + z-index: ${firstColumnStickyHeaderFooterZIndex} !important; } ` }` @@ -498,7 +502,7 @@ const Table = ({ position="absolute" width="100%" height="100%" - zIndex="2" + zIndex={refreshWrapperZIndex} backgroundColor={theme.colors.surface.overlay.background[800]} justifyContent="center" alignItems="center" diff --git a/packages/blade/src/components/Table/tokens.ts b/packages/blade/src/components/Table/tokens.ts index 3f1a73bff95..8ad46a7f4d4 100644 --- a/packages/blade/src/components/Table/tokens.ts +++ b/packages/blade/src/components/Table/tokens.ts @@ -1,3 +1,6 @@ +const firstColumnStickyHeaderFooterZIndex = 2; +const refreshWrapperZIndex = 3; + const tableHeader = { paddingTop: 'spacing.5', paddingBottom: 'spacing.5', @@ -112,4 +115,12 @@ const tablePagination = { defaultPageSize: 10, } as const; -export { tableHeader, tableFooter, tableRow, tableToolbar, tablePagination }; +export { + tableHeader, + tableFooter, + tableRow, + tableToolbar, + tablePagination, + refreshWrapperZIndex, + firstColumnStickyHeaderFooterZIndex, +};