97 lines
2.4 KiB
TypeScript
97 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { ColumnDef } from "@tanstack/react-table";
|
|
import { Ghost, MoreHorizontal } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
|
|
export type Customer = {
|
|
id: string;
|
|
name: string;
|
|
occupation: string;
|
|
phone: string;
|
|
address: string;
|
|
balance: number;
|
|
};
|
|
|
|
export const columns: ColumnDef<Customer>[] = [
|
|
{
|
|
accessorKey: "id",
|
|
header: "ID",
|
|
size: 70,
|
|
},
|
|
{
|
|
accessorKey: "name",
|
|
header: "Name",
|
|
},
|
|
{
|
|
accessorKey: "occupation",
|
|
header: "Occupation",
|
|
},
|
|
{
|
|
accessorKey: "phone",
|
|
header: "Phone",
|
|
},
|
|
{
|
|
accessorKey: "address",
|
|
header: "Address",
|
|
size: 150,
|
|
},
|
|
{
|
|
accessorKey: "balance",
|
|
header: () => <div className="text-right">Balance</div>,
|
|
cell: ({ row }) => {
|
|
const amount = parseFloat(row.getValue("balance"));
|
|
const formatted = new Intl.NumberFormat("en-IN", {
|
|
style: "currency",
|
|
currency: "INR",
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
}).format(amount);
|
|
return <div className="text-right">{formatted}</div>;
|
|
},
|
|
},
|
|
{
|
|
id: "actions",
|
|
header: () => <div className="text-right">More Actions</div>,
|
|
cell: ({ row }) => {
|
|
const customer = row.original;
|
|
|
|
return (
|
|
<div className="text-right">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost">
|
|
<span className="sr-only">Open Menu</span>
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
|
<DropdownMenuItem
|
|
onClick={() => navigator.clipboard.writeText(customer.id)}
|
|
>
|
|
Copy Customer ID
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>View Transactions</DropdownMenuItem>
|
|
<DropdownMenuItem>Edit Customer</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem variant="destructive">
|
|
Delete Customer
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
];
|