根据列过滤antd表 [英] filter antd table according to its columns

查看：19
本文介绍了根据列过滤antd表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

首先，英语不是我的母语，所以可能会有错误.我开始用钩子做出反应，因为每个人都说它更容易，这里我有 antd 表和一个按钮(引导程序 5 模态)，这个模态包含 6 个按钮(id、title、firstname、lastname、Choose all、confirm your selection)，我的观点是用户从 ID、标题、名字、姓氏中进行选择，当用户选择时，他点击确认您的选择"，然后如果他选择了例如名字和姓氏"，那么除了这两个列之外的其他列将被删除/显示:无?从表然后再次如果他想要这些列，他选择选择全部或只选择它们"，然后单击确认您的选择".一直在 antd 网站上找，但他们没有，有什么建议吗?

这里是我的代码:

function EventsSection() {const 事件数据 = [{关键:1，标题:防弹EP1"，名字:詹姆斯"，lastName: "警戒线",},];控制台日志(事件数据)；返回 (<部分><EventsTable eventsData={eventsData}/><跨度className="材质图标"data-bs-toggle="modal"data-bs-target="#exampleModal">按钮</span>
<按钮类型=按钮"className="btn-关闭"data-bs-dismiss="modal"咏叹调标签=关闭"></按钮>

<div className="modal-body "><div className="modal-body d-flex flex-column"><按钮类型=按钮"className="btn btn-secondary"data-bs-dismiss="modal">ID{" "}

<div className="modal-body d-flex flex-column"><按钮类型=按钮"className="btn btn-secondary"data-bs-dismiss="modal">标题{" "}

<div className="modal-body d-flex flex-column">{" "}<按钮类型=按钮"className="btn btn-secondary"data-bs-dismiss="modal">名{" "}

<div className="modal-body d-flex flex-column">{" "}<按钮类型=按钮"className="btn btn-secondary"data-bs-dismiss="modal">姓

<div className="modal-body d-flex flex-column">{" "}<按钮类型=按钮"className="btn btn-secondary"data-bs-dismiss="modal">选择全部{" "}

<div className="modal-body d-flex flex-column">{" "}<按钮类型=按钮"className="btn btn-secondary"data-bs-dismiss="modal">确认您的选择{" "}

<div className="modal-footer"><按钮类型=按钮"className="btn btn-secondary"data-bs-dismiss="modal">关闭

</节>);}导出默认 EventsSection;

const EventsTable = ({ eventsData }) =>{const tableColumns = [{title: "身份证",数据索引:键"，键:身份证"，},{title: "标题",数据索引:标题"，键:标题"，},{title: "名字",数据索引:名字"，键:名字"，},{title: "姓氏",数据索引:姓氏"，键:姓氏"，},];返回 (<Table dataSource={eventsData} columns={tableColumns} pagination={false}/>);};export { 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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