Removing a column based on column key in Antd

Question

I have a Table where I can dynamically add columns by clicking a button. Each column header cell can be named by user dynamically.

<Table
    columns={columns}
    components={{
      header: {
        cell: () => (
          <EditableCell
            handleRemoveColumn={handleRemoveColumn}
          />
        ),
        row: EditableRow,
      },
    }}
    dataSource={datasource}
    tableLayout="fixed"
    style={{ flex: "auto", maxWidth: "96.3%" }}
    scroll={{ x: "auto" }}
    bordered
    pagination={false}
  />

The EditableCell is as follow:

function EditableCell({ handleRemoveColumn, columnKey }: TChildProp) {
  return (
    <th style={{ padding: "0px 6px 0px 0px" }}>
      <Form.Item style={{ margin: "4px" }}>
        <Space.Compact block={true}>
          <Input
            placeholder="Title"
            style={{
              margin: "4px 3px",
              minWidth: "132px",
              width: "100%",
              backgroundColor: "#F2F3F5",
            }}
            bordered={false}
            allowClear
          />
          <CloseOutlined
            style={{ cursor: "pointer", marginLeft: "4px" }}
            onClick={() => handleRemoveColumn("Some Key")}
          />
        </Space.Compact>
      </Form.Item>
    </th>
  );
}

How can i remove a column by clicking on the Close button in each header cell? I can't seem to figure a way to pass the column key into each header cell.

Answer 1

The table:

<Table
    columns={columns}
    components={{
      header: {
        cell: (cell: any) => (
          <EditableCell
            cellInfo={cell}
            handleRemoveColumn={handleRemoveColumn}
          />
        ),
        row: EditableRow,
      },
    }}
    dataSource={datasource}
    tableLayout="fixed"
    style={{ flex: "auto", maxWidth: "96.3%" }}
    scroll={{ x: "auto" }}
    bordered
    pagination={false}
  />

The Cell:

<th
  style={{ padding: "0px 6px 0px 0px" }}
  // onClick={() => console.log("Remove?")}
>
  <Form.Item style={{ margin: "4px" }}>
    <Space.Compact block={true}>
      <Input
        placeholder="Title"
        style={{
          margin: "4px 3px",
          minWidth: "132px",
          width: "100%",
          backgroundColor: "#F2F3F5",
        }}
        bordered={false}
        allowClear
      />
      <CloseOutlined
        style={{ cursor: "pointer", marginLeft: "4px" }}
        onClick={() => handleRemoveColumn(cellInfo.title)}
      />
    </Space.Compact>
  </Form.Item>
</th>

The column:

[{
  dataIndex: "newColumn1", // Unique identifier for the column
  key: "newColumn1",
  onHeaderCell: () => {
    return {
      title: "newColumn1",
    };
  },
},]

The title prop can be added using 'onHeaderCell'. Docs about 'onHeaderCell' -> ColumnProp['onHeaderCell']