Set class for css styles on a cell or row based on data

I would like to be able to do something like this.

const data = [ 
    { x: 1, y: 2},
    { x: 2, y: 3}
];

const getClass = (cell, row) {
    if (row.x == 1) { 
       return "bg-info";
    } else {
       return "bg-warning";
    }
}

const MyTable = () => (
    <BootstrapTable data={data} keyField="x">
        <TableHeaderColumn dataField="y" **dataClass={getClass}** />
    </BootstrapTable>
);

When rendered, MyTable would have the bg-info class on the first row and bg-warning on the second row. This would result in the background of the cells being colored appropriately.

I tried setting dataFormat={cellFormat} on the columns, where cellFormat returns <span bsClass="{style}"> {cell} </span> with style being the style name, but that did not work. Setting class instead of bsClass also did not work.

[patrickgordon]

hey @AllenFang here’s what I did:

  trClassFormat(rowData, rIndex) {
    const {noShiftDataRowIds} = this.props
    if (find(noShiftDataRowIds, (item) => {
        return item === rIndex
      })) {
      return 'danger'
    }
  }

I think the issue is actually that noShiftDataRowIds is an array of the index’s for my data and that is not changing because it has no reason to. What I will do is instead of it being an array of index I will make it an array of the primary key instead and that should work. 😃

👍 thanks for help

[patrickgordon]

Yep all sorted @AllenFang !