139 lines
4.4 KiB
Vue
139 lines
4.4 KiB
Vue
<script setup lang="ts" generic="TData, TValue">
|
|
import type { ColumnDef } from '@tanstack/vue-table';
|
|
import { FlexRender, getCoreRowModel, useVueTable } from '@tanstack/vue-table';
|
|
import { computed, provide } from 'vue';
|
|
import DataTableToolbar from '@/components/data-table/DataTableToolbar.vue';
|
|
import {
|
|
Empty, EmptyDescription,
|
|
EmptyHeader, EmptyTitle
|
|
} from '@/components/ui/empty';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table';
|
|
import TableEmpty from '@/components/ui/table/TableEmpty.vue';
|
|
import type {
|
|
DataTableFilterDef,
|
|
DataTablePagination,
|
|
DataTableSort,
|
|
} from '@/types/data-table';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
columns: ColumnDef<TData, TValue>[];
|
|
data: TData[];
|
|
pagination?: DataTablePagination;
|
|
sort?: DataTableSort | null;
|
|
filterDefs?: DataTableFilterDef[];
|
|
filterValues?: Record<string, string>;
|
|
searchPlaceholder?: string;
|
|
}>(),
|
|
{
|
|
searchPlaceholder: 'Ketikkan sesuatu...',
|
|
}
|
|
);
|
|
|
|
const search = defineModel<string>('search', { default: '' });
|
|
|
|
const emit = defineEmits<{
|
|
'sort-change': [sort: DataTableSort | null];
|
|
'filter-change': [key: string, value: string];
|
|
'filters-reset': [];
|
|
}>();
|
|
|
|
const rowNumberColumn: ColumnDef<TData> = {
|
|
id: '_row_number',
|
|
header: 'No.',
|
|
enableSorting: false,
|
|
enableHiding: false,
|
|
cell: ({ row }) => {
|
|
const offset = props.pagination
|
|
? (props.pagination.currentPage - 1) * props.pagination.perPage
|
|
: 0;
|
|
|
|
return offset + row.index + 1;
|
|
},
|
|
};
|
|
|
|
const resolvedColumns = computed(() => [rowNumberColumn, ...props.columns]);
|
|
|
|
const table = useVueTable({
|
|
get data() {
|
|
return props.data;
|
|
},
|
|
get columns() {
|
|
return resolvedColumns.value;
|
|
},
|
|
getCoreRowModel: getCoreRowModel(),
|
|
manualSorting: true,
|
|
});
|
|
|
|
function handleSort(column: string): void {
|
|
const current = props.sort;
|
|
|
|
if (current?.column !== column) {
|
|
emit('sort-change', { column, direction: 'asc' });
|
|
|
|
return;
|
|
}
|
|
|
|
if (current.direction === 'asc') {
|
|
emit('sort-change', { column, direction: 'desc' });
|
|
|
|
return;
|
|
}
|
|
|
|
emit('sort-change', null);
|
|
}
|
|
|
|
provide('data-table-sort', {
|
|
sort: () => props.sort,
|
|
onSort: handleSort,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-4">
|
|
<DataTableToolbar v-model:search="search" :filter-defs="filterDefs" :filter-values="filterValues"
|
|
:search-placeholder="searchPlaceholder" @filter-change="(key, value) => emit('filter-change', key, value)"
|
|
@filters-reset="emit('filters-reset')" />
|
|
|
|
<div class="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
|
|
<TableHead v-for="header in headerGroup.headers" :key="header.id">
|
|
<FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header"
|
|
:props="header.getContext()" />
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<template v-if="table.getRowModel().rows.length">
|
|
<TableRow v-for="row in table.getRowModel().rows" :key="row.id"
|
|
:data-state="row.getIsSelected() ? 'selected' : undefined">
|
|
<TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
|
|
<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
|
|
</TableCell>
|
|
</TableRow>
|
|
</template>
|
|
<TableEmpty v-else :colspan="resolvedColumns.length">
|
|
<Empty>
|
|
<EmptyHeader>
|
|
<EmptyTitle>Data tidak ditemukan</EmptyTitle>
|
|
<EmptyDescription>
|
|
Silakan lakukan pencarian atau filter untuk menemukan data yang Anda cari.
|
|
</EmptyDescription>
|
|
</EmptyHeader>
|
|
</Empty>
|
|
</TableEmpty>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</template>
|