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 }; }