# V-data-table questions - customizing and handling data

**URL:** <https://discourse.nodered.org/t/v-data-table-questions-customizing-and-handling-data/85710>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [20 February 2024 19:28 UTC](https://discourse.nodered.org/t/v-data-table-questions-customizing-and-handling-data/85710 "2024-02-20T19:28:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [20 February 2024 19:28 UTC](https://discourse.nodered.org/t/v-data-table-questions-customizing-and-handling-data/85710/1 "2024-02-20T19:28:45Z")

</div>

I am trying to do all sorts of stuff with tables, and I run into questions from time-to-time. These are not cirtical issues, but I would like to start this by not making mistakes from the start.

1. My table looks like this in template `<v-data-table v-model:search="search" :items="msg?.payload">` and when I look at the console, I see some errors like: "Captured TypeError: Cannot read properties of undefined (reading 'age')" or "Captured TypeError: Cannot read properties of undefined (reading 'target')". `age` and `target` are field in my tables. What is the reason behind these errors? When I look at the data, all my record have a valid age or target value. Therefore I don't understand why the system is throwing these errors. And why only to these fields? Should I have a computed definition to these fields? I am using these fields in functions in the methods section as well, but I used other fields to that do not throw errors. Or I can just ignore these errors?

2. I want to be able to select lines from the table. I figured out how to enable the checkboxes and how to return the checked lines. I am also able to render buttons for each line that return the entire line where the button was pressed. But is it possible to just make the entire line "selectable"?

3. Styling: let me check if I understand this correctly: if I add a Class name on the node propery screen that class name will be added to each class definition within that template node and I can than create override classes to set my own style. For example if I want a table which does not have lines between the lines, I can override the bottom border.  
When I look a the dev tools I see this:  

```auto
.nolines .v-table__wrapper>table>tbody>tr:not(:last-child)>td {
    border-bottom: none;
}

```

Is my thought process correct? Is this how you find out what class to define?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [20 February 2024 20:06 UTC](https://discourse.nodered.org/t/v-data-table-questions-customizing-and-handling-data/85710/2 "2024-02-20T20:06:43Z")

</div>

> [@nygma2004](#):
>
> when I look at the console, I see some errors like: "Captured TypeError: Cannot read properties of undefined (reading 'age')" or "Captured TypeError: Cannot read properties of undefined (reading 'target')". `age` and `target` are field in my tables. What is the reason behind these errors? When I look at the data, all my record have a valid age or target value

Difficult to know without seeing your Vue and the actual data going in.

> [@nygma2004](#):
>
> But is it possible to just make the entire line "selectable"?

Anything is possible but, it maybe you are using the wrong component. Vuetify 3 doesn't have the more capable table component that vuetify 2 had. (Mind, it's been a few weeks since I looked, it may be available now 🤷‍♂️)

Edit: this might help - [https://www.codeply.com/p/hi40H9aug9](https://www.codeply.com/p/hi40H9aug9)

> [@nygma2004](#):
>
> Styling: let me check if I understand this correctly: if I add a Class name on the node propery screen that class name will be added to each class definition within that template node

No. Adding a class name to the template edit pane adds the class name to the container. You can use it as a selector to target items inside e.g. `.myclass > div > span` for example.

But since you are using a template this is less necessary, you can simply add classes to the elements in your template html wherever you please.

---

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [21 February 2024 20:44 UTC](https://discourse.nodered.org/t/v-data-table-questions-customizing-and-handling-data/85710/3 "2024-02-21T20:44:12Z")

</div>

A different question. I created a table with selection checkboxes. I followed one of the example and it was working just fine. I was able to select items, and the selected item(s) were returned either as a single object or array of objects on the output. This is how I defined the `v-data-table`:

```auto
    <v-data-table 
      v-model:search="search" 
      :items="msg?.payload" 
      :headers="msg?.headers"
      item-selectable="selectable"
      select-strategy="all"
      show-select    
      return-object
    >

```

Based on the documentation, my understanding was that `return-object` tells Vue to return the selected items. And it was working.  
And now I checked the same today, and it is no longer working. Did you use this before? Any experience what would stop the behaviour?

---

<div class="post-metadata">

**Author:** ![nygma2004](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nygma2004/32/1308_2.png) [@nygma2004](https://discourse.nodered.org/u/nygma2004)\
**Post date:** [21 February 2024 21:06 UTC](https://discourse.nodered.org/t/v-data-table-questions-customizing-and-handling-data/85710/4 "2024-02-21T21:06:52Z")

</div>

I managed to fix it. But honestly I still don't understand why this worked.

The `v-data-table` looks like this now:

```auto
    <v-data-table 
      v-model:search="search" 
      :items="msg?.payload" 
      :headers="msg?.headers"
      v-model="selected"
      item-selectable="selectable"
      select-strategy="all"
      show-select    
      return-object
    >

```

I added `v-model="selected"` which stores the selected items.

Initialized the value:

```auto
    data () {
      return {
        selected: [],
        search: ''
      }
    },

```

And also added a watch function to send the content out when the selection changes:

```auto
    watch: {
        selected: function () {
          this.send({topic:'selected', payload: this.selected});
        }
    },

```

It works now.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [22 March 2024 21:07 UTC](https://discourse.nodered.org/t/v-data-table-questions-customizing-and-handling-data/85710/5 "2024-03-22T21:07:12Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.