Question

enter image description here 如何继续选择要显示的带有下拉菜单的列？

有人可以帮我吗？

Answer 1

您可以尝试以下代码吗？我从desc中得到的是，您需要呈现从multiselect下拉列表中选择的列。

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;

如何自定义React-Table中的列？

1 个答案: