Getting Started

Pre-Requisite / Dependencies

Vue 3
Vuetify V3 version 3.6.7 or latest
Vuedraggable version 4.1.0 or latest (vuedraggable@next)

Required Vuetify components for VDatatablePlus and VDatatableServerPlus Vuetify Autoimport

Installation

npm i v-datatable-plus

Global Plugin Registration

<script setup>
import 'vuetify/styles';
import 'v-datatable-plus/dist/style.css'
import { createVuetify } from 'vuetify';
import VDatatablePlusPlugin from 'v-datatable-plus';
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App)

app.use(createVuetify({
    // options
}));
app.use(VDatatablePlusPlugin);

app.mount('#app');
</script>

Global Component Registration

<script setup>
import 'vuetify/styles';
import 'v-datatable-plus/dist/style.css'
import { createVuetify } from 'vuetify';
import { VDatatablePlus, VDatatableServerPlus, ResizeableSplitter } from 'v-datatable-plus';
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App)

app.use(createVuetify({
    // options
}));

// Add only those component(s) which you are going to use it
app.component('VDatatablePlus', VDatatablePlus);
app.component('VDatatableServerPlus', VDatatableServerPlus);
app.component('ResizeableSplitter', ResizeableSplitter);

app.mount('#app');
</script>

Local Registration

<template>
  <v-datatable-plus
    :headers="headers"
    :items="items"/>
</template>

<script setup>
import 'v-datatable-plus/dist/style.css'
import { VDatatablePlus, FilterType, FilterMode } from  'v-datatable-plus';

const headers = ref([
// ...
]);
const items = ref([
// ...
])
</script>

Vuetify Autoimport

If you are using vuetify autoimport then you will need to import those below components manually which you are not using in your application.

import {
    VDataTable,
    VDataTableServer,
    VToolbar,
    VToolbarTitle,
    VSelect,
    VList,
    VListItem,
    VListItemAction,
    VMenu,
    VBtn,
    VCard,
    VIcon,
    VCheckboxBtn,
    VPagination,
    VSpacer,
    VTextField,
} from 'vuetify/components';

For example import only VDataTable in App.vue in case of using v-datatable-plus component and other required vuetify components already in utlized in the application.

App.vue

<template>
  <div id="app"/>
</template>

<script setup>
import { VDataTable } from 'vuetify/components';
</script>

FilterType

Types	String Value
IsEqualTo	'eq'
IsNotEqualTo	'neq'
StartWith	'starts'
Contains	'contains'
NotContains	'notcontains'
EndWith	'ends'

FilterMode

Modes	String Value	Detail
Selection	'selection'	Set when you need dropdown filter and set filter properties against headers props
Types	'types'