/
BucketsDataTable.vue
55 lines (49 loc) · 1.53 KB
/
BucketsDataTable.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-card variant="flat" :border="true" class="rounded-xlg">
<v-text-field
v-model="search"
label="Search"
prepend-inner-icon="mdi-magnify"
single-line
hide-details
/>
<v-data-table
v-model="selected"
:sort-by="sortBy"
:headers="headers"
:items="buckets"
:search="search"
class="elevation-1"
show-select
>
<template #item.name="{ item }">
<div>
<v-btn
class="rounded-lg w-100 pl-1 pr-4 justify-start font-weight-bold"
variant="text"
height="40"
color="default"
to="/bucket"
>
<img src="../assets/icon-bucket-tonal.svg" alt="Bucket" class="mr-3">
{{ item.raw.name }}
</v-btn>
</div>
</template>
</v-data-table>
</v-card>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { VCard, VTextField, VBtn } from 'vuetify/components';
import { VDataTable } from 'vuetify/labs/components';
const props = defineProps<{
headers: unknown[],
buckets: unknown[],
}>();
const search = ref<string>('');
const selected = ref([]);
const sortBy = [{ key: 'date', order: 'asc' }];
</script>