根据其列过滤 antd table

Question

首先英语不是我的母语所以可能会有错误。我开始用 hooks 做出反应，因为每个人都说它更容易，这里我有 antd table 和一个按钮（bootstrap 5 modal），这个 modal 包含 6 个按钮（id，title，firstname，lastname，Choose all，确认您的选择），我的观点是用户从 ID、标题、名字、姓氏中选择，当用户选择他点击“确认您的选择”然后如果他选择 'FirstName and LastName' 那么除了这两列之外的其他列得到 deleted/display:none??从 table 开始，如果他想要返回这些列，他会再次选择 'Choose all or just select them' 并单击 'confirm your selection'。一直在 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 };

Answer 1

我已经在CodeSandbox实现了你想要的。

我实现了复选框选择而不是按钮选择，感觉更方便。

演示：

根据其列过滤 antd table

filter antd table according to its columns

javascript

css

twitter-bootstrap

reactjs

antd