T
TanStack•2y ago
afraid-scarlet

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} />
}
No description
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?