uas-office-integration/uas-office-web/uas-mobile/src/components/common/bizgoblin/TableChart.jsx

/**
 * Created by hujs on 2020/11/11
 * Desc: GridTable
 */

import React, { Component } from 'react'
import { Table } from 'antd'

export default class TableChart extends Component {

  constructor () {
    super()

    this.state = {}
  }

  componentDidMount () {

  }

  componentWillUnmount () {

  }

  render () {
    let { chartData } = this.props
    let { data, formulaDets, title, valueDisp, keyDisp } = chartData
    let obj = this.formatData(data, formulaDets)
    let columns = obj.columns
    data = obj.data

    return (
      <div className='table-charts' style={{ width: '100%', overflowY: 'auto' }}>
        <Table
          scroll={{ x: '100%' }}
          style={{ height: '320px' }}
          title={() => title}
          pagination={false}
          bordered={true}
          columns={columns}
          dataSource={data}
          size="small"
          tableLayout='fixed'
        />
      </div>
    )
  }

  formatData = (data, formulaDets) => {
    let columns = formulaDets.map(item => ({
      title: item.description_,
      dataIndex: item.field_,
      key: item.field_,
      width: item.width_,
    }))
    data = data.map(function (item, index, arr) {
      item.key = index
      return item
    })
    let obj = {
      data: data,
      columns: columns,
    }
    return obj
  }

}