Optimal Approach for delete confirmation Dialog in Data Table using Shadcn/UI

Question

my question is related to the Shadcn/UI - Data Table component, where I have a list of users, for example, and in the last column, there's a button to delete a user. When I click on the delete button, a confirmation dialog is displayed. Currently, I'm handling this by returning a cell with the Dialog component in the "columns" file. Is this approach correct, or is there a better solution? I have a feeling that I might be unnecessarily rendering the Dialog component for each row.

export const columns: ColumnDef<Users>[] = [
  {
    accessorKey: 'name',
    header: ({ column }) => {
      return 'name'
    },
    cell: ({ row }) => {
      return row.original.name
    },
  },
  {
    accessorKey: 'delete',
    header: '',
    cell: ({ row }) => {
      return
      <Dialog> ... </Dialog> // is it necessary to render the Dialog component for each row ?
    },
  },
]

Answer 1

I think handling this with dropdown menu and dialog with lazy loading would be better aproach