英文:
How to modify filter icon functionality in table in PrimeReact
问题
我有一个基于Prime React的表格和一个多选下拉筛选器，用于其中一个列，就像"Agent"列一样(链接)。
当我们点击筛选图标时，"Agent Picker"多选下拉框将显示。然后，我们需要再次点击下拉框以查看选项并选择进行筛选结果。
但我的要求是，一旦我们点击筛选图标，多选下拉框应该默认显示选项，减少用户的一次点击。这是否可以实现？请提供任何想法/参考链接。谢谢。
我想要实现这样的效果:
这是我尝试过的内容: https://codesandbox.io/s/primereact-demo-forked-c6kw73?file=/src/App.js
谢谢。
英文:
I have a prime react table and a multiselect dropdown filter for one of the column like "Agent" column (Link)
When we click on the filter icon, "Agent Picker" multiselect dropdown will display. Then we again need to click on the dropdown to see the options and choose for filtering the results.
But my requirement is, as soon as we click on filter icon, the multiselect should display default options open, reducing one click for the user. Is this achievable? Please suggest any idea/reference link. Thanks.
I wanna achieve like this:
Here is what I tried: https://codesandbox.io/s/primereact-demo-forked-c6kw73?file=/src/App.js
Thanks.
答案1
得分: 1
我修复了你的示例：
const UserNameFilterTemplate = (options) => {
setTimeout(() => {
multiselectRef && multiselectRef.current && multiselectRef.current.show();
}, 500);
return (
<MultiSelect
ref={multiselectRef}
value={options.value}
options={usernames}
itemTemplate={userNameItemTemplate}
onChange={(e) => options.filterCallback(e.value)}
optionLabel="name"
optionValue="name"
placeholder="Any"
autoFocus
className="p-column-filter"
/>
);
};
英文:
I fixed your example:
const UserNameFilterTemplate = (options) => {
setTimeout(() => {
multiselectRef && multiselectRef.current && multiselectRef.current.show();
}, 500);
return (
<MultiSelect
ref={multiselectRef}
value={options.value}
options={usernames}
itemTemplate={userNameItemTemplate}
onChange={(e) => options.filterCallback(e.value)}
optionLabel="name"
optionValue="name"
placeholder="Any"
autoFocus
className="p-column-filter"
/>
);
};
https://codesandbox.io/s/primereact-demo-forked-56mh8j
You were missing optionValue="name" so it was making the whole object the value instead of the String value of the username selected.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论