diff --git a/packages/dataviews/src/components/dataviews/stories/fixtures.tsx b/packages/dataviews/src/components/dataviews/stories/fixtures.tsx
index ff098209b34684..6c74c516853c5b 100644
--- a/packages/dataviews/src/components/dataviews/stories/fixtures.tsx
+++ b/packages/dataviews/src/components/dataviews/stories/fixtures.tsx
@@ -558,6 +558,7 @@ export const themeFields: Field< Theme >[] = [
},
{ id: 'requires', label: 'Requires at least' },
{ id: 'tested', label: 'Tested up to' },
+ { id: 'icon', label: 'Icon', render: () => },
{
id: 'tags',
label: 'Tags',
diff --git a/packages/dataviews/src/components/dataviews/stories/index.story.tsx b/packages/dataviews/src/components/dataviews/stories/index.story.tsx
index 878677d2eb30c6..6161af125b5ca4 100644
--- a/packages/dataviews/src/components/dataviews/stories/index.story.tsx
+++ b/packages/dataviews/src/components/dataviews/stories/index.story.tsx
@@ -137,16 +137,28 @@ export const FieldsNoSortableNoHidable = () => {
export const CombinedFields = () => {
const defaultLayoutsThemes = {
table: {
- fields: [ 'theme', 'requires', 'tested' ],
+ fields: [ 'theme_with_combined', 'theme_with_simple' ],
layout: {
primaryField: 'name',
combinedFields: [
{
- id: 'theme',
+ id: 'name_tested',
label: 'Theme',
- children: [ 'name', 'description' ],
+ children: [ 'name', 'tested' ],
direction: 'vertical',
},
+ {
+ id: 'theme_with_combined',
+ label: 'Combine combined fields',
+ children: [ 'icon', 'name_tested' ],
+ direction: 'horizontal',
+ },
+ {
+ id: 'theme_with_simple',
+ label: 'Combine simple fields',
+ children: [ 'icon', 'name' ],
+ direction: 'horizontal',
+ },
] as CombinedField[],
styles: {
theme: {
diff --git a/packages/dataviews/src/dataviews-layouts/table/index.tsx b/packages/dataviews/src/dataviews-layouts/table/index.tsx
index 8ef41db1c38798..db76d24b53bfa3 100644
--- a/packages/dataviews/src/dataviews-layouts/table/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/index.tsx
@@ -147,7 +147,11 @@ function TableColumnCombined< Item >( {
) );
if ( field.direction === 'horizontal' ) {
- return { children };
+ return (
+
+ { children }
+
+ );
}
return { children };
}