diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 22998a74a89..637a1dc5994 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -14,6 +14,7 @@ import { checkboxCellWidth, firstColumnStickyHeaderFooterZIndex, refreshWrapperZIndex, + tableBackgroundColor, tablePagination, } from './tokens'; import type { TableProps, TableNode, Identifier } from './types'; @@ -124,7 +125,6 @@ const _Table = ({ gridTemplateColumns, isLoading = false, isRefreshing = false, - backgroundColor = 'surface.background.gray.intense', ...styledProps }: TableProps): React.ReactElement => { const { theme } = useTheme(); @@ -133,6 +133,7 @@ const _Table = ({ const [totalItems, setTotalItems] = React.useState(data.nodes.length || 0); // Need to make header is sticky if first column is sticky otherwise the first header cell will not be sticky const shouldHeaderBeSticky = isHeaderSticky ?? isFirstColumnSticky; + const backgroundColor = tableBackgroundColor; const { isEntering: isRefreshSpinnerEntering, diff --git a/packages/blade/src/components/Table/tokens.ts b/packages/blade/src/components/Table/tokens.ts index fb8458173a9..aaed2dc6950 100644 --- a/packages/blade/src/components/Table/tokens.ts +++ b/packages/blade/src/components/Table/tokens.ts @@ -6,6 +6,7 @@ const refreshWrapperZIndex = 3; const checkboxCellWidth = size['44']; +const tableBackgroundColor = 'surface.background.gray.intense'; const tableHeader = { paddingTop: 'spacing.5', paddingBottom: 'spacing.5', @@ -126,6 +127,7 @@ export { tableToolbar, tablePagination, refreshWrapperZIndex, + tableBackgroundColor, firstColumnStickyHeaderFooterZIndex, checkboxCellWidth, }; diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts index 05b56cf56d9..50965363e4d 100644 --- a/packages/blade/src/components/Table/types.ts +++ b/packages/blade/src/components/Table/types.ts @@ -140,10 +140,6 @@ type TableProps = { * The default value is `repeat(${columnCount},minmax(100px, 1fr))`. **/ gridTemplateColumns?: string; - /** - * background color of the table - **/ - backgroundColor?: TableBackgroundColors; /** * The isLoading prop determines whether the table is loading or not. * The default value is `false`.