Hey guys. I don't know if this topic is at the right place here but I wanna give it a shot.

I'm using shadcn DataTable to display Data from my Database. I'm using also the "Actions" column which is making modification on the data that is displayed (Changing a Value from true to false and back)

So I'm giving the function to the actions column like this:

  {
    id: "actions",
    cell: ({ row }) => {
      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="h-8 w-8 p-0">
              <span className="sr-only">Open menu</span>
              <MoreHorizontal className="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuLabel>Optionen</DropdownMenuLabel>
            <DropdownMenuItem
              onClick={() =>
                changeData(row.original.id, !row.getValue("blocked"))
              }
            >
             Change Data Here!
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      );
    },
  },

This works fine. It does change the data on the database. However, the displayed data in the DataTable is not updated/rerendered. Of course because no state has been changed that would trigger a rerender or a new fetch of data. Because the columns.tsx is not a function Component, I'm not able to use a State. Can you tell me, where I would manipulate the state so that executing the row-action actually re-renders my component and updates the displayed data?.

Thanks 🙂