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

Share
Embed
  • 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 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.clipvl.net/p/PLPwpWyfm6JADRf8x1Jc0Da8R71WJyt-Jn

    *** Github Links ***

    Basic Table: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/2851489220be2b76f0ae9f6ec0851637afe4f714
    Custom Item (column) Slots: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/028bd22a6be74d7c055d548abe81b7aeab98e235
    Custom Sorting: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/dc9428be4d9ca6333edf724974b3cfd697df2abe
    VideoTable Component: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/468afcab4ae1826fbd0f79af6059302f84cb00bf
    ‘Tags’ and ‘Played’ Columns: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/3b855a35b798a46170ec31c9a5cb8c5ffa2e36c0
    Expandable Rows: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/6c4503971b66cb91eca3fe2193367c25c0c423de
    Click Event Handling: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/c8d8d88cbeeda605207734eda0134a8e75aeeff1
    Custom Search/Filter: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/8ab8fb479c05f83e2d5436304051f8c90e75d586
    Dynamic Tables: https://github.com/jeffreybiles/vue-screencasts-nuxt/commit/15a424f7d109cf7debd6a2c7339c3dc63bc43481

    *** Find me online ***

    Twitter: https://twitter.com/VueScreencasts
    Website: https://www.vuescreencasts.com/

    #Vuetify #VueJS #DataTables #Javascript #MaterialDesign #WebDev #Vue #VueX
  • Source: https://youtu.be/lv-KHdoeSoI
Loading...

Comment