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

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
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.

*** Github Links ***

*** Find me online ***

#Vuetify #VueJS #DataTables #Javascript #MaterialDesign #WebDev #Vue #VueX

[MakeWithTech]

I have been in the software industry since 1977, yes the days of the dinosaurs using punch cards and mag tapes, and I normally learn a new technology by reading a book. I decided to give videos a try and after watching a range of videos on the Vue framework where the presenter (creator in YouTube terms) assumes significant prior knowledge. I have written code in many different languages, ranging from Fortran and Cobol to PHP and Java, but I am new to Javascript 5/6 syntax and your pace works perfectly for me. Thank you.

[felipesantiago]

The most complete video about the theme. Thank you! You cover all aspects without stay only in basic stuffs!

[ShafqatMShah]

Thank you from Pakistan. This video helped me a lot.
I'm given a task to build a custom data table with custom Item.name slot. This video saved me. Thanks Again! <3

[itsvin]

I m just learn about vue js, vuetify rn, and which this part (table/data-table) I got little difficult. Lucky me watch this video, u help me to build the concept and the logic. And now that's work. Thankyou!!

[ElCucut]

I have been looking a video like that for months. I am glad I found you, I will consider buying your course too. Really, I learnt a lot, keep up the good stuff please

[NomanDeAbid]

best video. one thing that would've been bonus was to make it paginated from API

[manuelyerbes]

I really like the video. It explains perfectly everything about data Tables in Vue.

Do you know how to make the search insensitive to accents? For example, if in the table data I have the word 'Alcalá' and in the search I search for 'alcala', I will find that word in the table.
Thank you.

[samm]

How can we limit the column width, i.e., even if we cannot display the whole content in cells of a column, how do we ensure all columns are, say of the same size?

[FirstLast-gklg]

How do I edit the font size of the v-table headers!? I can't seem to change their styling except for the preset class styles like making them Bold but no font-size. I have tried making custom classes but they have not worked

[lilybonbon]

Is there a maximum of items v-data-table can handle? Let's say I want it to hold 20, 000 entries?

[Freakyros]

Is it possible to edit the #item slot (for the whole row) and not having to edit the default select box per row?
I need to achieve a situation where I can use the default selection procedure and just make the row green when the box is checked.
It's easy enough to just put a true/false value on the #item and change the background-class accordingly, but this messes with the checkbox.
Please help, it's driving me insane :(

[ShickII]

Thanks for the video and your time, is there a way to change the sort icon? I mean if I need change the before and after arrow for other icon, is it posible?

[ashalathav]

how can we change the entire row backgroud color based on table column value?? For eg:table has Status column = { "Ongoing", "completed", "Pending" }, if value is "Ongoing" then row color should be green, "Completed" orange, Penindg as blue color

[roronoa_d_law]

What does <template #item.duration > means ? The # specially

[phillbaska]

Great video. I’m a little confused when changing dates to iso strings to sort correctly and using a filter to display a friendly date, how you are then meant to search based on the friendly value?

[exception]

Thank you, this video helped me a LOT!

[jorgegatica]

guauuu, tremendo video de v-data-table, pronunciación (youtube me lo tradujo a la perfección :)), aunque no entendí todo, aprendí mucho. Gracias

[francosaavedra]

Muchas gracia por compartir tu conocimiento

[Bnks]

I'd like to know the best way to remove the styling so I can theme it according to my styling specs.

[mdawes]

Building Complex Data Tables with Vuetify's v-data-table and VueJS. I like the end results of the table but unfortunately your course is designed for new people who are not programmers. You stated building this table from SCRATCH. This means from the beginning. There is a ton of stuff missed. I have an existing project that I want to build a vuetify table in. I tried the vuetify documentation and I am not knowledgeable to properly bring their table example in my file to make it work. So i am checking youtube and came across yours. yours dont either. how can I? Thanks