'ReactJS + Material-UI: How to alternate colors between Material-UI <Table/>'s <TableRow/>?

I currently have a Material-UI's <Table/> ( http://www.material-ui.com/#/components/table ), and would like each row to switch off between color blue and purple. So first one would be blue, then next row would be purple, and so on for any additional row added.

How can I dynamically switch off between two colors for any additional rows added? 

render(){

    return(
        <Table
          multiSelectable={true}
        >
          <TableHeader>
            <TableRow>
              <TableHeaderColumn>First Name</TableHeaderColumn>
              <TableHeaderColumn>Last Name</TableHeaderColumn>
              <TableHeaderColumn>Color</TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody
            displayRowCheckbox={true}
            stripedRows
          >
              <TableRow>
                <TableRowColumn>John</TableRowColumn>
                <TableRowColumn>Smith</TableRowColumn>
                <TableRowColumn>Red</TableRowColumn>
              </TableRow>
              <TableRow>
                <TableRowColumn>Paul</TableRowColumn>
                <TableRowColumn>Row</TableRowColumn>
                <TableRowColumn>Black</TableRowColumn>
              </TableRow>
              <TableRow>
                <TableRowColumn>Doe</TableRowColumn>
                <TableRowColumn>Boe</TableRowColumn>
                <TableRowColumn>Pink</TableRowColumn>
              </TableRow>
              <TableRow>
                <TableRowColumn>Frank</TableRowColumn>
                <TableRowColumn>Done</TableRowColumn>
                <TableRowColumn>White</TableRowColumn>
              </TableRow>
              <TableRow>
                <TableRowColumn>Lucy</TableRowColumn>
                <TableRowColumn>Ju</TableRowColumn>
                <TableRowColumn>Orange</TableRowColumn>
              </TableRow>
          </TableBody>
        </Table>

Thank you in advance

javascripthtmlcssreactjsmaterial-ui


Solution 1:[1]

Try this. This is working fine in @version 4.4.2

{
this.state.data.map((row,index)=> (
 <TableRow style ={ index % 2? { background : "#fdffe0" }:{ background : "white" }}> 
...
</TableRow>
))}

Hope this will help you. Happy Coding...!

Solution 2:[2]

You can create a styled TableRow using withStyles and apply the even and odd css rules.

using Typescript:

const StyledTableRow = withStyles((theme: Theme) =>
  createStyles({
    root: {
      '&:nth-of-type(odd)': {
        backgroundColor: "white",
      },
      '&:nth-of-type(even)': {
        backgroundColor: "grey",
      },
    },
  }),
)(TableRow);

using Javascript:

const StyledTableRow = withStyles((theme) => ({
  root: {
    '&:nth-of-type(odd)': {
      backgroundColor: "white",
    },
    '&:nth-of-type(even)': {
      backgroundColor: "grey",
    },
  },
}))(TableRow);

And using your example, this is how it should be:

render(){
  return(
    <Table multiSelectable={true} >
      <TableHeader>
        <TableRow>
          ...
        </TableRow>
      </TableHeader>
      <!-- stripedRows is no longer available in the newer versions of MUI -->
      <TableBody displayRowCheckbox={true} >
        <StyledTableRow>
          ...
        </StyledTableRow>
...

This is how Material-UI does their odd/even row style in their docs.

You can see this working in this CodeSandbox example.

Solution 3:[3]

I'm a bit late, but for some reason stripedRows didn't work for me, which is why i did it that way:

Just use the modulo operator to switch between 2 colors

{this.state.data.map((row)=> (
 <TableRow style ={ row.rank % 2? { background : "#fdffe0" }:{ background : "white" }}> 
...
</TableRow>
))}

@Version 4.2.1

Solution 4:[4]

You can use stripedRows prop for <TableBody> component to make the visual separation of rows, but I'm not sure that you can customise colors for this option.

<TableBody stripedRows > </TableBody>

Or you can achieve it by setting a className for <TableBody> component, and set colors with css even and odd rules. Probably, you should also set !important for those rules to override inline styles.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Talha Rahman
Solution 2
Solution 3 movcmpret
Solution 4

Related Questions