How to filter in local environment with Ag-grid?

Question

I want filter the columns in local environment (no server side) in Angular 2. The user choose a status from a selected menu for each column.

How can I do? Is there a best practice to do it?

Thanks!

My code:

columnDefs: [
          {
            headerName: "Job status",
            field: "jobStatus",
            floatingFilterComponentFramework: HListCellComponent,
            floatingFilterComponentParams: {
                suppressFilterButton: true,
                items: [
                    {
                        label: 'All',
                        value: 'all'
                    },
                    {
                        label: 'Created',
                        value: 'CREATED'
                    },
                    {
                        label: 'Running',
                        value: 'RUNNING'
                    },
                    ...
                ]
            }
        },
        ...
        suppressCellSelection: true,
        enableRangeSelection: true,
        floatingFilter: true,
        suppressRowClickSelection: true,
        enableColResize: true,
        enableFilter: true,
        onFilterChanged: (event: FilterChangedEvent) => {
          // TODO: How to filter in local environment?
        }
     }

HListCellComponent is a component that create a selected menu, the code is:

  agInit(params: any) {
        this.params = params;
        const api: GridApi = params.api;
        const column: Column = params.column;

        this.items = params.items;

        this.formControl.valueChanges
          .debounce(() => Observable.timer(500))
          .map(value => value === 'all' ? null : value)
          .subscribe(value => {
              const colName = column.getColId();
              const a: any = api.getFilterInstance(colName);
              if (!a.value) {
                  a.value = {};
              }
              a.value[colName] = value;

              api.onFilterChanged();
          });
  }

Answer 1

I found a solution! I created an array of JSON objects where I stored filter values when user select it, for example:

let filterObject = [ 
    { jobStatus: 'CREATED' },
    ...
];

I use a lambda function to filter array:

for (var i = 0; i < filterObject.length; i++) {
        for(let key in filterObject[i]) {
            this.jobs = this.jobs.filter(item => item[key] === filterObject[i][key]);
    }
}