Building Complex Data Tables with Vuetify's v-data-table and VueJS

Building Complex Data Tables with Vuetify's v-data-table and VueJS
Building Complex Data Tables with Vuetify's v-data-table and VueJS. Vuetify's v-data-table is an incredibly powerful and flexible component that offers both sensible defaults and a vast array of customization options.

Want to display a lot of data? This tutorial will show you how.

Vuetify’s v-data-table is an incredibly powerful and flexible component that offers both sensible defaults and a vast array of customization options. It accomplishes this through a clever mix of slots and props (and events, though we don’t cover those in as much depth in this video).

0:00 Start
2:40 Simple Tables
5:05 Item.name (column) Slots
11:46 Custom Sorting
16:21 VideoTable Component
21:13 ’Tags’ and ‘Played’ Columns
29:51 Expandable Rows
34:20 DataTable Events
41:28 Custom Search
48:41 Dynamic Tables (or, how to make the Admin section look significantly different)
1:02:30 Review

Seriously, there’s so much that this component can do. In the 72 minutes of this tutorial, we’ll only be scratching the surface… but it should give you plenty of ideas on how to use v-data-table’s more advanced features in your own app.

The “Building a VueJS Screencasting App From Scratch” Playlist: https://www.youtube.com/playlist?list=PLPwpWyfm6JADRf8x1Jc0Da8R71WJyt-Jn

Suggest:

Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework

Create Shopping basket page With Vuejs and Nodejs

Vue.js Tutorial: Zero to Sixty

Learn Vue.js from Scratch - Full Course for Beginners

Learn Vue.js from scratch 2018

Learn Vue.js - Full Course for Beginners - 2019