@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.

Wide Tables

When the columns don't fit, the table helps the user find and keep what they need. Nothing of this shows while every column fits.

• Hidden columns indicator: a fade on the side with more columns, a round arrow on the header row that scrolls about 300 px, and a "Scroll to see more columns" hint above it until the first scroll.
• Pinned actions column: the header with key actions always goes last and sticks to the right edge, with a shadow while columns pass under it.
• Column chooser: a "Columns" button above the table to show, hide, search and reorder columns (drag, or the arrow keys on the handle). It reads "Columns · N hidden" while columns are hidden, and stays visible in that case even if the rest fits. actions, expand and select columns are never listed.

Two header options shape the chooser: hidden: true starts a column hidden until the user shows it (and "Reset" hides it again; the "N hidden" count leaves these out), and locked: true keeps a column always visible (it can still be moved). The column-chooser slot receives locked on each column.

The choices are saved in localStorage, keyed by the set of header keys. Texts and the storage key can be set in the global config:

app.use(
  createDataTableConfig({
    texts: {
      columns: () => i18n.global.t("dataTable.columns"),
      hiddenColumns: (count) => i18n.global.t("dataTable.hiddenColumns", { count }, count),
      scrollHint: "Desliza para ver más columnas",
    },
    storageKey: (key) => `${tenant}:${key}`,
  }),
);

Each text accepts a string or a function, which is read on every render so it follows the current locale. Available texts: columns, hiddenColumns, searchColumns, showAllColumns, hideAllColumns, resetColumns, moveColumn, scrollHint, scrollLeft, scrollRight.

Attributes that are not props (row-props, density, hover…) are passed to the inner v-data-table-server.

Custom column chooser

The column-chooser slot replaces the default button and dropdown, for example with a dialog. It is shown in the same place and under the same conditions as the default one. The table keeps the state and saves it; the slot only renders it.

<DataTable :headers="headers" :items="items" @onLoadData="loadData">
  <template #column-chooser="{ columns, label, setVisible, move, reset }">
    <v-btn size="small" @click="dialog = true">{{ label }}</v-btn>
    <v-dialog v-model="dialog" max-width="420">
      <v-card title="Columns">
        <v-list>
          <v-list-item v-for="column in columns" :key="column.key">
            <v-checkbox-btn
              :model-value="column.visible"
              :label="column.title"
              @update:model-value="setVisible(column.key, !!$event)"
            />
            <template #append>
              <v-btn icon="mdi-arrow-up" variant="text" size="small" @click="move(column.key, -1)" />
              <v-btn icon="mdi-arrow-down" variant="text" size="small" @click="move(column.key, 1)" />
            </template>
          </v-list-item>
        </v-list>
        <v-card-actions>
          <v-btn @click="reset">Reset</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </template>
</DataTable>

| Slot prop | Type | Description | | ------------- | -------------------------------------------- | ------------------------------------------------- | | columns | DataTableColumn[] | { key, title, visible } in the current order | | hiddenCount | number | How many columns are hidden | | label | string | "Columns", or "Columns · N hidden" | | setVisible | (key: string, visible: boolean) => void | Shows or hides one column | | toggleAll | () => void | Shows all, or hides all when every one is visible | | move | (key: string, step: -1 \| 1) => void | Moves a column one place up or down | | place | (key: string, targetKey: string) => void | Moves a column to another one's position (drag) | | reset | () => void | Restores the original order and visibility |

To only restyle the default chooser, target its classes: .vdt-columns__button (the button), .vdt-columns (the dropdown card), .vdt-columns__list, .vdt-columns__item and .vdt-columns__handle. The dropdown is rendered in Vuetify's overlay container, so its rules must not be scoped to the table.

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>
        <img src="/icons/edit.svg" width="20" />
    </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

| Prop | Type | Default | Description | | ------------------------------ | --------------- | -------------------------- | -------------------------------------- | | headers | TableHeader[] | [] | Table column headers | | items | T[] | [] | Table row data | | loading | boolean | false | Show loading state | | totalItems | number | 0 | Total items for server-side pagination | | itemsPerPage | number | 10 | Items per page | | search | string | — | Search query | | itemValue | string | 'id' | Unique item identifier key | | tableClass | string | 'border rounded-md mt-5' | CSS class for the table | | showExpand | boolean | false | Show expandable rows | | showSelect | boolean | false | Show a checkbox column for row selection | | selectStrategy | 'page' \| 'all' \| 'single' | 'page' | How the header checkbox selects rows | | modelValue | (string \| number)[] | [] | Selected keys, taken from itemValue. Use with v-model | | showViewButton | boolean | false | Show view action button | | showEditButton | boolean | true | Show edit action button | | showDeleteButton | boolean | true | Show delete action button | | viewButtonText | string | — | View button tooltip text | | editButtonText | string | — | Edit button tooltip text | | deleteButtonText | string | — | Delete button tooltip text | | deleteModalTitle | string | — | Delete confirmation modal title | | deleteModalMessage | string | — | Delete confirmation modal message | | deleteModalConfirmButtonText | string | — | Confirm button text | | deleteModalCancelButtonText | string | — | Cancel button text | | viewIcon | string | — | View icon name override | | editIcon | string | — | Edit icon name override | | deleteIcon | string | — | Delete icon name override | | disableView | (item: T) => boolean | — | Per-row predicate: disable the view button when it returns true | | disableEdit | (item: T) => boolean | — | Per-row predicate: disable the edit button when it returns true | | disableDelete | (item: T) => boolean | — | Per-row predicate: disable the delete button when it returns true |

Events

| Event | Payload | Description | | ------------ | ---------------- | ------------------------------------------------ | | onLoadData | LoadDataParams | Triggered on pagination, sort, or search changes | | editItem | T | Triggered when edit button is clicked | | deleteItem | T | Triggered when delete is confirmed | | viewItem | T | Triggered when view button is clicked | | update:modelValue | (string \| number)[] | Triggered when the selection changes |

Slots

| Slot | Description | | ------------------------ | ------------------------------------------ | | item.{key} | Custom render for any column by header key | | expanded-row | Content for expandable rows | | item.data-table-expand | Custom expand toggle button | | before-actions | Content before action buttons | | after-actions | Content after action buttons | | view-icon | Custom view icon | | edit-icon | Custom edit icon | | delete-icon | Custom delete icon | | item.tfoot | Table footer content. Receives { columns }: the visible headers, in display order | | selection-actions | Bar above the table, for bulk actions. Only rendered when showSelect. Receives { selected, count, clear } |

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