Spaces:
Paused
Paused
File size: 3,225 Bytes
e5c2fd4 43dd1ac e5c2fd4 43dd1ac e5c2fd4 43dd1ac e5c2fd4 43dd1ac e5c2fd4 43dd1ac e5c2fd4 43dd1ac e5c2fd4 43dd1ac e5c2fd4 43dd1ac e5c2fd4 43dd1ac e5c2fd4 43dd1ac e5c2fd4 43dd1ac e5c2fd4 43dd1ac e5c2fd4 43dd1ac e5c2fd4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
"use client"
import { ColumnDef } from "@tanstack/react-table"
import { Checkbox } from "@/components/ui/checkbox"
import { statuses } from "@/app/data/data"
import { DataTableColumnHeader } from "./data-table-column-header"
import { DataTableRowActions } from "./data-table-row-actions"
import { VideoTask } from "@/app/types"
export const columns: ColumnDef<VideoTask>[] = [
{
id: "select",
header: ({ table }) => (
<Checkbox
checked={table.getIsAllPageRowsSelected()}
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
aria-label="Select all"
className="translate-y-[2px]"
/>
),
cell: ({ row }) => (
<Checkbox
checked={row.getIsSelected()}
onCheckedChange={(value) => row.toggleSelected(!!value)}
aria-label="Select video"
className="translate-y-[2px]"
/>
),
enableSorting: false,
enableHiding: false,
},
{
accessorKey: "id",
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Video ID" />
),
cell: ({ row }) => <div className="w-[80px]">{`${row.getValue("id") || ''}`.split("-")[0]}..</div>,
enableSorting: false,
enableHiding: false,
},
{
accessorKey: "videoPrompt",
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Prompt" />
),
cell: ({ row }) => {
return (
<div className="flex space-x-2">
<span className="max-w-[500px] truncate font-medium">
{row.getValue("videoPrompt")}
</span>
</div>
)
},
},
{
accessorKey: "status",
header: ({ column }) => (
<DataTableColumnHeader column={column} title="Status" />
),
cell: ({ row }) => {
const status = statuses.find(
(status) => status.value === row.getValue("status")
)
if (!status) {
return null
}
return (
<div className="flex w-[100px] items-center">
{status.icon && (
<status.icon className="mr-2 h-4 w-4 text-muted-foreground" />
)}
<span>{status.label}</span>
</div>
)
},
filterFn: (row, id, value) => {
return value.includes(row.getValue(id))
},
},
{
accessorKey: "preview",
header: ({ column }) => (
null // no header
),
cell: ({ row }) => <div className="w-[200px]">
<a
className="hover:underline cursor-pointer"
target="_blank"
href={`/api/download/${row.getValue("fileName")}`}>
<video src={`/api/download/${row.getValue("fileName")}`} muted autoPlay />
</a>
</div>,
enableSorting: false,
enableHiding: false,
},
{
accessorKey: "fileName",
header: ({ column }) => (
null // no header
),
cell: ({ row }) => <div className="w-[80px]">
<a
className="hover:underline cursor-pointer"
target="_blank"
href={`/api/download/${row.getValue("fileName")}`}>Download</a>
</div>,
enableSorting: false,
enableHiding: false,
},
/*
action menu (currently disabled)
{
id: "actions",
cell: ({ row }) => <DataTableRowActions row={row} />,
},
*/
] |