Failed to populate boolean value to table column

[parisking]

I have issue to populate data with boolean value. I always got warning:
Is there a recommended way to display the isSupported field below?

var products = [
   {
      id: 1,
      name: "Name1",
      isSupported: true
   },
  {
     id: 2,
     name: "Name2",
     isSupported: false
   }
 ];   

<BootstrapTable data={products} >
      <TableHeaderColumn isKey={true} dataField="id">ID</TableHeaderColumn>
      <TableHeaderColumn dataField='name'>Name</TableHeaderColumn>
      <TableHeaderColumn dataField='isSupported'>Supported</TableHeaderColumn>
</BootstrapTable>

[AllenFang]

@parisking, I'll check this out. but what warning you got?

[parisking]

warning.js:44 Warning: Failed propType: Invalid prop children supplied to TableColumn, expected a ReactNode. Check the render method of TableBody.

stacktrace is:

warning @ warning.js:44
checkPropTypes @ ReactElementValidator.js:189
validatePropTypes @ ReactElementValidator.js:208
createElement @ ReactElementValidator.js:242
(anonymous function) @ TableBody.js:196
(anonymous function) @ TableBody.js:150
render @ TableBody.js:149

[luisburgos]

Hi @parisking @AllenFang I had the same problem. I think the warning is the next:

vendor.bundle.js:2241 Warning: Failed propType: Invalid prop "children" supplied to 
"TableColumn", expected a ReactNode. Check the render method of "TableBody"

I used the dateFormat property like in the examples in order to set the boolean value:

function supportedFormatter(cell, row){
  return '<i></i> ' + cell;
}

<BootstrapTable data={products} >
      <TableHeaderColumn isKey={true} dataField="id">ID</TableHeaderColumn>
      <TableHeaderColumn dataField='name'>Name</TableHeaderColumn>
      <TableHeaderColumn dataField='isSupported ' dateFormat={supportedFormatter}>Supported</TableHeaderColumn>
</BootstrapTable>

The table will display the text 'true' or 'false' depending on the boolean value. Using the function, you can change the value to be displayed to 'supported' or 'unsupported' instead. This could be an approach to solve your problem.

[parisking]

Thanks. I will try again

[AllenFang]

Anyway, I'll keep to track this issue in recent, if necessary, I'll open it again. Thanks guys :)

[parisking]

Still have warning and can't populate the boolean data even with suggestion of LuisBurgos

[sgentile]

FYI I'm having the same issue and had to use a formatter like above to fix it

[AllenFang]

I'll check out this issues quickly. Sorry for lately fixing... busy on work ;(

[parisking]

I finally find that it works with LuisBurgos's solution.

[AllenFang]

HI all, this issue fixed on v2.4.4. Thanks :)

[AllenFang]

there's one thing to notice, on v2.4.4 I move the css files from css to dist folder, remember to update the css path. I apologize for it. BTW, you can also update to v2.5.0, there's nothing change, just bump the minor version

[luisburgos]

Thanks @AllenFang!!