как динамически передавать значения в метод access-table для доступа к столбцу - PullRequest
Новая
       10

как динамически передавать значения в метод access-table для доступа к столбцу

0 голосов
/ 03 апреля 2020

Я новичок в реагирующей таблице и пытался создать таблицу реагирования с динамически добавляемым заголовком раскрывающегося столбца, и при щелчке по определенному параметру в раскрывающемся списке данные должны быть заполнены этим конкретным столбцом. 

import React, { Component } from 'react';
import ReactTable from "react-table-6";
import "react-table-6/react-table.css";
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';

export default class TableForData extends Component {
    constructor(){
        super()
        this.state={
            typeDropDown:false,
            types:[
                {
                name:"company",
                value:[{
                        "name":"no_of_emp",
                        "value":[{"1": 200, "2":321, "3":232, "4":211,"5":122}]
                    },{
                        "name":"no_of_projects",
                        "value":[{"1": 100, "2":221, "3":132, "4":41,"5":22}]
                    },{
                        "name":"no_of_dept",
                        "value":[{"1": 48, "2":31, "3":132, "4":51,"5":22}]
                    }]
                },
                {
                    name:"college",
                    value:[{
                        "name":"no_of_students",
                        "value":[{"1": 100, "2":321, "3":432, "4":211,"5":122}]
                    },{
                        "name":"no_of_teachers",
                        "value":[{"1": 400, "2":221, "3":272, "4":211,"5":192}]
                    },{
                        "name":"no_of_subjects",
                        "value":[{"1": 50, "2":32, "3":32, "4":11,"5":32}]
                    }]
                }
        ],
            addedColumns:[],
            selectedCol:''
        }
    }
    handleTypeDropDown=()=>{
        this.setState({
            typeDropDown:!this.state.typeDropDown
        })
    }
    handleColumnAdding=(type)=>{
        this.setState({
            addedColumns:this.state.addedColumns.concat(type)
        })
    }

    selected=(e)=>{

        this.setState({
            selectedCol:e.target.value
        })
    }

    render() {
        return (
            <div>
            <Dropdown className="type-dropdown" isOpen={this.state.typeDropDown} toggle={this.handleTypeDropDown}>
                <DropdownToggle className="type-dropdown" >
                    Select Type
                </DropdownToggle>
            <DropdownMenu className="type-dropdown" >
            {
                this.state.types.map((type)=>{
                    return  <DropdownItem className="type-dropdown" value={type.name} onClick={()=>{this.handleColumnAdding(type)}}>{type.name}</DropdownItem>
                })
            }
      </DropdownMenu>
    </Dropdown>
        <div className="container">
        {(this.state.addedColumns.length) ?
            <ReactTable
            className="data-table"
            title=""
            columns= {this.state.addedColumns.map((c)=>{
                    return  {
                        Header: <select onChange={this.selected}>
                                    <option>{c.name}</option>
                                { c.value.map((d)=>{
                    return <option value={d.name}>{d.name}</option>
                    })}
                </select> 
                  }
                })
            }
        data={this.state.addedColumns}
      />

    :
      null}
        </div>
            </div>
        );
    }
}

это мой код, я получаю заголовок столбца как выпадающий список, но застрял в том, как я должен динамически предоставлять аксессор или свойство Cells. Пожалуйста, помогите, спасибо

...