Recently, I integrated Vuetifyjs into my right-to-left (RTL) Vue 2 project. Within a card element, I inserted a table and included a search bar following the documentation. Now, I have two specific goals in mind:
- Relocate the "number of items to show" option from the footer to the top.
- Create an expandable search bar triggered by an icon.
In essence:
https://i.sstatic.net/ccMZJ.png
Regarding the first objective, I haven't found a solution within the official documentation. As for the second task, my desired outcome is depicted as follows:
https://i.sstatic.net/7jXNh.gif
I attempted to seek answers in the documentation without success. Additionally, I stumbled upon the following article: Expand Searchbar with Search icon as well as show close icon onclick using JavaScript
The current code snippet is as follows:
<div>
<v-card>
<v-card-title>
<v-text-field
v-model="searchText"
append-icon="mdi-magnify"
label="חיפוש"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
class="elevation-1"
:headers="headers"
:items="items"
:items-per-page="itemsPerPage"
:footer-props="settings"
>
</v-data-table>
</v-card>
</div>
Where:
settings: {
'items-per-page-options': [10, 25, 50, 100],
'items-per-page-text': 'סהכ'
},
itemsPerPage: 10
Is it feasible to accomplish these requirements using Vuetify?