根据其列过滤antd表 [英] filter antd table according to its columns
问题描述
首先英语不是我的母语，所以可能会出现错误.我开始用钩子做出反应，因为每个人都说它更容易，这里我有antd表和一个按钮(bootstrap 5模式)，该模式包含6个按钮(id，title，firstname，lastname，Choose all，确认您的选择)，我的意思是用户从ID，标题，名字，姓氏中选择，当用户选择时，他单击确认您的选择"，然后，如果他选择了例如名字和姓氏"，则除这两个以外的其他列将被删除/显示:无?从表中再次选择，如果他想返回这些列，则选择全部选择或仅选择它们"，然后单击确认选择".一直在从antd网站查找，但是他们没有，有什么建议吗?
这是我的代码:
function EventsSection(){const eventsData = [{密钥:1标题:防弹EP1"，firstName:詹姆斯"，lastName:"cordon"，}，];console.log(eventsData);返回 (< section>< EventsTable eventsData = {eventsData}/>< spanclassName ="material-icons"data-bs-toggle ="modal"data-bs-target =#exampleModal">按钮</span>÷ divclassName =模式淡入淡出"id ="exampleModal"//tabIndex =-1"aria-labelledby ="exampleModalLabel"aria-hidden ="true">< div className ="modal-dialog">< div className ="modal-content">< div className ="modal-header">< h1 className ="modal-title" id ="exampleModalLabel">筛选表{"}</h1><按钮type ="button"className ="btn-close"data-bs-dismiss ="modal"aria-label =关闭"></button></div>< div className ="modal-body">< div className ="modal-body d-flex flex-column"><按钮type ="button"className ="btn btn-secondary"data-bs-dismiss ="modal">ID{" "}</button></div>< div className ="modal-body d-flex flex-column"><按钮type ="button"className ="btn btn-secondary"data-bs-dismiss ="modal">标题{" "}</button></div>< div className ="modal-body d-flex flex-column">{"}<按钮type ="button"className ="btn btn-secondary"data-bs-dismiss ="modal">名{" "}</button></div>< div className ="modal-body d-flex flex-column">{"}<按钮type ="button"className ="btn btn-secondary"data-bs-dismiss ="modal">姓</button></div>< div className ="modal-body d-flex flex-column">{"}<按钮type ="button"className ="btn btn-secondary"data-bs-dismiss ="modal">选择全部{" "}</button></div>< div className ="modal-body d-flex flex-column">{"}<按钮type ="button"className ="btn btn-secondary"data-bs-dismiss ="modal">确认您的选择{"}</button></div></div>< div className ="modal-footer"><按钮type ="button"className ="btn btn-secondary"data-bs-dismiss ="modal">关闭</button></div></div></div></div></section>);}导出默认的EventsSection;
const EventsTable =({eventsData})=>{const tableColumns = [{标题:"ID"，dataIndex:密钥"，密钥:"id"，}，{标题:标题"，dataIndex:标题"，键:标题"，}，{标题:名字"，dataIndex:名字"，密钥:名字"，}，{标题:姓氏"，dataIndex:"lastName"，密钥:姓氏"，}，];返回 (<表格dataSource = {eventsData}列= {tableColumns}分页= {false}/>);};导出{EventsTable};
我已经在
First of all english is not my mother language so there might be mistakes. I started react with hooks since everybody said its easier, here i have antd table and a button (bootstrap 5 modal), this modal contains 6 buttons (id, title, firstname, lastname, Choose all, confirm your selection), my point is user chooses from ID, Title, firstname, lastname, when user has chosen he clicks'Confirm your selections' then if he chose for example 'FirstName and LastName' then those other columns except these two gets deleted/display:none?? from table then again if he wants those columns back he choose 'Choose all or just select them' and click 'confirm your selection'. Been looking from antd site but they didnt have that, any suggestions?
here my code:
function EventsSection() {
const eventsData = [
{
key: 1,
title: "Bulletproof EP1",
firstName: "james",
lastName: "cordon",
},
];
console.log(eventsData);
return (
<section>
<EventsTable eventsData={eventsData} />
<span
className="material-icons"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
button
</span>
<div
className="modal fade"
id="exampleModal"
// tabIndex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header ">
<h1 className="modal-title " id="exampleModalLabel">
Filter table{" "}
</h1>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body ">
<div className="modal-body d-flex flex-column">
<button
type="button"
className="btn btn-secondary"
data-bs-dismiss="modal"
>
ID{" "}
</button>
</div>
<div className="modal-body d-flex flex-column">
<button
type="button"
className="btn btn-secondary"
data-bs-dismiss="modal"
>
Title{" "}
</button>
</div>
<div className="modal-body d-flex flex-column">
{" "}
<button
type="button"
className="btn btn-secondary"
data-bs-dismiss="modal"
>
FirstName{" "}
</button>
</div>
<div className="modal-body d-flex flex-column">
{" "}
<button
type="button"
className="btn btn-secondary"
data-bs-dismiss="modal"
>
LastName
</button>
</div>
<div className="modal-body d-flex flex-column">
{" "}
<button
type="button"
className="btn btn-secondary"
data-bs-dismiss="modal"
>
Choose All{" "}
</button>
</div>
<div className="modal-body d-flex flex-column">
{" "}
<button
type="button"
className="btn btn-secondary"
data-bs-dismiss="modal"
>
confirm your selections{" "}
</button>
</div>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
</section>
);
}
export default EventsSection;
const EventsTable = ({ eventsData }) => {
const tableColumns = [
{
title: "ID",
dataIndex: "key",
key: "id",
},
{
title: "Title",
dataIndex: "title",
key: "title",
},
{
title: "FirstName",
dataIndex: "firstName",
key: "firstName",
},
{
title: "LastName",
dataIndex: "lastName",
key: "lastName",
},
];
return (
<Table dataSource={eventsData} columns={tableColumns} pagination={false} />
);
};
export { EventsTable };
I've implemented what you wanted at CodeSandbox.
I've implemented checkbox selection instead of button selection, which feels more convenient.
Demo:
这篇关于根据其列过滤antd表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
