allenfang / react-bootstrap-table Goto Github PK

Noticed the table header doesn't resize when the window does.
The data table does resize causing misaligned headers/columns.

go to http://allenfang.github.io/react-bootstrap-table/example.html and resize your browser, you'll see what I mean quickly.

I got this warning:Don't set .props.clearSortCaret of the React component. Instead, specify the correct value when initially creating the element or use React.cloneElement to make a new element with updated props.

vesion0.9.7, TableHeader.js:110.

I think React does not suggest modify props directly, maybe we can use React.cloneElement instead?

reference from #15 by @markmus

Hi there

If you have selection enabled, and then you filter, there doesn't seem to be a hook to either:

1. De-select the items that are not part of the filtered set
2. Retrieve the current set of selected items.

This is useful when, for example, you filter and want to act on the filtered set. Also, if you've select n items, filter that set down to n-5 (for example), then n items are still selected. How do we determine what the user is seeing on screen?

Thanks for a good product!

Trying to use react-bootstrap-table in my project.
Importing it causes a module not found error for react-toastr.

Module not found: Error: Cannot resolve 'file' or 'directory' ../node_modules/toastr/build/toastr.min.css in rea
ct-bootstrap-table\css
 @ ./~//react-component-tools/~/css-loader!./~//react-component-tools/~/autoprefixer-loader?browsers=last 2 version!./~/react-bootstrap-table/css/react-bootstra
p-table.css 3:10-135

my deps:

"react-bootstrap-table": "^1.0.1",
"toastr": "2.1.2"

import 'react-bootstrap-table/css/react-bootstrap-table.css';

Being able to click the row to select is great and makes the radio button column somewhat unnecessary (at least for single selection).

Would be great to be able to pass an option to selectRow that hides the selection column.

Something like:

var selectSessionProp = {
            mode: 'radio',
            clickToSelect: true,
            hideColumn: true,
            bgColor: 'rgb(238, 193, 213)',
            onSelect: this.props.onSelect
        };

I will need to work with a lot of data from server, so i wanted to ask is it possible, if i'll get first 10 items from server and just the number of pages, to set number of pages for pagination? I did not found any kind of property, that would let me to do this. I just dont want to mess myself with your src.
And is there way to make table to not resize, when there is less items, like when you switch from page with 10 items to 3 items, so it fills the rest with blanks?

Hi,

This is cool stuff, thanks. However, i'm having issues getting updated data in the table. I'm having something like:

