diff --git a/package-lock.json b/package-lock.json index 88ae9de..61b9e9a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "collect-flow", "version": "0.1.0", "dependencies": { + "@radix-ui/react-dropdown-menu": "^2.1.16", "@tanstack/react-query": "^5.90.21", "@tanstack/react-table": "^8.21.3", "@tanstack/react-virtual": "^3.13.18", diff --git a/package.json b/package.json index 53a2440..7d77914 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "docker:build": "docker-compose up -d --build" }, "dependencies": { + "@radix-ui/react-dropdown-menu": "^2.1.16", "@tanstack/react-query": "^5.90.21", "@tanstack/react-table": "^8.21.3", "@tanstack/react-virtual": "^3.13.18", diff --git a/src/features/grid/components/heatmap-grid.tsx b/src/features/grid/components/heatmap-grid.tsx index 6fbb62f..ff02eae 100644 --- a/src/features/grid/components/heatmap-grid.tsx +++ b/src/features/grid/components/heatmap-grid.tsx @@ -12,7 +12,13 @@ import { RowSelectionState, } from "@tanstack/react-table"; import { useVirtualizer } from "@tanstack/react-virtual"; -import { ChevronUp, ChevronDown, ChevronsUpDown, Copy, Check, Store } from "lucide-react"; +import { ChevronUp, ChevronDown, ChevronsUpDown, Copy, Check, Store, SlidersHorizontal } from "lucide-react"; +import { + DropdownMenu, + DropdownMenuCheckboxItem, + DropdownMenuContent, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; import { useGridStore } from "@/features/grid/store/use-grid-store"; import { GammeSelect } from "@/features/grid/components/gamme-select"; import { HeatmapCell } from "@/features/grid/components/heatmap-cell"; @@ -170,6 +176,7 @@ export function HeatmapGrid({ onSelectionChange }: HeatmapGridProps) { const { rows, filters, displayDensity } = useGridStore(); const [sorting, setSorting] = useState([]); const [rowSelection, setRowSelection] = useState({}); + const [columnVisibility, setColumnVisibility] = useState({}); const [isMounted, setIsMounted] = useState(false); const tableContainerRef = useRef(null); @@ -413,9 +420,10 @@ export function HeatmapGrid({ onSelectionChange }: HeatmapGridProps) { const table = useReactTable({ data: rows, columns, - state: { sorting, globalFilter: filters.search, rowSelection }, + state: { sorting, globalFilter: filters.search, rowSelection, columnVisibility }, onSortingChange: setSorting, onRowSelectionChange: handleRowSelectionChange, + onColumnVisibilityChange: setColumnVisibility, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel(), @@ -456,13 +464,49 @@ export function HeatmapGrid({ onSelectionChange }: HeatmapGridProps) { return (
+
+ + + + + + {table + .getAllLeafColumns() + .filter((column: any) => column.getCanHide()) + .map((column: any) => { + return ( + column.toggleVisibility(!!value)} + onSelect={(e: React.SyntheticEvent) => e.preventDefault()} + > + {typeof column.columnDef.header === 'string' + ? column.columnDef.header + : column.id.startsWith('month_') + ? formatMonthLabel(column.id.replace('month_', '')) + : column.id} + + ); + })} + + +
+