Update version of TanStack table library

[R0tmayer]

Hello everyone!

I have been spending a lot of time trying to figure out why the data that I pass as props to the DataTable component is not being reactive?

Using Vue Dev Tools, I deleted data from the store, but the table was not updating or rerendering.

The problem is older version of the TanStack table in your components shadcn-vue/apps/www/package.json:

"tanstack-table": "^8.19.3"

There are also the same issues:

• Reactive props for useVueTable
• [Vue] Pushing to data ref does not add table row
• docs: make reactive

Support for reactivity in the Vue adapter was added on August 8, 2024 with the release of version:

"@tanstack/vue-table": "^8.20.0"

Latest version is v8.20.2

Please, update your library's package file to v8.20.0+

[Taewenn]

Hello, upgraded to "@tanstack/vue-table": "^8.20.2" on my project but still missing reactivity in the DataTable, any updates on this from your side ?

[Taewenn]

tanstack/vue-table version : "@tanstack/vue-table": "^8.20.2" (didn't test with previous version)

Ok, I found a workaround :

• Just go to the DataTable.vue
• Add const data = computed(() => props.data) (below props for example)
• Replace get data() { return props.data } by data in const table = useVueTable(...)

Full working example :

<script setup lang="ts" generic="TData, TValue">
import type { ColumnDef, ColumnFiltersState, SortingState, VisibilityState } from '@tanstack/vue-table'
import { FlexRender, getCoreRowModel, useVueTable, getPaginationRowModel } from '@tanstack/vue-table'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { valueUpdater } from '@/lib/utils';
import { computed, ref, watch } from 'vue';

const props = defineProps<{
    columns: ColumnDef<TData, TValue>[]
    data: TData[]
}>()
const emit = defineEmits<{
    (e: 'update:selected', value: {}): void;
}>();

const data = computed(() => props.data);

const sorting = ref<SortingState>([])
const columnFilters = ref<ColumnFiltersState>([])
const columnVisibility = ref<VisibilityState>({})
const rowSelection = ref({})

const table = useVueTable({
    data,
    get columns() { return props.columns },
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),
    state: {
        get sorting() { return sorting.value },
        get columnFilters() { return columnFilters.value },
        get columnVisibility() { return columnVisibility.value },
        get rowSelection() { return rowSelection.value },
    },
})

watch(rowSelection, (newValue) => {
    console.log(newValue);
    emit('update:selected', newValue);
});
</script>

The data should now be reactive again 🎉

Maybe it's a little "crappy" but that's the only way I found until now

[R0tmayer]

Hello, upgraded to "@tanstack/vue-table": "^8.20.2" on my project but still missing reactivity in the DataTable, any updates on this from your side ?

Hi mate!

I am a backender and my knowledge in the frontend is weak, so could you tell me how to update the library correctly?

Trying this, not working for me:

npm update
npm update -g "@tanstack/vue-table"

Should the component in shadcn-vue automatically update the using TanStack version?

Also, for the sake of interest, how did you find this issue - through a Google search?

You can also see a new comment from contributors about this issue

[sadeghbarati]

@R0tmayer

You can use

npm add @tanstack/vue-table@latest

in your Terminal, in your project directory Close this issue if you solve the problem

Thanks

[SherMi321]

I have a similar issue. If I use the examples from Tanstack to render the data using plain table it works fine. but if I use Shadcn table components then the reactivity is lost. I don't see the reason why, any ideas?

reproduced my issue: https://stackblitz.com/edit/github-pkcxux

[R0tmayer]

tanstack/vue-table version : "@tanstack/vue-table": "^8.20.2" (didn't test with previous version)

Ok, I found a workaround :

• Just go to the DataTable.vue
• Add const data = computed(() => props.data) (below props for example)
• Replace get data() { return props.data } by data in const table = useVueTable(...)

Full working example :

<script setup lang="ts" generic="TData, TValue">
import type { ColumnDef, ColumnFiltersState, SortingState, VisibilityState } from '@tanstack/vue-table'
import { FlexRender, getCoreRowModel, useVueTable, getPaginationRowModel } from '@tanstack/vue-table'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { valueUpdater } from '@/lib/utils';
import { computed, ref, watch } from 'vue';

const props = defineProps<{
    columns: ColumnDef<TData, TValue>[]
    data: TData[]
}>()
const emit = defineEmits<{
    (e: 'update:selected', value: {}): void;
}>();

const data = computed(() => props.data);

const sorting = ref<SortingState>([])
const columnFilters = ref<ColumnFiltersState>([])
const columnVisibility = ref<VisibilityState>({})
const rowSelection = ref({})

const table = useVueTable({
    data,
    get columns() { return props.columns },
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),
    state: {
        get sorting() { return sorting.value },
        get columnFilters() { return columnFilters.value },
        get columnVisibility() { return columnVisibility.value },
        get rowSelection() { return rowSelection.value },
    },
})

watch(rowSelection, (newValue) => {
    console.log(newValue);
    emit('update:selected', newValue);
});
</script>

The data should now be reactive again 🎉

Maybe it's a little "crappy" but that's the only way I found until now

Updated to latest version using npm add @tanstack/vue-table@latest

    "dependencies": {
        "@tanstack/vue-table": "^8.20.4",

Change code and it doesn't work.(delete items from pinia store and table doesn't update). Don't know how to fix thix

const props = defineProps<{
  columns: ColumnDef<TData, TValue>[]
  data: TData[]
}>()

const data = computed(() => props.data);

const table = useVueTable({
  data, // error here
  get columns() {
    return props.columns
  },
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
})

Vue: Type ComputedRef<TData[]> is missing the following properties from type TData[]: length, pop, push, concat, and 29 more

This variant give me the same error:

const props = defineProps<{
  columns: ColumnDef<TData, TValue>[]
  data: TData[]
}>()

const {data} = toRefs(props);

const table = useVueTable({
  data, // error here
  get columns() {
    return props.columns
  },
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
})

Vue: Type Ref<TData[]> is missing the following properties from type TData[]: length, pop, push, concat, and 29 more.

[Azurox]

Same problem here, even adding a key on table with a generated hash can't force a re-render of the table :(

[SherMi321]

I have made it work with the following code:

const props = defineProps<{
  columns: ColumnDef<TData, TValue>[]
  data: TData[]
}>()

const table = useVueTable({
  data: toRef(props,'data'),
  get columns() { return props.columns },
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
})

[hrynevychroman]

To be clear, I don't think this issue is related to the UI library; all needed info is described inside the official stack/table docs, where you can find an example and how to deal with it.

Video example: https://github.com/user-attachments/assets/02112b99-a41d-4167-954b-10caa675b989

@sadeghbarati I think we could close this issue as it is not related to shadcn-vue at all 😅

[sadeghbarati]

Make sense, but we need to update doc

• https://tanstack.com/table/latest/docs/framework/vue/guide/table-state#using-reactive-data
• https://github.com/TanStack/table/pull/5687#issuecomment-2281067245