LaraGrid
  • LaraGrid
  • Installation
  • Publishable
  • Usage
    • Base Usage
      • Create a Grid
      • Display a Grid
    • Examples
  • Theme
    • Default Theme
    • Customize the Theme
  • Column
    • Description
    • Create a Column
    • Methods
    • Usage
  • Column Group
    • Description
    • Create a ColumnGroup
    • Methods
    • Usage
  • Filter
    • Description
    • Available Filters
    • Usage
    • Custom Builder
    • Custom filter
    • Show filtering and sorting in url
  • Filter Reset Button
    • Description
    • Usage
    • Customization
  • Layout
    • Description
    • Usage
  • PowerJoins in LaraGrid
    • Why do we use it
Powered by GitBook
On this page

Was this helpful?

  1. Theme

Customize the Theme

You can customize the appearance of the grid by extending the BaseLaraGridTheme class and setting the desired CSS.

use BoredProgrammers\LaraGrid\Theme\BaseLaraGridTheme;
use BoredProgrammers\LaraGrid\Theme\FilterTheme;
use BoredProgrammers\LaraGrid\Theme\TBodyTheme;
use BoredProgrammers\LaraGrid\Theme\THeadTheme;

class MyTheme extends BaseLaraGridTheme
{

    public static function make(): static
    {
        $theme = new static();

        $theme->setTableClass('min-w-full table-auto');

        $theme->setTheadTheme(
            THeadTheme::make()
                ->setTheadClass('pb-4')
                ->setThClass('pb-3 px-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap')
        );

        $theme->setTbodyTheme(
            TBodyTheme::make()
                ->setEmptyMessageClass('text-white')
                ->setTdClass('whitespace-nowrap p-3 text-sm text-gray-500')
                ->setGroupTdClass('whitespace-nowrap flex items-center p-3 text-sm text-gray-500')

                ->setRecordTrClass(fn($record) => $record->role === 'admin' ? 'bg-red-500' : 'bg-white'); // you can also set a closure for record tr class. Pass a closure that returns a string class.
                ->setRecordTrClass('bg-white odd:bg-gray-100'); // If you don't want to set a closure, you can just pass a string class.
        );

        $theme->setFilterTheme(
            FilterTheme::make()
                ->setFilterTextClass('bg-white w-full rounded-xl border border-gray-300')
                ->setFilterSelectClass('bg-white w-full rounded-xl border border-gray-300')
                ->setFilterDateClass('bg-white w-full rounded-xl border border-gray-300')
        );
        
        // those are not all methods, you can find all of them in BaseLaraGridTheme, THeadTheme, TBodyTheme and FilterTheme classes

        return $theme;
    }
    
}

Then, in your grid class, you need to override the getTheme method and return an instance of your theme class.

    protected function getTheme(): BaseLaraGridTheme
    {
        return MyTheme::make();
    }

By default, there is a theme called TailwindTheme.

PreviousDefault ThemeNextDescription

Last updated 1 year ago

Was this helpful?