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

  • Loading...
  • Published on:  Friday, November 22, 2019
  • 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 (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:

    *** Github Links ***

    Basic Table:
    Custom Item (column) Slots:
    Custom Sorting:
    VideoTable Component:
    ‘Tags’ and ‘Played’ Columns:
    Expandable Rows:
    Click Event Handling:
    Custom Search/Filter:
    Dynamic Tables:

    *** Find me online ***


    #Vuetify #VueJS #DataTables #Javascript #MaterialDesign #WebDev #Vue #VueX
  • Source: