V-data-table questions - customizing and handling data

Dashboard
1

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:

    image
    image1889Ă—576 62.4 KB

    The cells have a border-bottom-width, border-bottom-style, border-bottom-color that I can override. I did not find any border definition for the table row, only for the cells:
    image
    And the class is this: .v-table__wrapper>table>tbody>tr:not(:last-child)>td. So if my class on the properties screen is set to nolines, I need to create a new style definition like:

.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?

2

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

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 :man_shrugging:)

Edit: this might help - https://www.codeply.com/p/hi40H9aug9

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.

2 Likes
3

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:

    <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?

4

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

The v-data-table looks like this now:

    <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:

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

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

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

It works now.

1 Like
5

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