diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 762508f921a00f..fdf3ee586a9c35 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -203,6 +203,9 @@ $z-layers: (
// Ensure modal footer actions appear above modal contents
".edit-site-start-template-options__modal__actions": 1,
+
+ // Ensure checkbox + actions don't overlap table header
+ ".dataviews-view-table thead": 1,
);
@function z-index( $key ) {
diff --git a/packages/dataviews/src/dataviews.js b/packages/dataviews/src/dataviews.js
index 9bcf531006406a..4ddaf2c2cca8cd 100644
--- a/packages/dataviews/src/dataviews.js
+++ b/packages/dataviews/src/dataviews.js
@@ -1,10 +1,7 @@
/**
* WordPress dependencies
*/
-import {
- __experimentalVStack as VStack,
- __experimentalHStack as HStack,
-} from '@wordpress/components';
+import { __experimentalHStack as HStack } from '@wordpress/components';
import { useMemo, useState, useCallback, useEffect } from '@wordpress/element';
/**
@@ -92,69 +89,67 @@ export default function DataViews( {
);
return (
-
+
-
- { search && (
-
- ) }
-
-
- { [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
- hasPossibleBulkAction && (
-
- ) }
-
-
+ ) }
+
-
-
+
+
+
);
}
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 278c4b06de3225..fc66305792db84 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -4,14 +4,15 @@
overflow: auto;
box-sizing: border-box;
scroll-padding-bottom: $grid-unit-80;
-
- > div {
- min-height: 100%;
- }
}
.dataviews-filters__view-actions {
padding: $grid-unit-15 $grid-unit-40 0;
+ margin-bottom: $grid-unit-15;
+ flex-shrink: 0;
+ position: sticky;
+ left: 0;
+
.components-search-control {
.components-base-control__field {
max-width: 240px;
@@ -28,14 +29,14 @@
}
.dataviews-pagination {
- margin-top: auto;
position: sticky;
bottom: 0;
- background-color: rgba($white, 0.8);
- backdrop-filter: blur(6px);
+ left: 0;
+ background-color: $white;
padding: $grid-unit-15 $grid-unit-40;
border-top: $border-width solid $gray-100;
color: $gray-700;
+ flex-shrink: 0;
}
.dataviews-pagination__page-selection {
@@ -49,13 +50,6 @@
margin: $grid-unit-40 0 $grid-unit-20;
}
-.dataviews-view-table-wrapper {
- overflow-x: auto;
- flex-grow: 1;
- display: flex;
- flex-direction: column;
-}
-
.dataviews-view-table {
width: 100%;
text-indent: 0;
@@ -149,17 +143,18 @@
}
}
thead {
+ position: sticky;
+ inset-block-start: 0;
+ z-index: z-index(".dataviews-view-table thead");
+
tr {
border: 0;
}
th {
- position: sticky;
- top: -1px;
background-color: $white;
box-shadow: inset 0 -#{$border-width} 0 $gray-100;
padding-top: $grid-unit-10;
padding-bottom: $grid-unit-10;
- z-index: 1;
font-size: 11px;
text-transform: uppercase;
font-weight: 500;
diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
index c77323d3c796d3..e121baa2b33f7c 100644
--- a/packages/dataviews/src/view-table.js
+++ b/packages/dataviews/src/view-table.js
@@ -356,7 +356,7 @@ function ViewTable( {
);
return (
-
+ <>
{ isLoading ? : __( 'No results' ) }
) }
-
+ >
);
}