other-emerald
other-emerald11mo 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
No description
No description
2 Replies
kapa.ai
kapa.ai11mo 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
kapa.ai11mo ago
<@897927276304416769> kapa.ai is still learning and improving, please let us how it did by reacting below