filter antd table according to its columns

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

Answer

I’ve implemented what you wanted at CodeSandbox.

I’ve implemented checkbox selection instead of button selection, which feels more convenient.

Demo: