Display parent fields when hierarchy is active

packages/dataviews/src/dataviews-layouts/table/index.tsx

@@ -105,7 +105,7 @@ function TableRow< Item >( {
 	// `onClick` and can be used to exclude touchscreen devices from certain
 	// behaviours.
 	const isTouchDeviceRef = useRef( false );
-	const columns = view.fields ?? [];
+	const columns = getFieldsToDisplay( view );
 	const hasPrimaryColumn =
 		( titleField && showTitle ) ||
 		( mediaField && showMedia ) ||
@@ -208,6 +208,20 @@ function TableRow< Item >( {
 	);
 }
 
+const getFieldsToDisplay = ( view: ViewTableType ) => {
+	if (
+		! view.layout?.hierarchicalSort ||
+		typeof view.layout?.hierarchicalSort === 'boolean'
+	) {
+		return view.fields || [];
+	}
+
+	// Make parent field the first field after the primary column.
+	return Array.from(
+		new Set( [ view.layout?.hierarchicalSort, ...( view.fields || [] ) ] )
+	);
+};
+
 function ViewTable< Item >( {
 	actions,
 	data,
@@ -270,7 +284,7 @@ function ViewTable< Item >( {
 		( titleField && showTitle ) ||
 		( mediaField && showMedia ) ||
 		( descriptionField && showDescription );
-	const columns = view.fields ?? [];
+	const columns = getFieldsToDisplay( view );
 	const headerMenuRef =
 		( column: string, index: number ) => ( node: HTMLButtonElement ) => {
 			if ( node ) {

packages/dataviews/src/types.ts

@@ -360,7 +360,7 @@ export interface ViewTable extends ViewBase {
 		/**
 		 * Switch on/off hierarchical sorting.
 		 */
-		hierarchicalSort?: boolean;
+		hierarchicalSort?: boolean | string;
 	};
 }
 

packages/edit-site/src/components/sidebar-dataviews/default-views.js

@@ -29,7 +29,7 @@ import {
 export const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
 		layout: {
-			hierarchicalSort: true,
+			hierarchicalSort: 'parent',
 		},
 	},
 	[ LAYOUT_GRID ]: {},
@@ -48,7 +48,7 @@ const DEFAULT_POST_BASE = {
 	},
 	titleField: 'title',
 	mediaField: 'featured_media',
-	fields: [ 'parent', 'author', 'status' ],
+	fields: [ 'author', 'status' ],
 	...defaultLayouts[ LAYOUT_LIST ],
 };