Laravel package to create beautiful common views like tables using only PHP code, inspired by Laravel Nova, these views are built with Laravel Livewire and styled using Tailwind CSS
- Version compatibility
- Installation and basic usage
- First table view
- Rendering a view
- Advanced usage
- Views available
- Contributing
- Roadmap
| Laravel views | Livewire | Laravel |
|---|---|---|
| 2.x | 2.x | 7.x, 8.x |
| 1.x | 1.x | 5.x, 6.x |
composer require laravel-views/laravel-viewsphp artisan vendor:publish --tag=public --provider='LaravelViews\LaravelViewsServiceProvider' --forceAdd the following Blade directives in the head tag, and before the end body tag in your template
<html>
<head>
...
@laravelViewsStyles
</head>
<body>
...
@laravelViewsScripts
</body>
</html>These blade directives are also including Laravel livewire and Tailwindcss styles and scripts, after that you may need to clear the view cache
php artisan view:clearIf you are already using your own Tailwindcss setup you can set laravel-views to not importing Tailwindcss by default. (Importing assets)
This is a basic usage of a table view, you can read the full table view documentation
Once you have installed the package and included the assets you can start to create a basic table view.
php artisan make:table-view UsersTableViewWith this artisan command a UsersTableView.php file will be created inside the app/Http/Livewire directory.
The basic usage needs a data repository (Eloquent query), headers and rows, you can customize the items to be shown, and the headers and data for each row like this example
<?php
namespace App\Http\Livewire;
use LaravelViews\Views\TableView;
use Illuminate\Database\Eloquent\Builder;
use App\User;
class UsersTableView extends TableView
{
public function repository(): Builder
{
return User::query();
}
public function headers(): array
{
return [
'Name',
'Email',
'Created',
'Updated'
];
}
public function row($model)
{
return [
$model->name,
$model->email,
$model->created_at,
$model->updated_at
];
}
}You can render this view in the same way as you would do it for a livewire component (Rendering components). The easiest way to render the view is using the livewire tag syntax:
<livewire:users-table-view />You could also use the @livewire blade directive.
@livewire('users-table-view')At this point, you would be able to see a table with some data, the table view doesn't have any styled container or title as the image example, you can render the table view inside any container you want.
In the example above the view is using the User model created by default in every Laravel project, feel free to use any model you have, the method row is receiving a sinlge model object and you can use any property or public method you have difined inside your model.
This is the basic usage of the table view, but you can customize it with more features.
Read the full table view documentation
Read the advanced laravel-views documentation
Dynamic data table with some features like filters, pagination and search input, you can customize the headers, the data to be displayed for each row
Dynamic grid view using card data, same as a TableView this view has features like filters, pagination and a search input, you can also customize the card data as you need
Dynamic list view with filters, pagination, search input, and actions by each item, it is useful for small screens, you can also customize the item compoment for each row as you need.
Dynamic detail view to render a model attributes list with all the data you need, you can also customize the default component to create complex detail views and execute actions over the model is being used.
Check the contribution guide
Laravel Views is still under heavy development so I will be adding more awesome features and views.
Here's the plan for what's coming:
- New form view
- New layout view
- Add tooltips to actions buttons
- Add a download action
- Add translations
- Add links as a UI helpers