如何在React-Table中自定义列?

问题描述 投票:0回答:1

enter image description here我应该如何继续选择要用下拉列表显示的列?

谁能帮我这个?

reactjs redux react-table
1个回答
0
投票

你可以试试下面的代码吗?我从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;
© www.soinside.com 2019 - 2024. All rights reserved.