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

Here is how I did it. The concept is the same, which is to remove (filter out) the column from the array.

Add a property "hidden" to the column object, then filter it out.

let columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  },
  {
    title: "Action",
    key: "action",
    dataIndex: "action",
    hidden: true
  }
].filter(item => !item.hidden);