87 lines
2.2 KiB
Vue
87 lines
2.2 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import DataTableToolbar from './DataTableToolbar.vue';
|
|
|
|
// Example: Using DataTableToolbar standalone
|
|
const search = ref('');
|
|
const pageSize = ref(10);
|
|
const selectedCount = ref(0);
|
|
|
|
const handleSearchChange = (value) => {
|
|
search.value = value;
|
|
console.log('Search changed:', value);
|
|
};
|
|
|
|
const handlePageSizeChange = (value) => {
|
|
pageSize.value = value;
|
|
console.log('Page size changed:', value);
|
|
};
|
|
|
|
const handleExport = (format) => {
|
|
console.log('Export:', format);
|
|
};
|
|
|
|
const handleAdd = () => {
|
|
console.log('Add button clicked');
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-4">
|
|
<!-- Standalone DataTableToolbar -->
|
|
<DataTableToolbar
|
|
:search="search"
|
|
:show-search="true"
|
|
:show-page-size="true"
|
|
:page-size="pageSize"
|
|
:selected-count="selectedCount"
|
|
:show-selected-count="true"
|
|
:show-export="true"
|
|
:show-add="true"
|
|
:show-filters="true"
|
|
@update:search="handleSearchChange"
|
|
@update:page-size="handlePageSizeChange"
|
|
@export="handleExport"
|
|
>
|
|
<!-- Add button dropdown content -->
|
|
<template #add>
|
|
<button
|
|
@click="handleAdd"
|
|
class="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50"
|
|
>
|
|
Dodaj novo
|
|
</button>
|
|
</template>
|
|
|
|
<!-- Custom options -->
|
|
<template #options>
|
|
<button class="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded">
|
|
Opcija 1
|
|
</button>
|
|
</template>
|
|
|
|
<!-- Filters -->
|
|
<template #filters>
|
|
<div class="space-y-2">
|
|
<label class="text-sm font-medium">Filtriraj po:</label>
|
|
<input type="text" class="w-full px-2 py-1 border rounded" />
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Custom actions -->
|
|
<template #actions>
|
|
<button class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded">
|
|
Akcija
|
|
</button>
|
|
</template>
|
|
</DataTableToolbar>
|
|
|
|
<!-- Your content here -->
|
|
<div class="p-4 bg-gray-50 rounded">
|
|
<p>Search: {{ search }}</p>
|
|
<p>Page Size: {{ pageSize }}</p>
|
|
<p>Selected: {{ selectedCount }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|