diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index f13670f27cdab7..ef96cd755f0d05 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -39,13 +39,8 @@ import {
 	sortIcons,
 	sortLabels,
 } from '../../constants';
-import {
-	VIEW_LAYOUTS,
-	getNotHidableFieldIds,
-	getVisibleFieldIds,
-	getHiddenFieldIds,
-} from '../../dataviews-layouts';
-import type { SupportedLayouts, View, Field } from '../../types';
+import { VIEW_LAYOUTS } from '../../dataviews-layouts';
+import type { NormalizedField, SupportedLayouts, View } from '../../types';
 import DataViewsContext from '../dataviews-context';
 import { unlock } from '../../lock-unlock';
 
@@ -93,6 +88,7 @@ function ViewTypeMenu( {
 								case 'list':
 								case 'grid':
 								case 'table':
+									// @ts-expect-error
 									return onChangeView( {
 										...view,
 										type: e.target.value,
@@ -237,34 +233,28 @@ function ItemsPerPageControl() {
 	);
 }
 
-interface FieldItemProps {
-	id: any;
-	label: string;
-	index: number;
-	isVisible: boolean;
-	isHidable: boolean;
-}
-
 function FieldItem( {
-	field: { id, label, index, isVisible, isHidable },
-	fields,
+	index,
+	field,
 	view,
 	onChangeView,
 }: {
-	field: FieldItemProps;
-	fields: Field< any >[];
+	index?: number;
+	field: NormalizedField< any >;
 	view: View;
 	onChangeView: ( view: View ) => void;
 } ) {
-	const visibleFieldIds = getVisibleFieldIds( view, fields );
+	const visibleFieldIds = view.fields ?? [];
+	const isVisible =
+		index !== undefined && visibleFieldIds.includes( field.id );
 
 	return (
-		<Item key={ id }>
+		<Item key={ field.id }>
 			<HStack
 				expanded
-				className={ `dataviews-field-control__field dataviews-field-control__field-${ id }` }
+				className={ `dataviews-field-control__field dataviews-field-control__field-${ field.id }` }
 			>
-				<span>{ label }</span>
+				<span>{ field.label }</span>
 				<HStack
 					justify="flex-end"
 					expanded={ false }
@@ -284,7 +274,7 @@ function FieldItem( {
 												0,
 												index - 1
 											) ?? [] ),
-											id,
+											field.id,
 											visibleFieldIds[ index - 1 ],
 											...visibleFieldIds.slice(
 												index + 1
@@ -296,7 +286,7 @@ function FieldItem( {
 								label={ sprintf(
 									/* translators: %s: field label */
 									__( 'Move %s up' ),
-									label
+									field.label
 								) }
 							/>
 							<Button
@@ -312,7 +302,7 @@ function FieldItem( {
 												index
 											) ?? [] ),
 											visibleFieldIds[ index + 1 ],
-											id,
+											field.id,
 											...visibleFieldIds.slice(
 												index + 2
 											),
@@ -323,14 +313,14 @@ function FieldItem( {
 								label={ sprintf(
 									/* translators: %s: field label */
 									__( 'Move %s down' ),
-									label
+									field.label
 								) }
 							/>{ ' ' }
 						</>
 					) }
 					<Button
 						className="dataviews-field-control__field-visibility-button"
-						disabled={ ! isHidable }
+						disabled={ ! field.enableHiding }
 						accessibleWhenDisabled
 						size="compact"
 						onClick={ () => {
@@ -338,16 +328,16 @@ function FieldItem( {
 								...view,
 								fields: isVisible
 									? visibleFieldIds.filter(
-											( fieldId ) => fieldId !== id
+											( fieldId ) => fieldId !== field.id
 									  )
-									: [ ...visibleFieldIds, id ],
+									: [ ...visibleFieldIds, field.id ],
 							} );
 							// Focus the visibility button to avoid focus loss.
 							// Our code is safe against the component being unmounted, so we don't need to worry about cleaning the timeout.
 							// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
 							setTimeout( () => {
 								const element = document.querySelector(
-									`.dataviews-field-control__field-${ id } .dataviews-field-control__field-visibility-button`
+									`.dataviews-field-control__field-${ field.id } .dataviews-field-control__field-visibility-button`
 								);
 								if ( element instanceof HTMLElement ) {
 									element.focus();
@@ -360,12 +350,12 @@ function FieldItem( {
 								? sprintf(
 										/* translators: %s: field label */
 										_x( 'Hide %s', 'field' ),
-										label
+										field.label
 								  )
 								: sprintf(
 										/* translators: %s: field label */
 										_x( 'Show %s', 'field' ),
-										label
+										field.label
 								  )
 						}
 					/>
@@ -375,59 +365,27 @@ function FieldItem( {
 	);
 }
 
+function isDefined< T >( item: T | undefined ): item is T {
+	return !! item;
+}
+
 function FieldControl() {
 	const { view, fields, onChangeView } = useContext( DataViewsContext );
 
-	const visibleFieldIds = useMemo(
-		() => getVisibleFieldIds( view, fields ),
-		[ view, fields ]
+	const togglableFields = [
+		view?.titleField,
+		view?.mediaField,
+		view?.descriptionField,
+	].filter( Boolean );
+	const visibleFieldIds = view.fields ?? [];
+	const hiddenFields = fields.filter(
+		( f ) =>
+			! visibleFieldIds.includes( f.id ) &&
+			! togglableFields.includes( f.id )
 	);
-	const hiddenFieldIds = useMemo(
-		() => getHiddenFieldIds( view, fields ),
-		[ view, fields ]
-	);
-	const notHidableFieldIds = useMemo(
-		() => getNotHidableFieldIds( view ),
-		[ view ]
-	);
-
-	const visibleFields = fields
-		.filter( ( { id } ) => visibleFieldIds.includes( id ) )
-		.map( ( { id, label, enableHiding } ) => {
-			return {
-				id,
-				label,
-				index: visibleFieldIds.indexOf( id ),
-				isVisible: true,
-				isHidable: notHidableFieldIds.includes( id )
-					? false
-					: enableHiding,
-			};
-		} );
-	if ( view.type === LAYOUT_TABLE && view.layout?.combinedFields ) {
-		view.layout.combinedFields.forEach( ( { id, label } ) => {
-			visibleFields.push( {
-				id,
-				label,
-				index: visibleFieldIds.indexOf( id ),
-				isVisible: true,
-				isHidable: notHidableFieldIds.includes( id ),
-			} );
-		} );
-	}
-	visibleFields.sort( ( a, b ) => a.index - b.index );
-
-	const hiddenFields = fields
-		.filter( ( { id } ) => hiddenFieldIds.includes( id ) )
-		.map( ( { id, label, enableHiding }, index ) => {
-			return {
-				id,
-				label,
-				index,
-				isVisible: false,
-				isHidable: enableHiding,
-			};
-		} );
+	const visibleFields = visibleFieldIds
+		.map( ( fieldId ) => fields.find( ( f ) => f.id === fieldId ) )
+		.filter( isDefined );
 
 	if ( ! visibleFields?.length && ! hiddenFields?.length ) {
 		return null;
@@ -437,13 +395,13 @@ function FieldControl() {
 		<VStack spacing={ 6 } className="dataviews-field-control">
 			{ !! visibleFields?.length && (
 				<ItemGroup isBordered isSeparated>
-					{ visibleFields.map( ( field ) => (
+					{ visibleFields.map( ( field, index ) => (
 						<FieldItem
 							key={ field.id }
 							field={ field }
-							fields={ fields }
 							view={ view }
 							onChangeView={ onChangeView }
+							index={ index }
 						/>
 					) ) }
 				</ItemGroup>
@@ -459,7 +417,6 @@ function FieldControl() {
 								<FieldItem
 									key={ field.id }
 									field={ field }
-									fields={ fields }
 									view={ view }
 									onChangeView={ onChangeView }
 								/>
diff --git a/packages/dataviews/src/components/dataviews/stories/fixtures.tsx b/packages/dataviews/src/components/dataviews/stories/fixtures.tsx
index 6c74c516853c5b..cd4d3b97e65311 100644
--- a/packages/dataviews/src/components/dataviews/stories/fixtures.tsx
+++ b/packages/dataviews/src/components/dataviews/stories/fixtures.tsx
@@ -637,9 +637,6 @@ export const fields: Field< SpaceObject >[] = [
 		id: 'title',
 		enableHiding: false,
 		enableGlobalSearch: true,
-		render: ( { item } ) => {
-			return <a href="#nothing">{ item.title }</a>;
-		},
 	},
 	{
 		id: 'date',
diff --git a/packages/dataviews/src/components/dataviews/stories/index.story.tsx b/packages/dataviews/src/components/dataviews/stories/index.story.tsx
index 6161af125b5ca4..1e96ba92a0bea9 100644
--- a/packages/dataviews/src/components/dataviews/stories/index.story.tsx
+++ b/packages/dataviews/src/components/dataviews/stories/index.story.tsx
@@ -7,17 +7,10 @@ import { useState, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import DataViews from '../index';
-import {
-	DEFAULT_VIEW,
-	actions,
-	data,
-	fields,
-	themeData,
-	themeFields,
-} from './fixtures';
+import { DEFAULT_VIEW, actions, data, fields } from './fixtures';
 import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../../../constants';
 import { filterSortAndPaginate } from '../../../filter-and-sort-data-view';
-import type { CombinedField, View } from '../../../types';
+import type { View } from '../../../types';
 
 import './style.css';
 
@@ -28,44 +21,18 @@ const meta = {
 export default meta;
 
 const defaultLayouts = {
-	[ LAYOUT_TABLE ]: {
-		layout: {
-			primaryField: 'title',
-			styles: {
-				image: {
-					width: 50,
-				},
-				title: {
-					maxWidth: 400,
-				},
-				type: {
-					maxWidth: 400,
-				},
-				description: {
-					maxWidth: 200,
-				},
-			},
-		},
-	},
-	[ LAYOUT_GRID ]: {
-		layout: {
-			mediaField: 'image',
-			primaryField: 'title',
-		},
-	},
-	[ LAYOUT_LIST ]: {
-		layout: {
-			mediaField: 'image',
-			primaryField: 'title',
-		},
-	},
+	[ LAYOUT_TABLE ]: {},
+	[ LAYOUT_GRID ]: {},
+	[ LAYOUT_LIST ]: {},
 };
 
 export const Default = () => {
 	const [ view, setView ] = useState< View >( {
 		...DEFAULT_VIEW,
-		fields: [ 'title', 'description', 'categories' ],
-		layout: defaultLayouts[ DEFAULT_VIEW.type ].layout,
+		fields: [ 'categories' ],
+		titleField: 'title',
+		descriptionField: 'description',
+		mediaField: 'image',
 	} );
 	const { data: shownData, paginationInfo } = useMemo( () => {
 		return filterSortAndPaginate( data, view, fields );
@@ -79,6 +46,11 @@ export const Default = () => {
 			fields={ fields }
 			onChangeView={ setView }
 			actions={ actions }
+			onClickItem={ ( item ) => {
+				// eslint-disable-next-line no-alert
+				alert( 'Clicked: ' + item.title );
+			} }
+			isItemClickable={ () => true }
 			defaultLayouts={ defaultLayouts }
 		/>
 	);
@@ -133,67 +105,3 @@ export const FieldsNoSortableNoHidable = () => {
 		/>
 	);
 };
-
-export const CombinedFields = () => {
-	const defaultLayoutsThemes = {
-		table: {
-			fields: [ 'theme_with_combined', 'theme_with_simple' ],
-			layout: {
-				primaryField: 'name',
-				combinedFields: [
-					{
-						id: 'name_tested',
-						label: 'Theme',
-						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: {
-						maxWidth: 300,
-					},
-				},
-			},
-		},
-		grid: {
-			fields: [ 'description', 'requires', 'tested' ],
-			layout: { primaryField: 'name', columnFields: [ 'description' ] },
-		},
-		list: {
-			fields: [ 'requires', 'tested' ],
-			layout: { primaryField: 'name' },
-		},
-	};
-	const [ view, setView ] = useState< View >( {
-		...DEFAULT_VIEW,
-		fields: defaultLayoutsThemes.table.fields,
-		layout: defaultLayoutsThemes.table.layout,
-	} );
-	const { data: shownData, paginationInfo } = useMemo( () => {
-		return filterSortAndPaginate( themeData, view, themeFields );
-	}, [ view ] );
-
-	return (
-		<DataViews
-			getItemId={ ( item ) => item.name }
-			paginationInfo={ paginationInfo }
-			data={ shownData }
-			view={ view }
-			fields={ themeFields }
-			onChangeView={ setView }
-			defaultLayouts={ defaultLayoutsThemes }
-		/>
-	);
-};
diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
index bd75a1ff9e2a18..74304d4d0ac23f 100644
--- a/packages/dataviews/src/components/dataviews/style.scss
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -22,9 +22,32 @@
 	@include reduce-motion( "transition" );
 }
 
-.dataviews-view-list__primary-field,
-.dataviews-view-grid__primary-field,
-.dataviews-view-table__primary-field {
+.dataviews-no-results,
+.dataviews-loading {
+	padding: 0 $grid-unit-60;
+	flex-grow: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion( "transition" );
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.dataviews__view-actions,
+	.dataviews-filters__container {
+		padding: $grid-unit-15 $grid-unit-30;
+	}
+
+	.dataviews-no-results,
+	.dataviews-loading {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
+}
+
+.dataviews-primary-field {
 	font-size: $default-font-size;
 	font-weight: 500;
 	color: $gray-700;
@@ -62,34 +85,6 @@
 	}
 }
 
-.dataviews-view-list__primary-field--clickable,
-.dataviews-view-grid__primary-field--clickable,
-.dataviews-view-grid__media--clickable,
-.dataviews-view-table__primary-field > .dataviews-view-table__cell-content--clickable {
+.dataviews-primary-field--clickable {
 	cursor: pointer;
 }
-
-.dataviews-no-results,
-.dataviews-loading {
-	padding: 0 $grid-unit-60;
-	flex-grow: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	transition: padding ease-out 0.1s;
-	@include reduce-motion( "transition" );
-}
-
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
-@container (max-width: 430px) {
-	.dataviews__view-actions,
-	.dataviews-filters__container {
-		padding: $grid-unit-15 $grid-unit-30;
-	}
-
-	.dataviews-no-results,
-	.dataviews-loading {
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
-	}
-}
diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
index 2a09fb68efab82..9aabb0bad82f8b 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -35,11 +35,11 @@ interface GridItemProps< Item > {
 	isItemClickable: ( item: Item ) => boolean;
 	item: Item;
 	actions: Action< Item >[];
+	titleField?: NormalizedField< Item >;
 	mediaField?: NormalizedField< Item >;
-	primaryField?: NormalizedField< Item >;
-	visibleFields: NormalizedField< Item >[];
+	descriptionField?: NormalizedField< Item >;
+	regularFields: NormalizedField< Item >[];
 	badgeFields: NormalizedField< Item >[];
-	columnFields?: string[];
 }
 
 function GridItem< Item >( {
@@ -51,10 +51,10 @@ function GridItem< Item >( {
 	item,
 	actions,
 	mediaField,
-	primaryField,
-	visibleFields,
+	titleField,
+	descriptionField,
+	regularFields,
 	badgeFields,
-	columnFields,
 }: GridItemProps< Item > ) {
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
@@ -62,8 +62,8 @@ function GridItem< Item >( {
 	const renderedMediaField = mediaField?.render ? (
 		<mediaField.render item={ item } />
 	) : null;
-	const renderedPrimaryField = primaryField?.render ? (
-		<primaryField.render item={ item } />
+	const renderedTitleField = titleField?.render ? (
+		<titleField.render item={ item } />
 	) : null;
 
 	const clickableMediaItemProps = getClickableItemProps(
@@ -77,7 +77,7 @@ function GridItem< Item >( {
 		item,
 		isItemClickable,
 		onClickItem,
-		'dataviews-view-grid__primary-field'
+		'dataviews-view-grid__primary-field dataviews-primary-field'
 	);
 
 	return (
@@ -108,7 +108,7 @@ function GridItem< Item >( {
 				selection={ selection }
 				onChangeSelection={ onChangeSelection }
 				getItemId={ getItemId }
-				primaryField={ primaryField }
+				primaryField={ titleField }
 				disabled={ ! hasBulkAction }
 			/>
 			<HStack
@@ -116,68 +116,67 @@ function GridItem< Item >( {
 				className="dataviews-view-grid__title-actions"
 			>
 				<div { ...clickablePrimaryItemProps }>
-					{ renderedPrimaryField }
+					{ renderedTitleField }
 				</div>
 				<ItemActions item={ item } actions={ actions } isCompact />
 			</HStack>
-			{ !! badgeFields?.length && (
-				<HStack
-					className="dataviews-view-grid__badge-fields"
-					spacing={ 2 }
-					wrap
-					alignment="top"
-					justify="flex-start"
-				>
-					{ badgeFields.map( ( field ) => {
-						return (
-							<FlexItem
-								key={ field.id }
-								className="dataviews-view-grid__field-value"
-							>
-								<field.render item={ item } />
-							</FlexItem>
-						);
-					} ) }
-				</HStack>
-			) }
-			{ !! visibleFields?.length && (
-				<VStack className="dataviews-view-grid__fields" spacing={ 1 }>
-					{ visibleFields.map( ( field ) => {
-						return (
-							<Flex
-								className={ clsx(
-									'dataviews-view-grid__field',
-									columnFields?.includes( field.id )
-										? 'is-column'
-										: 'is-row'
-								) }
-								key={ field.id }
-								gap={ 1 }
-								justify="flex-start"
-								expanded
-								style={ { height: 'auto' } }
-								direction={
-									columnFields?.includes( field.id )
-										? 'column'
-										: 'row'
-								}
-							>
-								<>
-									<FlexItem className="dataviews-view-grid__field-name">
-										{ field.header }
-									</FlexItem>
-									<FlexItem
-										className="dataviews-view-grid__field-value"
-										style={ { maxHeight: 'none' } }
-									>
-										<field.render item={ item } />
-									</FlexItem>
-								</>
-							</Flex>
-						);
-					} ) }
-				</VStack>
-			) }
+			<VStack spacing={ 1 }>
+				{ descriptionField?.render && (
+					<descriptionField.render item={ item } />
+				) }
+				{ !! badgeFields?.length && (
+					<HStack
+						className="dataviews-view-grid__badge-fields"
+						spacing={ 2 }
+						wrap
+						alignment="top"
+						justify="flex-start"
+					>
+						{ badgeFields.map( ( field ) => {
+							return (
+								<FlexItem
+									key={ field.id }
+									className="dataviews-view-grid__field-value"
+								>
+									<field.render item={ item } />
+								</FlexItem>
+							);
+						} ) }
+					</HStack>
+				) }
+				{ !! regularFields?.length && (
+					<VStack
+						className="dataviews-view-grid__fields"
+						spacing={ 1 }
+					>
+						{ regularFields.map( ( field ) => {
+							return (
+								<Flex
+									className="dataviews-view-grid__field"
+									key={ field.id }
+									gap={ 1 }
+									justify="flex-start"
+									expanded
+									style={ { height: 'auto' } }
+									direction="row"
+								>
+									<>
+										<FlexItem className="dataviews-view-grid__field-name">
+											{ field.header }
+										</FlexItem>
+										<FlexItem
+											className="dataviews-view-grid__field-value"
+											style={ { maxHeight: 'none' } }
+										>
+											<field.render item={ item } />
+										</FlexItem>
+									</>
+								</Flex>
+							);
+						} ) }
+					</VStack>
+				) }
+			</VStack>
 		</VStack>
 	);
 }
@@ -194,20 +193,24 @@ export default function ViewGrid< Item >( {
 	selection,
 	view,
 }: ViewGridProps< Item > ) {
+	const titleField = fields.find(
+		( field ) => field.id === view?.titleField
+	);
 	const mediaField = fields.find(
-		( field ) => field.id === view.layout?.mediaField
+		( field ) => field.id === view?.mediaField
 	);
-	const primaryField = fields.find(
-		( field ) => field.id === view.layout?.primaryField
+	const descriptionField = fields.find(
+		( field ) => field.id === view?.descriptionField
 	);
-	const viewFields = view.fields || fields.map( ( field ) => field.id );
-	const { visibleFields, badgeFields } = fields.reduce(
+	const otherFields = view.fields ?? [];
+	const { regularFields, badgeFields } = fields.reduce(
 		( accumulator: Record< string, NormalizedField< Item >[] >, field ) => {
 			if (
-				! viewFields.includes( field.id ) ||
+				! otherFields.includes( field.id ) ||
 				[
-					view.layout?.mediaField,
-					view?.layout?.primaryField,
+					view?.mediaField,
+					view?.titleField,
+					view?.descriptionField,
 				].includes( field.id )
 			) {
 				return accumulator;
@@ -216,11 +219,11 @@ export default function ViewGrid< Item >( {
 			// otherwise add it to the rest visibleFields array.
 			const key = view.layout?.badgeFields?.includes( field.id )
 				? 'badgeFields'
-				: 'visibleFields';
+				: 'regularFields';
 			accumulator[ key ].push( field );
 			return accumulator;
 		},
-		{ visibleFields: [], badgeFields: [] }
+		{ regularFields: [], badgeFields: [] }
 	);
 	const hasData = !! data?.length;
 	const updatedPreviewSize = useUpdatedPreviewSizeOnViewportChange();
@@ -253,10 +256,10 @@ export default function ViewGrid< Item >( {
 								item={ item }
 								actions={ actions }
 								mediaField={ mediaField }
-								primaryField={ primaryField }
-								visibleFields={ visibleFields }
+								titleField={ titleField }
+								descriptionField={ descriptionField }
+								regularFields={ regularFields }
 								badgeFields={ badgeFields }
-								columnFields={ view.layout?.columnFields }
 							/>
 						);
 					} ) }
diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
index f209accc6de15c..07af792d58ce51 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -81,36 +81,23 @@
 		}
 
 		.dataviews-view-grid__field {
-			align-items: flex-start;
 			min-height: $grid-unit-30;
+			align-items: center;
 
-			&:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
-				display: none;
-			}
-
-			&:not(.is-column) {
-				align-items: center;
-
-				.dataviews-view-grid__field-name {
-					width: 35%;
-				}
-
-				.dataviews-view-grid__field-value {
-					width: 65%;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				}
+			.dataviews-view-grid__field-name {
+				width: 35%;
+				color: $gray-700;
 			}
 
-			&.is-column {
-				& + .is-row {
-					margin-top: $grid-unit-05;
-				}
+			.dataviews-view-grid__field-value {
+				width: 65%;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
 			}
 
-			.dataviews-view-grid__field-name {
-				color: $gray-700;
+			&:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
+				display: none;
 			}
 		}
 	}
diff --git a/packages/dataviews/src/dataviews-layouts/index.ts b/packages/dataviews/src/dataviews-layouts/index.ts
index 7abdd1eb459328..f2455f81f1560c 100644
--- a/packages/dataviews/src/dataviews-layouts/index.ts
+++ b/packages/dataviews/src/dataviews-layouts/index.ts
@@ -16,7 +16,6 @@ import ViewTable from './table';
 import ViewGrid from './grid';
 import ViewList from './list';
 import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../constants';
-import type { View, Field } from '../types';
 import PreviewSizePicker from './grid/preview-size-picker';
 import DensityPicker from './table/density-picker';
 
@@ -42,90 +41,3 @@ export const VIEW_LAYOUTS = [
 		icon: isRTL() ? formatListBulletsRTL : formatListBullets,
 	},
 ];
-
-export function getNotHidableFieldIds( view: View ): string[] {
-	if ( view.type === 'table' ) {
-		return [ view.layout?.primaryField ]
-			.concat(
-				view.layout?.combinedFields?.flatMap(
-					( field ) => field.children
-				) ?? []
-			)
-			.filter( ( item ): item is string => !! item );
-	}
-
-	if ( view.type === 'grid' ) {
-		return [ view.layout?.primaryField, view.layout?.mediaField ].filter(
-			( item ): item is string => !! item
-		);
-	}
-
-	if ( view.type === 'list' ) {
-		return [ view.layout?.primaryField, view.layout?.mediaField ].filter(
-			( item ): item is string => !! item
-		);
-	}
-
-	return [];
-}
-
-function getCombinedFieldIds( view: View ): string[] {
-	const combinedFields: string[] = [];
-	if ( view.type === LAYOUT_TABLE && view.layout?.combinedFields ) {
-		view.layout.combinedFields.forEach( ( combination ) => {
-			combinedFields.push( ...combination.children );
-		} );
-	}
-	return combinedFields;
-}
-
-export function getVisibleFieldIds(
-	view: View,
-	fields: Field< any >[]
-): string[] {
-	const fieldsToExclude = getCombinedFieldIds( view );
-
-	if ( view.fields ) {
-		return view.fields.filter( ( id ) => ! fieldsToExclude.includes( id ) );
-	}
-
-	const visibleFields = [];
-	if ( view.type === LAYOUT_TABLE && view.layout?.combinedFields ) {
-		visibleFields.push(
-			...view.layout.combinedFields.map( ( { id } ) => id )
-		);
-	}
-	visibleFields.push(
-		...fields
-			.filter( ( { id } ) => ! fieldsToExclude.includes( id ) )
-			.map( ( { id } ) => id )
-	);
-
-	return visibleFields;
-}
-
-export function getHiddenFieldIds(
-	view: View,
-	fields: Field< any >[]
-): string[] {
-	const fieldsToExclude = [
-		...getCombinedFieldIds( view ),
-		...getVisibleFieldIds( view, fields ),
-	];
-
-	// The media field does not need to be in the view.fields to be displayed.
-	if ( view.type === LAYOUT_GRID && view.layout?.mediaField ) {
-		fieldsToExclude.push( view.layout?.mediaField );
-	}
-
-	if ( view.type === LAYOUT_LIST && view.layout?.mediaField ) {
-		fieldsToExclude.push( view.layout?.mediaField );
-	}
-
-	return fields
-		.filter(
-			( { id, enableHiding } ) =>
-				! fieldsToExclude.includes( id ) && enableHiding
-		)
-		.map( ( { id } ) => id );
-}
diff --git a/packages/dataviews/src/dataviews-layouts/list/index.tsx b/packages/dataviews/src/dataviews-layouts/list/index.tsx
index 47b9961d97df18..ca844598dc261f 100644
--- a/packages/dataviews/src/dataviews-layouts/list/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/list/index.tsx
@@ -42,10 +42,11 @@ interface ListViewItemProps< Item > {
 	idPrefix: string;
 	isSelected: boolean;
 	item: Item;
+	titleField?: NormalizedField< Item >;
 	mediaField?: NormalizedField< Item >;
+	descriptionField?: NormalizedField< Item >;
 	onSelect: ( item: Item ) => void;
-	primaryField?: NormalizedField< Item >;
-	visibleFields: NormalizedField< Item >[];
+	otherFields: NormalizedField< Item >[];
 	onDropdownTriggerKeyDown: React.KeyboardEventHandler< HTMLButtonElement >;
 }
 
@@ -134,10 +135,11 @@ function ListItem< Item >( {
 	idPrefix,
 	isSelected,
 	item,
+	titleField,
 	mediaField,
+	descriptionField,
 	onSelect,
-	primaryField,
-	visibleFields,
+	otherFields,
 	onDropdownTriggerKeyDown,
 }: ListViewItemProps< Item > ) {
 	const itemRef = useRef< HTMLDivElement >( null );
@@ -183,8 +185,8 @@ function ListItem< Item >( {
 		</div>
 	) : null;
 
-	const renderedPrimaryField = primaryField?.render ? (
-		<primaryField.render item={ item } />
+	const renderedTitleField = titleField?.render ? (
+		<titleField.render item={ item } />
 	) : null;
 
 	const usedActions = eligibleActions?.length > 0 && (
@@ -259,18 +261,23 @@ function ListItem< Item >( {
 					>
 						<HStack spacing={ 0 }>
 							<div
-								className="dataviews-view-list__primary-field"
+								className="dataviews-primary-field"
 								id={ labelId }
 							>
-								{ renderedPrimaryField }
+								{ renderedTitleField }
 							</div>
 							{ usedActions }
 						</HStack>
+						{ descriptionField?.render && (
+							<div className="dataviews-view-list__field">
+								<descriptionField.render item={ item } />
+							</div>
+						) }
 						<div
 							className="dataviews-view-list__fields"
 							id={ descriptionId }
 						>
-							{ visibleFields.map( ( field ) => (
+							{ otherFields.map( ( field ) => (
 								<div
 									key={ field.id }
 									className="dataviews-view-list__field"
@@ -310,20 +317,19 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 	const selectedItem = data?.findLast( ( item ) =>
 		selection.includes( getItemId( item ) )
 	);
-
-	const mediaField = fields.find(
-		( field ) => field.id === view.layout?.mediaField
-	);
-	const primaryField = fields.find(
-		( field ) => field.id === view.layout?.primaryField
+	const titleField = fields.find( ( field ) => field.id === view.titleField );
+	const mediaField = fields.find( ( field ) => field.id === view.mediaField );
+	const descriptionField = fields.find(
+		( field ) => field.id === view.descriptionField
 	);
-	const viewFields = view.fields || fields.map( ( field ) => field.id );
-	const visibleFields = fields.filter(
+	const otherFields = fields.filter(
 		( field ) =>
-			viewFields.includes( field.id ) &&
-			! [ view.layout?.primaryField, view.layout?.mediaField ].includes(
-				field.id
-			)
+			( view.fields ?? [] ).includes( field.id ) &&
+			! [
+				view.titleField,
+				view.mediaField,
+				view.descriptionField,
+			].includes( field.id )
 	);
 
 	const onSelect = ( item: Item ) =>
@@ -471,8 +477,9 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 						isSelected={ item === selectedItem }
 						onSelect={ onSelect }
 						mediaField={ mediaField }
-						primaryField={ primaryField }
-						visibleFields={ visibleFields }
+						titleField={ titleField }
+						descriptionField={ descriptionField }
+						otherFields={ otherFields }
 						onDropdownTriggerKeyDown={ onDropdownTriggerKeyDown }
 					/>
 				);
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..9fcbff3bde4873 100644
--- a/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
@@ -27,7 +27,6 @@ import type {
 	ViewTable as ViewTableType,
 	Operator,
 } from '../../types';
-import { getVisibleFieldIds } from '../index';
 
 const { Menu } = unlock( componentsPrivateApis );
 
@@ -62,43 +61,34 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 	}: HeaderMenuProps< Item >,
 	ref: Ref< HTMLButtonElement >
 ) {
-	const visibleFieldIds = getVisibleFieldIds( view, fields );
+	const visibleFieldIds = view.fields ?? [];
 	const index = visibleFieldIds?.indexOf( fieldId ) as number;
 	const isSorted = view.sort?.field === fieldId;
 	let isHidable = false;
 	let isSortable = false;
 	let canAddFilter = false;
-	let header;
 	let operators: Operator[] = [];
-
-	const combinedField = view.layout?.combinedFields?.find(
-		( f ) => f.id === fieldId
-	);
 	const field = fields.find( ( f ) => f.id === fieldId );
 
-	if ( ! combinedField ) {
-		if ( ! field ) {
-			// No combined or regular field found.
-			return null;
-		}
+	if ( ! field ) {
+		// No combined or regular field found.
+		return null;
+	}
 
-		isHidable = field.enableHiding !== false;
-		isSortable = field.enableSorting !== false;
-		header = field.header;
+	isHidable = field.enableHiding !== false;
+	isSortable = field.enableSorting !== false;
+	const header = field.header;
 
-		operators = sanitizeOperators( field );
-		// Filter can be added:
-		// 1. If the field is not already part of a view's filters.
-		// 2. If the field meets the type and operator requirements.
-		// 3. If it's not primary. If it is, it should be already visible.
-		canAddFilter =
-			! view.filters?.some( ( _filter ) => fieldId === _filter.field ) &&
-			!! field.elements?.length &&
-			!! operators.length &&
-			! field.filterBy?.isPrimary;
-	} else {
-		header = combinedField.header || combinedField.label;
-	}
+	operators = sanitizeOperators( field );
+	// Filter can be added:
+	// 1. If the field is not already part of a view's filters.
+	// 2. If the field meets the type and operator requirements.
+	// 3. If it's not primary. If it is, it should be already visible.
+	canAddFilter =
+		! view.filters?.some( ( _filter ) => fieldId === _filter.field ) &&
+		!! field.elements?.length &&
+		!! operators.length &&
+		! field.filterBy?.isPrimary;
 
 	return (
 		<Menu
diff --git a/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx b/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx
new file mode 100644
index 00000000000000..5eb6efdbe798ef
--- /dev/null
+++ b/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+import getClickableItemProps from '../utils/get-clickable-item-props';
+
+function ColumnPrimary< Item >( {
+	item,
+	titleField,
+	mediaField,
+	descriptionField,
+	onClickItem,
+	isItemClickable,
+}: {
+	item: Item;
+	titleField?: NormalizedField< Item >;
+	mediaField?: NormalizedField< Item >;
+	descriptionField?: NormalizedField< Item >;
+	onClickItem: ( item: Item ) => void;
+	isItemClickable: ( item: Item ) => boolean;
+} ) {
+	const isItemClickableField = ( i: Item ) => isItemClickable( i );
+
+	const clickableProps = getClickableItemProps(
+		item,
+		isItemClickableField,
+		onClickItem,
+		' dataviews-view-table__cell-content-wrapper dataviews-primary-field'
+	);
+	return (
+		<HStack spacing={ 3 } justify="flex-start">
+			{ mediaField && (
+				<div className="dataviews-view-table__cell-content-wrapper dataviews-column-primary__media">
+					<mediaField.render item={ item } />
+				</div>
+			) }
+			<VStack spacing={ 0 }>
+				{ titleField && (
+					<div { ...clickableProps }>
+						<titleField.render item={ item } />
+					</div>
+				) }
+				{ descriptionField && (
+					<descriptionField.render item={ item } />
+				) }
+			</VStack>
+		</HStack>
+	);
+}
+
+export default ColumnPrimary;
diff --git a/packages/dataviews/src/dataviews-layouts/table/index.tsx b/packages/dataviews/src/dataviews-layouts/table/index.tsx
index 7f93a4c14a7ddc..a4dfe4fc6454a7 100644
--- a/packages/dataviews/src/dataviews-layouts/table/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/index.tsx
@@ -7,11 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	Spinner,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
+import { Spinner } from '@wordpress/components';
 import { useEffect, useId, useRef, useState } from '@wordpress/element';
 
 /**
@@ -30,39 +26,15 @@ import type {
 	NormalizedField,
 	ViewTable as ViewTableType,
 	ViewTableProps,
-	CombinedField,
 } from '../../types';
 import type { SetSelection } from '../../private-types';
 import ColumnHeaderMenu from './column-header-menu';
-import { getVisibleFieldIds } from '../index';
-import getClickableItemProps from '../utils/get-clickable-item-props';
+import ColumnPrimary from './column-primary';
 
 interface TableColumnFieldProps< Item > {
-	primaryField?: NormalizedField< Item >;
-	field: NormalizedField< Item >;
-	item: Item;
-	isItemClickable: ( item: Item ) => boolean;
-	onClickItem: ( item: Item ) => void;
-}
-
-interface TableColumnCombinedProps< Item > {
-	primaryField?: NormalizedField< Item >;
-	fields: NormalizedField< Item >[];
-	field: CombinedField;
-	item: Item;
-	view: ViewTableType;
-	isItemClickable: ( item: Item ) => boolean;
-	onClickItem: ( item: Item ) => void;
-}
-
-interface TableColumnProps< Item > {
-	primaryField?: NormalizedField< Item >;
 	fields: NormalizedField< Item >[];
-	item: Item;
 	column: string;
-	view: ViewTableType;
-	isItemClickable: ( item: Item ) => boolean;
-	onClickItem: ( item: Item ) => void;
+	item: Item;
 }
 
 interface TableRowProps< Item > {
@@ -72,7 +44,9 @@ interface TableRowProps< Item > {
 	fields: NormalizedField< Item >[];
 	id: string;
 	view: ViewTableType;
-	primaryField?: NormalizedField< Item >;
+	titleField?: NormalizedField< Item >;
+	mediaField?: NormalizedField< Item >;
+	descriptionField?: NormalizedField< Item >;
 	selection: string[];
 	getItemId: ( item: Item ) => string;
 	onChangeSelection: SetSelection;
@@ -80,82 +54,24 @@ interface TableRowProps< Item > {
 	onClickItem: ( item: Item ) => void;
 }
 
-function TableColumn< Item >( {
-	column,
-	fields,
-	view,
-	...props
-}: TableColumnProps< Item > ) {
-	const field = fields.find( ( f ) => f.id === column );
-	if ( !! field ) {
-		return <TableColumnField { ...props } field={ field } />;
-	}
-	const combinedField = view.layout?.combinedFields?.find(
-		( f ) => f.id === column
-	);
-	if ( !! combinedField ) {
-		return (
-			<TableColumnCombined
-				{ ...props }
-				fields={ fields }
-				view={ view }
-				field={ combinedField }
-			/>
-		);
-	}
-
-	return null;
-}
-
 function TableColumnField< Item >( {
-	primaryField,
 	item,
-	field,
-	isItemClickable,
-	onClickItem,
+	fields,
+	column,
 }: TableColumnFieldProps< Item > ) {
-	const isPrimaryField = primaryField?.id === field.id;
-	const isItemClickableField = ( i: Item ) =>
-		isItemClickable( i ) && isPrimaryField;
+	const field = fields.find( ( f ) => f.id === column );
 
-	const clickableProps = getClickableItemProps(
-		item,
-		isItemClickableField,
-		onClickItem,
-		'dataviews-view-table__cell-content'
-	);
+	if ( ! field ) {
+		return null;
+	}
 
 	return (
-		<div
-			className={ clsx( 'dataviews-view-table__cell-content-wrapper', {
-				'dataviews-view-table__primary-field': isPrimaryField,
-			} ) }
-		>
-			<div { ...clickableProps }>
-				<field.render { ...{ item } } />
-			</div>
+		<div className="dataviews-view-table__cell-content-wrapper">
+			<field.render { ...{ item } } />
 		</div>
 	);
 }
 
-function TableColumnCombined< Item >( {
-	field,
-	...props
-}: TableColumnCombinedProps< Item > ) {
-	const children = field.children.map( ( child ) => (
-		<TableColumn key={ child } { ...props } column={ child } />
-	) );
-
-	if ( field.direction === 'horizontal' ) {
-		return (
-			<HStack spacing={ 3 } justify="flex-start">
-				{ children }
-			</HStack>
-		);
-	}
-	return <VStack spacing={ 0 }>{ children }</VStack>;
-}
-
 function TableRow< Item >( {
 	hasBulkActions,
 	item,
@@ -163,7 +79,9 @@ function TableRow< Item >( {
 	fields,
 	id,
 	view,
-	primaryField,
+	titleField,
+	mediaField,
+	descriptionField,
 	selection,
 	getItemId,
 	isItemClickable,
@@ -185,7 +103,8 @@ function TableRow< Item >( {
 	// `onClick` and can be used to exclude touchscreen devices from certain
 	// behaviours.
 	const isTouchDeviceRef = useRef( false );
-	const columns = getVisibleFieldIds( view, fields );
+	const columns = view.fields ?? [];
+	const hasPrimaryColumn = titleField || mediaField || descriptionField;
 
 	return (
 		<tr
@@ -228,12 +147,24 @@ function TableRow< Item >( {
 							selection={ selection }
 							onChangeSelection={ onChangeSelection }
 							getItemId={ getItemId }
-							primaryField={ primaryField }
+							primaryField={ titleField }
 							disabled={ ! hasPossibleBulkAction }
 						/>
 					</div>
 				</td>
 			) }
+			{ hasPrimaryColumn && (
+				<td>
+					<ColumnPrimary
+						item={ item }
+						titleField={ titleField }
+						mediaField={ mediaField }
+						descriptionField={ descriptionField }
+						isItemClickable={ isItemClickable }
+						onClickItem={ onClickItem }
+					/>
+				</td>
+			) }
 			{ columns.map( ( column: string ) => {
 				// Explicits picks the supported styles.
 				const { width, maxWidth, minWidth } =
@@ -241,14 +172,10 @@ function TableRow< Item >( {
 
 				return (
 					<td key={ column } style={ { width, maxWidth, minWidth } }>
-						<TableColumn
-							primaryField={ primaryField }
-							isItemClickable={ isItemClickable }
-							onClickItem={ onClickItem }
+						<TableColumnField
 							fields={ fields }
 							item={ item }
 							column={ column }
-							view={ view }
 						/>
 					</td>
 				);
@@ -322,12 +249,15 @@ function ViewTable< Item >( {
 		setNextHeaderMenuToFocus( fallback?.node );
 	};
 
-	const columns = getVisibleFieldIds( view, fields );
 	const hasData = !! data?.length;
 
-	const primaryField = fields.find(
-		( field ) => field.id === view.layout?.primaryField
+	const titleField = fields.find( ( field ) => field.id === view.titleField );
+	const mediaField = fields.find( ( field ) => field.id === view.mediaField );
+	const descriptionField = fields.find(
+		( field ) => field.id === view.descriptionField
 	);
+	const hasPrimaryColumn = titleField || mediaField || descriptionField;
+	const columns = view.fields ?? [];
 
 	return (
 		<>
@@ -361,6 +291,13 @@ function ViewTable< Item >( {
 								/>
 							</th>
 						) }
+						{ hasPrimaryColumn && (
+							<th scope="col">
+								<span className="dataviews-view-table-header">
+									{ __( 'Primary' ) }
+								</span>
+							</th>
+						) }
 						{ columns.map( ( column, index ) => {
 							// Explicits picks the supported styles.
 							const { width, maxWidth, minWidth } =
@@ -370,6 +307,7 @@ function ViewTable< Item >( {
 									key={ column }
 									style={ { width, maxWidth, minWidth } }
 									aria-sort={
+										view.sort?.direction &&
 										view.sort?.field === column
 											? sortValues[ view.sort.direction ]
 											: undefined
@@ -427,7 +365,9 @@ function ViewTable< Item >( {
 								fields={ fields }
 								id={ getItemId( item ) || index.toString() }
 								view={ view }
-								primaryField={ primaryField }
+								titleField={ titleField }
+								mediaField={ mediaField }
+								descriptionField={ descriptionField }
 								selection={ selection }
 								getItemId={ getItemId }
 								onChangeSelection={ onChangeSelection }
diff --git a/packages/dataviews/src/dataviews-layouts/table/style.scss b/packages/dataviews/src/dataviews-layouts/table/style.scss
index 3bbb045c73a9d9..5a713dd428c127 100644
--- a/packages/dataviews/src/dataviews-layouts/table/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/table/style.scss
@@ -222,3 +222,7 @@
 		--checkbox-input-size: 16px;
 	}
 }
+
+.dataviews-column-primary__media {
+	max-width: 60px;
+}
diff --git a/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts b/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts
index efb4a8f598c7b8..3d0fcad10edc41 100644
--- a/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts
+++ b/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts
@@ -2,14 +2,16 @@ export default function getClickableItemProps< Item >(
 	item: Item,
 	isItemClickable: ( item: Item ) => boolean,
 	onClickItem: ( item: Item ) => void,
-	className: string
+	className?: string
 ) {
 	if ( ! isItemClickable( item ) ) {
 		return { className };
 	}
 
 	return {
-		className: `${ className } ${ className }--clickable`,
+		className: className
+			? `${ className } ${ className }--clickable`
+			: undefined,
 		role: 'button',
 		tabIndex: 0,
 		onClick: ( event: React.MouseEvent ) => {
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 5639f3cac0da51..781682354c811d 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -3,6 +3,7 @@
 @import "./components/dataviews-filters/style.scss";
 @import "./components/dataviews-footer/style.scss";
 @import "./components/dataviews-pagination/style.scss";
+@import "./components/dataviews-primary-field/style.scss";
 @import "./components/dataviews-item-actions/style.scss";
 @import "./components/dataviews-selection-checkbox/style.scss";
 @import "./components/dataviews-view-config/style.scss";
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index 861dc53404f914..f00c56999f8a73 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -292,24 +292,21 @@ interface ViewBase {
 	 * The fields to render
 	 */
 	fields?: string[];
-}
-
-export interface CombinedField {
-	id: string;
-
-	label: string;
 
-	header?: string | ReactElement;
+	/**
+	 * Title field
+	 */
+	titleField?: string;
 
 	/**
-	 * The fields to use as columns.
+	 * Media field
 	 */
-	children: string[];
+	mediaField?: string;
 
 	/**
-	 * The direction of the stack.
+	 * Description field
 	 */
-	direction: 'horizontal' | 'vertical';
+	descriptionField?: string;
 }
 
 export interface ColumnStyle {
@@ -335,16 +332,6 @@ export interface ViewTable extends ViewBase {
 	type: 'table';
 
 	layout?: {
-		/**
-		 * The field to use as the primary field.
-		 */
-		primaryField?: string;
-
-		/**
-		 * The fields to use as columns.
-		 */
-		combinedFields?: CombinedField[];
-
 		/**
 		 * The styles for the columns.
 		 */
@@ -359,39 +346,12 @@ export interface ViewTable extends ViewBase {
 
 export interface ViewList extends ViewBase {
 	type: 'list';
-
-	layout?: {
-		/**
-		 * The field to use as the primary field.
-		 */
-		primaryField?: string;
-
-		/**
-		 * The field to use as the media field.
-		 */
-		mediaField?: string;
-	};
 }
 
 export interface ViewGrid extends ViewBase {
 	type: 'grid';
 
 	layout?: {
-		/**
-		 * The field to use as the primary field.
-		 */
-		primaryField?: string;
-
-		/**
-		 * The field to use as the media field.
-		 */
-		mediaField?: string;
-
-		/**
-		 * The fields to use as columns.
-		 */
-		columnFields?: string[];
-
 		/**
 		 * The fields to use as badge fields.
 		 */
diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js
index b6753334887573..8e42cf44a1eafe 100644
--- a/packages/edit-site/src/components/page-patterns/index.js
+++ b/packages/edit-site/src/components/page-patterns/index.js
@@ -41,11 +41,7 @@ const EMPTY_ARRAY = [];
 const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
 		layout: {
-			primaryField: 'title',
 			styles: {
-				preview: {
-					width: '1%',
-				},
 				author: {
 					width: '1%',
 				},
@@ -54,8 +50,6 @@ const defaultLayouts = {
 	},
 	[ LAYOUT_GRID ]: {
 		layout: {
-			mediaField: 'preview',
-			primaryField: 'title',
 			badgeFields: [ 'sync-status' ],
 		},
 	},
@@ -65,8 +59,10 @@ const DEFAULT_VIEW = {
 	search: '',
 	page: 1,
 	perPage: 20,
+	titleField: 'title',
+	mediaField: 'preview',
 	layout: defaultLayouts[ LAYOUT_GRID ].layout,
-	fields: [ 'title', 'sync-status' ],
+	fields: [ 'sync-status' ],
 	filters: [],
 };
 
diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js
index 828867e6f283de..778cf439b86259 100644
--- a/packages/edit-site/src/components/page-templates/index.js
+++ b/packages/edit-site/src/components/page-templates/index.js
@@ -38,25 +38,13 @@ const EMPTY_ARRAY = [];
 
 const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
-		fields: [ 'template', 'author' ],
+		mediaField: 'preview',
 		layout: {
-			primaryField: 'title',
-			combinedFields: [
-				{
-					id: 'template',
-					label: __( 'Template' ),
-					children: [ 'title', 'description' ],
-					direction: 'vertical',
-				},
-			],
 			styles: {
-				template: {
+				__primary: {
 					maxWidth: 400,
 					minWidth: 320,
 				},
-				preview: {
-					width: '1%',
-				},
 				author: {
 					width: '1%',
 				},
@@ -64,18 +52,12 @@ const defaultLayouts = {
 		},
 	},
 	[ LAYOUT_GRID ]: {
-		fields: [ 'title', 'description', 'author' ],
-		layout: {
-			mediaField: 'preview',
-			primaryField: 'title',
-			columnFields: [ 'description' ],
-		},
+		mediaField: 'preview',
+		layout: {},
 	},
 	[ LAYOUT_LIST ]: {
-		fields: [ 'title', 'description', 'author' ],
-		layout: {
-			primaryField: 'title',
-		},
+		mediaField: undefined,
+		layout: {},
 	},
 };
 
@@ -88,9 +70,11 @@ const DEFAULT_VIEW = {
 		field: 'title',
 		direction: 'asc',
 	},
-	fields: defaultLayouts[ LAYOUT_GRID ].fields,
-	layout: defaultLayouts[ LAYOUT_GRID ].layout,
+	titleField: 'title',
+	descriptionField: 'description',
+	fields: [ 'author' ],
 	filters: [],
+	...defaultLayouts[ LAYOUT_GRID ],
 };
 
 export default function PageTemplates() {
@@ -103,8 +87,6 @@ export default function PageTemplates() {
 		return {
 			...DEFAULT_VIEW,
 			type: usedType,
-			layout: defaultLayouts[ usedType ].layout,
-			fields: defaultLayouts[ usedType ].fields,
 			filters:
 				activeView !== 'all'
 					? [
@@ -115,6 +97,7 @@ export default function PageTemplates() {
 							},
 					  ]
 					: [],
+			...defaultLayouts[ usedType ],
 		};
 	}, [ layout, activeView ] );
 	const [ view, setView ] = useState( defaultView );
diff --git a/packages/edit-site/src/components/post-list/index.js b/packages/edit-site/src/components/post-list/index.js
index 200aa60ee17977..145a5e8243ac54 100644
--- a/packages/edit-site/src/components/post-list/index.js
+++ b/packages/edit-site/src/components/post-list/index.js
@@ -55,7 +55,7 @@ const getCustomView = ( editedEntityRecord ) => {
 
 	return {
 		...content,
-		layout: defaultLayouts[ content.type ]?.layout,
+		...defaultLayouts[ content.type ],
 	};
 };
 
diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
index 72f4c94fe6bcdd..f015e63cd5291c 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/default-views.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
@@ -29,25 +29,18 @@ import {
 export const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
 		layout: {
-			primaryField: 'title',
 			styles: {
-				title: {
+				__primary: {
 					maxWidth: 300,
 				},
 			},
 		},
 	},
 	[ LAYOUT_GRID ]: {
-		layout: {
-			mediaField: 'featured_media',
-			primaryField: 'title',
-		},
+		layout: {},
 	},
 	[ LAYOUT_LIST ]: {
-		layout: {
-			primaryField: 'title',
-			mediaField: 'featured_media',
-		},
+		layout: {},
 	},
 };
 
@@ -61,8 +54,10 @@ const DEFAULT_POST_BASE = {
 		field: 'date',
 		direction: 'desc',
 	},
-	fields: [ 'title', 'author', 'status' ],
-	layout: defaultLayouts[ LAYOUT_LIST ].layout,
+	titleField: 'title',
+	mediaField: 'featured_media',
+	fields: [ 'author', 'status' ],
+	...defaultLayouts[ LAYOUT_LIST ],
 };
 
 export function useDefaultViews( { postType } ) {