Striped feature and TailwindStriped Helper

[esshevelev]

Have you searched through other issues to see if your problem is already reported or has been fixed?

Yes, I did not find it.

Did you read the documentation?

Yes, I did not find it.

Have you tried to publish the views?

Yes - I didn't work.

Is there an error in the console?

No

PHP Version

8.3.3

PowerGrid

5.3

Laravel

10.45.1

Livewire

3.4

Alpine JS

No response

Theme

Tailwind 3.x

Describe the bug.

I'm trying to use the line highlighting feature. I took the code from the example:
https://demo.livewire-powergrid.com/examples/striped#

But there is no file with the class "App\Helpers\PowerGridThemes\TailwindStriped;" in app folder.

What could be the problem?

To Reproduce...

First click on "FOO" then....

Extra information

<?php
 //...

[dansysanalyst]

The "TailwindStriped" is a custom theme. You can read more about custom themes here.

You can create a new class in your application, let's useApp\Support\TailwindStriped as an example.

Copy the content from the demo repository App\Helpers\PowerGridThemes\TailwindStriped in this class:

<?php

namespace App\Support;

use PowerComponents\LivewirePowerGrid\Themes\Components\Table;
use PowerComponents\LivewirePowerGrid\Themes\Tailwind;
use PowerComponents\LivewirePowerGrid\Themes\Theme;

class TailwindStriped extends Tailwind
{
    public function table(): Table
    {
        return Theme::table('min-w-full dark:bg-neutral-800')
            ->div('rounded-t-lg relative border-x border-t border-pg-primary-200 dark:bg-pg-primary-700 dark:border-pg-primary-600')
            ->thead('shadow-sm rounded-t-lg bg-pg-primary-200 dark:bg-gray-900')
            ->thAction('!font-bold')
            ->tdAction('')
            ->tr('')
            ->trFilters('bg-white shadow-sm dark:bg-pg-primary-800')
            ->th('font-semibold px-2 pr-4 py-3 text-left text-xs font-semibold text-pg-primary-700 tracking-wider whitespace-nowrap dark:text-pg-primary-300')
            ->tbody('text-pg-primary-800')
            ->trBody('odd:bg-neutral-100 hover:odd:bg-neutral-200 dark:odd:bg-pg-primary-700 dark:hover:odd:bg-pg-primary-900 border-b border-pg-primary-100 dark:border-pg-primary-600 hover:bg-pg-primary-50 dark:bg-pg-primary-800 dark:hover:bg-pg-primary-800')
            ->tdBody('pl-[19px] px-3 py-2 whitespace-nowrap dark:text-pg-primary-200')
            ->tdBodyEmpty('px-3 py-2 whitespace-nowrap dark:text-pg-primary-200')
            ->trBodyClassTotalColumns('!bg-red-800')
            ->tdBodyTotalColumns('px-3 py-2 whitespace-nowrap dark:text-pg-primary-200 text-sm text-pg-primary-600 text-right space-y-2');
    }
}

You are welcome to modify this theme as you wish.

Then, in your component, you do:

<?php

namespace App\Livewire;

final class MyTable
{
    public function template(): ?string
    {
        return \App\Support\TailwindStriped::class;
    }

    // ...
}

[esshevelev]

Thank you very much! It works!