reusable MAT-TABLE dropdown filter is not working

Question

I'm trying to achieve like this EXAMPLE in reusable table. But seems it is not working.

my stackblitz

data-table.ts

export class DropdownOption {
  filterOption : [];
}

  @Input() control: FormControl;
  @Input() options: DropdownOption[];
  @Output() selectionChange = new EventEmitter<MatSelectChange>();

  onSelectionChange(event) {
    this.selectionChange.next(event);
  }

target.component

<h3>table 1</h3>
  <app-data-table [tableData]="tableData1" [columnHeader]="columnHeader1" (selectionChange)="onSelectionChange($event)"></app-data-table>

  <h3>table 2</h3>
  <app-data-table [tableData]="tableData2" [columnHeader]="columnHeader2"> </app-data-table>
</div>

Problem is:

1. i've add selectOption for 1st table only.. but its reflecting in my 2nd table also.

2. is my model correct

   export class DropdownOption {
     filterOption : [];
   } 
   

   ?

Answer 1

After know how create a custom filter based in two conditions like this SO, I can imagine an options like

options={column:'status',options:['Any status','Active','Disabled']}

you only need create a FormGroup with two fields, "the filter" and the "dropdown"

field:string:null;
options:any[];
form:FormGroup;
subscription:any;
@Input('options') set options(value){
   this.field=value.column
   this.options=value.options
   this.form=new FormGroup({
     filter:new FormControl();
     select:new FormControl(0);
   })
   if (this.subscription)
      this.subscription.unsubscribe();

   this.subscription=this.form.valueChanges(res=>{
        ..here call to filter..
   }) 
}

You use the variable "options" to create the select