5

I am using react-bootstrap-table and I am trying to alternate the background color. The documentation leaves it a bit unclear what type of data in particular goes into it's implementation of the conditional rendering function so I cannot receive the correct result. What am I doing wrong?

// Customization Function 
function rowClassNameFormat(row, rowIdx) {
  // row is whole row object
  // rowIdx is index of row
  return rowIdx % 2 === 0 ? 'backgroundColor: red' : 'backgroundColor: blue';
}

// Data
var products = [
  {
    id: '1',
    name: 'P1',
    price: '42'
  },
  {
    id: '2',
    name: 'P2',
    price: '42'
  },
  {
    id: '3',
    name: 'P3',
    price: '42'
  },
];

// Component
class TrClassStringTable extends React.Component {
  render() {
    return (
      <BootstrapTable data={ products } trClassName={this.rowClassNameFormat}>
          <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
          <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
      </BootstrapTable>
    );
  }
}
Tholle
  • 108,070
  • 19
  • 198
  • 189
Ryan Cocuzzo
  • 3,109
  • 7
  • 35
  • 64
  • `trClassName` allows you to customize the class given to each `tr`. You could then style these classes however you like with regular CSS. – Tholle Jul 02 '18 at 22:43
  • 1
    Yes @Tholle but I am trying to do "conditional" formatting so I need JS logic as well. Also, I am more looking for the JS styling implementation – Ryan Cocuzzo Jul 02 '18 at 22:45
  • Yes, the JS logic can be almost like the code you already have, except with class names. `rowIdx % 2 === 0 ? 'bg-red' : 'bg-blue';`, and then styling those. I'm not sure you can conditionally customize inline styles. – Tholle Jul 02 '18 at 22:47

1 Answers1

4

You can customize the inline styles with trStyle instead of trClassName. The inlined styles should also be returned in object form, not as a string.

Example

function rowStyleFormat(row, rowIdx) {
  return { backgroundColor: rowIdx % 2 === 0 ? 'red' : 'blue' };
}

class TrClassStringTable extends React.Component {
  render() {
    return (
      <BootstrapTable data={ products } trStyle={rowStyleFormat}>
          <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
          <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
      </BootstrapTable>
    );
  }
}
Tholle
  • 108,070
  • 19
  • 198
  • 189
  • Firstly, I appreciate the response! But I ran the code and it doesn't change the background colors at all. – Ryan Cocuzzo Jul 02 '18 at 22:52
  • @RyanCocuzzo You're welcome. That's frustrating. I updated the answer with a working CodeSandbox. Could you look at that and see if your code differs? – Tholle Jul 02 '18 at 22:55
  • Hi @Tholle i tried this solution, unfortunately both `row` and `rowIdx` are undefined in `rowStyleFormat`, it seems `trStyle` doesn't pass through the object correctly... – chutium May 07 '19 at 10:21
  • @chutium That's frustrating. You can look at the [official example](https://github.com/AllenFang/react-bootstrap-table/blob/26d07defab759e4f9bce22d1d568690830b8d9d7/examples/js/style/tr-style-table.js) and see if your code matches that. – Tholle May 07 '19 at 10:34