...
render () {
  return <BootstrapTable data={ this.state.data }>
    ...
 </BootstrapTable>
...

After the first render, this.state.data is updated. However, the updated data is not rendered in the table.

Hi there Mr. Fang,

I have run into an issue and I suspect that it's pretty unique but it's causing me some problems. I'm getting the following error message:

Uncaught TypeError: Cannot read property 'getDOMNode' of undefined

And this occurs here:

_adjustHeaderWidth: {
      value: function _adjustHeaderWidth() {
        this.refs.table.getDOMNode().childNodes[0].childNodes[0].style.width = this.refs.table.getDOMNode().childNodes[1].childNodes[0].offsetWidth - 1 + "px";
      }
    },

It seems to occur when I draw the Table on the page and then remove it. In my application they have something similar to tabs. On the third tab it shows this table. When they click off of the tab the table stops being rendered. After that if they resize their window the console gets filled with that error message.

I'm not quite sure how to handle this on your end. I'd maybe look to see how other react components are unmounting or something. Do you need me to write up a quick and dirty example?

Is it possible to remove the borders between each cells?

same as the bootstrap table?

It would be really nice to be able to change the placeholder text in the search field (localization).

Should update the package to support React 0.14.

Current warnings:
Warning: ReactDOMComponent: Do not access .getDOMNode() of a DOM node; instead, use the node directly. This DOM node was rendered by TableHeaderColumn.

Is there a single js file with all of this in?

Hi i have an case, where i need to uncheck or check the row without doing it by click event.

Means, there should be a function which can accept rowIndex and isSelected(boolean) as parameter and perform the above uncheck or check based on isSelected.

please provide some function.

For my particular use case, I would like users to be able to single click a row to select it, but also double-click a cell to edit it. However, if both features are enabled, only the cellEdit will work, because the component will disable the selectRow feature.

This is understandable, because it's not easy to attach single click and double click events to the same element, and because single click handers will always catch events before double click handlers...unless we do something a little tricky...

So I made an attempt to make it work, and it's working in my dev, however, it establishes a dependency to the underscore.js library, so it might not be good for the react-bootstrap-table project...but maybe it can inspire some thinking!

The basic idea is that TableBody acts as a master click handler, and is responsible for choosing whether a user is single or double clicking. Once that decision is made, the appropriate handlers in TableRow and TableColumn are invoked. I needed to modify 4 files to make this work:

BootstrapTable.js: comment out (or delete) the line that says (around line 41):

if (this.props.cellEdit.mode !== Const.CELL_EDIT_NONE) this.props.selectRow.clickToSelect = false;

Two new methods in TableBody.js:
(declare "var timer;" somewhere in TableBody.js - I put it at the top near all the requires)

rowClickMaster: {
      value: function(handler, e) {
        var evt = _.extend({}, e); // <---- THIS IS THE DEPENDENCY TO underscore.js

        if (timer) clearTimeout(timer);

        timer = setTimeout(function() { 
          handler(evt);
        }, 250);
      }
    },
onDoubleClickMaster: {
      value: function(handler, e) {
        clearTimeout(timer);
        handler(e);
      }
    },

These new methods need to passed in the props to TableRow and TableColumn, like this...

To TableRow:

rowClickMaster: this.rowClickMaster

To TableColumn:

onDoubleClickMaster: this.onDoubleClickMaster

TableRow and TableColumn need to bind onClick/onDoubleClick to the new props, like this:

TableRow.js:

return React.createElement(
            "tr",
            { style: rowStyle, onClick: this.props.rowClickMaster.bind(null, this.rowClick.bind(this)) },
            this.props.children
          );

TableColumn.js:

else if (this.props.cellEdit.mode == Const.CELL_EDIT_DBCLICK) {
            opts.onDoubleClick = this.props.onDoubleClickMaster.bind(null, this.handleCellEdit.bind(this));
          }

This is working very well for me, but I haven't tested it deeply, so there might be side effects that I haven't noticed yet. Hope this helps!!!

It twice entered to handleSelectAllRow from different path in call stack, it is twice write key into the array.
so the list of selected row keys twice bigger.

I really need it to make the table looks better, is there any way?

Console log of error message:

Uncaught TypeError: this.props.children.forEach is not a function

        <BootstrapTable data={dataSet} striped hover>
            <TableHeaderColumn dataField="id" isKey={true} dataAlign="center">ID</TableHeaderColumn>
        </BootstrapTable>

As soon as another column is added, the error message goes away.

Version #: 0.9.12

For my particular use case, I would like users to be able to single click a row to select it, but also double-click a cell to edit it. However, if both features are enabled, only the cellEdit will work, because the component will disable the selectRow feature.

This is understandable, because it's not easy to attach single click and double click events to the same element, and because single click handers will always catch events before double click handlers...unless we do something a little tricky...

So I made an attempt to make it work, and it's working in my dev, however, it establishes a dependency to the underscore.js library, so it might not be good for the react-bootstrap-table project...but maybe it can inspire some thinking!

The basic idea is that TableBody acts as a master click handler, and is responsible for choosing whether a user is single or double clicking. Once that decision is made, the appropriate handlers in TableRow and TableColumn are invoked. I needed to modify 4 files to make this work:

BootstrapTable.js: comment out (or delete) the line that says (around line 41):

if (this.props.cellEdit.mode !== Const.CELL_EDIT_NONE) this.props.selectRow.clickToSelect = false;

Two new methods in TableBody.js:

rowClickMaster: {
      value: function(handler, e) {
        var evt = _.extend({}, e); // <---- THIS IS THE DEPENDENCY TO underscore.js

        if (timer) clearTimeout(timer);

        timer = setTimeout(function() { 
          handler(evt);
        }, 250);
      }
    },
onDoubleClickMaster: {
      value: function(handler, e) {
        clearTimeout(timer);
        handler(e);
      }
    },

These new methods need to passed in the props to TableRow and TableColumn, like this...

To TableRow:

rowClickMaster: this.rowClickMaster

To TableColumn:

onDoubleClickMaster: this.onDoubleClickMaster

TableRow and TableColumn need to bind onClick/onDoubleClick to the new props, like this:

TableRow.js:

return React.createElement(
            "tr",
            { style: rowStyle, onClick: this.props.rowClickMaster.bind(null, this.rowClick.bind(this)) },
            this.props.children
          );

TableColumn.js:

else if (this.props.cellEdit.mode == Const.CELL_EDIT_DBCLICK) {
            opts.onDoubleClick = this.props.onDoubleClickMaster.bind(null, this.handleCellEdit.bind(this));
          }

This is working very well for me, but I haven't tested it deeply, so there might be side effects that I haven't noticed yet. Hope this helps!!!

Hello!

This component has saved me a ton of time. I just wanted to let you know that I'm getting two new warnings since importing your latest code:

Warning: Failed propType: Invalid prop data of type object supplied to BootstrapTable, expected array. Check the render method of app.

and

Warning: Don't set .props.clearSortCaret of the React component. Instead, specify the correct value when initially creating the element or use React.cloneElement to make a new element with updated props. The element was created by app.

The first one occurred when I switched to using data sets (to be reactive with the data changes) from an Array of data.

Not a big deal just wanted to make sure you were aware! Thanks again!

Can you please make this front-end library work with a front-end manager...

How do I use this library without node.js? It doesn't even work with browserify: I'm including what your installation depicts:

var ReactBsTable = require("./node_modules/react-bootstrap-table");
var BootstrapTable = ReactBsTable.BootstrapTable;
var TableHeaderColumn = ReactBsTable.TableHeaderColumn;

But it gives the error:

ReferenceError: ReactBsTable is not defined

Type "sdf" in the search input, click the change-data button, data not change.

class TestPage extends React.Component{
    constructor(){
        super();
        this.state = {dataSet:[
            {"objectName":"sdfsdfsdf33","userId":"cc","perms":["READ","WRITE"],"id":1}
        ]
        }
    }

    render (){
        console.log("this.state.dataSet", this.state.dataSet);
        return (
                    <div className='maxw80 ma'>
                        <BootstrapTable data={this.state.dataSet}
                                        striped={true} hover={true} condensed={false} search={true} pagination={true}>
                            <TableHeaderColumn className='clgrey' dataField="id" isKey={true} dataAlign="center"
                                               dataSort={true}>#</TableHeaderColumn>
                            <TableHeaderColumn dataField="objectName" dataSort={true}>name</TableHeaderColumn>
                            <TableHeaderColumn dataField="userId" dataSort={true}>userName</TableHeaderColumn>
                            <TableHeaderColumn dataField="perms" dataSort={true}
                                               dataFormat={(cell, row)=>(<span>{cell.toString()}</span>)}>
                                auth
                            </TableHeaderColumn>
                            <TableHeaderColumn dataField="id">
                                op
                            </TableHeaderColumn>
                        </BootstrapTable>
                        <button onClick={function(){this.setState({dataSet:[{"objectName":"newdata","userId":"all","perms":["READ"],"id":5}]})}.bind(this)}>change-data</button>
                    </div>
        )
    }
}

I'm using BootstrapTable as a child component of a larger component, and I'm using the TableDataSet feature to manage the list of items displayed in the table. My parent component needs to know when the BootstrapTable component has finished updating after a new list of items has been passed (after a myTableDataSet.setData(newData)), in order to perform some additional actions.

So, I'm wondering if you would consider adding this feature(?)

One way to do this would be to pass a callback prop (something like "handleUpdate") that can be called from BootstrapTable's componentDidUpdate method...but maybe there's a better way...

Thanks!

how to set total count displaying in pagination?
how to set position about seletions of page items?
thanks

Thanks for the great component! I'm using the selectRow feature, but I can't find a way to render a table with a specific row selected by default, or programmatically control which row is selected.

Am I missing something, or is this a feature request?

I have a situation where I have data with a unique key, but I don't want that data to be displayed in the table since it is as meaningless ID number. None of the other data in the table is unique by itself. I am forced to set a key with the current version, and I can't specify a unique combination of key columns. Would it be an easy improvement to allow a column to be declared as a key, but hide it from the table? Or to allow for more than one key where the combination is unique?

Hey Allen!

My pagination button isn't working. It seems to be disabled and clicking on it does nothing.

No warnings/errors appear in the console. Any idea on why this might be happening?

I want to select 25 items per page, but the button not work
Test Code:

 const dataSet =  [
            {"objectName":"sdfsdfsdf33","userId":"chengcao.chucc","perms":["READ","WRITE"],"id":1},
            {"objectName":"sdfasd","userId":"all","perms":["READ","WRITE"],"id":2},
            {"objectName":"gggggs","userId":"all","perms":["READ"],"id":3},
            {"objectName":"时间xx","userId":"all","perms":["READ"],"id":4},
            {"objectName":"时间xxd","userId":"all","perms":["READ"],"id":5},
            {"objectName":"xm","userId":"b","perms":["READ"],"id":6},
            {"objectName":"xm","userId":"all","perms":["READ"],"id":7},
            {"objectName":"xxxxd","userId":"all","perms":["READ"],"id":8},
            {"objectName":"什么鬼3","userId":"all","perms":["READ"],"id":9},
            {"objectName":"贝贝贝d","userId":"all","perms":["READ"],"id":10},
            {"objectName":"什么鬼8","userId":"all","perms":["READ"],"id":11},
            {"objectName":"sdfsdf","userId":"all","perms":["READ"],"id":12},
            {"objectName":"秒排","userId":"b","perms":["READ"],"id":13},
            {"objectName":"牵牛","userId":"all","perms":["READ"],"id":14},
            {"objectName":"牵牛","userId":"b","perms":["READ"],"id":15}];

        return (
                    <div className='maxw80 ma'>
                        <BootstrapTable data={dataSet}
                                        striped={true} hover={true} condensed={false} search={true} pagination={true}>
                            <TableHeaderColumn className='clgrey' dataField="id" isKey={true} dataAlign="center"
                                               dataSort={true}>#</TableHeaderColumn>
                            <TableHeaderColumn dataField="objectName" dataSort={true}>任务名称</TableHeaderColumn>
                            <TableHeaderColumn dataField="userId" dataSort={true}>被授权用户</TableHeaderColumn>
                            <TableHeaderColumn dataField="perms" dataSort={true}
                                               dataFormat={(cell, row)=>(<span>{cell.toString()}</span>)}>
                                权限
                            </TableHeaderColumn>
                            <TableHeaderColumn dataField="id">
                                操作
                            </TableHeaderColumn>
                        </BootstrapTable>
                    </div>
        )

I read the source code, and find PaginationList.js:87 does not add onClick event, is it the problem?

 React.createElement(
                "button",
                { className: "btn btn-default dropdown-toggle", type: "button", id: "pageDropDown", "data-toggle": "dropdown", "aria-expanded": "true" },
                this.state.sizePerPage,
                React.createElement("span", { className: "caret" })
              ),

The below is my code, what is the error here.

//component.jsx
var React = require('react');
var Router = require('react-router');
var ReactBsTable  = require('react-bootstrap-table');
var BootstrapTable = ReactBsTable.BootstrapTable;
var TableHeaderColumn = ReactBsTable.TableHeaderColumn;
var TableDataSet = ReactBsTable.TableDataSet;
var reactTable = React.createClass({
    getInitialState: function () {
        console.log("Initial ");
        return {
            dataSet:new TableDataSet(this.props.data)
        }
    },
    componentDidUpdate:function(){
        this.state.dataSet.setData(this.props.data)
    },
    onRowSelect:function(row, isSelected){
        console.log(row);
        console.log("selected: " + isSelected)
    },
    onSelectAll:function(isSelected){
        console.log("is select all: " + isSelected);
    },
    render: function () {
        console.log("Render calling in table",this.props.data)
        //this.state.dataSet.setData(this.props.data)
        var selectRowProp = {
            mode: "checkbox",
            clickToSelect: true,
            bgColor: "rgb(238, 193, 213)",
            onSelect: this.onRowSelect,
            onSelectAll: this.onSelectAll
        };

        return(
            <BootstrapTable className="table table-responsive" pagination={true} selectRow={selectRowProp} search={true} data={this.state.dataSet} hover={true}>
                <TableHeaderColumn isKey={true} dataField="unitId" dataSort={true}>ID</TableHeaderColumn>
                <TableHeaderColumn dataField="unitName" dataSort={true}>Name</TableHeaderColumn>
                <TableHeaderColumn dataField="schemaId" dataSort={true}>Scheme</TableHeaderColumn>
                <TableHeaderColumn dataField="count" dataSort={true}>No. of customers</TableHeaderColumn>
                <TableHeaderColumn dataField="frequencyType" dataSort={true}>Type</TableHeaderColumn>
                <TableHeaderColumn dataField="lastUpdatedOn" dataSort={true}>Last Updated on</TableHeaderColumn>
                <TableHeaderColumn dataField="createdBy" dataSort={true}>Owned by</TableHeaderColumn>
            </BootstrapTable>
        );
    }
});

module.exports = reactTable;

//lists.jsx
var React = require('react');
var Router = require('react-router');
var request = require('superagent');
var utils=require('../../utils/util')();
var request = require('myx-lib/service');
var _=require("underscore");
var CUZTable=require("./component");
var Segments = React.createClass({
    getInitialState: function () {
        return {
            segments:[],
            loader:false
        };
    },
    componentDidMount:function(){
        this.getSegments();
    },
    getSegments:function(){
        console.log("getSegments")
        var that=this;
        var data=[{"unitId":6,"unitName":"demo","frequencyType":"static","schemaId":0,"count":"-","createdBy":"[email protected]","lastUpdatedOn":1434692183000},{"unitId":8,"unitName":"sample","frequencyType":"static","schemaId":0,"count":"-","createdBy":"[email protected]","lastUpdatedOn":1434807772000},{"unitId":9,"unitName":"demo34","frequencyType":"static","schemaId":0,"count":"-","createdBy":"[email protected]","lastUpdatedOn":1434843930000}];
        this.setState({segments:data});
    },
    toggleLoader:function(toggle){
        this.setState({loader:toggle});
    },
    loader:function(){
        if(this.state.loader){
            return (
                <div id="loadingDiv" className='modal-backdrop in'>
                    <div className='ajax-loader please-wait'/>
                </div>
            );
        }
    },
    render: function () {
        console.log("render")
        var loader=this.loader();
        return (
            <div className="panel panel-default">
                {loader}
                <div className="panel-heading">
                    <h4 className="inline">Segments</h4>
                    <div className="pull-right">
                        <button type="button" className="btn btn-sm btn-default" id="toggleBtn">Toggle</button>
                        <button type="button" className="btn btn-sm btn-default">
                            <span className="glyphicon glyphicon-plus" aria-hidden="true"></span>
                            Create New</button>
                        <button type="button" className="btn btn-sm btn-default"> Compare</button>
                    </div>
                </div>

                <div className="panel-body">
                    <CUZTable data={this.state.segments}/>
                </div>
            </div>
        );
    }
});

module.exports = Segments;

The ability to handle all changes in a row in one go. This could be like the "new" row with a modal pop up that we can hook on the save event or some way in the cell edit to specify when a row loses focus etc.

Is this reasonable?

When I render the grid, I get the following warning:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of TableHeader. It was passed a child from Grid. See https://fb.me/react-warning-keys for more information.

I have an object which is like that

{
  "person_id": 1,
    "username": "UserTest",
    "created_at": "2015-09-10T21:13:56.000Z",
    "updated_at": "2015-09-10T21:13:56.000Z",
    "deleted_at": null,
    "Person": {
          "id": 1,
          "firstname": "UserTest",
          "lastname": "Obama",
          "note": "DevOps",
          "email": "[email protected]",
          "created_at": "2015-09-10T21:13:56.000Z",
          "updated_at": "2015-09-10T21:13:56.000Z",
          "deleted_at": null
    }
}

I can't access the subojbect using

<TableHeaderColumn dataField="Person.firstname">Firstname</TableHeaderColumn>

Is there any workaround not specified in the doc ?

Code is like this:

<BootstrapTable data={this.props.data}>

when this.props.data change , BootstrapTable does not load it.
I think the feature dataSet.setData cause the problem?

I'd like to use this in conjunction with a backend REST API. Is there an easy way to know when a given action has occurred and on what cell so that i can make the appropriate ajax call? I see that EDIT has a hook for this. Furthermore, I love the automated modal for submission, but is there a way to limit the fields that pop up - i.e. ID may often be autogenerated on the server.

I thought this was related to #39 but I changed the code and I still seem to be having issues. If I use the selectRow attribute with the selected property and click a row, my store contains the row data twice. If I remove the selected property, it works fine. I tried to debug and find the cause but can't track it down. I am honestly not sure if it is the table causing the issue, but I have eliminated most other paths and I am out of time to be able to look at the table code.

Example:

  onRowSelect(row, isSelected){
      DataStoreActions.addKeyword(row.description);
  }

    let selectRowProp = {
      selected: this.props.keywords,
      mode: "checkbox",
      clickToSelect: true,
      bgColor: "rgb(192, 226, 238)",
      onSelect: this.onRowSelect
    };

How can I set a default sorting rule for the table?

This component is very good. Please add column filter. The column filter can be used in 2 different use cases.
UseCase-1) Client side data filter. In this case data is already fetched from server, so we apply the column filters only on that data.
UseCase-2) Server side data filter: In this case, data is fetched from the server based on the column filters.

