quickest-silver•2mo ago

Multiple filterable tables in the same page

Is it even possible to have multiple filterable tables in the same screen? I am using next.js with refine and antd. And I need to have sometimes combine tables. When I filter something on one table, the url filters will be replaced if I do it in another one. For example this is url while filtering first table /combined-tables?pageSize=10&current=1&filters[0][field]=name&filters[0][operator]=in&filters[0][value][0]=laptop And then the second table /combined-tables?pageSize=10&current=1&filters[0][field]=name&filters[0][operator]=in&filters[0][value][0]=jane So, no merged filters. But another problem here is that they both uses different resources. So I would say they need to have a prefix before filters

5 Replies

kapa.ai•2mo ago

Hi @fristyr. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to have multiple filterable tables on the same page in refine with Next.js and Ant Design. However, you're encountering a common issue related to how filters are managed when using syncWithLocation feature. The problem you're experiencing is due to the default behavior of useTable hook when syncWithLocation is enabled. By default, it replaces the existing filters in the URL when new filters are applied. To solve this issue and have multiple filterable tables on the same page, you can use the syncWithLocation feature with custom keys for each table. This approach allows you to maintain separate filter states for each table in the URL. Here's how you can implement this: 1. Use a unique key for each table's useTable hook:

const { tableProps: table1Props } = useTable({
  resource: "resource1",
  syncWithLocation: true,
  syncWithLocationOptions: {
    key: "table1",
  },
});

const { tableProps: table2Props } = useTable({
  resource: "resource2",
  syncWithLocation: true,
  syncWithLocationOptions: {
    key: "table2",
  },
});

const { tableProps: table1Props } = useTable({
  resource: "resource1",
  syncWithLocation: true,
  syncWithLocationOptions: {
    key: "table1",
  },
});

const { tableProps: table2Props } = useTable({
  resource: "resource2",
  syncWithLocation: true,
  syncWithLocationOptions: {
    key: "table2",
  },
});

2. Apply these props to your respective tables:

<Table {...table1Props} />
<Table {...table2Props} />

<Table {...table1Props} />
<Table {...table2Props} />

This approach will result in URL parameters that look like this:

/combined-tables?table1[pageSize]=10&table1[current]=1&table1[filters][0][field]=name&table1[filters][0][operator]=in&table1[filters][0][value][0]=laptop&table2[pageSize]=10&table2[current]=1&table2[filters][0][field]=name&table2[filters][0][operator]=in&table2[filters][0][value][0]=jane

/combined-tables?table1[pageSize]=10&table1[current]=1&table1[filters][0][field]=name&table1[filters][0][operator]=in&table1[filters][0][value][0]=laptop&table2[pageSize]=10&table2[current]=1&table2[filters][0][field]=name&table2[filters][0][operator]=in&table2[filters][0][value][0]=jane

As you can see, this solves both of your problems: 1. The filters are not replaced, but merged. 2. Each table has its own prefix (table1 and table2), allowing for different resources. For more detailed information on this feature, you can refer to the useTable documentation. Remember to adjust your backend API to handle these prefixed filter parameters correctly. useTable documentation ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@757638374881493022> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

quickest-silverOP•2mo ago

@kapa.ai Your solution with syncWithLocationOptions looking good, but I don't see syncWithLocationOptions exists in api of useTable hook. In the docs I see "createLinkForSyncWithLocation", but I do not get it how to use it

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the confusion in my previous response. You are correct that syncWithLocationOptions is not part of the useTable hook API. I made a mistake in suggesting that feature. Thank you for bringing this to my attention. Regarding the createLinkForSyncWithLocation function, it is indeed part of the useTable hook, but it's not directly related to solving the issue of multiple filterable tables on the same page. Let me explain its purpose and then provide a more accurate solution to your problem. The createLinkForSyncWithLocation function is used to create a URL string that includes the current table state (filters, sorting, pagination) when syncWithLocation is enabled. It's primarily used internally by the hook and for creating custom links that preserve the table state. Here's an example of how it might be used:

const { createLinkForSyncWithLocation } = useTable({
  syncWithLocation: true,
});

const link = createLinkForSyncWithLocation({ 
  sorters: [{ field: "id", order: "asc" }],
  filters: [{ field: "status", operator: "eq", value: "active" }],
  current: 2,
  pageSize: 10
});

console.log(link); // This will output a URL string with the table state

const { createLinkForSyncWithLocation } = useTable({
  syncWithLocation: true,
});

const link = createLinkForSyncWithLocation({ 
  sorters: [{ field: "id", order: "asc" }],
  filters: [{ field: "status", operator: "eq", value: "active" }],
  current: 2,
  pageSize: 10
});

console.log(link); // This will output a URL string with the table state

However, this doesn't solve the issue of having multiple filterable tables on the same page. For your specific problem, I apologize that I don't have a direct solution based on the provided knowledge sources. The current implementation of useTable with syncWithLocation doesn't have a built-in way to handle multiple tables with different resources on the same page while preserving all filters in the URL. A potential workaround might involve: 1. Disabling syncWithLocation for the tables. 2. Manually managing the URL parameters for each table. 3. Parsing these parameters in your component and passing them to each useTable call. However, implementing this would require custom logic that isn't directly supported by refine's current API according to the provided documentation. I recommend reaching out to the refine community or creating an issue on their GitHub repository to request this feature or get more specific guidance on implementing multiple filterable tables on the same page with different resources. useTable documentation ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@757638374881493022> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Multiple filterable tables in the same page

Did you find this page helpful?