How to group view by field and display row results below?

Question

We have a content type Basic Page that is supposed to be grouped by a taxonomy term field Page Type that has the following values below in a view.

How can we setup the view so that the view will display the Page Type in one group and the results in another group? Is this even possible without a hook_preprocess_hook() or custom twig template?

View Setup:

• Display: Block (`block_1')
• Format: Unformatted
• Format Setting: Grouping field nr. 1: Page Type, User rendered output to group rows = true
• Show: fields
• Show Settings: Inline fields --> Page Type
• Fields: Page Type, Title, field_description
• Filter Criteria: Published = true, Content type = Basic Page
• Sort Criteria: Page Type (asc)

Page Type Values:

• Blog
• Press Release
• Video
• Document

Current results:

<section class="views-content">
  <div class="view-row">
    <div> Blog </div>
    <h3> Page Title1 </h3>
    <div> Continually negotiate bleeding-edge materials through installed.</div>
  </div>
  <div class="view-row">
    <div> Blog </div>
    <h3> Page Title2 </h3>
    <div> Collaboratively disseminate global customer service for..</div>
  </div>
  <div class="view-row">
    <div> Blog </div>
    <h3> Page Title3 </h3>
    <div> Continually evolve enterprise-wide total linkage through..</div>
  </div>
  <div class="view-row">
    <div> Press Release </div>
    <h3> Page Title4 </h3>
    <div> Energistically productize competitive sources after standards..</div>
  </div>
  <div class="view-row">
    <div> Video </div>
    <h3> Page Title5 </h3>
    <div>Professionally implement principle-centered portals without efficient..</div>
  </div>
  <div class="view-row">
    <div> Video </div>
    <h3> Page Title6 </h3>
    <div> Uniquely fabricate high-quality testing procedures with..</div>
  </div>
</section>

Desired results:

<section class="views-content">
  <div class="view-groups">
    <div> Blog </div>
    <div> Press Release </div>
    <div> Video </div>
  </div>
  <div class="view-row">
    <h3> Page Title1 </h3>
    <div> Continually negotiate bleeding-edge materials through installed.</div>
  </div>
  <div class="view-row">
    <h3> Page Title2 </h3>
    <div> Collaboratively disseminate global customer service for..</div>
  </div>
  <div class="view-row">
    <h3> Page Title3 </h3>
    <div> Continually evolve enterprise-wide total linkage through..</div>
  </div>
  <div class="view-row">
    <h3> Page Title4 </h3>
    <div> Energistically productize competitive sources after standards..</div>
  </div>
  <div class="view-row">
    <h3> Page Title5 </h3>
    <div>Professionally implement principle-centered portals without efficient..</div>
  </div>
  <div class="view-row">
    <h3> Page Title6 </h3>
    <div> Uniquely fabricate high-quality testing procedures with..</div>
  </div>
</section>

Answer 1

What you're trying to achieve isn't grouping by a field, it is displaying the same node list twice, showing different node information in the two instances.

You can achieve it by creating two Displays in your Views where one is showing only Page Type field, and the other is showing Title and field_description while sharing the same Filters.

If your original View is a Page Display, it makes sense to use Attachment Display for the other. You adjust the Attachment to appear Before or After the other Display results, depending on which you created first. You could also make one or both of them Block Displays and place them one below the other in the Content region of your theme.

You could also render one View Display into another Display Header, with the help of an additional module Views Field View.

Your HTML won't be exactly the same as in your question, but it will be close enough, and you can override the templates in your theme for those particular views displays to achieve exactly the output you want. Attachment views usually show with their own class and view-rows outside the .views-content of the Display they're attached to, but if you really need to you can override them and set your own classes.

Drawing from Drupal 7 solution

I posted an answer to a similar question for Drupal 7: Filter a view by clicking on a link on another view. It doesn't completely mirror to D8 but with Better Exposed filters you can make an exposed filter behave similar to tabs, if you use Autosubmit optin and hide the Submit button.

Taxonomy summary through a Contextual filter

One additional way of listing only the terms used on nodes in Views results is by creating a Summary through a Contextual filter.

1. On your Content Views Page add a Relationship to the Page Type field, you may require it since none of your results will have it empty.
2. Then add a Contextual filter Term ID from Taxonomy term Category and set it to use the Relationship from above, and these options:
   When the filter value is NOT in the URL
   Display a summary
   Descending
   Number of records
   Base path (if this is not the first Page Display in your Views)
3. Add Attachment View Display to this Page, keep all the options the same as in Page, only override the Contextual filter and remove it from Attachment.

This way you get the original list of nodes, after the terms relevant to the results.

The terms are already sorted by the number of results tagged with it. To make the nodes in the Attachment sort the same way use Aggregation on it.