maxi032/tablar

Tablar: A Laravel Dashboard Preset Based on Tabler HTML Template + Vite. Demo https://tablar.ebuz.xyz

Tabler + Laravel = TabLar

Tablar: A Laravel Dashboard Preset Featuring Dark Mode and Dynamic Menu Generation for Effortless Navigation and Fast Development.

Inspired By Laravel Adminlte jeroennoten/Laravel-AdminLTE

Demo

https://tablar.ebuz.xyz

tablar@ebuz.xyz
12345678

Laravel Tablar CRUD Generator https://github.com/takielias/tablar-crud-generator

Laravel Tablar Admin Dashboard Package. It allows you to make beautiful feature rich admin dashboard Template using Larave, Tabler HTML Template & Super Fast https://vitejs.dev.

Table of Contents

• Getting Started
  • Prerequisites
  • Installation
• Usage
• Contributing
• License
• Contact

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running, follow these simple example steps.

Prerequisites

• PHP >= 8.1
• Fresh Laravel Framework (10.* recommended)
• Composer
• Node js >= 18.0

Installation

composer require takielias/tablar

First Install the preset

php artisan tablar:install

Now

npm install

Finally, export the config, assets & auth scaffolding.

php artisan tablar:export-all

N.B: You may export individual component. For assets.

php artisan tablar:export-assets

For config.

php artisan tablar:export-config

For Js.

php artisan tablar:export-js

For auth scaffolding.

php artisan tablar:export-auth

For auth views.

php artisan tablar:export-views

Before staring the server don't forget to run migrate

php artisan migrate

Now run

npm run dev

Now visit your login route

N.B : If you use virtual host for your laravel application, don't forget to change the APP_URL

APP_URL=http://your virtual host

Usage

To use the blade template provided by this package, just create a new blade file and extend the layout with @extends(' tablar::page'). You may use the following code snippet:

@extends('tablar::page')

@section('content')
    <!-- Page header -->
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <h2 class="page-title">
                        Empty page
                    </h2>
                </div>
            </div>
        </div>
    </div>
    <!-- Page body -->
    <div class="page-body">
        <div class="container-xl">
            @if(config('tablar','display_alert'))
                @include('tablar::common.alert')
            @endif

            <!-- Page Content goes here -->

        </div>
    </div>
@endsection

External style Tag

If you need to use custom script in different pages, please follow the instruction below to achieve it.

@section('css')
    <style>
     ......
    </style>
@stop

External script Tag

If you need to use custom script in different pages, please follow the instruction below to achieve it.

@section('js')
    <script type="module">
        $(".btn-test").click(function () {
            alert("The Button was clicked.");
        });
    </script>
@stop

Enable Display Alert

Make display_alert to true from tablar.php config file

Use Tabler Pagination

{!! $modelName->links('tablar::pagination') !!}

Customization

Views

Use the below artisan command to export the views

php artisan tablar:export-views

All view files would be exported to resources/views/vendor/tablar directory. You can customize as your requirements.

Menu

Use the below artisan command to export the config file.

For config.

php artisan tablar:export-config

You can specify the set of menu items to display in the top navbar. A menu item representing a link should have a text attribute and an url (or route) attribute. Also, and optionally, you can use the icon attribute to specify an icon from Tablar Icon for every menu item. There is a can attribute that can be used as a filter with the Laravel's built-in Gate functionality. Even more, you can create a nested menu using the submenu attribute.

Here is a basic example that will give you a quick overview of the menu configuration:

    'menu' => [
        // Navbar items:
        [
            'text' => 'Home',
            'icon' => 'ti ti-home',
            'label' => 4,
            'label_color' => 'success',
        ],
        [
            'text' => 'Support',
            'url' => '#',
            'icon' => 'ti ti-help',
            'submenu' => [
                [
                    'text' => 'Ticket',
                    'url' => '#',
                    'icon' => 'ti ti-article'
                ]
            ],
        ],

    ],

We are going to give a summary of the available attributes for the menu items. Take in consideration that most of these attributes are optional and will be explained in future with more details.

Attribute	Description
active	To define when the item should have the active style.
can	Permissions of the item for use with Laravel's Gate.
classes	To add custom classes to a menu item.
icon	A font awesome icon for the item.
id	To define an id for the menu item.
label	Text for a badge associated with the item.
route	A route name, usually used on link items.
submenu	Array with child items that enables nested menus definition.
target	The underlying target attribute for link items.
text	Text representing the name of the item.
url	An URL path, normally used on link items.

