@gigerit/inertia-table-vuetify

A Vue 3 + Vuetify 4 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 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

🔧 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 process with ES modules and CommonJS support
• Tree-shakable exports for optimal bundle size
• TypeScript-friendly with proper type definitions

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, including Vue, Vuetify, Inertia, and InertiaUI Modal. Consumer apps do not need to install @inertiaui/table-vue or add Vite dedupe entries for this package.

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,
    },
  },
})

The legacy inertiaTableVuetifyAliases export remains available for existing apps, but package controls no longer require it.

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.