NP
Narendra Patil

Filter Modal - Copy this React, Tailwind Component to your project

<ion header> <ion toolbar> <ion title>Filter Columns</ion title> <ion buttons slot="end"> <ion button (click)="dismiss()"> <ion icon name="close outline"></ion icon> </ion button> </ion buttons> </ion toolbar> </ion header> <ion content> <form [formGroup]="filterForm"> <div formArrayName="filters"> <div *ngFor="let filter of filterControls.controls; let i = index" [formGroupName]="i"> <ion item> <ion label>Select Column</ion label> <ion select formControlName="column"> <ion select option *ngFor="let column of columns" [value]="column">{{ column }}</ion select option> </ion select> </ion item> <ion item> <ion label>Filter Type</ion label> <ion select formControlName="filterType" (ionChange)="onFilterTypeChange(i)"> <ion select option value="range">Range</ion select option> <ion select option value="equal">Equal</ion select option> <ion select option value="greaterThan">Greater Than</ion select option> <ion select option value="lessThan">Less Than</ion select option> <ion select option value="contains">Contains</ion select option> <ion select option value="dateRange">Date Range</ion select option> </ion select> </ion item> <! Dynamic Inputs Based on Filter Type > <div [ngSwitch]="filter.get('filterType')?.value"> <ion item *ngSwitchCase="'range'"> <ion label>Min</ion label> <ion input formControlName="min" type="number"></ion input> <ion label>Max</ion label> <ion input formControlName="max" type="number"></ion input> </ion item> <ion item *ngSwitchCase="'equal'"> <ion label>Value</ion label> <ion input formControlName="value" type="text"></ion input> </ion item> <ion item *ngSwitchCase="'greaterThan'"> <ion label>Value</ion label> <ion input formControlName="value" type="number"></ion input> </ion item> <ion item *ngSwitchCase="'lessThan'"> <ion label>Value</ion label> <ion input formControlName="value" type="number"></ion input> </ion item> <ion item *ngSwitchCase="'contains'"> <ion label>Contains</ion label> <ion input formControlName="value" type="text"></ion input> </ion item> <ion item *ngSwitchCase="'dateRange'"> <ion label>Start Date</ion label> <ion datetime formControlName="startDate"></ion datetime> <ion label>End Date</ion label> <ion datetime formControlName="endDate"></ion datetime> </ion item> </div> <ion button color="danger" (click)="removeFilter(i)">Remove</ion button> <hr> </div> </div> <div class="button container"> <ion button (click)="addColumn()">Add Column</ion button> <ion button type="submit" (click)="submit()">Apply Filters</ion button> </div> </form> </ion content> using scss build this filter modal intractive

Prompt
Component Preview

About

FilterModal - Create dynamic filters with options for columns, types, and values. Built with React and Tailwind for a sleek UI. Get code instantly!

Share

Last updated 1 month ago