Playground.datatable.vue

<template>
  <v-app>
    <v-navigation-drawer fixed app stateless :value="true">
      <v-list dense>
        <v-list-tile v-for="example in examples" :key="example.value" @click="current = example.value" :class="[current === example.value && 'blue']">
          <v-list-tile-content>
            <v-list-tile-title>{{ example.name }}</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-content>
      <v-container fluid fill-height grid-list-lg>
        <v-layout align-center justify-center>
          <v-flex xs8 text-xs-center v-if="current === 'iterator'" key="iterator">
            <v-data-iterator :items="desserts" :items-per-page="5">
              <v-container slot-scope="props" grid-list-lg fluid>
                <v-layout row wrap>
                  <v-flex xs4 v-for="(item, i) in props.items" :key="i">
                    <v-card>
                      <v-card-text>
                        {{ item.name }}
                      </v-card-text>
                    </v-card>
                  </v-flex>
                </v-layout>
              </v-container>
              <v-data-footer slot="append" slot-scope="{ pagination, options, updateOptions }"
                :pagination="pagination"
                :options="options"
                @update:options="updateOptions"
              ></v-data-footer>
            </v-data-iterator>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'simple'" key="simple">
            <v-simple-table>
              <thead>
                <tr>
                  <th>Name</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in desserts" :key="item.name">
                  <td>{{ item.name }}</td>
                </tr>
              </tbody>
            </v-simple-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'basic'" key="basic">
            <v-data-table :items="desserts" :headers="headers"></v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'itemSlot'" key="itemSlot">
            <v-data-table :items="desserts" :headers="headers">
              <tr slot="item" slot-scope="props">
                <td class="text-xs-left red--text">{{ props.item.name }}</td>
                <td class="text-xs-left blue--text">{{ props.item.calories }}</td>
                <td class="text-xs-left green--text">{{ props.item.fat }}</td>
              </tr>
            </v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'columnSlots'" key="columnSlots">
            <v-data-table
              :items="desserts"
              :headers="headers"
            >
              <template slot="header.name" slot-scope="header">{{ header.text.toUpperCase() }}</template>
              <template slot="item.column.name" slot-scope="column">{{ column.value.toUpperCase() }}</template>
              <span slot="item.column.calories" slot-scope="column" :class="[column.value > 350 && 'red--text']">{{ column.value }}</span>
            </v-data-table>
            <v-alert type="info">
              Is it strange/inconsistent that column slot is for column content, not the td element, compared to item slot which is the tr element?

              My reasoning is that the most common use-case is probably to customize the content inside, and that one can use the classes prop on headers to target css.
            </v-alert>
          </v-flex>

           <v-flex xs8 text-xs-center v-if="current === 'basicSelection'" key="basicSelection">
            <v-data-table :items="desserts" :headers="headers" show-select item-key="name" :items-per-page="3"></v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'customSelection'" key="customSelection">
            <v-switch v-model="customSelection.disableSelect" label="Toggle selects disabled state"></v-switch>
            <v-data-table :items="desserts" :headers="headers" show-select item-key="name" :items-per-page="3">
              <v-simple-checkbox slot="header.dataTableSelect" slot-scope="{ props, on }" v-bind="props" v-on="on" :disabled="customSelection.disableSelect"></v-simple-checkbox>
              <v-simple-checkbox slot="item.dataTableSelect" slot-scope="{ props, on }" v-bind="props" v-on="on" :disabled="customSelection.disableSelect"></v-simple-checkbox>
            </v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'singleSelect'" key="singleSelect">
            <v-data-table :items="desserts" :headers="headers" single-select item-key="name" v-model="singleSelect.selected">
              <v-row slot="item" slot-scope="{ item, headers, select }"
                :item="item"
                :headers="headers"
                :class="[select.props.value && 'selected']"
                @click="select.on.input(!select.props.value)"
              ></v-row>
            </v-data-table>
            <v-card class="mt-3">
              <v-card-text>{{ singleSelect.selected.length ? singleSelect.selected[0] : 'nothing' }}</v-card-text>
            </v-card>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'selectionItemSlot'" key="selectionItemSlot">
            <v-data-table :items="desserts" :headers="headers" show-select item-key="name">
              <tr slot="item" slot-scope="{ item, select }">
                <td>
                  <v-simple-checkbox v-bind="select.props" v-on="select.on"></v-simple-checkbox>
                </td>
                <td class="text-xs-left red--text">{{ item.name }}</td>
                <td class="text-xs-left blue--text">{{ item.calories }}</td>
                <td class="text-xs-left green--text">{{ item.fat }}</td>
              </tr>
            </v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'basicSorting'" key="basicSorting">
            <v-data-table
              :items="desserts"
              :headers="headers"
              :sort-by.sync="basicSorting.sortBy"
              :must-sort="basicSorting.mustSort"
              :footer-props="{ showFirstLastPage: basicSorting.showFirstLastPage }"
            ></v-data-table>
            <v-select :items="basicSorting.select" v-model="basicSorting.sortBy"></v-select>
            <v-btn @click="basicSorting.mustSort = !basicSorting.mustSort">must sort: {{ basicSorting.mustSort }}</v-btn>
            <v-btn @click="basicSorting.showFirstLastPage = !basicSorting.showFirstLastPage">show First Last Page: {{ basicSorting.showFirstLastPage }}</v-btn>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'multiSort'" key="multiSort">
            <v-data-table
              :items="multiSort.items"
              :headers="multiSort.headers"
              :multi-sort="multiSort.multiSort"
              :sort-by="multiSort.sortBy"
            ></v-data-table>
            <v-btn @click="multiSort.multiSort = !multiSort.multiSort">multi sort:  {{ multiSort.multiSort }}</v-btn>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'columnSort'" key="columnSort">
            <h4>Name is sorted in reverse order</h4>
            <v-data-table
              :items="columnSort.items"
              :headers="columnSort.headers"
            ></v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'nonEnglishSorting'" key="nonEnglishSorting">
            <v-select :items="nonEnglishSorting.locales" v-model="nonEnglishSorting.locale"></v-select>
            <v-data-table
              :items="nonEnglishSorting.items"
              :headers="nonEnglishSorting.headers"
              :locale="nonEnglishSorting.locale"
              sort-by="name"
            ></v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'basicFiltering'" key="basicFiltering">
            <v-text-field v-model="basicFiltering.search" label="Search"></v-text-field>
            <v-data-table
              :items="desserts"
              :headers="headers"
              :search="basicFiltering.search"
            ></v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'columnFiltering'" key="columnFiltering">
            <v-data-table
              :items="desserts"
              :headers="columnFiltering.headers"
              calculate-widths
            >
              <div slot="footer" slot-scope="props" class="d-flex">
                <div class="pa-2" :style="`width: ${props.widths[0]}px`">
                  <v-text-field v-model="columnFiltering.name" single-line hide-details></v-text-field>
                </div>
                <div class="pa-2" :style="`width: ${props.widths[1]}px`">
                  <v-text-field v-model="columnFiltering.calories" single-line hide-details></v-text-field>
                </div>
                <div class="pa-2" :style="`width: ${props.widths[2]}px`">
                  <v-text-field v-model="columnFiltering.fat" single-line hide-details></v-text-field>
                </div>
              </div>
            </v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'groupBy'" key="groupBy">
            <v-data-table
              :items="groupBy.items"
              :headers="groupBy.headers"
              :group-by="groupBy.groupBy"
              show-group-by
            >
              <td slot="group.summary" slot-scope="props" :colspan="props.headers.length">summary row</td>
            </v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'groupBySelect'" key="groupBySelect">
            <v-data-table
              :items="groupBy.items"
              :headers="groupBy.headers"
              :group-by="groupBy.groupBy"
              show-select
            ></v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'groupBySlot'" key="groupBySlot">
            <v-data-table
              :items="groupBy.items"
              :headers="groupBy.headers"
              :group-by="groupBy.groupBy"
            >
              <v-row-group slot="group" slot-scope="props">
                <tr slot="row.header" class="v-row-group__header grey lighten-3">
                  <td :colspan="props.headers.length" class="text-xs-left">{{ props.group }}</td>
                </tr>
                <v-row slot="row.content" v-for="(item, i) in props.items" :key="`${props.group}_${i}`" :headers="props.headers" :item="item"></v-row>
                <tr slot="row.summary" class="v-row-group__header grey lighten-4">
                  <td :colspan="props.headers.length" class="text-xs-left">Total age: {{ props.items.reduce((t, i) => t + i.age, 0) }}</td>
                </tr>
              </v-row-group>
            </v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'empty'" key="empty">
            <v-data-table :items="[]" :headers="headers"></v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'externalControl'" key="externalControl">
            <v-data-table
              :items="desserts"
              :headers="headers"
              :page.sync="externalControl.page"
              :items-per-page.sync="externalControl.itemsPerPage"
              :sort-by.sync="externalControl.sortBy"
              :sort-desc.sync="externalControl.sortDesc"
            ></v-data-table>
            <v-text-field label="Page" :value="externalControl.page" @input="externalControl.page = Number($event)" type="number" min="1" max="2"></v-text-field>
            <v-text-field label="Items per page" :value="externalControl.itemsPerPage" @input="externalControl.itemsPerPage = Number($event)" type="number" min="-1" max="15"></v-text-field>
            <v-select :items="externalControl.columns" v-model="externalControl.sortBy" label="Sort by"></v-select>
            <v-switch v-model="externalControl.sortDesc" label="Sort desc" :disabled="!externalControl.sortBy"></v-switch>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'expanded'" key="expanded">
            <v-switch v-model="expanded.showSelect" label="show select"></v-switch>
            <v-switch v-model="expanded.showExpand" label="show expand"></v-switch>
            <v-data-table
              :items="desserts"
              :headers="expanded.headers"
              item-key="name"
              :show-expand="expanded.showExpand"
              :show-select="expanded.showSelect"
            >
              <span slot="item.name" slot-scope="props">
                {{ props.value.toUpperCase() }}
              </span>
              <td slot="item.expanded" slot-scope="props" :colspan="props.headers.length">
                hello
              </td>
            </v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'customExpanded'" key="customExpanded">
            <v-data-table :items="desserts" :headers="customExpanded.headers" :items-per-page="10" item-key="name" :expanded.sync="customExpanded.expanded">
              <v-row-group slot="item" slot-scope="{ item, headers, expand }" :value="expand.props.value">
                <v-row
                  slot="row.header"
                  :item="item"
                  :headers="headers"
                  :class="[expand.props.value && 'expanded expanded__row']"
                  @click="expand.on.input(!expand.props.value)"
                ></v-row>
                <tr slot="row.content" class="expanded expanded__content">
                  <td :colspan="headers.length" class="text-xs-left">
                    asdasdasd
                  </td>
                </tr>
              </v-row-group>
            </v-data-table>
            {{ customExpanded.expanded }}
            <v-btn @click="customExpanded.expandAll">expand all</v-btn>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'fixedHeader'" key="fixedHeader">
            <v-data-table :items="desserts" :headers="headers" height="200px"></v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'customProvide'" key="customProvide">
            <v-data-table
              :items="desserts"
              :headers="headers"
              hide-default-header
              hide-default-footer
            >
              <v-data-table-header slot="header" slot-scope="{ props, on }"
                class="red"
                v-bind="props"
                v-on="on"
              >
                <span slot="text" slot-scope="props">{{ props.header.text.toUpperCase() }}</span>
              </v-data-table-header>
              <v-data-footer slot="footer" slot-scope="{ props, on }"
                class="red"
                v-bind="props"
                v-on="on"
              ></v-data-footer>
            </v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'static'" key="static">
            <v-data-table static>
              <thead>
                <tr>
                  <th>First</th>
                  <th>Second</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Hello</td>
                  <td>world</td>
                </tr>
                <tr>
                  <td>Hello</td>
                  <td>world</td>
                </tr>
              </tbody>
            </v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'columnWidth'" key="columnWidth">
            <v-data-table
              :items="desserts"
              :headers="columnWidth.headers"
            ></v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'initialPage'" key="initialPage">
            <v-data-table
              :items="desserts"
              :headers="headers"
              :items-per-page="5"
              :page="initialPage.page"
            ></v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'pageNumberFooter'" key="pageNumberFooter">
            <v-data-table
              :items="desserts"
              :headers="headers"
              :items-per-page="5"
              :footer-props="{ showCurrentPage: true }"
            ></v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'bodySlot'" key="bodySlot">
            <v-data-table
              :items="desserts"
              :headers="headers"
            >
              <tbody slot="body" slot-scope="props">
                <v-row functional v-for="(item, i) in props.items" :key="i" :item="item" :headers="props.headers"></v-row>
              </tbody>
            </v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'virtualized'" key="virtualized">
            <v-data-table
              :items="virtualized.items"
              :headers="virtualized.headers"
              :items-per-page="-1"
              hide-default-footer
              :height="500"
              virtual-rows
              show-select
            ></v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'serverData'" key="serverData">
            <v-data-table
              :items="serverData.items"
              :headers="headers"
              :server-items-length="serverData.serverItemsLength"
              :loading="serverData.loading"
              :options="serverData.options"
              @update:options="serverData.load($event)"
              :footer-props="{ disablePagination: serverData.loading, disableItemsPerPage: serverData.loading }"
            ></v-data-table>
            <v-btn @click="serverData.load(serverData.options)">load</v-btn>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'rtl'" key="rtl">
            <v-data-table
              :items="desserts"
              :headers="headers"
            ></v-data-table>
            <v-btn @click="$vuetify.rtl = !$vuetify.rtl">toggle rtl</v-btn>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'caption'" key="caption">
            <v-data-table
              :items="desserts"
              :headers="headers"
              caption="This is a data-table caption"
            ></v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'dividers'" key="dividers">
            <v-data-table
              :items="desserts"
              :headers="dividers.headers"
            ></v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'resizable'" key="resizable">
            <v-data-table
              :items="desserts"
              :headers="resizable.headers"
            ></v-data-table>
          </v-flex>

          <v-flex xs8 text-xs-center v-if="current === 'mobileView'" key="mobileView">
            <v-switch label="show select" v-model="mobileView.showSelect"></v-switch>
            <v-switch label="multi sort" v-model="mobileView.multiSort"></v-switch>
            <v-switch label="must sort" v-model="mobileView.mustSort"></v-switch>
            <v-data-table
              :items="desserts"
              :headers="headers"
              :multi-sort="mobileView.multiSort"
              :must-sort="mobileView.mustSort"
              mobile-breakpoint="lg"
              item-key="name"
              :show-select="mobileView.showSelect"
            ></v-data-table>
          </v-flex>

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


