feat(v-data-table): Add table rows grouping feature

[lzhoucs]

Description

This adds the ability to group rows by a specified column which can be a useful feature. Here is the demo: https://codepen.io/lzhoucs/pen/aadaJx

I know the current VDataTable implementation is going away in 2.0 when #3833 is landed, so I understand if this PR won't be accepted. Our current project has a requirement for this feature, which is the primary reason for working on this.

This is my first PR, please let me know if there's any questions or issues. Thanks!

Motivation and Context

Resolves #3180

How Has This Been Tested?

• unit tests
• playground

Markup:

<template>
  <v-app>
    <v-content>
      <v-container fluid>
        <div>
          <h2>Grouping Table</h2>
          <v-data-table :headers="headers" :items="desserts" hide-actions item-key="name" group-key="category">

            <template slot="group" slot-scope="props">
              <span class="font-weight-bold">Group {{props.groupIndex + 1}} - {{props.groupName}}</span>
            </template>

            <template slot="items" slot-scope="props">
              <tr>
                <td>{{ props.item.name }}</td>
                <td>{{ props.item.calories }}</td>
                <td>{{ props.item.fat }}</td>
                <td>{{ props.item.carbs }}</td>
                <td>{{ props.item.protein }}</td>
                <td>{{ props.item.iron }}</td>
              </tr>
            </template>

          </v-data-table>
        </div>

      </v-container>
    </v-content>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name'
        },
        {text: 'Calories', value: 'calories' },
        {text: 'Fat (g)', value: 'fat' },
        {text: 'Carbs (g)', value: 'carbs' },
        {text: 'Protein (g)', value: 'protein' },
        {text: 'Iron (%)', value: 'iron' }
      ],
      desserts: [
        {
          value: false,
          name: 'Orange Juice',
          category: 'Beverage',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%'
        },
        {
          value: false,
          name: 'Larabar',
          category: 'Snack',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%'
        },
        {
          value: false,
          name: 'Donut',
          category: 'Breakfast',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%'
        },

        {
          value: false,
          name: 'Bagel',
          category: 'Breakfast',
          calories: 999,
          fat: 28.0,
          carbs: 151,
          protein: 2.9,
          iron: '29%'
        },
        {
          value: false,
          name: 'KitKat',
          category: 'Snack',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%'
        }
      ]
    })
  }
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes, dev for new features and breaking changes).
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have created a PR in the documentation with the necessary changes.

[codecov]

Codecov Report

Merging #4966 into dev will increase coverage by 0.09%.
The diff coverage is 96.42%.

@@            Coverage Diff             @@
##              dev    #4966      +/-   ##
==========================================
+ Coverage   88.97%   89.07%   +0.09%     
==========================================
  Files         230      230              
  Lines        5415     5437      +22     
  Branches     1382     1387       +5     
==========================================
+ Hits         4818     4843      +25     
+ Misses        478      475       -3     
  Partials      119      119

Impacted Files	Coverage Δ
src/components/VDataTable/VDataTable.js	100% <ø> (ø)	⬆️
src/components/VDataTable/mixins/body.js	81.81% <100%> (+11.44%)	⬆️
src/mixins/data-iterable.js	77.12% <90%> (+0.77%)	⬆️
src/components/VDataTable/mixins/head.js	87.5% <0%> (+5.35%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 96c4391...ad2fc5c. Read the comment docs.

[johnleider]

@nekosaur is working on an extensive rewrite. I would advise reaching out and applying this functionality there if possible.

Thank you for the Feature Request and interest in improving Vuetify. Unfortunately this is not functionality
that we are looking to implement at this time.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord