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

"use client"
import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
import { ArrowUpDown, MoreHorizontal } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Trash2, Search } from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import Link from "next/link"
import { PubsWithGenres } from "./page"
import { DialogClose } from "@radix-ui/react-dialog"
import { actions } from "app/ui/tables/actions"
import { TextInputCell } from "app/ui/inputs/textInput"
import { selectCol } from "app/ui/tables/selectColumn"


const columnHelper = createColumnHelper<PubsWithGenres>()

export const columns: ColumnDef<PubsWithGenres>[] = [
  selectCol,
  {
    accessorKey: "title",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Title
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      )
    },
    cell: TextInputCell

  },

  {
    accessorKey: "link",
    header: "Link",
    cell: TextInputCell
  },

  columnHelper.accessor("genres", {
    cell: props => {
      const genres = props.getValue()
        .map(e => <Badge>{e.name}</Badge>)
      return genres
    },
    filterFn: "arrIncludes"
    //TODO - write custom filter function, to account for an array of objects
  }),

  {
    accessorKey: "query_after_days",
    header: "Query After (days)"
  },


]