diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 81c6d1055d328..f5e476ecebd15 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -118,6 +118,19 @@
padding-bottom: $grid-unit-05;
}
}
+
+ .dataviews-table-header-button {
+ padding: 0;
+ gap: $grid-unit-05;
+
+ span {
+ speak: none;
+
+ &:empty {
+ display: none;
+ }
+ }
+ }
}
.dataviews-grid-view {
diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
index 71d05e66c6b3c..c5323bebea0ef 100644
--- a/packages/dataviews/src/view-table.js
+++ b/packages/dataviews/src/view-table.js
@@ -4,8 +4,6 @@
import { __ } from '@wordpress/i18n';
import { useAsyncList } from '@wordpress/compose';
import {
- chevronDown,
- chevronUp,
unseen,
check,
arrowUp,
@@ -40,7 +38,7 @@ const sortingItemsInfo = {
asc: { icon: arrowUp, label: __( 'Sort ascending' ) },
desc: { icon: arrowDown, label: __( 'Sort descending' ) },
};
-const sortIcons = { asc: chevronUp, desc: chevronDown };
+const sortArrows = { asc: '↑', desc: '↓' };
function HeaderMenu( { field, view, onChangeView } ) {
const isSortable = field.enableSorting !== false;
@@ -92,12 +90,17 @@ function HeaderMenu( { field, view, onChangeView } ) {
align="start"
trigger={
+ className="dataviews-table-header-button"
+ style={ { padding: 0 } }
+ >
+ { field.header }
+ { isSorted && (
+
+ { isSorted && sortArrows[ view.sort.direction ] }
+
+ ) }
+
}
>