86 lines
2.2 KiB
TypeScript
86 lines
2.2 KiB
TypeScript
"use client";
|
|
import { DataTableColumnHeader } from "./data-table-column-header";
|
|
import { CellAction } from "./cell-action";
|
|
import { ColumnDef } from "@tanstack/react-table";
|
|
import { User } from "@/types/user";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { formatDate } from "@/lib/format-date";
|
|
|
|
export const columns: ColumnDef<User>[] = [
|
|
{
|
|
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: "email",
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title="EMAIL" />
|
|
),
|
|
cell: ({ row }) => {
|
|
return <p>{row.getValue("email")}</p>;
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "fullName",
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title="FULL NAME" />
|
|
),
|
|
cell: ({ row }) => {
|
|
return <p>{row.getValue("fullName")}</p>;
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "role",
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title="ROLE" />
|
|
),
|
|
cell: ({ row }) => {
|
|
return <p>{row.getValue("role")}</p>;
|
|
},
|
|
filterFn: (row, id, value) => {
|
|
return value.includes(row.getValue(id));
|
|
},
|
|
},
|
|
{
|
|
accessorKey: "created_at",
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title="CREATED AT" />
|
|
),
|
|
cell: ({ row }) => {
|
|
return <p className="w-fit">{formatDate(row.getValue("created_at"))}</p>;
|
|
},
|
|
filterFn: (row, id, value) => {
|
|
return value.includes(row.getValue(id));
|
|
},
|
|
},
|
|
|
|
{
|
|
id: "actions",
|
|
header: ({ column }) => (
|
|
<DataTableColumnHeader column={column} title="ACTIONS" />
|
|
),
|
|
cell: ({ row }) => <CellAction data={row.original} />,
|
|
},
|
|
];
|