AntDesign (React) -12 learning to use Table

VUE version used in the Table Pictures
https://www.cnblogs.com/zhaogaojian/p/11119762.html

Before use VUE version Table, using the right fix some columns will appear Mansian (methods may I use the wrong), the trial version to see there will be no problem React

increase public images directory, place two pictures 1.jpg, 2.jpg

pages under increased user \ components directory, create a UserList.jsx

code show as below

import { Menu, Icon } from 'antd';
import React from 'react';
import router from 'umi/router';
import { Table, Divider, Tag } from 'antd';
const { Column, ColumnGroup } = Table;
class UserList extends React.Component { 
    constructor(props) {
        super(props);
      };
    data = [
        {
          key: '1',
          userName: 'John',
          age: 32,
          address: 'New York No. 1 Lake Park',
          tags: ['nice', 'developer'],
          avatar:'http://localhost:8000/images/1.jpg'
        },
        {
          key: '2',
          userName: 'Jim',
          age: 42,
          address: 'London No. 1 Lake Park',
          tags: ['loser'],
          avatar:'http://localhost:8000/images/2.jpg'
        }
      ];
render(){
    return (
    <Table dataSource={this.data} scroll={{ x: 1500, y: 300 }}>
        <Column title="姓名" dataIndex="userName" key="firstName" fixed="left"/>
        <Column title="年龄" dataIndex="age" key="age" width="200px" />
        <Column title="地址" dataIndex="address" key="address" width="300px" />
        <Column
        title="Tags"
        dataIndex="tags"
        key="tags"
        width="300px"
        render={tags => (
            <span>
            {tags.map(tag => (
                <Tag color="blue" key={tag}>
                {tag}
                </Tag>
            ))}
            </span>
        )}
        />
        <Column
        title="Action"
        key="action"
        width="600px"
        render={(text, record) => (
            <span>
            <a>Invite {record.lastName}</a>
            <Divider type="vertical" />
            <a>Delete</a>
            </span>
        )}
        />
        <Column 
        title="头像" 
        dataIndex="avatar" 
        key="avatar" 
        width="300px"
        fixed="right"
        render={t => (
          <span>
          {<img src={t} style={{wdith:"100px",height:"100px"}}></img>}
          </span>
      )}
        />
    </Table> 
    );
        }
}
export default UserList;

Add user.jsx under render in

<UserList />

Operating results as follows, occasionally row fix the column head height is lower than the middle column happens, but basically very stable, clear and easy to understand grammar another feeling more than vue version.