calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-06-05 07:16:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

💄 use checkbox for column filter with dropdown

Browse Source
This commit is contained in:
Fred KISSIE
2026-06-02 17:43:45 +02:00
parent b6d688f15e
commit 6c1798a8c5
3 changed files with 18 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/ColumnMultiFilterButton.tsx
View File

@@ -20,6 +20,7 @@ import { CheckIcon, Funnel } from "lucide-react";
import { cn } from "@app/lib/cn";
import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
import { Badge } from "./ui/badge";
import { Checkbox } from "./ui/checkbox";
type FilterOption = {
value: string;
@@ -130,13 +131,11 @@ export function ColumnMultiFilterButton({
toggle(option.value);
}}
>
<CheckIcon
className={cn(
"mr-2 h-4 w-4",
selectedSet.has(option.value)
? "opacity-100"
: "opacity-0"
)}
<Checkbox
className="pointer-events-none shrink-0"
checked={selectedSet.has(option.value)}
aria-hidden
tabIndex={-1}
/>
{option.label}
</CommandItem>

13
src/components/LabelColumnFilterButton.tsx
View File

@@ -25,6 +25,7 @@ import { useDebounce } from "use-debounce";
import { LabelBadge } from "./label-badge";
import { LabelOverflowBadge } from "./label-overflow-badge";
import { LABEL_COLORS } from "./labels-selector";
import { Checkbox } from "./ui/checkbox";
function areSelectionsEqual(a: string[], b: string[]) {
if (a.length !== b.length) {
@@ -179,13 +180,11 @@ export function LabelColumnFilterButton({
}}
className="flex items-center gap-2"
>
<CheckIcon
className={cn(
"mr-2 h-4 w-4",
draftSet.has(label.name)
? "opacity-100"
: "opacity-0"
)}
<Checkbox
className="pointer-events-none shrink-0"
checked={draftSet.has(label.name)}
aria-hidden
tabIndex={-1}
/>
<div
className="size-2 rounded-full bg-(--color) flex-none"

13
src/components/multi-select/multi-select-content.tsx
View File

@@ -10,6 +10,7 @@ import {
import { cn } from "@app/lib/cn";
import { CheckIcon } from "lucide-react";
import { useTranslations } from "next-intl";
import { Checkbox } from "../ui/checkbox";
export type TagValue = { text: string; id: string; isAdmin?: boolean };
@@ -70,13 +71,11 @@ export function MultiSelectContent<T extends TagValue>({
onChange(newValues);
}}
>
<CheckIcon
className={cn(
"mr-2 h-4 w-4",
selectedValues.has(option.id)
? "opacity-100"
: "opacity-0"
)}
<Checkbox
className="pointer-events-none shrink-0"
checked={selectedValues.has(option.id)}
aria-hidden
tabIndex={-1}
/>
{`${option.text}`}
</CommandItem>