I need tables with bit amoun of data(50 colums or more) i try to make add bootstrap table and the result is this, my question is that if this table is prepared to bit amount of columns or not.

Here you can see my code:

reference #15 by @markmus

I am getting the following error while installing react-bootstrap-table v0.8.7 .

npm ERR! Linux 3.13.0-48-generic
npm ERR! argv "node" "/usr/bin/npm" "install" "react-bootstrap-table" "--save"
npm ERR! node v0.10.38
npm ERR! npm  v2.13.0
npm ERR! code ETARGET

npm ERR! notarget No compatible version found: react-bootstrap-table@'>=0.8.7 <0.9.0'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["0.1.0","0.1.1","0.1.2","0.2.0","0.2.1","0.2.2","0.3.0","0.3.1","0.4.0","0.5.0","0.5.1","0.5.2","0.5.4","0.5.5","0.5.6","0.6.0","0.6.1","0.7.0","0.7.1","0.7.2","0.8.0","0.8.1","0.8.2","0.8.3","0.8.4","0.8.5","0.8.6"]
npm ERR! notarget 
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget 
npm ERR! notarget It was specified as a dependency of 'CST'
npm ERR! notarget 

I need to hide a column only for mobile.

When I apply a className="hidden-xs" to TableHeaderColumn ,which is the bootstrap way to hide elements based on media query, it only removes the column in the table and not its header.

