DEV Community

Cover image for Laravel Tablar Admin Dashboard
Taki Elias
Taki Elias

Posted on • Edited on

Laravel Tablar Admin Dashboard

It's been 2 weeks that I have been working on a New Laravel Admin Dashboard Template.

jeroennoten/laravel-adminlte is a well-known admin dashboard laravel package. I used it in different projects. It's highly customizable & feature-rich. The dynamic menu generator with auth guard is the most fantastic feature of this laravel package.

Tabler is one of the most popular modern HTML dashboard templates. I used this template a few years ago. There is no laravel package like jeroennoten/laravel-adminlte for Tabler HTML template. So, I decided to build a new laravel admin dashboard package using the eye-catching design of Tabler HTML template. It's based on Bootstrap 5.0. You would get most of the Bootstrap features in this template.

Vite js Next Generation Frontend Tooling. It's super fast & faster than Webpack. I generally use laravel mix to build assets but In some cases, it performs slowly. Vite js is the default assets builder of the latest laravel. So, my plan was to use Vite & add a dynamic menu generator with auth guard.

Here it is.

Tabler + Laravel = TabLar

Laravel 9.0+ Tabler Dashboard Preset built for Fast Development with Dark Mode. It also contains a dynamic menu generator that helps to maintain navigation permission easily.

Light Mode

Light Mode

Dark Mode

Dark Mode

The installation process is pretty straightforward.

Prerequisites

  • PHP 8.0+
  • Fresh Laravel Framework (10.* +)
  • Composer
  • Node js >= 18.0
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 components. For assets.

php artisan tablar:export-asset

For config.

php artisan tablar:export-config

For auth scaffolding.

php artisan tablar:export-auth

For auth views.

php artisan tablar:export-views

Before starting the server don't forget to run migrate

php artisan migrate

Now run

npm run dev

Now visit your login route

Login Page

N.B: If you use a 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

Enable Display Alert

Make display_alert to true from tablar.php config file

Use Tabler Pagination

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

Customization

View : 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 it to your requirements.

Menu: Use the below artisan command to export the config file.

For config.

php artisan tablar:export-config

A tablar.php file would be available in your config folder. You may customize your navigation bar in the menu block

'menu' => [ ....... ]

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

Laravel Tablar Github Repo: https://github.com/takielias/tablar

There is a CRUD generator 

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

That's It.

Top comments (0)