Ocultar columna para tabla usando antd

Solución:

Puede anular los métodos de representación de encabezado y cuerpo de la siguiente manera, asumiendo que su columna tiene una propiedad visible.

import React, {Component} from 'react';

class Test extends Component {
  render() {
    const renderBody = (props, columns) => {
      return (
        <tr className={props.className}>
          {columns.map((item, idx) => {
            if (item.visible) {
              return props.children[idx]
            }
          })}
        </tr>
      );
    }

    const renderHeader = (props, columns) => {
      return (
        <tr>
          {columns.map((item, idx) => {
            if (item.visible)
              return props.children[idx];
          })};
        </tr>
      );
    }

    const columns = [{
      title: 'col1',
      dataIndex: 'col1',
      visible: true
    }, {
      title: 'col2',
      dataIndex: 'col2',
      visible: false
    }]

    return (
      <Table
        rowKey="key"
        columns={columns}
        dataSource={data.list || []}
        components={{
          header: {
            row: (props) => renderHeader(props, columns)
          },
          body: {
            row: (props) => renderBody(props, columns)
          },
        }}
      />
    )
  }
}

Generalmente, la sugerencia de Maktel es correcta: puede implementar fácilmente lo que desea definiendo render en columna (tenga en cuenta que no hay 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} />;

Si ya tiene el código que genera sus columnas, una opción mucho más simple que implementar un método de renderizado personalizado para ocultar una columna es simplemente filtrarla de su lista de columnas completadas, por ejemplo:

let columns = [
  {
    title: "Id",
    dataIndex: "id",
    key: "id"
  },
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  }
];

return columns.filter(col => col.dataIndex !== 'id');

---

---

Utiliza Nuestro Buscador