Cannot read property 'sortFunc' of undefined when trying to render react-bootstrap-table TableHeaderColumn

Question

I'm trying to render a react-bootstrap-table TableHeaderColumn using the map function. Getting error message 'sortFunc' of undefined. Works fine if i hard code the TableHeaderColumn.

I tried creating a dummy sortFunc, so it would not be undefined in the react element before rendering. Did not work.

colhdr = [
[0, 'ID',{'fieldname':'ID','label':'ID', 'iskey':true }],
[1, 'username',{'fieldname':'username','label':'User Name',  'iskey':false}],]


var columnelems = this.state.tablehdr.map ((colhdr) => {
  return (
      <TableHeaderColumn dataAlign='center' dataField={colhdr[1]} key={colhdr[0]} isKey={colhdr[2].iskey}>{colhdr[2].label}</TableHeaderColumn>
  )
});

return (
<div>
  <div class="col-xs-9 col-md-11 ml-5">
  <BootstrapTable bootstrap4 data = { this.state.tabledata }
                  height          = '40%'
                  options         ={ options }
                  selectRow       = { selectRowProp }
                  tableStyle      = { { border: 'LightSlateGrey 2.5px solid' } }
                  bodyStyle       = { { height: '87%'} }
                  hover
                  scrollTop       = { 'Bottom' }>
          {columnelems}
  </BootstrapTable>
  </div>

If I replace {columnelems} with hardcoded TableHeaderColumn elements, it works fine.

I am new to react and react-bootstrap-table. If anyone has some examples of using the map function for TableHeaderColumn, would be helpful. — Sam Melehy
– Sam Melehy, Commented Nov 8, 2019 at 22:16

cjm · Accepted Answer · 2019-11-08 23:01:28Z

1

I had exactly the same issue today and it was because the options prop I was passing to BootstrapTable was wrong. My options were:

options = {
  defaultSortName: 'foo',
  defaultSortOrder: 'asc',
};

But foo didn't exist in my objects that I was passing to the table, causing this error.

answered Nov 8, 2019 at 23:01

cjm

8442 gold badges12 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sam Melehy Over a year ago

Thanks very much. That was the problem, although I had something slightly different. I had a defaultSortName specified, then over wrote that in the TableHeaderElement with dataSort={false}. That causes the same problem. Great job finding that!.

Collectives™ on Stack Overflow

Cannot read property 'sortFunc' of undefined when trying to render react-bootstrap-table TableHeaderColumn

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related