69 lines
1.5 KiB
TypeScript
69 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
import { type ColumnDef } from '@tanstack/react-table'
|
|
|
|
import { Abbr } from '@repo/ui/components/abbr'
|
|
import {
|
|
DataTableColumnDatetime,
|
|
DataTableColumnSelect,
|
|
DataTableColumnCpfCnpj,
|
|
DataTableColumnHeaderSelect
|
|
} from '@repo/ui/components/data-table'
|
|
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
|
|
import { initials } from '@repo/ui/lib/utils'
|
|
|
|
// This type is used to define the shape of our data.
|
|
// You can use a Zod schema here if you want.
|
|
export type User = {
|
|
id: string
|
|
name: string
|
|
email: string
|
|
cpf?: string
|
|
}
|
|
|
|
export const columns: ColumnDef<User>[] = [
|
|
{
|
|
id: 'select',
|
|
header: DataTableColumnHeaderSelect,
|
|
cell: DataTableColumnSelect
|
|
},
|
|
{
|
|
header: 'Usuário',
|
|
cell: ({ row }) => {
|
|
const { name, email } = row.original
|
|
|
|
return (
|
|
<div className="flex gap-2.5 items-center">
|
|
<Avatar className="size-10 hidden lg:block">
|
|
<AvatarFallback>{initials(name)}</AvatarFallback>
|
|
</Avatar>
|
|
|
|
<ul>
|
|
<li className="font-bold">
|
|
<Abbr>{name}</Abbr>
|
|
</li>
|
|
<li className="text-muted-foreground text-sm">
|
|
<Abbr>{email}</Abbr>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
accessorKey: 'cpf',
|
|
header: 'CPF',
|
|
cell: DataTableColumnCpfCnpj
|
|
},
|
|
{
|
|
accessorKey: 'lastLogin',
|
|
header: 'Último accesso',
|
|
cell: DataTableColumnDatetime
|
|
},
|
|
{
|
|
accessorKey: 'createDate',
|
|
header: 'Cadastrado em',
|
|
cell: DataTableColumnDatetime
|
|
}
|
|
]
|