59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
"use client"
|
|
|
|
import type { ReactElement } from "react"
|
|
import {
|
|
getColumnHeaderLabel,
|
|
useDataGrid,
|
|
} from "@/components/reui/data-grid/data-grid"
|
|
import type { DataGridFeatures } from "@/components/reui/data-grid/data-grid"
|
|
import type { Table } from "@tanstack/react-table"
|
|
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuCheckboxItem,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuLabel,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
|
|
function DataGridColumnVisibility<TData extends object>({
|
|
table,
|
|
trigger,
|
|
}: {
|
|
table: Table<DataGridFeatures, TData>
|
|
trigger: ReactElement<Record<string, unknown>>
|
|
}) {
|
|
const { i18n } = useDataGrid()
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger render={trigger} />
|
|
<DropdownMenuContent align="end" className="min-w-[150px]">
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel className="font-medium">
|
|
{i18n.labels.toggleColumns}
|
|
</DropdownMenuLabel>
|
|
{table
|
|
.getAllColumns()
|
|
.filter((column) => column.getCanHide())
|
|
.map((column) => {
|
|
return (
|
|
<DropdownMenuCheckboxItem
|
|
key={column.id}
|
|
className="capitalize"
|
|
checked={column.getIsVisible()}
|
|
onSelect={(event) => event.preventDefault()}
|
|
onCheckedChange={(value) => column.toggleVisibility(!!value)}
|
|
>
|
|
{getColumnHeaderLabel(column)}
|
|
</DropdownMenuCheckboxItem>
|
|
)
|
|
})}
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|
|
|
|
export { DataGridColumnVisibility } |