Скрыть столбец для таблицы, используя antd

Question

Как мы можем скрыть столбец из таблицы для отображения во внешнем интерфейсе, который уже существует в массиве для использования таблицы ant design?

Например, у меня есть столбец с именем ID в моем объекте массива, но нет необходимости показывать в табличном представлении, он должен быть сохранен в самом списке JSON для какой-то справочной цели.

Fiddle link - В этом примере я не хочу показывать столбец идентификатора в таблице, но я использовал идентификатор для некоторой ссылки, например, для удаления строки.

Answer 1

Как правило, предложение Мактел является правильным: вы можете легко реализовать то, что хотите, определив render в столбце (обратите внимание, что 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} />;

Answer 2

Table's prop columns используется для управления тем, какие столбцы будут отображаться в таблице, но не влияет на форму данных, используемых как dataSource.Пропуск столбца не удаляет его значение из dataSource, и вы все равно можете ссылаться на него, например, в свойстве render столбца (например, для генерации обратного вызова).

Пример кода ( обратите внимание, что hiddenValue не имеет прямой ссылки на свойство dataIndex какого-либо столбца и может быть вообще опущено ):

const TableWithHiddenColumn = () => {
    const dataSource = [
        { renderedValue: 'foo', hiddenValue: 'id_1' },
        { renderedValue: 'bar', hiddenValue: 'id_2' },
        { renderedValue: 'biz', hiddenValue: 'id_3' },
    ];

    const columns = [
        { title: 'Visible column', dataIndex: 'renderedValue', key: 'renderedValue' },
        {
            title: 'Action',
            key: 'action',
            render: (record) => (
                <Button
                    onClick={() => {
                        console.log(record.hiddenValue);
                    }}
                >
                    {record.hiddenValue}
                </Button>
            ),
        },
    ];

    return <Table columns={columns} dataSource={dataSource} />;
};

Результат: