63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import type { ColumnDef } from '@tanstack/vue-table';
|
|
import { h } from 'vue';
|
|
import { DataTableColumnHeader } from '@/components/data-table';
|
|
import DataTableActions from './data-table-actions.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,
|
|
}),
|
|
},
|
|
];
|
|
}
|