harmonic/inertia-table

Easily create Inertia JS tables from Eloquent models

v1.0.7 2020-02-24 01:08 UTC

README

Latest Version on Packagist Total Downloads Build Status StyleCI

Easily create tables using InertiaJS (and Tailwind CSS) and Laravel Models. Tables can be filtered and sorted. Can scaffold an entire model with one artisan command!

Laravel Preset - Click for video

Installation

This package requires InertiaJS to be installed in your project. It is strongly recommended that you also install the corresponding Vue component inertia-table-vue to allow end to end scaffolding of an Inertia table in Vue

Via Composer

$ composer require harmonic/inertia-table

Register the remember route middleware in your App\HttpKernel class:

protected $routeMiddleware = [
    // ..
    'remember' => \Reinink\RememberQueryStrings::class,
];

Usage

Via CLI

The quickest and easiest way to create an Inertia Table is using a single Artisan command. It will create the model, controller and Vue components for you automatically simply by supplying a model name as an argument.

$ php artisan make:inertiaTable User

Where User is the name of the model you wish to create. See the manual process below for what is created.

Manually

  1. Modify your model so that it extends InertiaModel instead of model:
use harmonic\InertiaTable\InertiaModel;

class user extends InertiaModel {
    protected $perPage = 10; // Controlls number of items per page
...
  1. Create a controller:

UsersController.php

namespace App\Http\Controllers;

use harmonic\InertiaTable\Facades\InertiaTable;
use Illuminate\Validation\Rule;
use Illuminate\Support\Facades\Request;
use Illuminate\Support\Facades\Redirect;
use Illuminate\Support\Facades\Auth;
use App\User;

class UsersController extends Controller {
    public function index() {
        $user = new User();
        return InertiaTable::index($user, ['id', 'name', 'email', 'deleted_at']);
    }    
}

The index method takes a model and an array of column names which you wish to display as parameters. The array is optional, InertiaTable will show all columns by default.

You can also stipulate which columns can be searched by adding a third parameter, an array of column names that can be filtered. If left blank all columns are searchable.

  1. Add your routes in web.php. You can do these manually or using the custom inertia route included with this package:
Route::inertiaTable('users');

This will generate all your crud routes:

Method URI Action
GET users App\Http\Controllers\UsersController@index
POST users App\Http\Controllers\UsersController@store
DELETE users/$uri App\Http\Controllers\UsersController@destroy
PUT users/$uri App\Http\Controllers\UsersController@update
GET users/$uri/edit App\Http\Controllers\UsersController@edit
PUT users/$uri/restore App\Http\Controllers\UsersController@restore
GET users/create App\Http\Controllers\UsersController@create
  1. You will need to create your front end. It is recommend you use inertia-table-vue for Vue projects. A JS example is provided at the bottom of that repository.

Change log

Please see the changelog for more information on what has changed recently.

Testing

$ composer test

Contributing

Please see contributing.md for details and a todolist.

Security

If you discover any security related issues, please email craig@harmonic.com.au instead of using the issue tracker.

Credits

License

MIT. Please see the license file for more information.