dstpabuaran.com/resources/js/pages/admin/master/supplier/columns.tsx

88 lines
2.8 KiB
TypeScript

import type { ColumnDef } from '@tanstack/react-table';
import { Pencil, Trash2 } from 'lucide-react';
import { RowActions } from '@/components/row-actions';
export type Supplier = {
id: number;
name: string;
phone_number: string | null;
address: string | null;
};
type CreateColumnsParams = {
handleEdit: (supplier: Supplier) => void;
handleDeleteClick: (supplier: Supplier) => void;
can: (permission: string) => boolean;
};
export function createSupplierColumns(
params: CreateColumnsParams,
): ColumnDef<Supplier>[] {
const { handleEdit, handleDeleteClick, can } = params;
const columns: ColumnDef<Supplier>[] = [
{
accessorKey: 'name',
header: () => <span>Nama</span>,
cell: ({ row }) => (
<span className="font-medium">
{row.getValue('name') as string}
</span>
),
},
{
accessorKey: 'phone_number',
header: () => <span>No. Telepon</span>,
cell: ({ row }) => (
<span>{(row.getValue('phone_number') as string) ?? '-'}</span>
),
},
{
accessorKey: 'address',
header: () => <span>Alamat</span>,
cell: ({ row }) => (
<span className="block max-w-[200px]">
{(row.getValue('address') as string) ?? '-'}
</span>
),
},
];
if (can('suppliers.update') || can('suppliers.delete')) {
columns.push({
id: 'actions',
header: () => <span className="block text-center">Aksi</span>,
meta: {
className: 'w-[100px] text-center',
headerClassName: 'w-[100px] text-center',
},
cell: ({ row }) => {
const supplier = row.original;
return (
<RowActions
actions={[
{
label: 'Edit',
icon: <Pencil className="h-4 w-4" />,
show: can('suppliers.update'),
onClick: () => handleEdit(supplier),
},
{
label: 'Hapus',
icon: (
<Trash2 className="h-4 w-4 text-destructive" />
),
show: can('suppliers.delete'),
onClick: () => handleDeleteClick(supplier),
},
]}
/>
);
},
});
}
return columns;
}