64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu'
|
|
import { type Column, type Table } from '@tanstack/react-table'
|
|
import { Settings2 } from 'lucide-react'
|
|
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuCheckboxItem,
|
|
DropdownMenuContent,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
} from '@/components/ui/dropdown-menu'
|
|
|
|
type DataTableViewOptionsProps<TData> = {
|
|
table: Table<TData>
|
|
}
|
|
|
|
const getColumnLabel = <TData,>(column: Column<TData, unknown>) => {
|
|
const metaLabel = column.columnDef.meta?.label
|
|
const header = column.columnDef.header
|
|
|
|
if (typeof metaLabel === 'string') {
|
|
return metaLabel
|
|
}
|
|
|
|
if (typeof header === 'string') {
|
|
return header
|
|
}
|
|
|
|
return column.id
|
|
}
|
|
|
|
export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>) {
|
|
return (
|
|
<DropdownMenu modal={false}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant='ghost' size='sm' className='ms-auto h-8 flex'>
|
|
<Settings2 />
|
|
视图
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align='end' className='w-37.5'>
|
|
<DropdownMenuLabel>显示列</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
{table
|
|
.getAllColumns()
|
|
.filter((column) => typeof column.accessorFn !== 'undefined' && column.getCanHide())
|
|
.map((column) => {
|
|
return (
|
|
<DropdownMenuCheckboxItem
|
|
key={column.id}
|
|
className='capitalize'
|
|
checked={column.getIsVisible()}
|
|
onCheckedChange={(value) => column.toggleVisibility(!!value)}
|
|
>
|
|
{getColumnLabel(column)}
|
|
</DropdownMenuCheckboxItem>
|
|
)
|
|
})}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|