Adds option to set additional classes on table cells

[maltebaer]

Hello @Gustavinho 👋

I just discovered your package and I really like how easy it is to integrate and use it in your own project!

One thing I miss though is the ability to make tables more "responsive", e.g. hide columns on certain breakpoints. Hence, I was looking for a way to simply add TailwindCSS classes to the different cells in the table.

For example

<?php

namespace App\Http\Livewire;

use LaravelViews\Facades\Cell;
use LaravelViews\Facades\Header;
use LaravelViews\Views\TableView;

class ExampleTable extends TableView
{
    public $searchBy = ['name'];

    protected $model = User::class;

    public function headers(): array
    {
        return [
            'Name',
            'Email',
            Header::title('Very long description')->classNames('hidden md:table-cell'),
        ];
    }

    public function row($model): array
    {
        return [
            $model->name,
            $model->email,
            Cell::content($model->email)->classNames('hidden md:table-cell'),
        ];
    }
}

I checked the source code and found a way to achieve this. My solution is far from perfect and I am struggling with creating a Cell Facade and UI class but I wanted to present you my idea anyway.

One downside of this approach is, that one needs to add the path to the Livewire files in order for TailwindCSS to detect the newly added classes.

module.exports = {
    content: [
        ...
        './app/Http/Livewire/**/*.php',
    ],
};

I'm curious what you think about the idea and would be happy to invest more time in this PR if you think it is worth it.

Cheers, Malte

Note: My current implementation works if you replace

Cell::content($model->email)->classNames('hidden md:table-cell')

by

Header::title($model->email)->classNames('hidden md:table-cell')

[Gustavinho]

Hi @maltebaer 👋, I'm glad you like it, I see what you're trying to achieve and I like it, I have some ideas about it, your approach is great for adding any custom Tailwindcss class we could need, as you already said, the downside of this is the fact that we should add every file where we are using this method to the tailwindcss config file, I don't like that so much so I would add this method but I would recommend just to use it as a last alternative

I have another proposal for you, let me know your thoughts, you need something specific which is to hide some columns at some breakpoint, what if besides adding this classNames() method, you could build a hideInMobile() (or something like that) method so you can add to the table component the specific class it needs for hiding in mobile? that way you shouldn't have to add more files to the tailwind config file other than the path to this package,

These are some considerations

• Move the header of the table to a separate component
• Use Laravel conditional class if classes in the header get messy (note: the package has support for Laravel 7)
• If the hideInMobile() works fine, it would be great if we only should have to add it to the header, so the cells could know when to hide, otherwise, we will have to add it to both, header and cell 🤔
• I'm working on a 2.5.0 version and there is a release/2.5.0 branch, could you please point your PR to that branch? also pull those changes

What do you think????

I can help you with the Cell facade if you're still struggling with it

[maltebaer]

Hey @Gustavinho,

your suggestions sound great. I like the idea to have a "simple" API if you really only want to hide columns. Still, I guess it makes sense to add the possibility to add custom classes to each table cell?!

I'll try to implement the ideas and will get back to you, once I have something to present.

Thanks for your support.

[Gustavinho]

Hi @maltebaer, yeah having the possibility to add custom classes is also a great feature, I'd add both, and I would add more methods like the hideInMobile() that I'm suggesting as much as possible, and it would be great to be able to manual/fully customize it as well

[maltebaer]

So, I've added the options to hide columns at certain breakpoints and add additional class names to the table cells.

The usage would look like this:

<?php

namespace App\Http\Livewire;

use App\Models\User;
use LaravelViews\Views\TableView;
use LaravelViews\Facades\Header;
use LaravelViews\Facades\Cell;

class UsersTable extends TableView
{
    protected $model = User::class;

    public function headers(): array
    {
        return [
            'Name',
            Header::title('Email')->hideOnMobile('lg'),
            'Created',
            Header::title('Updated')->classNames('bg-red-200')
        ];
    }

    public function row($model)
    {
        return [
            $model->name,
            Cell::content($model->email)->classNames('text-red-500'),
            $model->created_at,
            $model->updated_at,
        ];
    }
}

Right now it is only possible to use one of Tailwind's breakpoint names for the hideOnMobile() method. However, if one uses custom breakpoint names, it is still possible to add responsiveness via the classNames() method. So I guess it should be fine?

By the way, I'm not so sure about whether it should be named hideOnMobile or hideInMobile?! 🤔

P.S.: Once we have found a good approach I'm happy to add more tests and update the docs.

[Gustavinho]

Hi @maltebaer, sorry for the late response, thanks so much, I'll take a look at your PR (I haven't been able to do it yet) and I'll share my thoughts, I'm also working on a new documentation site so I'll probably ask you to update the docs there