Style cell based on values - Reactabular

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 .