<script>
const names = ['Albert', 'John', 'Kael', 'Jacek']
const longList = [...Array(10000).keys()].map(i => ({
  id: i,
  name: names[Math.floor(Math.random() * 4)]
}))

export default {
  computed: {
    longList () {
      const items = []
      for (let i = 0; i < 10; i++) {
        items.push(...this.desserts)
      }
      return items
    }
  },

  data: (vm) => ({
    virtualized: {
      headers: [
        { text: 'ID', value: 'id', align: 'left' },
        { text: 'Name', value: 'name', align: 'left' },
      ],
      items: longList
    },
    mobileView: {
      multiSort: false,
      mustSort: false,
      showSelect: false
    },
    dividers: {
      headers: [
        { text: 'Name', value: 'name', align: 'left', divider: true },
        { text: 'Calories', value: 'calories', align: 'left', divider: true },
        { text: 'Fat', value: 'fat', align: 'left' }
      ]
    },
    resizable: {
      headers: [
        { text: 'Name', value: 'name', align: 'left', resizable: true },
        { text: 'Calories', value: 'calories', align: 'left' },
        { text: 'Fat', value: 'fat', align: 'left' }
      ]
    },
    serverData: {
      items: [],
      options: {
        page: 1,
        itemsPerPage: 5,
        sortBy: ['calories'],
        sortDesc: [true]
      },
      serverItemsLength: 0,
      loading: false,
      load: ({ page, itemsPerPage, sortBy, sortDesc }) => {
        console.log(page, itemsPerPage, sortBy, sortDesc)
        vm.serverData.loading = true
        vm.serverData.options = {
          page,
          itemsPerPage,
          sortBy,
          sortDesc
        }
        let items = vm.desserts.slice()

        sortBy = sortBy[0]
        sortDesc = sortDesc[0]

        if (sortBy) {
          items = items.sort((a, b) => {
            const sortA = a[sortBy]
            const sortB = b[sortBy]

            if (sortDesc) {
              if (sortA < sortB) return 1
              if (sortA > sortB) return -1
              return 0
            } else {
              if (sortA < sortB) return -1
              if (sortA > sortB) return 1
              return 0
            }
          })
        }

        if (itemsPerPage > 0) {
          items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
        }

        setTimeout(() => {
          vm.serverData.items = items
          vm.serverData.serverItemsLength = vm.desserts.length
          vm.serverData.loading = false
        }, 1000)
      }
    },
    nonEnglishSorting: {
      headers: [
        {
          text: 'Name',
          value: 'name'
        },
      ],
      items: [
        { value: false, name: 'Anna', },
        { value: false, name: 'Ämna', },
        { value: false, name: 'Lidia', },
        { value: false, name: 'Łucja', },
        { value: false, name: 'Robert', },
        { value: false, name: 'Walter', },
        { value: false, name: 'álter', },
        { value: false, name: 'Úrbano' },
        { value: false, name: 'Würst' },
        { value: false, name: 'Wäb' }
      ],
      locales: [
        { value: 'sv-SE', text: 'Swedish' },
        { value: 'de-DE', text: 'German' }
      ],
      locale: 'sv-SE'
    },
    customExpanded: {
      headers: [
        { text: 'Name', value: 'name', align: 'left' },
        { text: 'Calories', value: 'calories', align: 'left' },
        { text: 'Fat', value: 'fat', align: 'left' }
      ],
      expanded: [],
      expandAll: () => {
        vm.customExpanded.expanded = vm.desserts
      }
    },
    expanded: {
      headers: [
        { text: 'Name', value: 'name', align: 'left' },
        { text: 'Calories', value: 'calories', align: 'left' },
        { text: 'Fat', value: 'fat', align: 'left' }
      ],
      showSelect: false,
      showExpand: true,
      expanded: [],
      expandAll: () => {
        vm.expanded.expanded = vm.desserts
      }
    },
    initialPage: {
      page: 2
    },
    columnWidth: {
      headers: [
        { text: 'Name', value: 'name', align: 'left', width: '500px' },
        { text: 'Calories', value: 'calories', align: 'left', width: '100px' },
        { text: 'Fat', value: 'fat', align: 'left', width: '100px' }
      ]
    },
    groupBy: {
      items: [
        { id: 0, name: 'Eve', gender: 'Female', age: 45 },
        { id: 1, name: 'Eve', gender: 'Female', age: 30 },
        { id: 2, name: 'Adam', gender: 'Male', age: 15 },
        { id: 3, name: 'Adam', gender: 'Male', age: 20 },
        { id: 4, name: 'Billy', gender: 'Male', age: 8 },
        { id: 5, name: 'Bertha', gender: 'Female', age: 80 }
      ],
      headers: [
        { value: 'name', text: 'Name' },
        { value: 'gender', text: 'Gender' },
        { value: 'age', text: 'Age' }
      ],
      groupBy: 'gender'
    },
    basicSorting: {
      sortBy: 'calories',
      mustSort: false,
      multiSort: false,
      showFirstLastPage: false,
      select: [
        { value: 'name', text: 'Name' },
        { value: 'calories', text: 'Calories' },
        { value: 'fat', text: 'Fat' },
      ]
    },
    basicFiltering: {
      search: null
    },
    columnFiltering: {
      name: null,
      calories: null,
      fat: null,
      headers: [
        { text: 'Name', value: 'name', align: 'left', filter: v => !vm.columnFiltering.name || v.toString().toLowerCase().indexOf(vm.columnFiltering.name) > -1 },
        { text: 'Calories', value: 'calories', align: 'left', filter: v => !vm.columnFiltering.calories || v.toString().toLowerCase().indexOf(vm.columnFiltering.calories) > -1 },
        { text: 'Fat', value: 'fat', align: 'left', filter: v => !vm.columnFiltering.fat || v.toString().toLowerCase().indexOf(vm.columnFiltering.fat) > -1 }
      ],
    },
    multiSort: {
      items: [
        { id: 0, name: 'Eve', gender: 'Female', age: 45 },
        { id: 1, name: 'Eve', gender: 'Female', age: 30 },
        { id: 2, name: 'Adam', gender: 'Male', age: 15 },
        { id: 3, name: 'Adam', gender: 'Male', age: 20 },
        { id: 4, name: 'Billy', gender: 'Male', age: 8 },
        { id: 5, name: 'Bertha', gender: 'Female', age: 80 }
      ],
      headers: [
        { value: 'name', text: 'Name' },
        { value: 'gender', text: 'Gender' },
        { value: 'age', text: 'Age' }
      ],
      sortBy: 'gender',
      multiSort: true
    },
    columnSort: {
      items: [
        { name: 'Adam', age: 20 },
        { name: 'George', age: 50 },
        { name: 'Wyatt', age: 10 },
        { name: 'Charlie', age: 90 },
        { name: 'Danny', age: 70 }
      ],
      headers: [
        {
          value: 'name',
          text: 'Name',
          sort: (a, b) => {
            if (a < b) return 1
            else if (a > b) return -1
            else return 0
          }
        },
        { value: 'age', text: 'Age' }
      ]
    },
    singleSelect: {
      selected: []
    },
    externalControl: {
      page: 1,
      itemsPerPage: 5,
      sortBy: 'name',
      sortDesc: false,
      columns: ['name', 'calories', 'fat']
    },
    customSelection: {
      disableSelect: false
    },
    current: 'iterator',
    examples: [
      { value: 'iterator', name: 'Iterator' },
      { value: 'basic', name: 'Basic' },
      { value: 'simple', name: 'Simple' },
      { value: 'itemSlot', name: 'Item slot' },
      { value: 'columnSlots', name: 'Custom column slots' },
      { value: 'basicSelection', name: 'Basic selection' },
      { value: 'customSelection', name: 'Custom selection' },
      { value: 'singleSelect', name: 'Single select' },
      { value: 'selectionItemSlot', name: 'Selection with item slot' },
      { value: 'basicSorting', name: 'Basic sorting' },
      { value: 'multiSort', name: 'Multi sort' },
      { value: 'columnSort', name: 'Sort per column' },
      { value: 'nonEnglishSorting', name: 'Non-english sorting (#3672)' },
      { value: 'basicFiltering', name: 'Basic filtering' },
      { value: 'columnFiltering', name: 'Filter per column' },
      { value: 'groupBy', name: 'Group by column' },
      { value: 'groupBySelect', name: 'Group by column with select' },
      { value: 'groupBySlot', name: 'Group by column with slot' },
      { value: 'empty', name: 'Empty' },
      { value: 'externalControl', name: 'External control' },
      { value: 'expanded', name: 'Expanded' },
      { value: 'customExpanded', name: 'Custom Expanded' },
      { value: 'fixedHeader', name: 'Fixed header' },
      { value: 'customProvide', name: 'Custom header/footer with provide' },
      { value: 'static', name: 'Static' },
      { value: 'columnWidth', name: 'Column width' },
      { value: 'initialPage', name: 'Initial page (#4949)' },
      { value: 'pageNumberFooter', name: 'Show page number (#4701)' },
      { value: 'bodySlot', name: 'Body slot (#4553)' },
      { value: 'virtualized', name: 'Virtualized' },
      { value: 'serverData', name: 'Server data' },
      { value: 'rtl', name: 'RTL' },
      { value: 'caption', name: 'Caption' },
      { value: 'dividers', name: 'Column dividers (#3364)' },
      { value: 'resizable', name: 'Resizable columns (#3278)' },
      { value: 'mobileView', name: 'Mobile view' },
    ],
    headers: [
      { text: 'Name', value: 'name' },
      { text: 'Calories', value: 'calories' },
      { text: 'Fat', value: 'fat' }
    ],
    desserts: [
      {
        value: false,
        name: 'Frozen Yogurt',
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
        iron: '1%'
      },
      {
        value: false,
        name: 'Ice cream sandwich',
        calories: 237,
        fat: 9.0,
        carbs: 37,
        protein: 4.3,
        iron: '1%'
      },
      {
        value: false,
        name: 'Eclair',
        calories: 262,
        fat: 16.0,
        carbs: 23,
        protein: 6.0,
        iron: '7%'
      },
      {
        value: false,
        name: 'Cupcake',
        calories: 305,
        fat: 3.7,
        carbs: 67,
        protein: 4.3,
        iron: '8%'
      },
      {
        value: false,
        name: 'Gingerbread',
        calories: 356,
        fat: 16.0,
        carbs: 49,
        protein: 3.9,
        iron: '16%'
      },
      {
        value: false,
        name: 'Jelly bean',
        calories: 375,
        fat: 0.0,
        carbs: 94,
        protein: 0.0,
        iron: '0%'
      },
      {
        value: false,
        name: 'Lollipop',
        calories: 392,
        fat: 0.2,
        carbs: 98,
        protein: 0,
        iron: '2%'
      },
      {
        value: false,
        name: 'Honeycomb',
        calories: 408,
        fat: 3.2,
        carbs: 87,
        protein: 6.5,
        iron: '45%'
      },
      {
        value: false,
        name: 'Donut',
        calories: 452,
        fat: 25.0,
        carbs: 51,
        protein: 4.9,
        iron: '22%'
      },
      {
        value: false,
        name: 'KitKat',
        calories: 518,
        fat: 26.0,
        carbs: 65,
        protein: 7,
        iron: '6%'
      }
    ]
  })
}
</script>

<style>
.scroller {
  height: 500px;
}

.scroller-item {
  height: 47px;
}

.selected td {
  background: red;
}
</style>