107 lines
2.5 KiB
TypeScript
107 lines
2.5 KiB
TypeScript
import { KeenIcon } from '@/components';
|
|
import { Button } from '@/components/ui/button';
|
|
import { ColumnDef } from '@tanstack/react-table';
|
|
import { ArrowUpDown } from 'lucide-react';
|
|
import moment from 'moment';
|
|
|
|
export type Group = {
|
|
no: number;
|
|
created_at: Date;
|
|
name: string;
|
|
status: string;
|
|
description: string;
|
|
};
|
|
|
|
export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<Group>[] => [
|
|
{
|
|
accessorKey: 'no',
|
|
header: ({ column }) => {
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
|
>
|
|
ID
|
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
);
|
|
}
|
|
},
|
|
{
|
|
accessorKey: 'created_at',
|
|
header: ({ column }) => {
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
|
>
|
|
Created Date
|
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
);
|
|
},
|
|
cell: ({ row }) => moment(row.original.created_at).format('YYYY-MM-DD HH:mm:ss')
|
|
},
|
|
{
|
|
accessorKey: 'name',
|
|
header: ({ column }) => {
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
|
>
|
|
Name
|
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
);
|
|
}
|
|
},
|
|
{
|
|
accessorKey: 'status',
|
|
header: 'Status',
|
|
cell: ({ row }) => {
|
|
const isActive = row.original.status === 'Y';
|
|
|
|
return (
|
|
<span
|
|
className={`px-2 py-1 text-xs font-semibold rounded-full ${
|
|
isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
|
|
}`}
|
|
>
|
|
{isActive ? 'Active' : 'inactive'}
|
|
</span>
|
|
);
|
|
}
|
|
},
|
|
{
|
|
accessorKey: 'description',
|
|
header: ({ column }) => {
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
|
>
|
|
Description
|
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
);
|
|
}
|
|
},
|
|
{
|
|
id: 'actions',
|
|
header: 'Actions',
|
|
cell: ({ row }) => {
|
|
const dataMembers = row.original;
|
|
|
|
return (
|
|
<button
|
|
className="btn btn-sm btn-icon btn-clear btn-light"
|
|
onClick={() => handleUpdate(dataMembers)}
|
|
>
|
|
<KeenIcon icon="notepad-edit" />
|
|
</button>
|
|
);
|
|
}
|
|
}
|
|
];
|