Gustavinho / laravel-views by gustavinho

Laravel package to create beautiful common views like tables using only PHP code

56,259

621

Package Data
Maintainer Username:	gustavinho
Maintainer Contact:	gustavinho.martinez@gmail.com (Gustavo Martinez)
Package Create Date:	2020-03-12
Package Last Update:	2024-01-01
Home Page:	https://laravelviews.com
Language:	PHP
License:	MIT
Last Refreshed:	2024-04-12 03:14:12

Package Statistics
Total Downloads:	56,259
Monthly Downloads:	2,564
Daily Downloads:	50
Total Stars:	621
Total Watchers:	17
Total Forks:	75
Total Open Issues:	29

Laravel views

See live example

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

Table View example

Version compatibility

|Laravel views|Livewire|Laravel| |-|-|-| |2.x|2.x|7.x, 8.x| |1.x|1.x|5.x, 6.x|

Installation and basic usage

Installing laravel views

composer require laravel-views/laravel-views

Publishing assets

php artisan vendor:publish --tag=public --provider='LaravelViews\LaravelViewsServiceProvider' --force

Including assets

Add 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:clear

If you are already using your own Tailwindcss setup you can set laravel-views to not importing Tailwindcss by default. (Importing assets)

First table view

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 UsersTableView

With 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
        ];
    }
}

Rendering the table view

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