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
fascinating-indigo•2y 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. 🤙🏻flat-fuchsia•2y 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.
correct-apricot•2y 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
fascinating-indigo•2y ago
https://github.com/refinedev/refine/blob/21f90eaf611c704d2702a16dcb82f62644b6af5d/packages/core/src/definitions/table/index.ts#L15-L52 you can check it out to learn how refine parse and stringify the params.
GitHub
refine/index.ts at 21f90eaf611c704d2702a16dcb82f62644b6af5d · refin...
Build your React-based CRUD applications, without constraints. - refine/index.ts at 21f90eaf611c704d2702a16dcb82f62644b6af5d · refinedev/refine
fascinating-indigo•2y 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)correct-apricot•2y ago
Oh awesome! This is great help thank you