0

I get the following error when I try to create TableHeaderColumn programatically using map.

Uncaught Error: Error. No any key column defined in TableHeaderColumn. Use 'isKey={true}' to specify a unique column after version 0.5.4.

If I don't use map and hard code the same values everything works. I usually use map for tables and it usually works as a charm. I have tried with and without key property for map, same error.

https://stackoverflow.com/a/25647392/3850405

Does not work:

type TableHeader = {
    dataField: string;
    name: string
    isKey: boolean
}

const crimeTableHeaders: TableHeader[] = [{
    dataField: 'CrimeCode',
    name: 'Brottskod',
    isKey: true,
},
{
    dataField: 'CrimeCodeClearText',
    name: 'Namn',
    isKey: false,
},
{
    dataField: 'Count',
    name: 'Antal',
    isKey: false,
}
]

<BootstrapTable containerStyle={{ marginTop: '10px' }} data={this.props.data} options={this.options} striped={true} hover={true} search multiColumnSearch strictSearch>
    {crimeTableHeaders.map((tableHeader, index) => {
        <TableHeaderColumn key={index} dataField={tableHeader.dataField} isKey={tableHeader.isKey} dataSort={true}>{tableHeader.name}</TableHeaderColumn>
        /*<TableHeaderColumn dataField={tableHeader.dataField} isKey={tableHeader.isKey} dataSort={true}>{tableHeader.name}</TableHeaderColumn>*/
    })}
</BootstrapTable>

Works:

<BootstrapTable containerStyle={{ marginTop: '10px' }} data={this.props.data} options={this.options} striped={true} hover={true} search multiColumnSearch strictSearch>
    <TableHeaderColumn dataField='CrimeCode' isKey={true} dataSort={true}>Brottskod</TableHeaderColumn>
    <TableHeaderColumn dataField='CrimeCodeClearText' isKey={false} dataSort={true}>Namn</TableHeaderColumn>
    <TableHeaderColumn dataField='Count' isKey={false} dataSort={true}>Antal</TableHeaderColumn>
</BootstrapTable>
Ogglas
  • 62,132
  • 37
  • 328
  • 418

1 Answers1

1

This API is the solution for you React bootstrap table - keyField

<BootstrapTable data={ data } keyField='CrimeCode'>
  //Map function 
</BootstrapTable>
Iniamudhan
  • 478
  • 4
  • 17
  • 1
    A link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](//meta.stackexchange.com/a/8259) so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. [Answers that are little more than a link may be deleted.](//stackoverflow.com/help/deleted-answers) – geisterfurz007 Mar 20 '18 at 08:53