Условное отображение развернутой строки для таблиц antd

У меня есть следующая таблица:

  <Table
    bordered
    loading={false}
    columns={this.columns(currentUser, fields)}
    dataSource={selectedAssets}
    expandedRowRender={(rec) => <AssetsExtraInformationTable {...rec} />}
    rowKey={(record) => record.id}
    pagination={false}
  />

но я хочу отображать кнопку + для expandedRowRender только тогда, когда у меня есть данные для расширения.
Я не смог найти что-то в документ API, ни в API таблицы компонентов React, что позволяет мне это сделать, поэтому мне интересно, есть ли какой-нибудь хакерский способ сделать это.


reactjs antd
person Alter Lagos    schedule 05.10.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Если вы отображаете + в отдельном столбце, вы можете определить для этого параметр render, то есть:

render: (text, record, index) => record.hasExpandData ? <div>{text}</div> : null,
person Alex    schedule 05.10.2018
comment
Хм, да, в этом есть смысл. Спасибо :) - person Alter Lagos; 08.10.2018

arrow_upward
0
arrow_downward

Начиная с Antd версии 3.11.3, вы можете использовать expandIcon prop Пример:

const CustomExpandIcon = props => {
  if (!props.record.subData) return null; //nothing to expand
  if (props.expanded) {
    return (
      <a onClick={e => props.onExpand(props.record, e)}>
        <Icon type="minus" />
      </a>
    );
  } else {
    return (
      <a onClick={e => props.onExpand(props.record, e)}>
        <Icon type="plus" />
      </a>
    );
  }
};

а потом:

 <Table expandIcon={p => <CustomExpandIcon {...p} />} />
person tonymayoral    schedule 19.02.2020