Select dropdown with LIKE behaviour

[nigellima]

Hello.

In my table, the first column is a combination of data that I pass a string with @ as separator and the format them with the formatter function as follow:

This is my column definition:

let projectFilter;
  columns = [{
       dataField: 'project',
       text: 'Project',
       filter: textFilter({
         options: fpsoOptions,
         getFilter(filter){
           projectFilter = filter;
         },
         style: { display: 'none' }
       }),
       sort: true,
       formatter: this.projectFormatter,
       headerStyle: (col, idx) => {
         return smHeaderStyle;
       },
     }, [..]

And this is the projectFormatter function:

projectFormatter = (cell, row) => {
    const values = cell.split('|');
    const fpsos = values[0].split('@');
    return (
      <div>
        {fpsos.map((pu, idx) => {
          const identity = pu.split(';')[0];
          const id = pu.split(';')[1];
          const separator = idx !== fpsos.length - 1 ? ", " : '';
          return (
            <Link to={`/view/${id}/fpso`}>{identity}{separator}</Link>
          )
        })}
        <br/>
        <span><b>{ values[1] }</b></span><br/>
      </div>
    );
  }

The filtering works fine when it is a text input filter. Now, I'm trying to do a custom select filter with a LIKE operator behaviour, which the selected value in the dropdown (fpso list) would be filtered as a substring of this column.

This is my onChange function that triggers the table filter, as shown in the documentation here. But I'm not sure how to get the like behaviour.

 const onChangeFilter = (e) => {
        projectFilter(e.target.value)
    }

I appreciate any clue/help. Thanks in advance

[AllenFang]

@nigellima so far the select filter use EQ as default comparator and it can not be change/configure. I will enhance this when I have time, thanks

[AllenFang]

BTW, if you are implement the custom filter, the default comparator will be LIKE, here is a custom filter example.

[AllenFang]

if you can, would you please share your code on codesandbox.io and keep it simple and minimal? That will be easier for me to help you. Thanks.

You can base on this example and be careful the version, thanks

[nigellima]

Hi @AllenFang
Thank you very much for your replies. Is it possible to position this custom filter outside the table?

[AllenFang]

I think so far it's impossible to render embed filter outside of table, but it's good question. Currently, we allow developer to render search bar, export csv button and pagination in any position. but for embed column filter, we still not yet support. (the embed filter here is mean the all the default filters we support now, like: text, date, select filter etc)

but if you want to custom a filter which outside the table, I think it's definitely feasible.

Let me know if you want to completely custom a column filter which outside the table.