AllenFang / react-bootstrap-table

A Bootstrap table built with React.js
https://allenfang.github.io/react-bootstrap-table/
MIT License
2.23k stars 782 forks source link

Problems passing a dynamic link to the table :/ #1943

Open dzenis-h opened 6 years ago

dzenis-h commented 6 years ago

First of all great library :+1: I have a big problem inserting a Link into the table. I tried almost everything. I got data coming from a server, so I'm mapping over it and rendering the results. But I need to be able to click on one of the take that clicked value and pass it onto the second component. I'm able to do do that without using react-bootstrap-tables, but I like them so much, so I was wondering if that's a possibility and if so, can you please help me. Here's an important piece of code.

sortedReports is an array.

`

let test = sortedReports.map(item => {
        return (<Link to={{ pathname: '/reports/details', state: { item } }}>
                    <PieChart size="21"/>
                </Link>
                )
        });

return (
        <div className="container">
        <div>
        <header style={{textAlign: 'center'}}>
            <h4>The complete list of reports</h4>
            <p style= {{ color: '#48C6EF' }}>Details available by clicking on an icon </p>
            </header>
            <hr />
        </div>

<div className="col-md-10">
        <BootstrapTable
          data={ sortedReports }
          pagination>
          <TableHeaderColumn dataField='year'>Year</TableHeaderColumn>
          <TableHeaderColumn dataFormat = { this.colFormatter} dataField='month'>Month</TableHeaderColumn>
          <TableHeaderColumn dataField='ukupno_plata'>Full salary</TableHeaderColumn>
          <TableHeaderColumn dataField='bruto_ukupno' isKey={true}>Full gross</TableHeaderColumn>
          <TableHeaderColumn dataField='bruto_plata'>Bruto</TableHeaderColumn>
          <TableHeaderColumn dataField='neto_plata'>Neto</TableHeaderColumn>          
          <TableHeaderColumn dataField='topli_obrok'>Neto</TableHeaderColumn>                    
          <TableHeaderColumn dataField='doprinosi'>Taxes</TableHeaderColumn> 
          <TableHeaderColumn **dataField={test}**>Details</TableHeaderColumn>`

capture

Thank you in advance.

juanpasolano commented 6 years ago

You need to use the dataFormat prop for the TableHeaderColumn component check the docs here: http://allenfang.github.io/react-bootstrap-table/docs.html#dataFormat