Version 2 Wishlist

[rappasoft]

After hundreds of pull requests on version one in a short few months, I have not done a good job on keeping the codebase clean and tidy and often even find myself lost when validating PR's from other people.

So it's time to start thinking about version 2, which will be a ground up rebuild to try to address all of the concerns from V1 since I never expected this package to get so popular, but I want it to be the best option around with the most features for a datatable.

So please start the discussion and I will do my best to keep a list here.

[fabio-ivona]

hi @rappasoft !

you've done a great job here!

as your package is growing, more and more PRs will show up, meaning people are using the package

my main advice, as a few packages manintainer and having worked on a few features for it: add a good test suite behind it, it will lower your burden

[Cigoler]

Yeah great package, previously I was using a custom solution based on Caleb's Livewire tutorials - but this is far more practical.

Not sure if this is what your asking for exactly, but just to get things started:

• able to declare the default columns viewed by users.
• slots for adding additional functionality like 'Add Row', etc.
• fully responsive mobile view - maybe switching to a list or card view.
• Inline editing.
• GroupBy support - I could be wrong but I don't think we can use this in the query
• Ability to add custom rows before/after - not sure if the custom view for rows can be expanded to allow that

Two other interesting alternatives to this package worth looking at the features of:

• https://filamentadmin.com/docs/2.x/tables/installation
• https://github.com/Power-Components/livewire-powergrid

[christian-forgacs]

I can confirm all wishes from @Cigoler and add one more wish:

• Custom QueryBuilder for the table like complex table from MedicOneSystems/livewire-datatables

[simonbuehler]

it would be great to have a way to make the search result be surrounded by a custom element like <span class="highlight">searchresult</span> so it could be highlighted with css

[rappasoft]

Would anyone be interested in this?

I kind of went off on a tangent making this, took a page out of jquery datatables for this one. It's just a proof of concept but:

Screen.Recording.2021-11-25.at.21.25.49.mov

Also, I'm doing my best to TDD this one, I started with a blank canvas and only just got to sorting and I already have 10x more tests than the whole current version:

[Cigoler]

Oof. How did I forget about Jquery datatables, yeah that looks awesome and very useful. I can see it being used as a fallback for responsive tables like you've shown there, or additional information to be made available on desktop.

On responsive tables, there's a great codepen here I came across a while back that I'm just throwing up for reference, I'm not sure how feasible something like this realistically is as a whole: Responsive & Accessible Data Table

I hacked together a quick Tailwind version for myself a while back that seems to work:

<div class="p-8 bg-gray-100">
    <div class="-mx-8 overflow-x-auto">
        <div class="inline-block min-w-full px-4">
            <div class="overflow-hidden bg-white shadow rounded-xl">
                <table class="w-full text-left table-auto md:divide-y">
                    <caption>List of Star Wars Films and Directors</caption>
                    <thead class="hidden md:table-row-group">
                        <tr class="divide-x bg-gray-50">
                            <th scope="col" class="px-4 py-2 text-sm font-semibold text-gray-600">
                                Title
                            </th>
                            <th scope="col" class="px-4 py-2 text-sm font-semibold text-gray-600">
                                Director
                            </th>
                            <th scope="col" class="px-4 py-2 text-sm font-semibold text-gray-600">
                                Released On
                            </th>
                        </tr>
                    </thead>
                    <tbody class="block whitespace-nowrap md:table-row-group md:divide-y">
                        @for ($i = 0; $i < 10; $i++)
                            <tr class="block divide-y group md:table-row md:divide-x">
                                <th scope="row" class="block px-4 py-3 text-center text-gray-600 truncate bg-gray-50 md:hidden group-first:rounded-t-xl">Star Wars: A New Hope</th>
                                <td data-title="Title" class="truncate block px-4 py-3 text-right md:text-left md:table-cell before:content-[attr(data-title)] before:float-left before:mr-4 md:before:content-[''] md:before:hidden before:font-bold">Star Wars: A New Hope</td>
                                <td class="truncate block px-4 py-3 text-right md:text-left md:table-cell before:content-[attr(data-title)] before:float-left before:mr-4 md:before:content-[''] md:before:hidden before:font-bold" data-title="Director">George Lucas</td>
                                <td class="truncate block px-4 py-3 text-right md:text-left md:table-cell before:content-[attr(data-title)] before:float-left before:mr-4 md:before:content-[''] md:before:hidden before:font-bold" data-title="Released On">May 25, 1977</td>
                            </tr>
                        @endfor
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

[rappasoft]

It's a good example. The road block I seem to face with these packages is making all the features work and look good with different themes, in this case Tailwind and 2 versions of bootstrap. I have to hope they have all the same classes available so I don't have to use inline styles. I also have build all of this without the need for a package javascript file (using alpine), but I'm not sure if that's how it will pan out in the end.

[gpibarra]

The package is great. Thanks for all the work.
I have a question about the setTableDataClass, setTableDataId, setTableDataAttributes methods. In many cases it is convenient to have these properties in the Column class, in this class there are the addClass and addAttributes methods, but they only apply to the headers, it would be useful to have an addDataClass method to put a class to all cells in a column. That way I avoid using the setTableDataClass function with something like:

if ($column->column() == 'my-column-name') {
    return 'my-class';
}

[rappasoft]

I've put way too much time into this feature:

Responsive.Columns.mov

[Cigoler]

Not sure I've seen something like that before, seems pretty novel, I like it!

[giles247]

In my opinion, and after years of trialling various methods for making tables responsive, this is one of the nicest methods. The only thing I would add is that sometimes this is not suitable. Therefore for all client sites we develop where client can use tables in content we offer two class options 'scroll' being behaviour where table layout is maintained with horizontal scrollbar, and the one similar to what you are proposing that we call 'col-collapse'. Though in fact your method is slightly better - presenting extra columns in single cell rather than just simply collapsing columns as we do. I guess my only point here is is possibly add a setting to disable this functionality if required?

[rappasoft]

Scroll is default, the column collapsing are just methods on the Column class, collapseOnTablet and collapseOnMobile. I do nothing automatically for you, overflow-y-scroll is default on the wrapper (which can be changed anyway)

This version will be the most configurable table plugin on the market.

[rappasoft]

If you wish, you may start testing the features I've finished on v2 from the v2 branch. The new docs are included on that branch but are not on my docs site yet.

[giles247]

Appreciate 'ground up' new version means testing everything, but are you able (or is there) as list of new features to test as well?

[rappasoft]

There's nothing generally new in there yet. I haven't even done filters and a bunch of other stuff yet. But it's generally a better-developed package so far. It has 300 tests at this point. It is slightly different to set up, but I want to know what is currently there still works for people.

[iAmKevinMcKee]

Looking forward to seeing what this looks like. The responsive stuff seems great.

I'll be interested to hear what your plans are for upgrading. How many changes will be breaking changes do you expect?

[rappasoft]

Since it's a full major version, I haven't been thinking about backward compatibility. I'll do my best to make an upgrade guide.

[christian-forgacs]

Please add support for Collections too instead of Queries.

[rappasoft]

I assume it should be able to support the full feature set right?

[christian-forgacs]

We don't need a implementation of arrays or collections. We can use calebporzio/sushi and create an array as eloquent :) In my case it works even with search and sort! I think you can add this hint in the documentation.

[iAmKevinMcKee]

What if the query() method allowed you to return an Eloquent builder or a collection or an array. If it's a collection or array, then parse it through Sushi and it's supported out of the box.

[christian-forgacs]

@iAmKevinMcKee calebporzio/sushi require ext-pdo_sqlite. It's not a good idea to require it for this package because for normal usage from database we don't need sqlite. I think its better to require sushi when you need it and add this information to the documentation. @rappasoft what do you mean?

[nocodelab]

This would be super!
You had a great idea @christian-forgacs !

[aldozumaran]

please add inline editing, toggle button (boolean fields)

[jazz7381]

Can we have support for mongoDB from this package https://github.com/jenssegers/laravel-mongodb

[christian-forgacs]

Try it with https://github.com/calebporzio/sushi the complete architecture is build with laravel eloquent not with the mongodb collection result.

[devsrv]

Hi @rappasoft you've done great work with this package.
I think this is something we should take a look : https://aaronfrancis.com/2022/efficient-pagination-using-deferred-joins#a-laravel-implementation
this technique improves pagination incredibly, can this be implemented with Livewire?

[nie7321]

I'd like to be able to register my own filter types, e.g. if I want to do something beyond select/multiselect/date.

I need a plain-old text field filter, and adding it is kind of a pain in v1 since there's no way to hook in to WithFilters::cleanFilters(), and I've got to maintain a copy of the filters.blade.php that has the extra @if().

I'm thinking the filter can define what view it uses and its own cleaning logic.

[rappasoft]

Hi All,

After more than 3 months and 500+ hours of work, I have nearly finished version 2 (Tailwind only).

I am going to try to get the docs up so you can test the v2 branch while I work on the bootstrap themes.

[satoved]

V2 is amazing!

[toldimiklos]

Hi,

I would like to ask: Is there a planned release schedule for a text input filter?

What I usually find is this: The client wants to do a search on some of the fields, and wants to put filters on ALL of the fields.
And currently is it not possible to add filters for text fields like SKU or Order Id.

[christian-forgacs]

A further nice to have feature for v2 is infinite scroll and inline editing :)

[satoved]

V2 is amazing!

[edikurniawan-dev]

collapse column on desktop mode, please

[JacAppDev]

Please bring back Custom Row View or make the whole model attributes accessable via $row.

As noted here https://rappasoft.com/docs/laravel-livewire-tables/v1/rows/custom-row-view when using v1 you could access every attribute of the model in Custom Row View because:

The row view will be passed the current model named as $row.

This was very helpful when, for example, you had to cross-check other attributes to adjust the current column value.
As I understand it, this now only works if the other attribute also has an existing column.

This was also very helpful, for example, to access and evaluate hasMany relations. (For example a list of tags that are assigned to a user).

[unipolar2001]

Please take note of the "setAdditionalSelects" configuration setting. It expects an array with the field id-s that you want added to the request. While not elegant, it will certainly get the job done.

Example
$this->setAdditionalSelects(['first_name', 'last_name', 'email']);

[lrljoe]

Absolutely!

You can also happily use the "$row" approach with either "label" or "format" approaches if you call the relations in your Builder() function (to avoid N+1)