new change fix filter change

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

@@ -1,6 +1,29 @@
-<app-filter-card title="Filter" titleIcon="ti ti-filter" headerClass="!py-2" bodyClass="!px-4 !py-2.5">
+<app-data-table
-  <form [formGroup]="countryFilterForm" (ngSubmit)="onApplyFilter($event)" autocomplete="off" class="grid w-full grid-cols-12 items-end gap-3">
+  [columns]="columns()"
-    <div class="col-span-12 sm:col-span-5 lg:col-span-2">
+  [rows]="tableStore.rows()"
+  [actions]="actions()"
+  [totalRecords]="tableStore.totalRecords()"
+  [pageIndex]="tableStore.queryState.pageIndex()"
+  [pageSize]="tableStore.queryState.pageSize()"
+  tableTitle="States"
+  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"
@@ -21,41 +44,17 @@
           (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>
+  </ng-template>
-
+  <ng-template appDataTableFilterActions>
-<app-data-table
+    <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)">
-  [columns]="columns()"
+      <span>Apply</span>
-  [rows]="tableStore.rows()"
+    </button>
-  [actions]="actions()"
+    <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()">
-  [totalRecords]="tableStore.totalRecords()"
+      <span>Reset</span>
-  [pageIndex]="tableStore.queryState.pageIndex()"
+    </button>
-  [pageSize]="tableStore.queryState.pageSize()"
+  </ng-template>
-  tableTitle="States"
+</app-data-table>
-  buttonTitle="Add"
-  [showSearch]="true"
-  [showAddButton]="true"
-  searchPlaceholder="Search states..."
-  [searchDebounceTime]="300"
-  toolTip="Add State"
-  (addClicked)="onAddState()"
-  (searchChanged)="tableStore.onSearch($event)"
-  (pageChanged)="tableStore.onPageChange($event)"
-  (sortChanged)="tableStore.onSortChange($event)"
-  (actionClicked)="onActionClick($event)"
-/>
 
 <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 : '');