Download the PHP package digit7s/inertia-table without Composer

Inertia Table

A backend-driven datatable package for Laravel, Inertia.js, and Vue 3.

Define your table structure, query, searching, sorting, filtering, row actions, bulk actions, and grouping in PHP, then render the result with published Vue 3 components in your Laravel/Inertia application.

✨ Features

• 🚀 Backend-driven tables: Manage columns, sorting, searching, filtering, actions, and pagination from PHP.
• 🔍 Global search: Search across multiple columns, including relationship fields.
• 🎛️ Dynamic filters: Supports text, select, and boolean filters.
• 🔃 Smart sorting: Built-in column-based sorting with direction handling.
• 📄 Pagination: Integrates with Laravel's native paginator.
• 🎨 Modern Vue UI: Published Vue 3 components built for Tailwind CSS and shadcn-vue.
• 🧩 Custom cell rendering: Override cell rendering using Vue slots.
• 📦 Bulk actions: Built-in multi-row actions with confirmation support.
• 📁 Grouping: Organize rows into expandable groups by column.
• 🧱 Publishable frontend components: Publish and customize the Vue table components inside your own app.

✅ Version Support

Version support is based on the Composer constraints and tested compatibility for each package release.

🛠 Requirements

Please refer to the Version Support table for PHP, Laravel, Inertia Laravel, and Vue.js compatibility.

This package has two parts:

1. A Laravel/PHP backend table builder.
2. Publishable Vue 3 frontend components for your Laravel/Inertia app.

Backend Requirements

• PHP 8.2+
• Laravel 10.x, 11.x, or 12.x
• Inertia Laravel 1.x or 2.x

Frontend Requirements

The published Vue components expect your Laravel/Inertia app to already have the following frontend stack installed and configured:

• Vue 3
• @inertiajs/vue3
• Tailwind CSS
• shadcn-vue
• lucide-vue-next

Required shadcn-vue Components

The published components import shadcn-vue components from your app's @/components/ui directory.

Make sure these components exist in your consuming Laravel app:

• badge
• button
• checkbox
• dialog
• dropdown-menu
• input
• select
• table

Depending on the features you use, additional shadcn-vue components may be required in future versions.

Note: shadcn-vue components are generated into your application. They are not normal npm package imports. This package expects those components to exist in the consuming Laravel app after publishing the table components.

🚀 Installation

Install the package via Composer:

Publish Vue Components

Since the table UI is built with Vue 3 and Tailwind CSS, publish the components into your Laravel app:

This will publish the components to:

After publishing, you may customize the Vue components to match your application's design system.

📖 Basic Usage

1. Generate a Table Class

Use the Artisan command to create a new table class:

This will create:

2. Configure the Table

Define your query and columns in the generated table class:

3. Return the Table from a Controller

4. Render the Table in Vue

If your component currently expects tableData instead of table-data, both are the same Vue prop in templates because Vue supports kebab-case usage for camelCase props.

💎 Advanced Features

Column Types

The package provides specialized column types for common table data:

• TextColumn: Default text representation.
• NumericColumn: Right-aligned number/currency display.
• BadgeColumn: Displays values as badges.
• BooleanColumn: Displays boolean values with visual indicators.
• DateColumn / DateTimeColumn: Formats date and datetime values.
• ImageColumn: Displays image/avatar-style values.
• TagsColumn: Displays arrays as badge groups.

Example:

🔗 Row Actions & Links

Clickable Rows

Make the entire row clickable:

Row Actions Dropdown

Add row-level actions to your table:

📦 Bulk Actions

Enable multi-row operations with a floating bulk action bar:

CSV Export

CSV export is disabled by default.

Enable it in your table class:

The package uses Laravel streamDownload() and PHP fputcsv(). No external export dependency is required.

📁 Grouping

Organize records into expandable groups:

You may also define a default group:

🎨 Customizing Cells

You can override any cell's rendering using Vue slots.

Slot names follow this format:

For example:

🧩 Frontend Customization

After publishing the components, you can customize them directly in your app:

Common customization points:

• Table layout
• Cell styling
• Empty state
• Pagination UI
• Filter UI
• Row action dropdown
• Bulk action bar
• Confirmation dialog
• Column visibility menu
• Responsive behavior

Because the components are published into your application, you are free to adapt them to your design system.

📚 Documentation

For detailed information on each feature, see the documentation inside the docs/ folder:

• Documentation Index
• Changelog
• Installation
• Usage
• CSV Export
• Accessibility
• Example App
• Troubleshooting

🧪 Testing

If you are contributing to the package, run the test suite:

If no test script is configured, run Pest directly:

You may also run Laravel Pint if it is installed:

🧭 Roadmap

See the Roadmap for planned and potential future improvements.

🤝 Contributing

Contributions are welcome.

Before submitting a pull request:

1. Keep changes focused.
2. Follow the existing code style.
3. Add or update tests when possible.
4. Update documentation when behavior changes.
5. Confirm the package still works in a Laravel/Inertia/Vue app.

🔒 Security

If you discover a security vulnerability, please report it privately instead of opening a public issue.

📄 License

The MIT License (MIT). Please see License File for more information.