Creating pretty and functional tables in Dashboard 2.0

Displaying data in essential in the Dashboard and the options within the v-data-table is are mind boggling. There are so many different ways to customize the table, turn simple values into icons, colorful elements and much more. This video shows how to customize your table and how to build tables that send selection back to Node-Red.

If you like what I do here, you can support me with Youtube Thanks, or Patreon:

Chapters:
0:00 Intro
0:47 Summary
2:13 First table
3:55 Search
6:32 Headers
8:28 Email link
10:03 Chips
12:10 Icon
14:08 Rating
16:20 Linear progress
17:31 Sorting
20:02 Specific headers
23:18 Selection
29:32 Third example
31:47 Buttons in table
36:20 Outro

[VladoM]

Another perfect and helpful tutorial, Csongor. Thanks

[MrBrian]

thanks for share!!, can you show how edit any row value and push on payload?

[paulgul]

Thanks for the informative video, just downloaded your example, should help me understand the basics

[Joestar-os]

I find that if I make any mistakes with the template, my dashboard freezes up and my nodered admin area also locks up.
Very hard to debug.

[paulgul]

How are the column widths set? I notice in the name column it goes to a second line sometimes so something must be restricting the column width. For reference, when I move the mouse over the headers they disappear so it's not just your settings - I don't know why, when I made a very simple table from a template the headers don't disappear

[mircopolo]

Is it possible to create a table that can be used on multiple browsers without affecting each other during sorting, filtering etc ?