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.
github.com/nygma2004/km/blob/...
How to use OWM in Node-Red: • How to consume OWM wea...
Dashboard 2.0 Playlist: • Node-Red Dashboard 2.0
If you like what I do here, you can support me with TH-cam Thanks, or Patreon:
/ csongorvarga
TikTok channel most on trains, big and small: / frontendfriday
And same in Instagram: / hamptongardenrailway
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

[@csongorvarga]

Glad you liked it!

[@MrBrian9107]

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

[@paulgul1]

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

[@csongorvarga]

You are welcome!

[@paulgul1]

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

[@csongorvarga]

I did not look into the column width yet. I noticed for a lot of element that the background colors are incorrect and need to be overwritten with custom styleing. I will mention that in a future video if I have the solution.

[@mircopolo]

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

[@csongorvarga]

I did not test this, but my understanding that the filters and sorting is happening on the client. Therefore each browser does it independetly.

[@mircopolo]

Let's say the are 2 buttons "select all" and "select filtered" which are used to trigger sql query, then data is sent to a table. If 2 browsers display the same page, I click "select filtered" on browser 1 the same will appear on browser 2 even if last user action there was "select all" button

[@csongorvarga]

@@mircopolo I have a new dialog video coming out soon. In that one I will show and example how to check the client session ID to ensure message is only processed by the current session. The same technique could be used for the table as well. You bind the table items to a local variable and you only copy msg.payload into this variable if the socket.id is the same.