Installation

Composer

composer require aaix/laravel-islands-datagrid

This pulls in aaix/laravel-islands as well. The service provider is discovered automatically; it registers nothing but its configuration — no routes, no views, no migrations.

Vite

Both packages bring their own Vite plugin. Register them and the import names resolve themselves — no aliases to write, and none that can drift out of step with the sources:

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import islands from './vendor/aaix/laravel-islands/vite.js';
import islandsDatagrid from './vendor/aaix/laravel-islands-datagrid/vite.js';

export default defineConfig({
    plugins: [vue(), islands(), islandsDatagrid()],
});

The base package's plugin is required: the datagrid imports from it at runtime.

There is one entry point:

import { DataTable, useDataTable, SearchInput } from '@aaix/laravel-islands-datagrid/vue';

Tailwind

The components carry Tailwind classes. Register both packages as sources, or the classes are purged and the table renders with subtly wrong spacing — which looks like a layout bug and is a configuration bug:

/* resources/css/app.css */
@import 'tailwindcss';

@source '../../vendor/aaix/laravel-islands/resources/js/**/*';
@source '../../vendor/aaix/laravel-islands-datagrid/resources/js/**/*';

A primary-* colour scale and the dark: variant are expected, as for the base package's helpers.

The Island

A list view is an ordinary island. Scaffold it with the base package's command and follow its directory structure:

php artisan make:island Invoices

Translating the Built-In Strings

The components carry a handful of strings of their own — "Could not load data", "Retry", "Per page", "Columns", "Sort by", "Filters", the saved-views menu. Hand them your translator once, at the island root:

<script setup>
import { useIsland, useTranslations } from '@aaix/laravel-islands/vue';
import { provideDatagrid } from '@aaix/laravel-islands-datagrid/vue';

const { t } = useTranslations();
const { _island } = useIsland();

provideDatagrid({ t, locale: _island.locale });
</script>

Without it, the English source strings are used and numbers format for en. The full list of strings is under Exports; add them to your lang/{locale}.json like any other line.

Saved Views

Saved views need a table and a model. That step is optional and described under Saved Views.