vuetify data table expanded icon example

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    item-key="name"
    show-expand
    :expanded.sync="expandedItems"
  >
    <template v-slot:top>
      <v-toolbar flat color="white">
        <v-toolbar-title>Expandable Rows</v-toolbar-title>
      </v-toolbar>
    </template>

    <template v-slot:expanded-item="{ item }">
      <td :colspan="headers.length + 1">
        <v-card>
          <v-card-text>
            {{ item.name }}'s details here
          </v-card-text>
        </v-card>
      </td>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      expandedItems: [],
      headers: [
        { text: 'Dessert', 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: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        // Other dessert items...
      ],
    };
  },
};
</script>

This Vue code demonstrates the implementation of an expandable data table using Vuetify's v-data-table component. Here's a breakdown of the key sections:

• Template Section:
• Uses v-data-table to create a table component.
• headers and desserts arrays are bound to the table for column information and data respectively.
• show-expand enables the expandable row functionality.
• expanded.sync syncs the expanded state of the rows to the expandedItems array.

• Utilizes slots (v-slot) for custom rendering:

  • top slot is used to display a toolbar at the top of the table.
  • expanded-item slot is used to display expanded row content.

• Script Section:

• data() method initializes the component's data.
• expandedItems keeps track of expanded rows.
• headers array defines the headers for the table columns.
• desserts array contains sample dessert data.

The expandable rows feature allows users to view additional details of each dessert item by clicking on the expand icon in the table. Adjustments can be made to the headers and desserts arrays to accommodate different data or columns.