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

"use client"
import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
import { StoryWithGenres } from "./page"
import { ArrowUpDown } from "lucide-react"
import { Button } from "@/components/ui/button"
import GenreBadges from "app/ui/genreBadges"
import { selectCol } from "app/ui/tables/selectColumn"
import NumberInputCell from "app/ui/tables/inputs/numberInput"
import { formSchema } from "app/ui/forms/story"
import { TextInputCell } from "app/ui/tables/inputs/textInput"
const columnHelper = createColumnHelper<StoryWithGenres>()

export const columns: ColumnDef<StoryWithGenres>[] = [
  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,
    meta: { formSchema }

  },
  {
    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,
    cell: NumberInputCell,
    meta: {
      step: 50,
      formSchema
    }
  },
  columnHelper.accessor("genres", {
    cell: props => {
      const genres = props.getValue()
      return <GenreBadges genres={genres} />
    },
    filterFn: "arrIncludes"
    //TODO - write custom filter function, to account for an array of objects
  }),

]