Now, we are going to review all of these attributes with more detail:

The active Attribute:

By default, a menu item is considered active if any of the following conditions holds:

• The current path exactly matches the url attribute.
• The current path without the query parameters matches the url attribute.
• If it has a submenu containing an active menu item.

[
    'text'   => 'Pages',
    'url'    => 'pages',
    'active' => ['pages', 'content', 'content*', 'regex:@^content/[0-9]+$@']
]

In the previous case, the menu item will be considered active for all the next URLs:

• http://my.domain.com/pages
• http://my.domain.com/content
• http://my.domain.com/content-user (because content*)
• http://my.domain.com/content/1234 (because regex:@^content/[0-9]+$@)

The can Attribute:

You may use the can attribute if you want to conditionally show a menu item. This integrates with the Laravel's Gate functionality. If you need to conditionally show a header item, you need to wrap it in an array using the header attribute. You can also use multiple conditions entries with an array, check the next example for details:

[
    [
        'header' => 'Posts',
        'can'    => 'read-post',
    ],
    [
        'text' => 'Add new post',
        'url'  => 'admin/blog/new',
        'can'  => ['add-post', 'other-right'],
    ],
]

So, for the previous example the header will show only if the user has the read-post permission, and the link will show if the user has the add-post or other-right permissions.

The classes Attribute:

This attribute provides a way to add custom classes to a particular menu item. The value should be a string with one or multiple class names, similar to the HTML class attribute. For example, you can make a colorful HEADER item centered on the left sidebar with the next definition:

[
    'header'   => 'account_settings',
    'classes'  => 'text-yellow text-bold text-center',
]

Or you can highlight an important link item with something like this:

[
    'text'     => 'Important Link',
    'url'      => 'important/link',
    'icon'     => 'ti ti-alert-triangle',
    'classes'  => 'text-danger text-uppercase',
]

The icon Attributes:

This attribute is optional, and you will get an open circle if you leave it out. The available icons that you can use are those from Tabler Icons. Just specify the name of the icon, and it will appear in front of your menu item. Example:

[
    'text'       => 'profile',
    'url'        => 'user/profile',
    'icon'       => 'ti ti-user',
]

The id Attribute:

This attribute is optional and just provide a way to add an id to the element that wraps the menu item, generally a <li> tag. This can be useful when you need to target the menu item from Javascript or jQuery in order to perform updates on it.

[
    'text'       => 'profile',
    'url'        => 'user/profile',
    'id'         => 'profile-id',
]

The route Attribute:

You can use this attribute to assign a Laravel route name to a link item, if you choose to use this attribute, then don't combine it with the url attribute, for example:

[
    'text'  => 'Profile',
    'route' => 'admin.profile',
    'icon'  => 'ti ti-user',
]

Even more, you can define a route with parameters using an array where the first value is the route name and the second value an array with the parameters, as shown next:

[
    'text'  => 'Profile',
    'route' => ['admin.profile', ['userID' => '673']],
    'icon'  => 'ti ti-user',
]

The submenu Attribute:

This attribute provides a way to create a menu item containing child items. With this feature you can create nested menus. You can create a menu with items in the sidebar and/or the top navbar. Example:

[
    'text'    => 'menu',
    'icon'    => 'ti ti-share',
    'submenu' => [
        [
            'text' => 'child 1',
            'url'  => 'menu/child1',
        ],
        [
            'text' => 'child 2',
            'url'  => 'menu/child2',
        ],
    ],
]

The target Attribute:

This attribute is optional and intended to be used only with link items. It represents the underlying HTML target attribute for a link item. As an example, you can setup this attribute to the '_blank' value in order to open the link in a new tab.

The text Attribute:

The value of this attribute is just the descriptive text for a menu item (except for headers).

The url Attribute:

The value of this attribute should be the URL for a link item. You can use a full URL with the domain part or without it. Don't combine this attribute with the route attribute. Examples:

[
    'text' => 'profile',
    'url'  => 'http://my.domain.com/user/profile',
    'icon' => 'ti ti-user',
],
[
    'text' => 'change_password',
    'url'  => 'admin/settings',
    'icon' => 'ti ti-settings-automation',
],

