настраиваемый ag-grid-фильтр с использованием раскрывающегося списка для фильтрации определенного столбца с использованием response-redux

Question

Я работаю над проектом, который требует использования ag-grid-фильтра снаружи с выпадающим списком, который отфильтрует результат одного столбца.

Я пытался сделать это, используя формы реагирования и избыточности.

<select id="ddl" className="custom-select" onChange={this.jsFunction(this)}>
    <option >Search category name</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

при изменении выпадающего списка значение должно быть отфильтровано с использованием реакции и ag-grid.

Answer 1

Этого можно добиться, используя Внешние фильтры ag-grid

. Быстрый фильтр предпочтителен, если вы хотите выполнить фильтрацию по всей сетке, и ваша функция компаратора в конечном итоге окажетсясложный, если вы хотите отфильтровать только из одного столбца.

В вашем html вы можете сделать onChange={this.jsFunction($event.target.value)}

jsFunction(filterVal) {
    this.filterVal= filterVal;
    gridOptions.api.onFilterChanged(); //this invokes your custom logic by forcing grid filtering
}

function doesExternalFilterPass(node) {
    if (this.filterVal) {
        return node.data.yourColumnValue === this.filterVal;
     }
    return true; //default case return all rows
   }

Наконец, обновите конфигурацию вашей сетки

isExternalFilterPresent: true,
doesExternalFilterPass: doesExternalFilterPass

вы можете найти официальный пример здесь

Answer 2

Вы можете использовать способность ag-grid для создания быстрого фильтра , который фильтрует по всем столбцам, и вы можете настроить его для применения к определенному столбцу