Hide column for table using antd

Question

How can we hide a column from the table for displaying in frontend which already exists in the array for using ant design table?

For example, I have a column called ID in my array object, but no need to show in the table view, it should be kept in the JSON list itself for some reference purpose.

Fiddle link - In this example I don't want to show the ID column in the table, but I have used the ID for some reference like a row delete.

Answer 1

Generally Maktel suggestion is correct: you can easily implement what you want by defining render in column (note that there is no dataIndex):

let columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  },
  {
    title: "Action",
    key: "action",
    render: (row) => {
      let api = "/api/v1/row/delete/";
      //this ID be sued for POST delete row like a API below
      api = api + row.id;
      return <span onClick={() => { alert(api);}}>
         Delete
      </span >

    }
  }
];

let data = [
  {
    id: 312,
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
  },
  {
    id: 1564,
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
  }
];

const App = () => <Table columns={columns} dataSource={data} />;