[REACT] Custom filter types in each column of grid with remote filtering

[shubham_gupta]

Hi team,

I would like to understand, is there a way to implement custom filters for each column?
Currently, I have gone through examples and understand we can have a dropdown (single and multiselect), numbers, text etc. We can pass a type name in the filterField.

Let's say I want to render a list of checkboxes along with a typeahead dropdown for a column. For another column, a few radio buttons, then a range selector etc.
The type and values to render in the filter are received from an API.

Can you please guide me to achieve this?

Grid version: grid-trial@6.1.0-alpha-1

[alex.l]

Hi,

Please see docs here https://bryntum.com/products/grid/docs/api/Grid/column/Column#config-filterable
You can specify any field you need using filterField prop as demonstrated in code snippet in docs

         {
             field : 'start',
             // Changing default field type
             filterable: {
                 filterField : {
                     type : 'datetime' // use built-in field type or create own
                 }
             }
         },

The type and values to render in the filter are received from an API.

Another code snippet

    columns : [
         {
             field : 'name',
             filterable: {
                 filterField : {
                    type  : 'combo',
                    store : new AjaxStore({
                        readUrl  : 'data/names.json',
                        autoLoad : true
                    })
                 }
             }
         }
    ]

[shubham_gupta]

Hi Alex,

How to have custom type? If I want list of checkboxes or radio in the filter, as in the screenshot?

filter.png (10.43 KiB) Viewed 295 times

[alex.l]

Hi,

you need to define new class and set your type in it. Please see examples source code in sources you downloaded or online here https://bryntum.com/products/grid/examples/celledit/

It has YesNo widget, as example

class YesNo extends Widget {

static $name = 'YesNo';

// Factoryable type name
static type = 'yesno';

In your case you need Combo as a base.
Docs here https://bryntum.com/products/grid/docs/api/Core/widget/Combo
We have built-in multi-select mode for combos https://bryntum.com/products/grid/docs/api/Core/widget/Combo#multiselect-grouped-list

[shubham_gupta]

Hi Alex,

Is there any documentation which defines the interface for the custom class that I need to write to implement the above?
Also, if I write the class, how can I pass that in filterField type?
I tried by using initClass() method but it did not have any impact.

[alex.l]

Hi there,

There is nothing mandatory in the class definition when you expands. Just check demo I mentioned, it will be clear for you.

Also, if I write the class, how can I pass that in filterField type?

You extends a combo, so there is no filterField property in there, that's prop of Column. All you need is define your own type and init class afterwards, as it shown in my code snippet and in the demo I mentioned.

class MyCombo extends COmbo {

static $name = 'MyCombo';

// Factoryable type name
static type = 'mycombo';

}

MyCombo.initClass();

In columns definition

    columns : [
         {
             field : 'My Column',
             filterable: {
                 filterField : {
                    type  : 'mycombo'
                 }
             }
         }
    ]

[shubham_gupta]

I am not able to add JSX in the template() method of the custom class. It seems like it accepts only html. So, if I have a checkbox React component, I am not able to add it.

[alex.l]

Yes, you can't use JSX everywhere you wish. Why do you need JSX? Is it something that not possible to do with simple HTML? What is the goal of this approach?

[shubham_gupta]

so for example, I want a column filter to have an autocomplete dropdown, along with list of checkboxes. Either I can select from the autocomplete, or I can check multiple checkbox values. For this, we expect that while we click on filter icon, a popover should open, which would contain the dropdown at first and below that would be checkbox items list as in the screenshot above.

Then the API will trigger with the selected or checked values and we would have filtered grid.

Also we would need certain styling for it for which we want to reuse the existing components from our UI component library and we use styled-components.

So, I feel using simple html in an string form would be an overhead as we multiple custom filter types that are to be implemented.
End result should look similar to below image.

Custom filter

filter (1).png (10.43 KiB) Viewed 127 times

[alex.l]

It's all achievable using our JS component. I shared docs above, please take a look.
In your case you don't need to. extend our field, you just need to use React component instead of our field.
Please check the guide here https://bryntum.com/products/gantt/docs/guide/Gantt/integration/react/guide#react-component-in-widget