colossal-harlequin

Best way to pass route location to reusable components?

I'd like to figure out how to sync a data table's state with the url. Am i following the right direction here? I have this generic DataTable and DataTablePagination component but imagine i need to pass in the route's location all the way down to set teh search params?

export const contactsRoute = new Route({
    getParentRoute: () => teamIdRoute,
    path: 'contacts',
    validateSearch: contactsSchema,
    // loader: () => trpc.contacts.getAll.useQuery(),
    component: ({ useSearch }) => {
        return (
            <DataEntityLayout pathName='contacts' recordName='Contact'>
                <ContactsTable />
            </DataEntityLayout>
        )
    },
})

export const contactsRoute = new Route({
    getParentRoute: () => teamIdRoute,
    path: 'contacts',
    validateSearch: contactsSchema,
    // loader: () => trpc.contacts.getAll.useQuery(),
    component: ({ useSearch }) => {
        return (
            <DataEntityLayout pathName='contacts' recordName='Contact'>
                <ContactsTable />
            </DataEntityLayout>
        )
    },
})

export default function ContactsTable() {
    const contactsQuery = trpc.contacts.getAll.useQuery()

    if (contactsQuery.isLoading) {
        return <div>Loading...</div>
    }
    return <DataTable columns={columns} data={contactsQuery.data} />
}

export default function ContactsTable() {
    const contactsQuery = trpc.contacts.getAll.useQuery()

    if (contactsQuery.isLoading) {
        return <div>Loading...</div>
    }
    return <DataTable columns={columns} data={contactsQuery.data} />
}

TanStack•3y ago

colossal-harlequin

Best way to pass route location to reusable components?

export const contactsRoute = new Route({
    getParentRoute: () => teamIdRoute,
    path: 'contacts',
    validateSearch: contactsSchema,
    // loader: () => trpc.contacts.getAll.useQuery(),
    component: ({ useSearch }) => {
        return (
            <DataEntityLayout pathName='contacts' recordName='Contact'>
                <ContactsTable />
            </DataEntityLayout>
        )
    },
})

export const contactsRoute = new Route({
    getParentRoute: () => teamIdRoute,
    path: 'contacts',
    validateSearch: contactsSchema,
    // loader: () => trpc.contacts.getAll.useQuery(),
    component: ({ useSearch }) => {
        return (
            <DataEntityLayout pathName='contacts' recordName='Contact'>
                <ContactsTable />
            </DataEntityLayout>
        )
    },
})

export default function ContactsTable() {
    const contactsQuery = trpc.contacts.getAll.useQuery()

    if (contactsQuery.isLoading) {
        return <div>Loading...</div>
    }
    return <DataTable columns={columns} data={contactsQuery.data} />
}

export default function ContactsTable() {
    const contactsQuery = trpc.contacts.getAll.useQuery()

    if (contactsQuery.isLoading) {
        return <div>Loading...</div>
    }
    return <DataTable columns={columns} data={contactsQuery.data} />
}

Best way to pass route location to reusable components?

Similar Threads

Best way to pass route location to reusable components?

Similar Threads

Similar Threads

Similar Threads