new change fix filter change

src/app/features/global-masters/states/pages/state-list/state-list.html

@@ -1,41 +1,3 @@
-<app-filter-card title="Filter" titleIcon="ti ti-filter" headerClass="!py-2" bodyClass="!px-4 !py-2.5">
-  <form [formGroup]="countryFilterForm" (ngSubmit)="onApplyFilter($event)" autocomplete="off" class="grid w-full grid-cols-12 items-end gap-3">
-    <div class="col-span-12 sm:col-span-5 lg:col-span-2">
-      <app-autocomplete
-        formControlName="countryId"
-        inputId="state-country-filter"
-        variant="floating"
-        size="sm"
-        label="Country"
-        placeholder="Search"
-        [searchFn]="searchCountries"
-        [displayWith]="displayCountry"
-        [valueWith]="countryValue"
-        [selectedItem]="selectedCountryLookup()"
-        [minSearchLength]="1"
-        [debounceTime]="300"
-        [limit]="50"
-        [clearable]="true"
-        [hideValidation]="true"
-        wrapperClass="!mb-0 w-full"
-        (itemSelected)="onFilterCountrySelected($event)"
-      />
-    </div>
-    <div class="col-span-12 sm:col-span-3 lg:col-span-1">
-      <app-button
-        action="custom"
-        label="Filter"
-        icon="ti ti-filter"
-        variant="primary-full"
-        type="button"
-        size="sm"
-        className="!rounded-full shadow-sm !mb-0 min-h-8 w-full md:!w-auto"
-        (buttonClicked)="onApplyFilter($event)"
-      />
-    </div>
-  </form>
-</app-filter-card>
-
 <app-data-table
   [columns]="columns()"
   [rows]="tableStore.rows()"
@@ -47,15 +9,52 @@
   buttonTitle="Add"
   [showSearch]="true"
   [showAddButton]="true"
+  [showFilterButton]="true"
+  [filterActive]="showFilters()"
   searchPlaceholder="Search states..."
   [searchDebounceTime]="300"
   toolTip="Add State"
   (addClicked)="onAddState()"
+  (filterClicked)="onToggleFilters()"
   (searchChanged)="tableStore.onSearch($event)"
   (pageChanged)="tableStore.onPageChange($event)"
   (sortChanged)="tableStore.onSortChange($event)"
   (actionClicked)="onActionClick($event)"
-/>
+>
+  <ng-template appDataTableToolbar>
+    <form [formGroup]="countryFilterForm" (ngSubmit)="onApplyFilter($event)" autocomplete="off" class="flex flex-nowrap items-end gap-3">
+      <div class="w-[220px] shrink-0">
+        <app-autocomplete
+          formControlName="countryId"
+          inputId="state-country-filter"
+          variant="floating"
+          size="sm"
+          label="Country"
+          placeholder="Search"
+          [searchFn]="searchCountries"
+          [displayWith]="displayCountry"
+          [valueWith]="countryValue"
+          [selectedItem]="selectedCountryLookup()"
+          [minSearchLength]="1"
+          [debounceTime]="300"
+          [limit]="50"
+          [clearable]="true"
+          [hideValidation]="true"
+          wrapperClass="!mb-0 w-full"
+          (itemSelected)="onFilterCountrySelected($event)"
+        />
+      </div>
+    </form>
+  </ng-template>
+  <ng-template appDataTableFilterActions>
+    <button type="button" class="ti-btn ti-btn-primary-full !rounded-full !m-0 flex min-h-8 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap !px-3 !py-1.5 !text-[0.75rem]" (click)="onApplyFilter($event)">
+      <span>Apply</span>
+    </button>
+    <button type="button" class="ti-btn ti-btn-light !rounded-full !m-0 flex min-h-8 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap !px-3 !py-1.5 !text-[0.75rem]" (click)="onResetFilter()">
+      <span>Reset</span>
+    </button>
+  </ng-template>
+</app-data-table>
 
 <app-confirm-dialog
   title="Delete State"

src/app/features/global-masters/states/pages/state-list/state-list.ts

@@ -23,8 +23,8 @@ import {
   AutocompleteValueFn
 } from '../../../../../shared/components/form/autocomplete/autocomplete.types';
 import { ConfirmDialog } from '../../../../../shared/components/confirm-dialog/confirm-dialog';
-import { FilterCard } from '../../../../../shared/components/filter-card/filter-card';
+import { DataTableToolbarDirective } from '../../../../../shared/directives/data-table-toolbar/data-table-toolbar.directive';
-import { Button as AppButton } from '../../../../../shared/components/button/button';
+import { DataTableFilterActionsDirective } from '../../../../../shared/directives/data-table-filter-actions/data-table-filter-actions.directive';
 import { StateFormModalComponent } from '../../components/state-form-modal/state-form-modal';
 
 interface StateTableRow extends DataTableRecord {
@@ -46,8 +46,8 @@ interface StateTableRow extends DataTableRecord {
     ReactiveFormsModule,
     Autocomplete,
     ConfirmDialog,
-    FilterCard,
+    DataTableToolbarDirective,
-    AppButton,
+    DataTableFilterActionsDirective,
     StateFormModalComponent
   ],
   providers: [DataTableStore],
@@ -66,6 +66,7 @@ export class StateList implements OnInit {
   readonly statusChangingId = signal<string | null>(null);
   readonly deletingId = signal<string | null>(null);
   readonly pendingDeleteState = signal<StateTableRow | null>(null);
+  readonly showFilters = signal(false);
   readonly deleteConfirmDialog = viewChild(ConfirmDialog);
 
   readonly countryFilterForm = this.formBuilder.nonNullable.group({
@@ -121,6 +122,10 @@ export class StateList implements OnInit {
     });
   }
 
+  onToggleFilters(): void {
+    this.showFilters.update(value => !value);
+  }
+
   onFilterCountrySelected(country: CountryLookupDto | null): void {
     this.selectedCountryLookup.set(country);
     this.countryFilterForm.controls.countryId.setValue(country ? country.id : '');