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.