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

93 lines
2.6 KiB
TypeScript
Raw Normal View History

2024-06-20 08:35:25 +00:00
"use client"
import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
2024-09-23 15:55:39 +00:00
import { ArrowUpDown, BookType, Clock, Drama, SquareArrowOutUpRight } from "lucide-react"
2024-06-20 08:35:25 +00:00
import { Button } from "@/components/ui/button"
import { PubsWithGenres } from "./page"
import { TextInputCell } from "app/ui/tables/inputs/textInput"
2024-06-30 18:28:02 +00:00
import { selectCol } from "app/ui/tables/selectColumn"
import NumberInputCell from "app/ui/tables/inputs/numberInput"
2024-09-19 09:37:01 +00:00
import { pubSchema } from "app/ui/forms/schemas"
2024-07-24 20:41:46 +00:00
import GenrePickerInputCell from "app/ui/tables/inputs/genrePickerInput"
2024-06-20 08:35:25 +00:00
const columnHelper = createColumnHelper<PubsWithGenres>()
export const columns: ColumnDef<PubsWithGenres>[] = [
2024-06-30 18:28:02 +00:00
selectCol,
2024-06-20 08:35:25 +00:00
{
accessorKey: "title",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
2024-09-23 15:55:39 +00:00
<span className="hidden sm:block">
Title
</span>
<span className="block sm:hidden"><BookType /></span>
2024-06-20 08:35:25 +00:00
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
)
},
cell: cell => (
<>
<p className="block text-xs max-w-24 break-words md:hidden">{cell.getValue()}</p>
<TextInputCell cellContext={cell} className="hidden md:block" />
</>
),
2024-09-19 09:37:01 +00:00
meta: { formSchema: pubSchema }
2024-06-20 08:35:25 +00:00
},
2024-06-20 21:21:37 +00:00
2024-06-20 08:35:25 +00:00
{
accessorKey: "link",
2024-09-23 15:55:39 +00:00
header: () => (
<div className="mx-auto w-fit">
<span className="hidden sm:block">Link</span>
<span className="block sm:hidden"><SquareArrowOutUpRight /></span>
</div>
),
cell: cell => (
<>
<p className="block text-xs max-w-16 truncate md:hidden">{cell.getValue()}</p>
<TextInputCell cellContext={cell} className="hidden md:block" />
</>
),
2024-09-19 09:37:01 +00:00
meta: { formSchema: pubSchema }
2024-06-20 08:35:25 +00:00
},
2024-06-20 21:21:37 +00:00
2024-06-20 08:35:25 +00:00
columnHelper.accessor("genres", {
2024-09-23 15:55:39 +00:00
header: () => (
<div className="w-fit mx-auto">
<span className="hidden sm:block">Genres</span>
<span className="sm:hidden"><Drama /></span>
</div>
),
2024-07-24 20:41:46 +00:00
cell: GenrePickerInputCell,
2024-06-20 08:35:25 +00:00
filterFn: "arrIncludes"
//TODO - write custom filter function, to account for an array of objects
}),
2024-06-20 21:21:37 +00:00
{
accessorKey: "query_after_days",
2024-09-23 15:55:39 +00:00
header: () => (
<div>
<span className="hidden sm:block">Query After (days)</span>
<span className="sm:hidden"><Clock /></span>
</div>
),
cell: cell => (
<>
<p className="block md:hidden text-center">{cell.getValue()}</p>
<NumberInputCell cellContext={cell} className="hidden md:block" />
</>
),
2024-06-30 21:22:46 +00:00
meta: {
2024-07-02 20:52:10 +00:00
step: 10,
2024-09-19 09:37:01 +00:00
formSchema: pubSchema
2024-06-30 21:22:46 +00:00
},
2024-06-20 08:35:25 +00:00
2024-07-02 20:52:10 +00:00
},
2024-06-20 08:35:25 +00:00
]