multiselect filter options are useless

[inmanturbo]

Obviously the only use for dropdown select options is to be able to populate the dropdown with the column data. Is there a single grid that does this one thing that is the only reason for needing a grid in the first place? I would never bother with any grid or datatables were it not for needing this one feature and as a result I am stuck with jquery and datatables on enterprise projects as much as I would love to use something like react.

this

const selectOptions = {
  0: 'good',
  1: 'Bad',
  2: 'unknown'
};

const columns = [{
  dataField: 'id',
  text: 'Product ID'
}, {
  dataField: 'name',
  text: 'Product Name'
}, {
  dataField: 'quality',
  text: 'Product Quailty',
  formatter: cell => selectOptions[cell],
  filter: multiSelectFilter({
    options: selectOptions
  })
}];

<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />

is pointless. Who is going to handwrite all the options for thousands of rows of data?

and this

const columns2 = [..., {
  dataField: 'quality',
  text: 'Product Quailty',
  formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '',
  filter: selectFilter({
    options: selectOptionsArr
  })
}];

simply doesn't work unless you actually have a "label" in your database fields. What's the point?

I really apologize for the tone of this issue. I've been spending many sleepless nights surfing grids for react and I'm unable to figure out how to implement this requirement with any of them. The really problem is that I'm just incredibly inept when it comes to javascript.

I just need a grid that I can filter with dropdowns populated with the columnData. And one that gives me the sum of the values in visible rows whether they are sting float or otherwise (I've already solved that part for every grid I've tried using a callback:

export const footerCallback = columnData => {

    const intVal = function (i) {
        return typeof i === 'string' ?
            i.replace(/[\$,]/g, '') * 1 :
            typeof i === 'number' ?
                i : 0;
    };

    const pageTotal = columnData.reduce(function (a, b) {
        return intVal(a) + intVal(b);
    }, 0);

    let sumVisibleRows = pageTotal.toFixed(2);


    return sumVisibleRows;

}

I just need a grid that I can filter with dropdowns populated with the columnData. Something simple like
filter: columnData => ...

I would like to sponsor this feature with a donation.

[AllenFang]

@inmanturbo
there are some suggestions

1. for filter, if you don't like the default filter, you can
   1.a: Custom the filter component.example
   2.b: implement filter logic by yourself.example

2. However, filter only work on single column, if your requirement is search, we have it:
   2.a enable search
   2.b if you don't like the way of search, you can still custom it.