Style cell based on values - Reactabular - reactjs

Question

I would like to implement styling for cells based on values. If a cell has a value within a range, it should have different background colors.
Here is my implementation of the child component which just gets me the columns and does the sort.
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {sortColName} from '../../actions/index';
class DashboardColumns extends Component {
componentDidMount() {
this.props.onRef(this);
}
componentWillUnmount() {
this.props.onRef(undefined);
}
columnClick = (dataField) => {
const sortField = {
sortColName: dataField,
sortDir: this.props.sortColDir === 'asc' ? 'desc' : 'asc',
};
this.props.sortColName(sortField);
};
sortFormatter = (label, column) => {
if (column === this.props.sortCol) {
if (this.props.sortColDir === 'asc') {
return <i><span className="glyphicon glyphicon-triangle-top" />{label}</i>;
} else return <i><span className="glyphicon glyphicon-triangle-bottom" />{label}</i>;
}
return label;
};
percentageFormatter = cell => (<span>{cell} %</span>);
styleFormatter = (cell) => {
if (cell >= 95) {
return <span className="green-background">{cell}</span>;
} else if (cell < 95 && cell > 79) {
return <span className="yellow-background">{cell}</span>;
}
return <span className="red-background">{cell}</span>;
};
columns = [
{
property: 'database_name',
header: {
label: 'Database Name',
formatters: [label => this.sortFormatter(label, 'db_name')],
transforms: [
property => ({
onClick: () => this.columnClick('db_name')
})
]
}
}, {
property: 'target_address',
header: {
label: 'Target Address',
formatters: [label => this.sortFormatter(label, 'target_address')],
transforms: [
property => ({
onClick: () => this.columnClick('target_address')
})
]
}
}, {
property: 'db_type',
header: {
label: 'Database Type',
formatters: [label => this.sortFormatter(label, 'db_type')],
transforms: [
property => ({
onClick: () => this.columnClick('db_type')
})
]
}
}, {
property: 'environment_classification',
header: {
label: 'Environment',
formatters: [label => this.sortFormatter(label, 'environment_classification')],
transforms: [
property => ({
onClick: () => this.columnClick('environment_classification')
})
]
}
}, {
property: 'non_comp_acc',
header: {
label: '# of Non-Compliant Accounts',
formatters: [label => this.sortFormatter(label, 'non_compliant')],
transforms: [
property => ({
onClick: () => this.columnClick('non_compliant')
})
]
}
}, {
property: 'comp_acc',
header: {
label: '# of Compliant Accounts',
formatters: [label => this.sortFormatter(label, 'compliant')],
transforms: [
property => ({
onClick: () => this.columnClick('compliant')
})
]
}
}, {
property: 'percentage_compliant',
header: {
label: 'Percentage Compliant',
formatters: [label => this.sortFormatter(label, 'percentage_compliant')],
transforms: [
property => ({
onClick: () => this.columnClick('percentage_compliant')
})
]
},
cell: {
formatters: [this.percentageFormatter],
transforms: [
value => this.styleFormatter(value)
]
}
}];
render() {
return null;
}
}
const mapStateToProps = state => ({
sortCol: state.getSortColName.sort.sortColName,
sortColDir: state.getSortColName.sort.sortDir,
});
const mapDispatchToProps = dispatch => ({
sortColName: dataField => dispatch(sortColName(dataField)),
});
export default connect(mapStateToProps, mapDispatchToProps)(DashboardColumns);
Please advice. Also could someone help me out on the formatters stuff. I am getting what I want perfectly but is there a more cleaner code for this?

Answer 1

Set a transform like this
styleTransform = (cell) => {
if (cell >= 95) {
return { className: 'green-background' }
}
...
};
Issue at tracker: https://github.com/reactabular/reactabular/issues/341 .