Vuetify: [Feature Request] ability to modify VDataTable row's properties without using `item` slot

[Teellcory]

Problem to solve

No means of directly modifying the cell/row

Proposed solution

Add a prop that can be applied to the template slotting the item in the data table which can apply changes to the cell conditionally. Such as background colors for the cell.

[nekosaur]

Please provide markup for what you are trying to achieve and/or how you imagine the solution would look like.

[Teellcory]

This isn't a conditional example, but it demonstrates what I'd expect the markup to look like to turn the first column's background blue: https://codepen.io/teellcory/pen/PooaVRY

[jacekkarczmarczyk]

Another feature could be allowing to render <th scope="row"> instead of <td>, maybe we can just support slot for td/th tag and content (instead of only content) - as an additional slot or add auto-detecting if it's td/th or something else to the item.<name> slot

[nekosaur]

I wasn't a huge fan of the auto-detection we did pre 2.0. Separate slots could perhaps work.

[thrazu]

Hi. I also need to do something like this. Styling the rows...
Thanks!

[thrazu]

Also would be nice to have borders options

[thrazu]

I think it will be very useful a property for styling the rows that looks something like this:

<v-data-table :row-class="myFunction" ...>

[kyleweishaupt]

I could use this feature as well. I have a data-table where the row might be marked "Priority", so I'd like to highlight the whole row with a class.

I'm using template slots for the cells since the headers come from props, so there isn't a good way to inject a class on the <tr> element based on the row item's data.

i.e. :row-class="item.priority ? 'highlighted' : null"

[starkfree]

Since this is about rows, and cells, how about adding some additional items to the headers object or a new cells object option to allow for classes to be passed down to the cells. For example, right now the headers object looks like so...

{
  text: string
  value: string
  align?: 'start' | 'center' | 'end'
  sortable?: boolean
  filterable?: boolean
  divider?: boolean
  class?: string | string[]
  width?: string | number
  filter?: (value: any, search: string, item: any) => boolean
  sort?: (a: any, b: any) => number
}

Now, say I wanted that column not to wrap lines and also to have a black background. If I add a class option like class='nowrap black-background' to the headers, that will only apply to th of the header and not the td of the cells. What would be nice is if there was a cells object in addition to the headers object, with options for individual cells applied to all rows.

cells = [
  column1: {
    class?: string | string[]
    nowrap?: boolean
  },
  column2: {
    class?: string | string[]
    nowrap?: boolean
  }
]

I'm sure there are additional options people may want as well, but being able to custom style individual columns without having to write a custom template for the column would be very useful.

[jacekkarczmarczyk]

Modifying rows and cells are in my opinion 2 different features, since there's already an issue for modifying cells (https://github.com/vuetifyjs/vuetify/issues/8474) let's keep this one for modifying only rows

[kiasaty]

Hi, is this resolved? I need to change the background-color of some rows under some conditions.

[MajesticPotatoe]

@kiasaty The issue is still open, thus not resolved. You can still change the background-color of rows conditionally using item slots in the meantime.

[bob-lee]

@MajesticPotatoe I am curious that if I have some custom item.<name> slots defined in my table, is it still possible to style some rows using item slot?

[jacekkarczmarczyk]

if you're using item slot you can't use item.<name> (you need to write the markup for tr and all tds)

[bob-lee]

@jacekkarczmarczyk thanks for clarification, I didn't want to lose my custom styled column templates and the ability to configure columns by header, my temporary solution until this feature is available was:

• use existing item.<name> slot to add a class to td that belongs to the row I want to style like :class="{ 'iam-special' : item.iamSpecial }"
• each time items are given I run some javascript to find rows with that class and add class to found trs

const rows = document.querySelectorAll('table tbody tr')
rows.forEach(x => {
  const special = x.querySelector('div.iam-special')
  if (special) {
    x.classList.add('my-special-row')
  }
})

[pututbawono]

const rows = document.querySelectorAll('table tbody tr')
rows.forEach(x => {
  const special = x.querySelector('div.iam-special')
  if (special) {
    x.classList.add('my-special-row')
  }
})

@bob-lee
How do you run your script ? On which v-data-table event do you use to trigger it ?

[bob-lee]

@pututbawono I am using @pagination event where I do setTimeout(() => { /* ... */ }, 200). It needed a bit of delay.

[pututbawono]

@bob-lee thanks, I tried your script for my case and it works.
But I took a slightly different path on finding the special elements and marking the rows. So, instead of selecting all the rows first then querying for the "special" class, I first query the special class then for each special class I do a closest search of tr, making your script a bit like this :

const cells = document.querySelectorAll('table .special-cell');
cells.forEach(cell => {
    cell.closest('tr').classList.add('special-row');
})

Thanks again for the inspiration on the script 😊

[bob-lee]

@pututbawono nice. closest would work for modern browsers i guess

[pututbawono]

@bob-lee from the mozzilla docs on closest, it is still supported for IE9+ when using polyfills.
But since my app is used only for office purposes (not public), I just require the users to use newest browsers (Safari, Edge, Chrome, Firefox and Opera) to use the app 😁.
I hope Vuetify devs will implement this "row class" feature soon, maybe along with better docs/example on server side datatable 😊.

[florealcab]

This would be a very good feature for us. Using v-slots is not possible in our case. We use a JS code to bypass the problem but it's not an acceptable solution.

Something like this (proposed by @thrazu) is OK for me:

<v-data-table :row-class="myFunction" ...>

Have you some plans for when do you can release this feature?

[Storm75]

Solution : stop using Vuetify, this use case should be mandatory and demonstrates how much the developers care about the library.

Edit: After some research, ag-grid and vue-good-tables seems to be way better alternative for datatables. Time to migrate your pages.

[hector]

The problem of using a v-slot is that you lose all the default logic inside it and, for most cases, you want to preserve the default behaviour and just add some salt.
This is a common problem I found in general in Vuetify, the internals are not easy to be re-used. Maybe if the slots could be something reusable, for example: a Component? This is a Vue library after all :)

[martixy]

Agreed. Using the item slot breaks item.<name> slots.

[johnleider]

resolved in #11254

If you have any additional questions, please reach out to us in our Discord community.