I can not use hidden={true} which will hide both column and header because it needs to use media queries.

<TableHeaderColumn dataSort={true} className="hidden-xs" min-width="50px" dataField="req_number">Req #</TableHeaderColumn>

☝️ will not hide column header.

How can I easily add link to row?
It looks you use .text() to format results in table but I couldn't found it in code.
I'm trying to add link Link to page from JSON as separate column but I got <a href="page-n.html">Link to page</a>

Other solution would be adding onclick to whole row but I didn't found it in your documentation.

Let me know how I can quickly add links.

Any plans or thoughts on infinite scrolling? Our tables are too large to render the whole thing into the dom: the browser becomes sluggish due to all the dom elements.

When passing sortName and sortOrder to set the initial sorting of a table, 'asc' sorts the table in descending order and 'desc' sorts in ascending order :)

I hope I'm not bothering you too much!

@AllenFang how can I select or put data on Bootstrap Table

For example:

I have

var permissions = [
  permission1,
  permission2,
  permission3,
  permission4,
  permission5,
]
var roles= [
  role1: {
   name: "role1"
   permissions: [
   permission1,
   permission2,
   permission3,
   permission4,
   permission5,
  ]},
  role2: {
   name: "role2"
   permissions: [
   permission1,
  ]},
  role3: {
   name: "role3"
   permissions: [
   permission1,
   permission2,
   permission3,
  ]},
  role4: {
   name: "role4"
   permissions: [
   permission4,
   permission5,
  ]},
  role5: {
   name: "role5"
   permissions: [
   permission1,
   permission2,
  ]},
]

