119 lines
3.8 KiB
TypeScript
119 lines
3.8 KiB
TypeScript
import { type ColumnDef } from '@tanstack/react-table'
|
|
import { type RecipeDashboard } from '@/models/recipe/schema'
|
|
import { Checkbox } from '@/components/ui/checkbox'
|
|
import DataTableColumnHeader from './data-table-column-header'
|
|
// import { Badge } from '@/components/ui/badge'
|
|
import DataTableRowActions from './data-table-row-actions'
|
|
import { CheckCircledIcon, CrossCircledIcon } from '@radix-ui/react-icons'
|
|
import * as dateFormat from 'date-fns'
|
|
import { DateRange } from 'react-day-picker'
|
|
|
|
export const columns: ColumnDef<RecipeDashboard>[] = [
|
|
{
|
|
id: 'select',
|
|
header: ({ table }) => (
|
|
<Checkbox
|
|
checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
|
|
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 row"
|
|
className="translate-y-[2px]"
|
|
/>
|
|
),
|
|
enableSorting: false,
|
|
enableHiding: false
|
|
},
|
|
{
|
|
accessorKey: 'productCode',
|
|
header: ({ column }) => <DataTableColumnHeader column={column} title="ProductCode" />,
|
|
cell: ({ row }) => <div>{row.getValue('productCode')}</div>,
|
|
enableHiding: false,
|
|
enableGlobalFilter: true,
|
|
filterFn: (row, id, value) => {
|
|
return value.includes(row.getValue(id))
|
|
}
|
|
},
|
|
{
|
|
accessorKey: 'name',
|
|
header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
|
|
cell: ({ row }) => {
|
|
//const label = { label: 'Test Label' } // labels.find(label => label.value === row.getValue('label'))
|
|
|
|
return (
|
|
<div className="flex space-x-2">
|
|
{/* {label && <Badge variant="outline">{label.label}</Badge>} */}
|
|
<span className="max-w-[500px] truncate font-medium">{row.getValue('name')}</span>
|
|
</div>
|
|
)
|
|
},
|
|
enableGlobalFilter: true,
|
|
filterFn: (row, id, value) => {
|
|
return value.includes(row.getValue(id))
|
|
}
|
|
},
|
|
{
|
|
accessorKey: 'nameEng',
|
|
header: ({ column }) => <DataTableColumnHeader column={column} title="Name ENG" />,
|
|
cell: ({ row }) => {
|
|
return (
|
|
<div className="flex items-center">
|
|
<span>{row.getValue('nameEng')}</span>
|
|
</div>
|
|
)
|
|
},
|
|
enableGlobalFilter: true,
|
|
filterFn: (row, id, value) => {
|
|
return value.includes(row.getValue(id))
|
|
}
|
|
},
|
|
{
|
|
accessorKey: 'inUse',
|
|
header: ({ column }) => <DataTableColumnHeader column={column} title="Active" />,
|
|
cell: ({ row }) => {
|
|
return (
|
|
<div className="flex items-center">
|
|
<span>
|
|
{row.getValue('inUse') ? (
|
|
<CheckCircledIcon className="h-6 w-6 text-green-700" />
|
|
) : (
|
|
<CrossCircledIcon className="h-6 w-6 text-red-700" />
|
|
)}
|
|
</span>
|
|
</div>
|
|
)
|
|
},
|
|
filterFn: (row, id, value) => {
|
|
return value.includes(row.getValue(id))
|
|
}
|
|
},
|
|
{
|
|
accessorKey: 'lastUpdated',
|
|
header: ({ column }) => <DataTableColumnHeader column={column} title="Last Updated" isDate />,
|
|
cell: ({ row }) => {
|
|
return (
|
|
<div className="flex items-center">
|
|
<span>{dateFormat.format(row.getValue('lastUpdated'), 'dd-MM-yyyy HH:mm:ss')}</span>
|
|
</div>
|
|
)
|
|
},
|
|
filterFn: (_row, _id, _value) => {
|
|
const value = _value as DateRange
|
|
const rowValue = _row.getValue(_id) as Date
|
|
return (
|
|
dateFormat.isAfter(rowValue, value.from || dateFormat.add(rowValue, { days: 1 })) &&
|
|
dateFormat.isBefore(rowValue, value.to || dateFormat.sub(rowValue, { days: 1 }))
|
|
)
|
|
}
|
|
},
|
|
{
|
|
id: 'actions',
|
|
cell: ({ row }) => <DataTableRowActions row={row} />
|
|
}
|
|
]
|