React ant design table cell collapse issue

Question

Im using my react type script project for ant design table i want to know how to do that following image like as table, im search any tutorial but not seen anything, any one know how to do that correctly.

code sand box here

Thanks

image here

code here

class App extends React.Component {
  columns: any = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name"
    },
    {
      title: "Age",
      dataIndex: "age",
      key: "age"
    },
    {
      title: "Address",
      dataIndex: "address",
      key: "address"
    },
    {
      title: "Tags",
      key: "tags",
      dataIndex: "tags"
    },
    {
      title: "Action",
      key: "action"
    }
  ];

  data: any = [
    {
      key: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      tags: ["nice", "developer"]
    },
    {
      key: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      tags: ["loser"]
    },
    {
      key: "3",
      name: "Joe Black",
      age: 32,
      address: "Sidney No. 1 Lake Park",
      tags: ["cool", "teacher"]
    }
  ];
  render() {
    return <Table columns={this.columns} dataSource={this.data} />;
  }
}

Answer 1

You want to create 2 sub rows in each row, but only for some columns. you can use rowspan for this.

you can duplicate your rows (row1-row1-row2-row2-row3-row3-...), and put the subrow values in them (row1_subrow1-row1_subrow2-row2_subrow1-row2_subrow2-...), then use rowspan for the columns you want to expand (like Section and Name in your image), and expand the odd rows and collapse the even rows for this columns.

the full code : (Codesandbox Demo)

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";

let multiRowRender = (value, row, index) => {
  const obj = {
    children: value,
    props: {}
  };
  if (index % 2 === 0) {
    obj.props.rowSpan = 2;
  }
  if (index % 2 === 1) {
    obj.props.rowSpan = 0;
  }
  return obj;
};

const columns = [
  {
    title: "Number",
    dataIndex: "number"
  },
  {
    title: "Issue",
    dataIndex: "issue"
  },
  {
    title: "Name",
    dataIndex: "name",
    render: multiRowRender
  },
  {
    title: "Section",
    dataIndex: "section",
    render: multiRowRender
  }
];

let data = [
  {
    key: "1",
    name: "John Brown",
    issues: [32, 100],
    numbers: [18889898989, 545054],
    section: "sec 1"
  },
  {
    key: "2",
    name: "Jim Green",
    issues: [42, 50],
    numbers: [18889898888, 1420054],
    section: "sec 2"
  }
];
let data2 = [];
data.forEach(d => {
  data2.push({ ...d, issue: d.issues[0], number: d.numbers[0] });
  data2.push({
    ...d,
    issue: d.issues[1],
    number: d.numbers[1],
    key: d.key + "-row2"
  });
});
data = data2;

ReactDOM.render(
  <Table columns={columns} dataSource={data} bordered />,
  document.getElementById("container")
);

Codesandbox Demo