@gigerit/inertia-table-vuetify

@gigerit/inertia-table-vuetify

A Vue 3 + Vuetify 4.3+ integration package for InertiaUI Table, providing a seamless Material Design interface for Laravel Inertia.js applications with advanced data table functionality.

Overview

This package bridges the gap between InertiaUI's powerful table system and Vuetify's Material Design components, offering developers a complete Vuetify-styled table solution that works seamlessly with Laravel's Inertia.js framework.

Key Features

🎨 Vuetify Integration

• Built specifically for Vuetify 4.3+ with Material Design aesthetics
• Responsive design with mobile-first approach using Vuetify's useDisplay composable
• Native Vuetify data table component integration with custom styling

📊 Advanced Table Functionality

• Sorting: Bidirectional column sorting with visual indicators
• Filtering: Dynamic filter system with dropdown and inline filter components
• Pagination: Server-side pagination with customizable page sizes
• Search: Global search functionality with debounced input
• Column Management: Toggle column visibility with dropdown controls
• Bulk Actions: Multi-select operations with action dropdowns and Shift-click range selection

🔧 InertiaUI Compatibility

• Full compatibility with InertiaUI Table's resource structure
• Automatic state management through InertiaUI's useTable and useActions composables
• Seamless integration with Laravel backend table definitions
• Support for all InertiaUI table features (exports, actions, filters, etc.)

🌍 Internationalization

• Built-in translation support with German language included
• Extensible translation system via setTranslations function
• Modular language exports for easy integration

⚡ Performance & UX

• Loading states with router integration
• Optimized re-rendering with Vue 3 Composition API
• Keyboard navigation support (ESC to close search)
• Hover effects and click handlers for row interactions

Technical Architecture

Core Components

• InertiaTableVuetify: Main table component with Vuetify styling
• Filter.vue: Reusable filter component with multiple filter types
• ActionsDropdown.vue: Bulk action management
• ToggleColumnDropdown.vue: Column visibility controls
• AddFilterDropdown.vue: Dynamic filter addition interface

State Management

• Leverages InertiaUI's table state management
• Automatic URL synchronization for filters, sorting, and pagination
• Reactive updates through Inertia.js router events

Build System

• Vite-based build that ships ES modules only
• Tree-shakable exports for optimal bundle size
• Typed props, events, slots and template refs, with the row type inferred from resource

Use Cases

This package is ideal for:

• Admin Panels: Complete CRUD interfaces with advanced filtering
• Data Dashboards: Interactive data visualization with sorting/filtering
• User Management: Bulk user operations with search capabilities
• Reporting Systems: Exportable data tables with custom actions
• Any Laravel + Inertia.js + Vuetify application requiring sophisticated table functionality

Integration

The package seamlessly integrates with existing Laravel + Inertia.js + Vuetify stacks, requiring minimal configuration while providing enterprise-level table functionality with Material Design aesthetics.

Installation

npm install @gigerit/inertia-table-vuetify

This package ships the built Vuetify adapter plus the frontend InertiaUI Table runtime it wraps. Your app must satisfy the peer dependencies separately: Vue, Vuetify 4.3+, @inertiajs/vue3 3.x, and @inertia-vuetify/modal 3.x. Consumer apps do not need to install @inertiaui/table-vue or add Vite dedupe entries for this package.

Modal actions open through @inertia-vuetify/modal, so mount your Inertia app with its renderApp (the Laravel side keeps using the inertiaui/modal package):

import { renderApp } from '@inertia-vuetify/modal'

createInertiaApp({
  setup({ el, App, props, plugin }) {
    createApp({ render: renderApp(App, props) })
      .use(plugin)
      .use(vuetify)
      .mount(el)
  },
})

Do not install @inertiaui/modal-vue next to it: two modal packages mean two modal stacks, and table modal actions would open in the one your app does not render.

AI agent context

This package ships an optional AI-agent skill for frontend work with the Vuetify adapter. It is installed explicitly and never runs automatically during npm install, npm update, or any package manager postinstall step.

After installing or upgrading the package, run:

npm exec inertia-table-vuetify-install-ai-context

Equivalent package-manager commands:

pnpm exec inertia-table-vuetify-install-ai-context
yarn inertia-table-vuetify-install-ai-context
bunx inertia-table-vuetify-install-ai-context

If the package is not already installed in the project, use:

npm exec --package @gigerit/inertia-table-vuetify inertia-table-vuetify-install-ai-context

The installer writes the skill to:

.agents/skills/gigerit-inertia-table-vuetify/

When the installer can link to the package through a stable node_modules path, future package updates refresh the skill through that link. When the installer falls back to copying, rerun the installer after upgrading the package.

Usage

<script setup>
import { InertiaTableVuetify } from '@gigerit/inertia-table-vuetify'
</script>

<template>
  <InertiaTableVuetify :resource="resource" />
</template>

The built package entry statically imports its component stylesheet for Vite/Rollup/Webpack consumers. Your application still needs its normal Vuetify setup, including vuetify/styles. If your bundler does not include package CSS automatically, import the stylesheet explicitly once in your app entry:

import '@gigerit/inertia-table-vuetify/style.css'

Vuetify icons

Package-owned table controls ship as direct Vuetify SVG icon values, so you do not need to merge package aliases after upgrading.

Icons coming from your own InertiaUI table definitions still use the existing iconResolver flow. If your app uses Vuetify's SVG icon set, do not pass raw mdi-* class names to v-icon; use @mdi/js paths or an icon resolver that returns svg: values:

import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'

export default createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    },
  },
})

inertiaTableVuetifyIcons (from @gigerit/inertia-table-vuetify/icons) holds the package's own icon values if you want to reuse them in custom slots.

Table-scoped Vuetify defaults

Every table provides Vuetify defaults under the InertiaTable key, so you can restyle the table's own buttons, inputs, menus and data table without touching the rest of your app:

createVuetify({
  defaults: {
    InertiaTable: {
      VDataTableServer: { density: 'compact' },
      VBtn: { variant: 'tonal' },
    },
  },
})

Attributes you set on <InertiaTableVuetify> itself still win; they are forwarded to v-data-table-server.

Row clicks

Pass @row-click (or the onRowClick prop) to handle row and cell clicks yourself. It receives (item, column, event), where column is the clicked column or undefined outside a cell. Without a handler, rows with a _row_url navigate, and Ctrl/Cmd-click opens them in a new tab.

<InertiaTableVuetify
  :resource="users"
  @row-click="(item, column, event) => openUser(item._primary_key, event.ctrlKey)"
/>

TypeScript

The package declares its props, events, slots and template-ref API. The row type flows from resource:

<script setup lang="ts">
import { InertiaTableVuetify, type TableResource } from '@gigerit/inertia-table-vuetify'

defineProps<{ users: TableResource<{ id: number; name: string }> }>()
</script>

<template>
  <InertiaTableVuetify :resource="users">
    <!-- item is typed as the user row -->
    <template #cell(name)="{ item }">{{ item.name.toUpperCase() }}</template>
  </InertiaTableVuetify>
</template>

Header styling

For custom table-header CSS, target stable package classes such as .it-table-header-activator, .it-table-header-content, .it-table-header-label, and .it-table-header-sort-icon. Do not target generated Vue scoped attributes like data-v-*; those can change whenever the package is rebuilt.

Internationalization

Table text automatically follows Vuetify's active locale for bundled adapter locales: English, German, French, and Italian. Regional locale tags such as de-CH or fr-FR use their base locale, and unsupported locales fall back to English.

Use setTranslations only when overriding adapter text manually:

import { setTranslations } from '@gigerit/inertia-table-vuetify'

setTranslations({
  filters_button: 'Filters',
  search_button: 'Search',
})

Date filter text follows InertiaUI Table v4's date_picker_* keys:

setTranslations({
  date_picker_months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  date_picker_months_short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  date_picker_days: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
  date_picker_am: 'AM',
  date_picker_pm: 'PM',
  date_picker_select_date: 'Select date',
})

This Vuetify adapter applies date_picker_select_date to the date input placeholder and the month arrays to the month picker. Weekday labels, date formatting, and AM/PM display remain controlled by Vuetify's locale and date adapter.