fascinating-indigo•5mo ago

`FilterDropdown` + custom filter on Ant Design table

I was going to create a GitHub issue about this but I can't decide what the intended behavior should be. I have an Ant Design table with a <FilterDropdown> on one of the columns. Outside of the table, I have a filter that acts on the same field that I have a FilterDropdown for. CodeSandbox reproduction: https://codesandbox.io/p/devbox/strange-platform-5gvjz9 Steps to reproduce: 1. Open the sandbox 2. In the "Filters" section, set "Status" to "Draft" and click the "Filter" button 3. Scroll down and go to page 2 Notice how the page count changes from ~30 to ~100 because the filter was removed. This does not occur if you repeat step 2 and then open another page in a new tab by middle-clicking on the page number. Using the FilterDropdown instead of the filter in the form does not produce the issue. In hindsight, it does seem obvious that combining a FilterDropdown with another filter on the same field shouldn't work, but the issue only occurs when changing pages, and it's not documented anywhere. Let me know what you think the expected behavior should be and I can add something to the docs or attempt to make a fix.

2 Replies

kapa.ai•5mo ago

Hi @FluxCapacitor. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, it seems like you're encountering a similar issue to the one described in this GitHub issue (https://github.com/refinedev/refine/issues/1825). The issue describes a situation where filters are reset when changing pages. The useTable hook in Refine provides an initialSorter and initialPageSize options that you can use to set the initial state of your table. However, if you're using these options, you should also add getDefaultSortOrder or defaultFilteredValue to your <Table.Column> component to ensure that the hook states sync with the table. Here's an example from the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table#initial-filter-and-sorter):

const { tableProps, sorters, filters } = useTable({  
 sorters: {  
 initial: [  
 {  
 field: "title",  
 order: "asc",  
 },  
 ],  
 }  
 filters: {  
 initial: [  
 {  
 field: "status",  
 operator: "eq",  
 value: "published",  
 },  
 ],  
 },  
});  
  
<Table.Column  
 dataIndex="title"  
 title="Title"  
 defaultSortOrder={getDefaultSortOrder("title", sorters)}  
/>  
<Table.Column  
 dataIndex="status"  
 title="Status"  
 render={(value) => <TagField value={value} />}  
 defaultFilteredValue={getDefaultFilter("status", filters)}  
 filterDropdown={(props) => (  
 <FilterDropdown {...props}>  
 <Radio.Group>  
 <Radio value="published">Published</Radio>  
 <Radio value="draft">Draft</Radio>  
 <Radio value="rejected">Rejected</Radio>  
 </Radio.Group>  
 </FilterDropdown>  
 )}  
/>

const { tableProps, sorters, filters } = useTable({  
 sorters: {  
 initial: [  
 {  
 field: "title",  
 order: "asc",  
 },  
 ],  
 }  
 filters: {  
 initial: [  
 {  
 field: "status",  
 operator: "eq",  
 value: "published",  
 },  
 ],  
 },  
});  
  
<Table.Column  
 dataIndex="title"  
 title="Title"  
 defaultSortOrder={getDefaultSortOrder("title", sorters)}  
/>  
<Table.Column  
 dataIndex="status"  
 title="Status"  
 render={(value) => <TagField value={value} />}  
 defaultFilteredValue={getDefaultFilter("status", filters)}  
 filterDropdown={(props) => (  
 <FilterDropdown {...props}>  
 <Radio.Group>  
 <Radio value="published">Published</Radio>  
 <Radio value="draft">Draft</Radio>  
 <Radio value="rejected">Rejected</Radio>  
 </Radio.Group>  
 </FilterDropdown>  
 )}  
/>

In your case, you might need to ensure that your external filter and the FilterDropdown are both correctly synced with the table's filter state. If the issue persists, it might be a good idea to open a GitHub issue to get help from the Refine community. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@292252114200035329> kapa.ai is still learning and improving, please let us know how it did by reacting below