Как мне настраивать столбцы в React-Table? - PullRequest
Новая
       30

Как мне настраивать столбцы в React-Table?

0 голосов
/ 16 апреля 2019

введите описание изображения здесь как мне выбрать столбец для отображения с выпадающим списком?

Может ли кто-нибудь помочь мне с этим?

1 Ответ

0 голосов
/ 16 апреля 2019

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

import React, { Component } from 'react';
import ReactTable from 'react-table'
import Multiselect from 'multiselect-dropdown-react';


const columns = [{
    Header: 'Name',
    accessor: 'name'
}, {
    Header: 'Age',
    accessor: 'age',
    Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
}, {
    id: 'friendName',
    Header: 'Friend Name',
    accessor: d => d.friend.name
}, {
    Header: "Friend Age",
    accessor: 'friend.age'
}]

const data = [{
    name: 'Tanner Linsley',
    age: 26,
    friend: {
        name: 'Jason Maurer',
        age: 23,
    }
}, {
    name: 'Tanner Linsley123',
    age: 30,
    friend: {
        name: 'Jason Maurer qwer',
        age: 12,
    }
}]

const options = [
    {
        name: 'Name',
        value: 'Name'
    },
    {
        name: 'Age',
        value: 'Age'
    },
    {
        name: 'Friend Name',
        value: 'Friend Name'
    },
    {
        name: 'Friend Age',
        value: 'Friend Age'
    },
]




class App extends Component {
    state = {
        cols: ["Name", "Age"]
    }



    setCols = () => {
        return columns.filter(col => this.state.cols.indexOf(col.Header) > -1)

    }

    result = (params) => {
        this.setState({ cols: params })
    }

    render() {
        return (
            <div className="App">

                <Multiselect options={options} onSelectOptions={this.result} />
                <ReactTable
                    data={data}
                    columns={this.setCols()}
                    />
            </div>
        );
    }
}

export default App;
...