vngrup/dress
vngrup/dress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Yoga Pangestu 2026-04-16 13:27:24 +07:00
parent 678e693f00
commit 2efb90e027
1 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
resources/js/components/data-table.tsx
View File

@ -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);