subman-nextjs/src/app/story/columns.tsx

"use client"
import { ColumnDef } from "@tanstack/react-table"
import { Genre, Story } from "@prisma/client"
import { ArrowUpDown, MoreHorizontal } from "lucide-react"
import { Button } from "@/components/ui/button"
export const columns: ColumnDef<Story & { genres: Array<Genre> }>[] = [
  // {
  //   accessorKey: "id",
  //   header: "Id",
  //   enableHiding: true,
  // },
  {
    accessorKey: "title",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Title
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      )
    },

  },
  {
    accessorKey: "word_count",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Word Count
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      )
    },
    enableColumnFilter: false
  },
  {
    accessorFn: row => {
      let unpacked = ""
      for (let i = 0; i < row.genres.length; i++) {
        unpacked = unpacked + " " + row.genres[i].name
      }
      return unpacked
    },
    header: "Genres"


  },
  // {
  //   accessorKey: "deleted",
  //   header: "Deleted"
  // },

]