Ant design table nested subtable format deformation?

problem description

the environmental background of the problems and what methods you have tried

related codes

import React, {PureComponent, Fragment} from "react";
import {Card, Row, Col, Badge, Form, Tree, Input, Divider, Dropdown, Menu, message, Drawer,
Button, Popconfirm, Modal, Icon, TreeSelect, Select, DatePicker, InputNumber, Table} from" antd";
import GridContent from"@ / components/PageHeaderWrapper/GridContent";
import StandardTable from"@ / components/StandardTable";
import moment from "moment";
import {connect} from" dva";

import PageHeaderWrapper from"@ / components/PageHeaderWrapper";
import locale from "antd/lib/locale-provider/zh_CN";
import styles from". / DeviceList.less";

const menu = (
< Menu >

<Menu.Item>
  Action 1
</Menu.Item>
<Menu.Item>
  Action 2
</Menu.Item>

< / Menu >
);

class NestedTable extends PureComponent {
render () {

const expandedRowRender = () = > {

const columns = [
  { title: "Date", dataIndex: "date", key: "date" },
  { title: "Name", dataIndex: "name", key: "name" },
  { title: "Status", key: "state", render: () => <span><Badge status="success" />Finished</span> },
  { title: "Upgrade Status", dataIndex: "upgradeNum", key: "upgradeNum" },
  {
    title: "Action",
    dataIndex: "operation",
    key: "operation",
    render: () => (
      <span className="table-operation">
        <a href="javascript：;">Pause</a>
        <a href="javascript：;">Stop</a>
        <Dropdown overlay={menu}>
          <a href="javascript：;">
            More <Icon type="down" />
          </a>
        </Dropdown>
      </span>
    ),
  },
];

const data = [];
for (let i = 0; i < 3; PPi) {
  data.push({
    key: i,
    date: "2014-12-24 23:12:00",
    name: "This is production name",
    upgradeNum: "Upgraded: 56",
  });
}
return (
  <Table
    columns={columns}
    dataSource={data}
    pagination={false}
  />
);

};

const columns = [

]

{ title: "Name", dataIndex: "name", key: "name" },
{ title: "Platform", dataIndex: "platform", key: "platform" },
{ title: "Version", dataIndex: "version", key: "version" },
{ title: "Upgraded", dataIndex: "upgradeNum", key: "upgradeNum" },
{ title: "Creator", dataIndex: "creator", key: "creator" },
{ title: "Date", dataIndex: "createdAt", key: "createdAt" },
{ title: "Action", key: "operation", render: () => <a href="javascript：;">Publish</a> },

];

const data = [];
for (let i = 0; I < 3; PPi) {

data.push({
  key: i,
  name: "Screem",
  platform: "iOS",
  version: "10.3.4.5654",
  upgradeNum: 500,
  creator: "Jack",
  createdAt: "2014-12-24 23:12:00",
});

}

return (

)

<Table
  className="components-table-demo-nested"
  columns={columns}
  expandedRowRender={expandedRowRender}
  dataSource={data}
/>

);
}
}
export default NestedTable;