How to create Multiple resource based on permanent filter?
How to create multiple resources from the same API endpoint but the difference is each resource has a different permanent filter?
KHi @regn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. 
K----------------------
To create multiple resources based on permanent filters in refine, you can utilize the
In this example, we've created two separate components, each using the
You can then define these as separate resources in your
To create multiple resources based on permanent filters in refine, you can utilize the
filters.permanent property when defining your resources. This allows you to create different resources from the same API endpoint, each with its own permanent filter. Here's how you can approach this:- Define separate resources in your
<Refine>component, each with a unique name. - For each resource, use the appropriate hook (e.g.,
useTable,useSimpleList, etc.) and set thefilters.permanentproperty with the desired filter.
useTable hook:In this example, we've created two separate components, each using the
useTable hook with a different permanent filter. The filters.permanent property ensures that these filters are always applied and cannot be changed by the user.You can then define these as separate resources in your
<Refine> component:KThis approach allows you to create multiple resources that use the same API endpoint but have different permanent filters applied.
For more information on using permanent filters, you can refer to the following documentation:
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
For more information on using permanent filters, you can refer to the following documentation:
- useTable filters.permanent (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#filterspermanent)
- useSimpleList filters.permanent (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-simple-list/#filterspermanent)
permanent filter is unchangeable and will always be applied, unlike initial----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
K@336843331416096768 Kapa.ai is still learning and improving, please let me know how I did by reacting below.
S@kapa.ai In my case, I have a resource called
The API endpoint is the same, but I want to use the permanent filter
warehouse_listing, so I want to have 2 list pages, the first one will shows only data with pending status, and the other one is for the 'done' statusThe API endpoint is the same, but I want to use the permanent filter
KLet me check the knowledge base for you again. One moment! 
K----------------------
I understand you want to create two separate list pages for your
// PendingWarehouseList.tsx
import { useTable } from "@refinedev/core";
const PendingWarehouseList = () => {
const { tableProps } = useTable({
resource: "warehouse_listing",
filters: {
permanent: [
{
field: "status",
operator: "eq",
value: "pending",
},
],
},
});
// Render your table here
};
// DoneWarehouseList.tsx
import { useTable } from "@refinedev/core";
I understand you want to create two separate list pages for your
warehouse_listing resource, one for pending status and another for done status, using the same API endpoint but with different permanent filters. Here's how you can achieve this using refine:- First, you need to create two distinct resources with different names, even though they use the same API endpoint. Let's modify your resource definitions:
- Now, create two separate list components for pending and done statuses. In each component, use the
useTablehook with a permanent filter:
// PendingWarehouseList.tsx
import { useTable } from "@refinedev/core";
const PendingWarehouseList = () => {
const { tableProps } = useTable({
resource: "warehouse_listing",
filters: {
permanent: [
{
field: "status",
operator: "eq",
value: "pending",
},
],
},
});
// Render your table here
};
// DoneWarehouseList.tsx
import { useTable } from "@refinedev/core";
Kconst DoneWarehouseList = () => {
const { tableProps } = useTable({
resource: "warehouse_listing",
filters: {
permanent: [
{
field: "status",
operator: "eq",
value: "done",
},
],
},
});
// Render your table here
};
typescript
{
name: "pending_warehouse_listing",
list: PendingWarehouseList,
create: "/warehouse_listing/create",
edit: "/warehouse_listing/edit/:id",
show: "/warehouse_listing/show/:id",
meta: {
canDelete: true,
label: "Pending Warehouse Listing",
parent: "warehouse_module",
},
},
{
name: "done_warehouse_listing",
list: DoneWarehouseList,
create: "/warehouse_listing/create",
edit: "/warehouse_listing/edit/:id",
show: "/warehouse_listing/show/:id",
meta: {
canDelete: true,
label: "Done Warehouse Listing",
parent: "warehouse_module",
},
},
Remember to adjust the field names and values in the permanent filters according to your actual API structure and requirements.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
const { tableProps } = useTable({
resource: "warehouse_listing",
filters: {
permanent: [
{
field: "status",
operator: "eq",
value: "done",
},
],
},
});
// Render your table here
};
typescript
{
name: "pending_warehouse_listing",
list: PendingWarehouseList,
create: "/warehouse_listing/create",
edit: "/warehouse_listing/edit/:id",
show: "/warehouse_listing/show/:id",
meta: {
canDelete: true,
label: "Pending Warehouse Listing",
parent: "warehouse_module",
},
},
{
name: "done_warehouse_listing",
list: DoneWarehouseList,
create: "/warehouse_listing/create",
edit: "/warehouse_listing/edit/:id",
show: "/warehouse_listing/show/:id",
meta: {
canDelete: true,
label: "Done Warehouse Listing",
parent: "warehouse_module",
},
},
``
This approach allows you to have two separate list pages for pending and done warehouse listings, using the same API endpoint but with different permanent filters. The filters.permanent` property ensures that these filters are always applied and cannot be changed by the user useTable filters.permanent (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#filterspermanent).Remember to adjust the field names and values in the permanent filters according to your actual API structure and requirements.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
K@336843331416096768 Kapa.ai is still learning and improving, please let me know how I did by reacting below.
SThis approach affects my edit page, how can I make it only for the list page?
SThis approach affects my edit page, how can I make it only for the list page? @kapa.ai
KLet me check the knowledge base for you again. One moment!
K----------------------
I understand your concern about the approach affecting your edit page. You're right to point this out, as we want to apply the permanent filter only to the list pages without impacting other CRUD operations. Let's modify the approach to achieve this. Here's how you can make the permanent filter apply only to the list pages:
// PendingWarehouseList.tsx
import { useTable } from "@refinedev/core";
const PendingWarehouseList = () => {
const { tableProps } = useTable({
resource: "warehouse_listing",
filters: {
permanent: [
{
field: "status",
operator: "eq",
value: "pending",
},
],
},
});
// Render your table here
};
// DoneWarehouseList.tsx
import { useTable } from "@refinedev/core";
I understand your concern about the approach affecting your edit page. You're right to point this out, as we want to apply the permanent filter only to the list pages without impacting other CRUD operations. Let's modify the approach to achieve this. Here's how you can make the permanent filter apply only to the list pages:
- Instead of setting the permanent filter in the resource definition, we'll move it directly into the list components.
- For the edit, create, and show pages, we'll use the original
warehouse_listingresource name.
- Modify your resource definitions:
- Update your list components to include the permanent filter:
// PendingWarehouseList.tsx
import { useTable } from "@refinedev/core";
const PendingWarehouseList = () => {
const { tableProps } = useTable({
resource: "warehouse_listing",
filters: {
permanent: [
{
field: "status",
operator: "eq",
value: "pending",
},
],
},
});
// Render your table here
};
// DoneWarehouseList.tsx
import { useTable } from "@refinedev/core";
Kconst DoneWarehouseList = () => {
const { tableProps } = useTable({
resource: "warehouse_listing",
filters: {
permanent: [
{
field: "status",
operator: "eq",
value: "done",
},
],
},
});
// Render your table here
};
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
const { tableProps } = useTable({
resource: "warehouse_listing",
filters: {
permanent: [
{
field: "status",
operator: "eq",
value: "done",
},
],
},
});
// Render your table here
};
``
This approach ensures that:
1. The permanent filters are only applied to the list pages.
2. The edit, create, and show pages will use the same warehouse_listing resource without any permanent filters.
By moving the filter logic into the list components, we isolate the filtering behavior to just the list pages. The edit, create, and show pages will function as before, using the common warehouse_listing resource without any permanent filters applied.
This solution allows you to have separate list views for pending and done statuses while maintaining a single, unfiltered resource for other CRUD operations. The permanent filters will only be active in the useTable` hook calls within the list components useTable filters.permanent (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#filterspermanent).----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
K@336843331416096768 Kapa.ai is still learning and improving, please let me know how I did by reacting below.