The svelte table seems to not be reactive when used with query

[isaacfink]

Hi guys, I have the following code

import { getCoreRowModel, createSvelteTable, getSortedRowModel, type TableOptions, flexRender, type ColumnDef, type Table } from '@tanstack/svelte-table';
    import { createQuery } from '@tanstack/svelte-query';
    import { usersList } from './data';

    interface User {
        id: string;
        firstName: string;
        lastName: string;
        email: string;
        isOnline: boolean;
        createdAt: string;
        roles: string[];
    }

    async function getUsers() {
        return usersList;
    }
    let users = createQuery({
        queryKey: ['users'],
        queryFn: getUsers,
        initialData: [
            {id: '123', firstName: 'John', lastName: 'Doe', email: '[email protected]', isOnline::true, roles: ['admin'], createdAt: '2022-01-12 10:07:07'},
        ],
        onSuccess: (data) => {}
    });

    const columns: ColumnDef<User>[] = [
        {
            id: 'name',
            accessorKey: 'name',
            header: 'Name'
        }
    ];

    const options: TableOptions<User> = {
        data: $users.data,
        columns,
        getCoreRowModel: getCoreRowModel(),
        enableRowSelection: true
    };

    let table: Readable<Table<User>> = createSvelteTable(options);

The table does not get updated when the data is updated, I understand I am passing the value and not the store which is what probably breaks the reactivity but it's the only way to pass it because the store is not the correct type (on the top level) and I can't pass a store to the table

[o-az]

@isaacfink have you figured this out?

edit: figured it out. Need to add a reactive statement that checks for data then runs rerender():

$: if (myQueryData) rerender()

[Schmell]

Where does the rerender() function come from?

[o-az]

Where does the rerender() function come from?

Check this example

table/examples/svelte/basic/src/App.svelte

Line 88 in 22e1ac4

const rerender = () => {