Antd: Можно ли переместить расширитель строк таблицы внутрь одной из ячеек?

У меня есть таблица antd, в которой данные внутри одного из столбцов могут стать довольно большими. Я показываю эти данные полностью, когда строка расширяется, но поскольку ячейка с большим количеством данных находится в правой части экрана, а значок расширителя находится в левой части экрана, это не очень интуитивно понятно. Что я хотел бы сделать, так это переместить значок расширителя внутри фактической ячейки, чтобы пользователь знал, что он может щелкнуть +, чтобы увидеть остальные данные.

Заранее спасибо.


person llevar    schedule 21.10.2017    source источник


Ответы (2)


Да, можно и нужно копнуть немного глубже их документацию ...

Согласно rc-table docs, вы можете использовать expandIconColumnIndex для столбца индекса, в который хотите добавить +, также вам нужно добавить expandIconAsCell={false}, чтобы он отображался как часть ячейки.

См. демонстрацию

person Yichaoz    schedule 22.10.2017
comment
Спасибо, это прекрасно работает, и ссылка на компонентную документацию полезна. Я смотрел только сами документы Ant Design. - person llevar; 22.10.2017
comment
Приближаясь к этому в 2020 году, кажется, нет необходимости добавлять expandIconAsCell = {false}, но я все еще использую antd 3.20.1. - person karfus; 29.09.2020

Таким образом можно сделать любую колонку расходным материалом. Сначала добавьте expandedRowKeys в свой компонент state

state = {
    expandedRowKeys: [],
  };

Затем вам нужно добавить эти две функции onExpand и updateExpandedRowKeys

<Table
    id="table-container"
    rowKey={record => record.rowKey}
    className={styles['quote-summary-table']}
    pagination={false}
    onExpand={this.onExpand}
    expandedRowKeys={this.state.expandedRowKeys}
    columns={columns({
        updateExpandedRowKeys: this.updateExpandedRowKeys,
    })
    }
    dataSource={this.data}
    oldTable={false}
/>

Вот как вам нужно определить функцию, чтобы в expandedRowKeys у нас всегда были обновленные значения развернутых rowKeys

onExpand = (expanded, record) => {
    this.updateExpandedRowKeys({ record });
  };

  updateExpandedRowKeys = ({ record }) => {
    const rowKey = record.rowKey;
    const isExpanded = this.state.expandedRowKeys.find(key => key === rowKey);
    let expandedRowKeys = [];
    if (isExpanded) {
      expandedRowKeys = expandedRowKeys.reduce((acc, key) => {
        if (key !== rowKey) acc.push(key);
        return acc;
      }, []);
    } else {
      expandedRowKeys.push(rowKey);
    }
    this.setState({
      expandedRowKeys,
    });
  }

И, наконец, вам нужно вызвать функцию updateExpandedRowKeys для любого столбца, для которого вы хотите использовать функцию развертывания-свертывания. Даже это может быть реализовано для нескольких столбцов.

export const columns = ({
    updateExpandedRowKeys,
  }) => {
    let columnArr = [
      {
        title: 'Product',
        key: 'productDes',
        dataIndex: 'productDes',
        className: 'productDes',
        render: (text, record) => (
          <span onClick={rowKey => updateExpandedRowKeys({ record })}>
            {text}
          </span>
        ),
      }, {
        title: 'Product Cat',
        key: 'productCat',
        dataIndex: 'productCat',
        className: 'product-Cat',
      }]
    }
person SHEKHAR SUMAN    schedule 17.04.2020