Add filterable column

[nickfls]

In addition to searching, will it be possible to define a filtering column?

More often than not there is a need to filter the table based on values in one of more columns and then search through a scoped result set.

In terms of example provided in documentation:

• filter all users that have a role "admins"
• search by name

[detygon]

Yep, I was about to open this issue. I came across a similar project that has this feature. I may submit a PR if this feature is approved. @rappasoft What do you think ?

[rappasoft]

I don't think it's a bad idea, I don't know if i have time to implement it right now so if you have time feel free.

[jeff-crosby]

I would love this feature in one of my projects, but it seems there should be a way to build this outside the package and have it feed the date range as another param into this package's component. I see this package supports passing properties via the Livewire component at https://github.com/rappasoft/laravel-livewire-tables#passing-properties

I have setup https://www.daterangepicker.com/#example1 on the page outside of this package's component. I was going to experiment with reloading the page on date range selection and putting the date range on the page's query string to pull it into this package's component that way (see daterange callback below), but that is far from ideal since it would reset all other state changes (eg: search, sorting, pagination, etc. changes) for the component.

There should be a way to pass this property without reloading the page. I'm a Livewire beginner, though. Maybe someone else sees/knows how to integrate the two. If not, I'll keep studying Livewire more.

        $('#reportrange').on('apply.daterangepicker', function(ev, picker) {
            var start = picker.startDate.format('YYYY-MM-DD');
            var end   = picker.endDate.format('YYYY-MM-DD');
            var url   = window.location.protocol + "//" + window.location.host + window.location.pathname;
            document.location = url + '?start_date=' + start + '&end_date=' + end;
        });

[detygon]

@rappasoft I'm OK to work on this feature. Here are two approaches I'm considering:

UI Only: Provides only the UI for creating and selecting filters and leave the filtering logic to the user.

How it works:

• The user defines the filter component he/she wants to use and the name of the query params
• The filter component is shown in the table view like the search component
• When the user selects a field, it is appended to the URL like search and pagination
• The array of filters is available in the query method so the user can use whatever method he wants to filter his data

Advantages: Very flexible, users use their own approach, share the same filtering logic for different parts of the app (eg. API, WEB), they can even build custom filters component. Disadvantages: Users have to do extra work for the filters to work.

Complete: Provides the UI + the option to define filtering logic which is run automatically like the search functionnality.

Advantages: can be used right away. Disadvantages: cannot be shared with other parts of the app.

So I'm looking for feedback and ideas.

Ps: I prefer the first one, I'll write a quick guide on how to use it in a project.

[jeff-crosby]

@detygon - Sounds good. I agree with your first approach. That lets the developer pick the UI library they would prefer like Bootstrap, Tailwind, etc. An example/demo with Bootstrap or something else would be a nice addition and people could contribute examples in other UIs.

[detygon]

Ok, I'm working on it ! @jeff-crosby @rappasoft .

[daguilarm]

I am working on this, I do not know if it is something that can fit with what you have in mind...

[detygon]

@daguilarm Yes, that's what I was thinking of. I'm completing the first draft. I'll create a PR and share an example repo in a couple of days.

[detygon]

I already have a working example in prod, I'm just cleaning the code and do some refactoring. I aim to make it very flexible. If you have already implemented something would you mind sharing it ? We could share ideas and come up with a solid implementation.

[pkeogan]

@detygon if you upload your code to your fork of the livewire table, I can help with it. Was going to start a solution for myself, but makes more sense to help you with where you are at. Looks good though!

[daguilarm]

Hi @detygon, here you have my commits:

https://github.com/daguilarm/laravel-livewire-tables/commit/d84a54b03f48f342454b8246da99fbd9e62f11a5

And for use the filter:

/**
 * Add the search filters and the filter row
 */
public array $filters = [
    [
        'filter' => 'year',
        'field' => 'worker_start_year',
    ],
    [
        'filter' => 'date',
        'field' => 'application_date',
    ],
];

[usernotnull]

+1 Any progress on this? I can easily whip up an integration with alpinejs but I thought I'd check if there's someone working on it natively with this lib...

[detygon]

@daguilarm @RJFares Hi, I was really busy lately. I'll share my current repository.

[detygon]

@rappasoft @daguilarm @RJFares You can access the initial work here and the demo project here

[detygon]

Here is the demo:

[Geovanek]

Any forecast for this feature to be implemented?

[detygon]

Hi all! Sorry for the late reply. I was really busy lately. I'll try my best to submit a PR as soon as possible.

[nathandaly]

Bump 😊

[detygon]

Finally got time to work on this (yes, I know :) ), I'll submit a PR by the end of this week. I'm started documenting the feature. Also, I've been thinking about @daguilarm's approach. So stay tuned ! Any suggestion is welcome in the meantime. Thanks all for your patience.

[LilaQ]

More Bump 😅

[Khalid-Ihya]

@detygon Here is another big BUMP 😅

[renepardon]

Meanwhile I use @detygon ’s package directly instead of waiting for a merge ;)

[invaders-xx]

Any chance to have this functionality merged ? @detygon : it seems that your approach is only for tailwind ? Any chance to have this working on bootstrap 4 ?

[rappasoft]

Closing this, will look at PR for current version but the next 1.0 versions i've built from the ground up. I probably should have said something to avoid you guys wasting time on code that was not going to be used.