@dazzadev/vuetify-datatable

@dazzadev/vuetify-datatable

Reusable server-side DataTable component for Vuetify 3 and 4. Includes action buttons (view, edit, delete), configurable icons, and a built-in delete confirmation dialog.

Installation

npm install @dazzadev/vuetify-datatable

Setup

Register globally (recommended)

// main.ts
import { createApp } from "vue";
import VuetifyDatatable from "@dazzadev/vuetify-datatable";

const app = createApp(App);
app.use(VuetifyDatatable);

Or import individually

import { DataTable } from "@dazzadev/vuetify-datatable";

Basic Usage

<template>
  <DataTable
    :headers="headers"
    :items="items"
    :loading="loading"
    :total-items="totalItems"
    :search="search"
    @onLoadData="loadData"
    @editItem="editItem"
    @deleteItem="deleteItem"
  />
</template>

Row Selection

Set showSelect and bind v-model to hold the selected keys. The key comes from itemValue, so point it at whatever your bulk endpoint expects — not necessarily id.

<DataTable
    v-model="selected"
    :headers="headers"
    :items="items"
    :totalItems="totalItems"
    item-value="uuid"
    show-select
    @onLoadData="loadData"
>
    <template #selection-actions="{ count, clear }">
        <div v-if="count" class="d-flex align-center ga-2 pa-2">
            <span>{{ count }} selected</span>
            <v-btn size="small" @click="applyToSelection">Apply</v-btn>
            <v-btn size="small" variant="text" @click="clear">Clear</v-btn>
        </div>
    </template>
</DataTable>

selectStrategy decides what the header checkbox does: page marks the current page only, all marks every loaded row, single allows one row at a time. With server-side pagination page is usually what you want — the table only holds the rows it has fetched.

Icon Configuration

Icons can be configured at 4 levels of priority (highest to lowest):

1. Slots (full control per instance)

<DataTable :headers="headers" :items="items">
    <template #view-icon>
        <MyCustomIcon />
    </template>
    <template #edit-icon>
        
    </template>
    <template #delete-icon>
        <i class="fa-solid fa-trash"></i>
    </template>
</DataTable>

2. Props (string override per instance)

<DataTable
  view-icon="mdi-magnify"
  edit-icon="mdi-square-edit-outline"
  delete-icon="mdi-delete"
/>

3. Global plugin config (configure once, applies everywhere)

// main.ts
import { createDataTableConfig } from "@dazzadev/vuetify-datatable";
import { IconEye, IconPencil, IconTrash } from "@tabler/icons-vue";

app.use(
  createDataTableConfig({
    icons: {
      view: IconEye,
      edit: IconPencil,
      delete: IconTrash,
    },
    iconProps: { "stroke-width": 1.5 },
  }),
);

This works with any icon library: Tabler, FontAwesome, Heroicons, or any Vue component.

4. MDI defaults (no config needed)

If no configuration is provided, the component uses Material Design Icons (included with Vuetify):

• View: mdi-eye-outline
• Edit: mdi-pencil-outline
• Delete: mdi-trash-can-outline

Props

Events

Slots

Peer Dependencies

• vue >= 3.3
• vuetify 3.x or 4.x

The component only uses the v-data-table-server API that is common to both major versions, so a single build works with either.

License

MIT