@starter-solutions/inertia-data-table-vue

@starter-solutions/inertia-data-table-vue

⚠️ This is the Vue 3 frontend companion package for
starter-solutions/inertia-data-table (Laravel).

If you are looking for the backend package, visit:
👉 https://github.com/starter-solutions/inertia-data-table-laravel

📦 Overview

@starter-solutions/inertia-data-table-vue provides Vue 3 composables and components for handling:

• Server-driven pagination
• Sorting
• Query state management
• Inertia-powered table updates

It is designed to work seamlessly with the Laravel package:

Backend (Laravel): https://github.com/starter-solutions/inertia-data-table-laravel

Together they provide a clean, consistent way to manage paginated and sortable data tables across your Laravel + Inertia + Vue application.

🚀 Installation

npm install @starter-solutions/inertia-data-table-vue

Sortable columns

useDataTable() exposes the backend's allowed_sorts as both the reactive allowedSorts list and an isSortable(key) helper:

<script setup>
const { isSortable, sortBy } = useDataTable('users');
</script>

<template>
    <button
        :disabled="!isSortable(column.key)"
        @click="sortBy(column.key)"
    >
        {{ column.label }}
    </button>
</template>

The backend states are preserved: null means unrestricted, [] disables all sort buttons, and a non-empty list enables only the listed keys.

🐛 Issues & Support

Bug reports and feature requests should be submitted to the main repository:

🔗 https://github.com/starter-solutions/inertia-data-table/issues

📄 License

MIT © Starter Solutions