Form with checkboxes (ant design)

To write a table with checkboxes, the effect is as follows:

However, seeing this code on the official website is a bit speechless:

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

I don't want fixed data! ! ! So start exploring~~

1. Import:

import { Table } from 'antd';

//This is the separation of front and back, userInfo is the background data acquisition method
import { userInfo } from '../../../api.js'

2. Form column:

const columns = [{
  title: 'Name',
  dataIndex: 'name',
}, {
  title: 'Age',
  dataIndex: 'age',
}, {
  title: 'Address',
  dataIndex: 'address',
}];

3. Subject:

export default class personInfo extends  Component{
    constructor() {
        super();
        this.state = {
            dataList:[],//Table list
            pagination: {//Custom pager
                showTotal: total => `Total ${total} items`
            },
        };
    }

    componentWillMount(){
        // form data
        personInfo({pageSize:10,pageNum:1}).then(res => res.json()).then((res) => {
            if (res.meta.code && res.meta.code == '200') {
            
                if((res.data.total/10)>50){    
                    this.state.pagination.showQuickJumper=true;
                }
                if (res.pageSize >= res.total) { //Less than one page, the pager is disabled
                    this.state.pagination = false
                }
                this.setState({
                    dataList:res.data['records'],
                    pagination:{
                        total:res.data['total'],
                        onChange:this.pageChange,
                    }
                })
            }
        })
    }

    // table usage

    render(){
        return (
            <Table

                   dataSource={this.state.dataList}
                   columns={this.columns}
                   rowKey={"userName"} //If there is no "key" column in the data, it must be specified manually, otherwise an error will occur
                   rowSelection={this.rowSelection}//Check box
                   bordered //To border
                   pagination = {this.state.pagination}
            />

) }

//other functions
    rowSelection = { //checkbox selected
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: record => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
        }),
    };

    pageChange = (page, pageSize) => { //The current page number is changed, page: the current page number requested, pagesize: the size of each page
        this.setState({
            loading:true,
        })
        let para = {pageNum:page, pageSize: pageSize};
       personInfo(para).then(res => res.json()).then((res) => {
           this.setState({
               dataList:res.data['records'],
               loading:false,
           })
        })
    };

Other additions:

Additional values ​​for res.data:

total: total number of records

size: the size of each page, the default is 10

pages: total number of pages

current: current page number

Custom pager effect: