How to use a custom sidebar to filter data instead of provide navigation
Hello. I am a bit confused on how to sync table filter state when using a custom sidebar.
I want my sidebar to have table filters.
e.g App.tsx
<Route
element={
<ThemedLayout
Header={() => null}
Sider={() => <FilterSidebar />}
>
<TableProvider>
<Outlet />
</TableProvider>
</ThemedLayout>
}
>
list.tsx
const { tableProps, setFilters, filters } = useTable<IPost>({
resource: 'tasks',
queryOptions: {
enabled: true,
},
pagination: {
currentPage: 1,
pageSize: 5,
},
syncWithLocation: true,
})
FilterSidebar.tsx
const { tableProps, setFilters, filters } = useTable<IPost>({
resource: 'tasks',
queryOptions: {
enabled: false,
},
syncWithLocation: true,
})
// Trying to call setFilters via a button does not apply the filters on my table
// Despite that component rerendering but the url does get correctly updated with the filter
// and even after re-render filters from list.tsx is an empty []
// Is there a better way to share state in my app? I thought url updates would handle this
I want my sidebar to have table filters.
e.g App.tsx
<Route
element={
<ThemedLayout
Header={() => null}
Sider={() => <FilterSidebar />}
>
<TableProvider>
<Outlet />
</TableProvider>
</ThemedLayout>
}
>
list.tsx
const { tableProps, setFilters, filters } = useTable<IPost>({
resource: 'tasks',
queryOptions: {
enabled: true,
},
pagination: {
currentPage: 1,
pageSize: 5,
},
syncWithLocation: true,
})
FilterSidebar.tsx
const { tableProps, setFilters, filters } = useTable<IPost>({
resource: 'tasks',
queryOptions: {
enabled: false,
},
syncWithLocation: true,
})
// Trying to call setFilters via a button does not apply the filters on my table
// Despite that component rerendering but the url does get correctly updated with the filter
// and even after re-render filters from list.tsx is an empty []
// Is there a better way to share state in my app? I thought url updates would handle this
