V-data-table
lastmod 2021-12-29created 2021-08-215 edits
Default sort
To apply a default sort, use sort-desc and sort-by="name". <syntaxhighlight lang="html5> <template>
<v-data-tablehide-default-headersort-descsort-by="name":items="items":search="filter":loading="loading":headers="headers":loading-text="$t('msg.loading')"><-- ... --></v-data-table>
</template>
</syntaxhighlight>
Changing the cursor on a Row
Apply it using a Korean: 딥 셀렉터. <syntaxhighlight lang="html5> <template>
<v-data-tableclass="row-pointer":headers="headers":items="tableItems":search="filterText":loading="showLoading":loading-text="$t('loading')"@click:row="onClickRow"></v-data-table>
</template>
<style lang="scss" scoped>
.row-pointer::v-deep tr {
cursor: pointer;
}
</style></syntaxhighlight>
For reference, @click:row also lets you add a row click event.
Centering a form
Use <div class="d-flex justify-center"> ... </div>. <syntaxhighlight lang="html5> <template>
<v-data-table><template v-slot:item.permission="{ item }">
` `<v-select class="permission-select"></v-select>
` `
</template></v-data-table>
</template>
<style lang="scss" scoped>
.permission-select {
max-width: 200px;
}
</style></syntaxhighlight>