vuetify-virtual-table

A virtual table built with Vue and Vuetify

Installation

Install with yarn:

yarn

yarn serve

Import as component in component file

import VirtualTable from '@qualle-web/vuetify-virtual-table';

export default {
  name: 'component_name',
  components: {
    VirtualTable
  }
}

Examples

Basic

The basic example shows how to use the VirtualTable component:

<template>
  <v-container id="app">
    <v-row class="pa-0 ma-0">
      <v-card
        data-v-step="1"
        class="pa-0 ma-0 width-100 background-transparent"
        elevation="0"
      >
        <VirtualTable
          :tableHeaders="tableHeaders"
          :tableOptions="{
            tableHeight: 600,
            rowHeight: 48,
            singleSelect,
            showSelect,
            showExpand,
            itemsToExclude,
            columnSortOrder,
          }"
          :entities="entities"
          :selected="selected"
          :loading="loading"
          @selectAllToggle="selectAllToggle"
          @onSelectRow="selected = $event"
        />
      </v-card>
    </v-row>
  </v-container>
</template>

<script>
import VirtualTable from "./components/VirtualTable";
import moment from "moment";

export default {
  name: "App",
  components: { VirtualTable },
  data: () => ({
    tableHeaders: [
      {
        text: "Name",
        value: "name",
        width: "25%",
        adjustable: true,
        sortable: true,
      },
      {
        text: "Title",
        value: "title",
        width: "25%",
        adjustable: true,
        sortable: true,
      },
      {
        text: "Address",
        value: "address",
        width: "25%",
        adjustable: true,
        sortable: true,
      },
      {
        text: "date",
        value: "date",
        width: "25%",
        align: center,
        adjustable: true,
        sortable: true,
        sorter: (a, b) => {
          if (moment(a).isValid()) {
            return moment(new Date(a)).diff(moment(new Date(b)));
          }
        },
      },
    ],

    columnSortOrder: ["name", "title", "address", "date"],

    itemsToExclude: ["id", "owner"],

    selected: [],

    singleSelect: false,
    showSelect: true,
    showExpand: true,

    loading: false,

    entities: new Array(1000).map((item, index) => ({
      name: index,
      title: index,
      address: index,
      date: moment().add(index, "days"),
    })),
  }),
  methods: {
    selectAllToggle($event) {
      console.log($event);
    },
  },
};
</script>

The VirtualTable tag requires a entities property, which is an array of objects which contain the data:

<VirtualTable :entities="entities">
</VirtualTable>