xenial-black
xenial-black2y ago

Finefoods Admin Dashboard Example

I got a question regarding one of the examples. The finefoods Ant design admin panel. On the orders page when you select different filters it updates the URL at the top. Where is that logic on the github page? I can't find it. Also that URL on the front end is different than what gets sent to api.finefoods... where is the logic for that translation/parsing?
6 Replies
rising-crimson
rising-crimson2y ago
Hey @naruto4488, The magic is the syncWithLocation prop of the useTable hook. If you enabled this prop refine automatically serialize your filters, sorters and pagination params on the URL then when you refresh the site refine parse the params on the URL and apply your table. 🤙🏻
exotic-emerald
exotic-emerald2y ago
useTable | refine
By using useTable, you are able to get properties that are compatible with Ant Design `` component. All features such as sorting, filtering and pagination comes as out of box.
xenial-black
xenial-blackOP2y ago
ohh nice so that prop sets the URL then 😮 So then what part translates the URL params to the params sent to the API because when inspecting it. They dont match 🤔 let me see if i can show a screenshot Im on mobile right now
rising-crimson
rising-crimson2y ago
GitHub
refine/index.ts at 21f90eaf611c704d2702a16dcb82f62644b6af5d · refin...
Build your React-based CRUD applications, without constraints. - refine/index.ts at 21f90eaf611c704d2702a16dcb82f62644b6af5d · refinedev/refine
rising-crimson
rising-crimson2y ago
Actually, useTable will pass the params to your dataProvider not the API and these params always same type like CrudFilters(https://refine.dev/docs/api-reference/core/interfaceReferences/#crudfilters) or CrudSorting (https://refine.dev/docs/api-reference/core/interfaceReferences/#crudsorting)
xenial-black
xenial-blackOP2y ago
Oh awesome! This is great help thank you

Did you find this page helpful?