portal-dashboard/app/routes/file-manager/columns.tsx

90 lines
2.7 KiB
TypeScript
Raw Normal View History

import { DrawingPinIcon, TrashIcon } from "@radix-ui/react-icons";
import type { ColumnDef, RowData } from "@tanstack/react-table";
import { FileIcon, MoreIcon } from "~/components/icons";
import { Checkbox } from "~/components/ui/checkbox";
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "~/components/ui/dropdown-menu";
import { cn } from "~/utils";
2024-03-21 20:46:02 +00:00
import {FileItem} from "~/data/file-provider.js";
import {format} from "date-fns/fp";
declare module '@tanstack/table-core' {
interface TableMeta<TData extends RowData> {
hoveredRowId: string,
}
}
2024-03-21 20:46:02 +00:00
export const columns: ColumnDef<FileItem>[] = [
{
id: "select",
size: 20,
header: ({ table }) => (
<Checkbox
2024-03-21 20:46:02 +00:00
checked={
table.getIsAllPageRowsSelected() ||
(table.getIsSomePageRowsSelected() && "indeterminate")
}
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
aria-label="Select all"
/>
),
cell: ({ row }) => (
<Checkbox
checked={row.getIsSelected()}
onCheckedChange={(value) => row.toggleSelected(!!value)}
aria-label="Select row"
/>
),
enableSorting: false,
enableHiding: false,
},
{
accessorKey: "name",
header: "Name",
cell: ({ row }) => (
<div className="flex items-center gap-x-2">
<FileIcon />
{row.getValue("name")}
</div>
)
},
{
accessorKey: "cid",
header: "CID",
},
{
accessorKey: "size",
header: "Size",
},
{
2024-03-21 20:46:02 +00:00
accessorKey: "pinnedOn",
size: 200,
2024-03-21 20:46:02 +00:00
header: "Pinned On",
cell: ({ row }) => (
<div className="flex items-center justify-between">
2024-03-21 20:46:02 +00:00
{format(row.getValue("pinned")) as unknown as string}
<DropdownMenu>
<DropdownMenuTrigger className={
cn("hidden group-hover:block data-[state=open]:block", row.getIsSelected() && "block")
}>
<MoreIcon />
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuGroup>
<DropdownMenuItem>
<DrawingPinIcon className="mr-2" />
Ping CID
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive">
<TrashIcon className="mr-2" />
Delete
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
)
}
2024-03-21 20:46:02 +00:00
];