and then to populate it dynamically. my code must be look like this:

<BootstrapTable>
  <TableHeaderColumn data={ permissions  } isKey={ true }  dataSort={true} > 
   Permisions
  </TableHeaderColumn>
  { roles.map( (role, i) => {
    return (
      <TableHeaderColumn data={ role.permissions }> { role.name } </TableHeaderColumn>
    )
  })
</BootstrapTable>

Would it be possible to set css classes for particular td? Say I want amounts to always be bold or something

It would be useful to be able to use React Elements in the dataFormat prop.

When you try to search a value in a table, if this table have null values in field, the search doesnt works. The problem that i found is in the file tabledatastore.js:
search: {
value: function search(searchText) {
if (searchText.trim() === "") {
this.filteredData = null;
this.isOnFilter = false;
this.searchText = null;
} else {
this.searchText = searchText;
this.filteredData = this.data.filter(function (row) {
var valid = false;
for (var key in row) {
if (row[key].toString().toLowerCase().indexOf(searchText.toLowerCase()) !== -1) {
valid = true;
break;
}
}
return valid;
});
this.isOnFilter = true;
}
}
},

And it can be solved just checking that the value is not null before the toString.

Hi guys,

I want to start use this package, but I was wondering if I can set a function to handle the sorting, is it possible?

Thanks in advance,