feat: add active filter badges and reset functionality to data table component

resources/js/components/data-table.tsx

@@ -35,7 +35,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import React from "react";
 import { Input } from "./ui/input";
-import { Settings2, ChevronDown, ListFilter, Trash2, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, List } from "lucide-react";
+import { Settings2, ChevronDown, ListFilter, Trash2, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, List, X } from "lucide-react";
 
 import {
     Empty,
@@ -52,6 +52,7 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/components/ui/select"
+import { Badge } from "./ui/badge";
 
 interface DataTableFilterOption {
     columnId: string;
@@ -168,6 +169,43 @@ export function DataTable<TData, TValue>({
                         onChange={(event) => setGlobalFilter(event.target.value)}
                         className="max-w-sm"
                     />
+
+                    {columnFilters.length > 0 && (
+                        <div className="flex flex-wrap items-center gap-2">
+                            {columnFilters.map((filter) => {
+                                const filterDef = filters?.find((f) => f.columnId === filter.id);
+                                const option = filterDef?.options.find((o) => String(o.value) === String(filter.value));
+                                const label = option ? option.label : String(filter.value);
+
+                                return (
+                                    <Badge key={filter.id} variant="secondary" className="h-8 gap-1 pr-1 font-normal text-nowrap">
+                                        <span className="text-muted-foreground mr-1">{filterDef?.title || filter.id}:</span>
+                                        {label}
+                                        <Button
+                                            variant="ghost"
+                                            size="icon"
+                                            className="h-4 w-4 hover:bg-transparent"
+                                            onClick={() => table.getColumn(filter.id)?.setFilterValue(undefined)}
+                                        >
+                                            <X className="h-3 w-3" />
+                                        </Button>
+                                    </Badge>
+                                );
+                            })}
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => {
+                                    setColumnFilters([]);
+                                    setGlobalFilter("");
+                                }}
+                                className="h-8 px-2 text-xs"
+                            >
+                                Reset Filter
+                                <X className="ml-1 h-3 w-3" />
+                            </Button>
+                        </div>
+                    )}
                 </div>
 
                 <div className="flex items-center gap-2 ml-auto">
@@ -216,6 +254,7 @@ export function DataTable<TData, TValue>({
                                             </DropdownMenuSubTrigger>
                                             <DropdownMenuSubContent>
                                                 <DropdownMenuItem
+                                                    onSelect={(e) => e.preventDefault()}
                                                     onClick={() => column.setFilterValue(undefined)}
                                                 >
                                                     Semua
@@ -224,6 +263,7 @@ export function DataTable<TData, TValue>({
                                                 {filter.options.map((option) => (
                                                     <DropdownMenuItem
                                                         key={option.value}
+                                                        onSelect={(e) => e.preventDefault()}
                                                         onClick={() => {
                                                             if (option.value === "true") column.setFilterValue(true);
                                                             else if (option.value === "false") column.setFilterValue(false);