diff --git a/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
index 7071e54620f369..05d14d6164b626 100644
--- a/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
@@ -102,151 +102,160 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 
 	return (
 		<Menu
-			align="start"
-			trigger={
-				<Button
-					size="compact"
-					className="dataviews-view-table-header-button"
-					ref={ ref }
-					variant="tertiary"
-				>
-					{ header }
-					{ view.sort && isSorted && (
-						<span aria-hidden="true">
-							{ sortArrows[ view.sort.direction ] }
-						</span>
-					) }
-				</Button>
-			}
-			style={ { minWidth: '240px' } }
+		// align="start" TODO: align prop doesn't exist on Menu — is it ok to just remove
 		>
-			<WithMenuSeparators>
-				{ isSortable && (
-					<Menu.Group>
-						{ SORTING_DIRECTIONS.map(
-							( direction: SortDirection ) => {
-								const isChecked =
-									view.sort &&
-									isSorted &&
-									view.sort.direction === direction;
+			<Menu.TriggerButton
+				render={
+					<Button
+						size="compact"
+						className="dataviews-view-table-header-button"
+						ref={ ref }
+						variant="tertiary"
+					/>
+				}
+			>
+				{ header }
+				{ view.sort && isSorted && (
+					<span aria-hidden="true">
+						{ sortArrows[ view.sort.direction ] }
+					</span>
+				) }
+			</Menu.TriggerButton>
+			<Menu.Popover style={ { minWidth: '240px' } }>
+				<WithMenuSeparators>
+					{ isSortable && (
+						<Menu.Group>
+							{ SORTING_DIRECTIONS.map(
+								( direction: SortDirection ) => {
+									const isChecked =
+										view.sort &&
+										isSorted &&
+										view.sort.direction === direction;
 
-								const value = `${ fieldId }-${ direction }`;
+									const value = `${ fieldId }-${ direction }`;
 
-								return (
-									<Menu.RadioItem
-										key={ value }
-										// All sorting radio items share the same name, so that
-										// selecting a sorting option automatically deselects the
-										// previously selected one, even if it is displayed in
-										// another submenu. The field and direction are passed via
-										// the `value` prop.
-										name="view-table-sorting"
-										value={ value }
-										checked={ isChecked }
-										onChange={ () => {
-											onChangeView( {
-												...view,
-												sort: {
-													field: fieldId,
-													direction,
-												},
-											} );
-										} }
-									>
-										<Menu.ItemLabel>
-											{ sortLabels[ direction ] }
-										</Menu.ItemLabel>
-									</Menu.RadioItem>
-								);
-							}
-						) }
-					</Menu.Group>
-				) }
-				{ canAddFilter && (
+									return (
+										<Menu.RadioItem
+											key={ value }
+											// All sorting radio items share the same name, so that
+											// selecting a sorting option automatically deselects the
+											// previously selected one, even if it is displayed in
+											// another submenu. The field and direction are passed via
+											// the `value` prop.
+											name="view-table-sorting"
+											value={ value }
+											checked={ isChecked }
+											onChange={ () => {
+												onChangeView( {
+													...view,
+													sort: {
+														field: fieldId,
+														direction,
+													},
+												} );
+											} }
+										>
+											<Menu.ItemLabel>
+												{ sortLabels[ direction ] }
+											</Menu.ItemLabel>
+										</Menu.RadioItem>
+									);
+								}
+							) }
+						</Menu.Group>
+					) }
+					{ canAddFilter && (
+						<Menu.Group>
+							<Menu.Item
+								prefix={ <Icon icon={ funnel } /> }
+								onClick={ () => {
+									setOpenedFilter( fieldId );
+									onChangeView( {
+										...view,
+										page: 1,
+										filters: [
+											...( view.filters || [] ),
+											{
+												field: fieldId,
+												value: undefined,
+												operator: operators[ 0 ],
+											},
+										],
+									} );
+								} }
+							>
+								<Menu.ItemLabel>
+									{ __( 'Add filter' ) }
+								</Menu.ItemLabel>
+							</Menu.Item>
+						</Menu.Group>
+					) }
 					<Menu.Group>
 						<Menu.Item
-							prefix={ <Icon icon={ funnel } /> }
+							prefix={ <Icon icon={ arrowLeft } /> }
+							disabled={ index < 1 }
 							onClick={ () => {
-								setOpenedFilter( fieldId );
 								onChangeView( {
 									...view,
-									page: 1,
-									filters: [
-										...( view.filters || [] ),
-										{
-											field: fieldId,
-											value: undefined,
-											operator: operators[ 0 ],
-										},
+									fields: [
+										...( visibleFieldIds.slice(
+											0,
+											index - 1
+										) ?? [] ),
+										fieldId,
+										visibleFieldIds[ index - 1 ],
+										...visibleFieldIds.slice( index + 1 ),
 									],
 								} );
 							} }
 						>
 							<Menu.ItemLabel>
-								{ __( 'Add filter' ) }
+								{ __( 'Move left' ) }
 							</Menu.ItemLabel>
 						</Menu.Item>
-					</Menu.Group>
-				) }
-				<Menu.Group>
-					<Menu.Item
-						prefix={ <Icon icon={ arrowLeft } /> }
-						disabled={ index < 1 }
-						onClick={ () => {
-							onChangeView( {
-								...view,
-								fields: [
-									...( visibleFieldIds.slice(
-										0,
-										index - 1
-									) ?? [] ),
-									fieldId,
-									visibleFieldIds[ index - 1 ],
-									...visibleFieldIds.slice( index + 1 ),
-								],
-							} );
-						} }
-					>
-						<Menu.ItemLabel>{ __( 'Move left' ) }</Menu.ItemLabel>
-					</Menu.Item>
-					<Menu.Item
-						prefix={ <Icon icon={ arrowRight } /> }
-						disabled={ index >= visibleFieldIds.length - 1 }
-						onClick={ () => {
-							onChangeView( {
-								...view,
-								fields: [
-									...( visibleFieldIds.slice( 0, index ) ??
-										[] ),
-									visibleFieldIds[ index + 1 ],
-									fieldId,
-									...visibleFieldIds.slice( index + 2 ),
-								],
-							} );
-						} }
-					>
-						<Menu.ItemLabel>{ __( 'Move right' ) }</Menu.ItemLabel>
-					</Menu.Item>
-					{ isHidable && field && (
 						<Menu.Item
-							prefix={ <Icon icon={ unseen } /> }
+							prefix={ <Icon icon={ arrowRight } /> }
+							disabled={ index >= visibleFieldIds.length - 1 }
 							onClick={ () => {
-								onHide( field );
 								onChangeView( {
 									...view,
-									fields: visibleFieldIds.filter(
-										( id ) => id !== fieldId
-									),
+									fields: [
+										...( visibleFieldIds.slice(
+											0,
+											index
+										) ?? [] ),
+										visibleFieldIds[ index + 1 ],
+										fieldId,
+										...visibleFieldIds.slice( index + 2 ),
+									],
 								} );
 							} }
 						>
 							<Menu.ItemLabel>
-								{ __( 'Hide column' ) }
+								{ __( 'Move right' ) }
 							</Menu.ItemLabel>
 						</Menu.Item>
-					) }
-				</Menu.Group>
-			</WithMenuSeparators>
+						{ isHidable && field && (
+							<Menu.Item
+								prefix={ <Icon icon={ unseen } /> }
+								onClick={ () => {
+									onHide( field );
+									onChangeView( {
+										...view,
+										fields: visibleFieldIds.filter(
+											( id ) => id !== fieldId
+										),
+									} );
+								} }
+							>
+								<Menu.ItemLabel>
+									{ __( 'Hide column' ) }
+								</Menu.ItemLabel>
+							</Menu.Item>
+						) }
+					</Menu.Group>
+				</WithMenuSeparators>
+			</Menu.Popover>
 		</Menu>
 	);
 } );