[Task] v-data-table

[chris-sab]

Overview

• Related Tasks: n/a
• Related Issues: n/a

A conversion should not start until all assigned issues with the milestone v2.2.x are resolved and in the next branch. Reference our Coding Guidelines for information regarding the team's practices or reach out to us on Discord.

[Stevelriemenbill]

Is there any update to this? According to the milestones it should have come with the first Vuetify 3 beta release. This is currently the only thing holding us back from going live with Vue 3. We use this feature heavily in our Vue 2 application.

[johnleider]

Data table wasn't ready so it was pushed to 3.1, which we anticipate to come relatively quickly after 3.0 release.

[otavio]

Data table wasn't ready so it was pushed to 3.1, which we anticipate to come relatively quickly after 3.0 release.

Is there any public branch we could look at current work in progress component?

[Stevelriemenbill]

Data table wasn't ready so it was pushed to 3.1, which we anticipate to come relatively quickly after 3.0 release.

Is there any public branch we could look at current work in progress component?

https://github.com/vuetifyjs/vuetify/tree/feat/v3-data-table

[otavio]

Great. Is there a place with the missing items needing work?

[csntr]

@johnleider now that 3.0 is out its there any estimate when to expect the 3.1 with data tables (and date pickers)? Last comment here is from may so I would be grateful for some updates on this.

[diavrank]

it would be great to have a beta version for 3.1 to start testing this component with our apps.

[jacekkarczmarczyk]

https://next.vuetifyjs.com/en/introduction/roadmap/#labs

[Karacraft]

It is supposed to be addressed in v.3.1 (Q1 2023). Finger's crossed till then or create own setup

[paulinavcole]

Is there any update on the release of data tables(and date pickers)?

[VictorTrusty]

We need it ASAP for a live-app. Please keep us informed :)

[johnleider]

[VictorTrusty]

@johnleider Yep, I saw that. But since we are almost done with Q4 2022, that's why I am asking for news here 👍

[johnleider]

Actively working on it right this minute.

[lorand-horvath]

@johnleider Is the "Labs" package available to use at this moment? All I can find is this link, but nothing more that I could use, try or install https://next.vuetifyjs.com/en/introduction/roadmap/#labs I've also heard it mentioned in the "Views on Vue" podcast you and Erik attended last month.

[johnleider]

There are still 7 days left in the month.

[MaYoRr]

Should I expect a table component this year?

[keyboardSmasher]

Just in time for the Vue 4 launch! 🎉

[iamdeadman]

Can someone suggest how do I install the vuetify development version ? I want to install and use the 3.1 dev version (assuming that has the labs version with the data table components)

[lorand-horvath]

@iamdeadman @johnleider is still working on Vuetify Labs, as alluded to here and here. We should all be patient and wait for the necessary work to actually be completed. I don't want to be a beta (alpha) tester. Do you?

Edit: Labs is getting ready, so I don't know about you guys, but I'm really looking forward to trying it: https://github.com/vuetifyjs/vuetify/commit/cd013a9c3723a2657e11006a82ba153728e4c304

[KaelWD]

I don't want to be a beta (alpha) tester.

I'm really looking forward to trying [labs]

Labs literally is alpha components

[lorand-horvath]

I don't want to be a beta (alpha) tester.

I'm really looking forward to trying [labs]

Labs literally is alpha components

@KaelWD I see now that 'Labs is a new way for developers to use unfinished components in an alpha state.' Well then... I'll have to be an alpha tester :-)

[guykatz]

will we be able to use the playground for lab components?

[adnan-razzaq]

any update?

[diavrank]

John Leider published on his Twitter that it will be released tomorrow.

[TotallyNotSethP]

There are still 7 days left in the month.

There isn't anymore

[maxchia18]

Hi, so how can we use v-data-table in our Vuetify3.0 project?

[Viktohblake]

any way for this yet?

[lorand-horvath]

https://github.com/vuetifyjs/vuetify/releases/tag/v3.1.0

[MetRonnie]

I am using 3.1.0, however it doesn't seem to be there: https://github.com/vuetifyjs/vuetify/tree/v3.1.0/packages/vuetify/src/components

I get

[Vue warn]: Failed to resolve component: v-data-table

[lorand-horvath]

@MetRonnie It's there in the 'next' branch (which is actually v3) under 'labs': https://github.com/vuetifyjs/vuetify/tree/next/packages/vuetify/src/labs/VDataTable or in the 'v3.1.0' branch also under 'labs': https://github.com/vuetifyjs/vuetify/tree/v3.1.0/packages/vuetify/src/labs

Usage taken from https://next.vuetifyjs.com/en/labs/introduction/#usage

import { createVuetify } from 'vuetify'
import { VDataTable } from 'vuetify/labs/VDataTable'

export default createVuetify({
  components: {
    VDataTable
  }
})

[ghost]

Is there documentation on the changes to it since v2? It seems that the <template #item.field=... syntax is invalid in vue 3. I can find this page on v3 v-data-table: https://next.vuetifyjs.com/en/api/v-data-table/

But the page it links to is 404.

[iamrgroot]

Is there documentation on the changes to it since v2? It seems that the <template #item.field=... syntax is invalid in vue 3. I can find this page on v3 v-data-table: https://next.vuetifyjs.com/en/api/v-data-table/

But the page it links to is 404.

It is still here in the docs, but the codepen isn't updated for the labs change so I don't know if it should work: https://next.vuetifyjs.com/en/components/data-tables/basics/#item

[nekosaur]

https://dev.vuetifyjs.com/en/components/data-tables/basics/#item

If you're getting an eslint error, see https://github.com/vuejs/eslint-plugin-vue/pull/1330. Regardless the eslint error does not prevent it from working though.

[ghost]

Thank you both! I am able to get it working now.

[guykatz]

@nekosaur I think I saw a closing of the data table virtualization. the docs are not yet update: see https://dev.vuetifyjs.com/en/components/data-tables/virtual-tables/ is this supported in lab already? thanks

[nekosaur]

Yes. You can see an example here https://dev.vuetifyjs.com/en/components/data-tables/basics/#v-data-table-virtual