获取数据呈现形式的反应表

时间:2018-08-07 20:14:24

标签: reactjs react-table

我有来自api的数据..当我将数据插入表中时,我将一些值转换为百分比..我需要在渲染后捕获此数据,以便将其发送到另一个组件。如表所示将其导出

<div>
  <div
    className="w-100 d-flex justify-content-between align-items-center "
    style={{
      background: "rgba(0, 0, 0, 0.03)",
      border: "2px solid rgba(0, 0, 0, 0.1)",
      padding: "10px 150px 10px 10px"
    }}
  >
    <div className="w-100 text-center">
      <span>Total Apps: {this.state.total}</span>
    </div>
    <ExportData
      id={this.props.id}
      data={this.state.data}
      headers={this.props.headers}
    />
  </div>
  <ReactTable
    ref={refReactTable => {
      this.refReactTable = refReactTable;
    }}
    className="-striped -highlight bg-white w-100"
    data={this.state.data}
    resolveData={data => console.log(data)}
    column={this.column()}
    columns={this.getColumns(this.state.columns, this.refReactTable)}
    minRows={10}
    // filterable
    FilterComponent={this.FilterComponent}
    noDataText={"No data to display"}
    manual // Forces table not to paginate or sort automatically, so we can handle it server-side
    pages={this.state.pages} // Display the total number of pages
    loading={this.state.loading} // Display the loading overlay when we need it
    onFetchData={this.onFetchData} // Request new data when things change
    // SubComponent={has(this.props, 'children')? this.SubComponent : false }
    // TdComponent={PopoverHover}
    showPageJump={false}
    showPageSizeOptions={false}
    showPagination={true}
    pageSizeOptions={this.state.pageSizeOptions}
    defaultPageSize={this.state.pageSizeOptions[0]}
  />
</div>

0 个答案:

没有答案