Как использовать шаги внутри элемента таблицы в дизайне муравья?

Question

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

import React, {Component} from 'react';
import { Steps, Divider, Table } from 'antd';

const { Step } = Steps;
const columns = [
  {
    title: 'AAA',
  },
  {
    title: 'BBB',
  },
  {
    title: 'CCC',
  },
  {
    title: 'DDD',
  },
  {
    title: 'EEE',
  },
  {
    title: 'FFF',
  },
];
class requestorDashboard extends Component{
  render(){
    return(
      <div className="progress-level">
          <Table columns={columns} >
            <td>
              <Steps progressDot current={1}>
                  <Step title="Finished" description="xxx" />
                  <Step title="In Progress" description=" yyy" />
                  <Step title="Waiting" description=" zzz" />
                  <Step title="Waiting" description=" xyz@gmail.com " />
                  <Step title="Waiting" description=" abc @gmail.com " />
              </Steps>
            </td>
            <td>
              <Steps progressDot current={1}>
                  <Step title="Finished" description="xxx" />
                  <Step title="In Progress" description=" yyy" />
                  <Step title="Waiting" description=" zzz" />
                  <Step title="Waiting" description=" xyz@gmail.com " />
                  <Step title="Waiting" description=" abc @gmail.com " />
              </Steps>
            </td>
          </Table>         
    </div>
    );
  }
}

экспорт по умолчанию requestorDashboard;

Это не работает. Тело таблицы пусто при компиляции.

Answer 1

Реквизиты столбца поддерживают пользовательские render реквизиты, которые можно использовать для визуализации пользовательских JSX в ячейках столбца. Например:

const columns = [
  {
    title: 'AAA',
    render: (text, record) => (<Steps progressDot current={1}>
                  <Step title="Finished" description="xxx" />
                  <Step title="In Progress" description=" yyy" />
                  <Step title="Waiting" description=" zzz" />
                  <Step title="Waiting" description=" xyz@gmail.com " />
                  <Step title="Waiting" description=" abc @gmail.com " />
              </Steps>)
  },
  {
    title: 'BBB',
  },
  {
    title: 'CCC',
  },
  {
    title: 'DDD',
  },
  {
    title: 'EEE',
  },
  {
    title: 'FFF',
  },
];

...

<Table columns={columns} dataSource={someArrayOfData}/>

Это отобразит все эти шаги в каждой ячейке в столбце «AAA».