Custom Menu Filters

You can set the filters you want to include for rendering the menu using the filters configuration of the config file. You can add your own filters to this array after you've created them. You can comment out the GateFilter if you don't want to use Laravel's built in Gate functionality. The current default set of menu filters is:

'filters' => [
        TakiElias\Tablar\Menu\Filters\GateFilter::class,
        TakiElias\Tablar\Menu\Filters\HrefFilter::class,
        TakiElias\Tablar\Menu\Filters\SearchFilter::class,
        TakiElias\Tablar\Menu\Filters\ActiveFilter::class,
        TakiElias\Tablar\Menu\Filters\ClassesFilter::class,
        TakiElias\Tablar\Menu\Filters\LangFilter::class,
        TakiElias\Tablar\Menu\Filters\DataFilter::class,
],

If you need to use a custom menu filter, you can add your own menu filters to the previous array. This can be useful, for example, when you are using a third-party package for authorization (instead of the Laravel's Gate functionality).

In order to provide more details, we are going to show an example of how you can configure the Laratrust Package. Start by creating your custom filter implementation in App\Filter:

<?php

namespace App\Filter;

use TakiElias\Tablar\Menu\Filters\FilterInterface;
use Laratrust\Laratrust;

class RolePermissionMenuFilter implements FilterInterface
{
    public function transform($item)
    {
        if (isset($item['permission']) && ! Laratrust::isAbleTo($item['permission'])) {
            $item['restricted'] = true;
        }

        return $item;
    }
}

In order to use Laravel Permission, we are going to show an example of how you can configure. Start by creating your custom filter implementation:

<?php

namespace App\Filter;

use Illuminate\Support\Facades\Auth;
use TakiElias\Tablar\Menu\Builder;
use TakiElias\Tablar\Menu\Filters\FilterInterface;

class RolePermissionMenuFilter implements FilterInterface
{
    public function transform($item, Builder $builder)
    {
        if (!$this->isVisible($item)) {
            return false;
        }

        if (isset($item['header'])) {
            $item = $item['header'];
        }

        return $item;
    }

    protected function isVisible($item)
    {
        // check if a user is a member of specified role(s)
        if (isset($item['hasAnyRole'])) {
            if (!(Auth::user())->hasAnyRole($item['hasAnyRole'])) {
                // not a member of any valid hasAnyRole; check if user has been granted explicit permission
                if (isset($item['hasAnyPermission']) && (Auth::user())->hasAnyPermission($item['hasAnyPermission'])) {
                    return true;
                } else {
                    return false;
                }
            } else {
                return true;
            }
        } elseif (isset($item['hasRole'])) {
            if (!(Auth::user())->hasRole($item['hasRole'])) {
                if (isset($item['hasAnyPermission']) && (Auth::user())->hasAnyPermission($item['hasAnyPermission'])) {
                    return true;
                } else {
                    return false;
                }
            } else {
                return true;
            }
        } else {
            // valid hasAnyRole not defined; check if user has been granted explicit permission
            if (isset($item['hasAnyPermission'])) {
                // permissions are defined
                if ((Auth::user())->hasAnyPermission($item['hasAnyPermission'])) {
                    return true;
                } else {
                    return false;
                }
            } else {
                // no valid hasAnyRole or permissions defined; allow for all users
                return true;
            }
        }
    }
}

And then add the following configuration to the config/tablar.php file:

'filters' => [
    ...
       //TakiElias\Tablar\Menu\Filters\GateFilter::class,
        TakiElias\Tablar\Menu\Filters\HrefFilter::class,
        TakiElias\Tablar\Menu\Filters\SearchFilter::class,
        TakiElias\Tablar\Menu\Filters\ActiveFilter::class,
        TakiElias\Tablar\Menu\Filters\ClassesFilter::class,
        TakiElias\Tablar\Menu\Filters\LangFilter::class,
        TakiElias\Tablar\Menu\Filters\DataFilter::class,
        
        MyApp\RolePermissionMenuFilter::class,
]

A tablar.php file would be available into your config folder.

That's It.

Contributing

Contributions are what makes the open source community such an amazing place to learn, inspire and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Taki Elias - @takiele - https://ebuz.xyz - taki.elias@gmail.com

Support on Buy Me A Coffee

Hello!!! Help me out for a cup of ☕!