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

"use client"
import { CellContext, ColumnDef, createColumnHelper } from "@tanstack/react-table"
import { ArrowUpDown } from "lucide-react"
import { Button } from "@/components/ui/button"
import { SubComplete } from "./page"
import { actions } from "app/ui/tables/actions"
import { selectCol } from "app/ui/tables/selectColumn"
import EditSubmissionDialog from "./edit"


const EditSubCell = (props: CellContext<any, any>) => {
  return <EditSubmissionDialog
    stories={props.table.options.meta.stories}
    pubs={props.table.options.meta.pubs}
    responses={props.table.options.meta.responses}
    defaults={props.row.original}
  >{
      props.getValue() instanceof Date ?
        <p className="w-full text-center">
          {props.getValue().toLocaleDateString()}
        </p>
        : <p className="w-full text-left">{props.getValue()}</p>

    }</EditSubmissionDialog>
}

export const columns: ColumnDef<SubComplete>[] = [
  selectCol,
  {
    accessorFn: row => {
      if (row.story) {
        return row.story.title
      }
      return "RECORD DELETED"
    },
    id: "story",
    header: "Story",
    cell: EditSubCell
  },
  {
    accessorFn: row => {
      if (row.pub) {
        return row.pub.title
      }
      return "RECORD DELETED"
    },
    id: "pub",
    header: "Publication",
    cell: EditSubCell
  },
  {
    accessorFn: row => new Date(row.submitted),
    id: "submitted",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Date Submitted
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      )
    },
    enableColumnFilter: false,
    sortingFn: "datetime",
    cell: EditSubCell
  },
  {
    accessorFn: row => row.responded ? new Date(row.responded) : null,
    id: "responded",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Date Responded
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      )
    },
    enableColumnFilter: false,
    sortingFn: "datetime",
    cell: EditSubCell
  },
  {
    accessorFn: row => {
      if (row.response) {
        return row.response.response
      }
      return "RECORD DELETED"
    },
    id: "response",
    header: "Response",
    cell: EditSubCell
  },

]