IT技术 - 根据列过滤antd表 - 吾爱随笔录

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

这是我的代码：

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 };