Framework-agnostic core with a Vue adapter today. useDataTable owns the state — fetching, sorting, filtering, pagination, debounced search, query-string sync. <DataTable> owns the chrome — toolbar, header, skeleton, empty state, pagination. Columns and rows stay in your island, where they belong.

composer require aaix/laravel-islands-datagrid

<script setup>
import { DataTable, useDataTable } from '@aaix/laravel-islands-datagrid/vue';

const { rows, meta, state, loading, error, goToPage, setPerPage, reload, fetchData } =
    useDataTable('/api/products', {
        defaults: { q: '', sort: 'created_at', dir: 'desc', page: 1, perPage: 30 },
    });

onMounted(() => fetchData());
</script>

<template>
    <DataTable
        :rows="rows"
        :meta="meta"
        :per-page="state.perPage"
        :col-count="3"
        :loading="loading"
        :error="error"
        @retry="reload()"
        @page-change="goToPage"
        @per-page-change="setPerPage"
    >
        <template #head>
            <th>SKU</th>
            <th>Name</th>
            <th>Created</th>
        </template>
    </DataTable>
</template>

Documentation

Full guide and API reference: jonaaix.github.io/laravel-islands-datagrid

License

MIT