store/resources/js/components/admin/system/roles/columns.ts

63 lines
1.9 KiB
TypeScript

import DataTableActions from '@/components/admin/system/roles/data-table-actions.vue';
import { DataTableColumnHeader } from '@/components/data-table';
import type { ColumnDef } from '@tanstack/vue-table';
import { h } from 'vue';
export interface RoleListItem {
id: number;
name: string;
permissions_count: number;
}
export function createColumns(): ColumnDef<RoleListItem>[] {
return [
{
accessorKey: 'name',
enableSorting: true,
header: () =>
h(DataTableColumnHeader, { title: 'Nama', column: 'name' }),
cell: ({ row }) => {
const name = row.original.name;
const formattedName = name
.split('-')
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(' ');
return h('div', { class: 'flex flex-col' }, [
h(
'span',
{ class: 'font-medium text-foreground' },
formattedName,
),
h(
'span',
{ class: 'text-xs text-muted-foreground font-mono' },
name,
),
]);
},
},
{
accessorKey: 'permissions_count',
enableSorting: false,
header: 'Jumlah Hak Akses',
cell: ({ row }) => {
return h(
'span',
{ class: 'text-sm' },
`${row.original.permissions_count} hak akses`,
);
},
},
{
id: 'actions',
enableSorting: false,
enableHiding: false,
cell: ({ row }) =>
h(DataTableActions, {
role: row.original,
}),
},
];
}