foreign-sapphire•13mo ago

Antd setSelectedKeys FilterDropdownProps arguments

Hello, Goal: I have a column that is made from a nested object (patient) and renderes the first and last name in there. I want to add a filter and when searching submit patient__icontains=STRING Current behaviour: It works if I change the argument in setSelectedKeys to a string (see screenshot 1). However currently its type is restricted to an array. Hence, I added a tsignore. This is what I do in my hook (screenshot 2). It works this way, however I am not sure if I am using this correctly since the type restriction is there for a reason I suppose 😉 I also checked out here another thread but this did not help (Nested Filtering in useTable). Please let me know if you have any other suggestions. EDIT Very interesting I noticed that when I click "filter" it will automatically submit as a string (hence not typed as array like if I would use setSelectedKeys on the onPressEnter function) Thanks! Jörg

2 Replies

kapa.ai•13mo ago

Hi @thejorge4666. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. However, I can provide some general guidance on how to add filters in refine. To add a filter to a table in refine, you can modify the meta property of the column definition in your list.tsx file. You can set the filterOperator to "contains" to filter the table by the column value. Here's an example:

{  
 id: "title",  
 accessorKey: "title",  
 header: "Title",  
 meta: {  
 filterOperator: "contains",  
 },  
},  
{  
 id: "content",  
 accessorKey: "content",  
 header: "Content",  
 meta: {  
 filterOperator: "contains",  
 },  
},

{  
 id: "title",  
 accessorKey: "title",  
 header: "Title",  
 meta: {  
 filterOperator: "contains",  
 },  
},  
{  
 id: "content",  
 accessorKey: "content",  
 header: "Content",  
 meta: {  
 filterOperator: "contains",  
 },  
},

You can also disable filtering for a specific column by setting the enableFiltering property of the column to false:

{  
 id: "actions",  
 accessorKey: "id",  
 header: "Actions",  
 enableColumnFilter: false,  
 cell: function render({ getValue }) {  
 return (  
 <div  
 style={{  
 display: "flex",  
 flexDirection: "row",  
 flexWrap: "wrap",  
 gap: "4px",  
 }}  
 >  
 <button  
 onClick={() => {  
 show("blog_posts", getValue() as string);  
 }}  
 >  
 Show  
 </button>  
 <button  
 onClick={() => {  
 edit("blog_posts", getValue() as string);  
 }}  
 >  
 Edit  
 </button>  
 </div>  
 );  
 },  
},

{  
 id: "actions",  
 accessorKey: "id",  
 header: "Actions",  
 enableColumnFilter: false,  
 cell: function render({ getValue }) {  
 return (  
 <div  
 style={{  
 display: "flex",  
 flexDirection: "row",  
 flexWrap: "wrap",  
 gap: "4px",  
 }}  
 >  
 <button  
 onClick={() => {  
 show("blog_posts", getValue() as string);  
 }}  
 >  
 Show  
 </button>  
 <button  
 onClick={() => {  
 edit("blog_posts", getValue() as string);  
 }}  
 >  
 Edit  
 </button>  
 </div>  
 );  
 },  
},

For more information on filtering in refine, you can refer to the Filtering section of the useTable documentation (https://refine.dev/docs/packages/documentation/react-table/#filtering). As for your specific issue with the type restriction, I would need more information to provide a more accurate answer. I recommend checking the refine documentation or reaching out to the refine community for more specific guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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