data-table-row-actions.tsx 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. import { DotsHorizontalIcon } from '@radix-ui/react-icons'
  2. import { type Row } from '@tanstack/react-table'
  3. import { Trash2, UserPen } from 'lucide-react'
  4. import { Button } from '@/components/ui/button'
  5. import {
  6. DropdownMenu,
  7. DropdownMenuContent,
  8. DropdownMenuItem,
  9. DropdownMenuSeparator,
  10. DropdownMenuShortcut,
  11. DropdownMenuTrigger,
  12. } from '@/components/ui/dropdown-menu'
  13. import { type User } from '../data/schema'
  14. import { useUsers } from './users-provider'
  15. type DataTableRowActionsProps = {
  16. row: Row<User>
  17. }
  18. export function DataTableRowActions({ row }: DataTableRowActionsProps) {
  19. const { setOpen, setCurrentRow } = useUsers()
  20. return (
  21. <>
  22. <DropdownMenu modal={false}>
  23. <DropdownMenuTrigger asChild>
  24. <Button
  25. variant='ghost'
  26. className='flex h-8 w-8 p-0 data-[state=open]:bg-muted'
  27. >
  28. <DotsHorizontalIcon className='h-4 w-4' />
  29. <span className='sr-only'>Open menu</span>
  30. </Button>
  31. </DropdownMenuTrigger>
  32. <DropdownMenuContent align='end' className='w-[160px]'>
  33. <DropdownMenuItem
  34. onClick={() => {
  35. setCurrentRow(row.original)
  36. setOpen('edit')
  37. }}
  38. >
  39. Edit
  40. <DropdownMenuShortcut>
  41. <UserPen size={16} />
  42. </DropdownMenuShortcut>
  43. </DropdownMenuItem>
  44. <DropdownMenuSeparator />
  45. <DropdownMenuItem
  46. onClick={() => {
  47. setCurrentRow(row.original)
  48. setOpen('delete')
  49. }}
  50. className='text-red-500!'
  51. >
  52. Delete
  53. <DropdownMenuShortcut>
  54. <Trash2 size={16} />
  55. </DropdownMenuShortcut>
  56. </DropdownMenuItem>
  57. </DropdownMenuContent>
  58. </DropdownMenu>
  59. </>
  60. )
  61. }