[Table] Specify background colour for striped rows within a table

[diedsmiling]

Description

One can set stripedRows prop for a <TableBody> component, and even rows will get different background color. But how can this color be changed? Or not just the color, but even some other style properties. I thought about adding a prop stripedRowsStyle for the possibility to customize the appearance of striped rows. Does it makes sense to make a PR with this feature?

Images & references

[JLNNN]

Any news on this? :)

[diedsmiling]

My pr was rejected, because they do not support first version anymore. Focusing on next version. :)

[bradrisse]

Table

<TableBody>
{data.map((row, index) => (
     <TableRow key={index} style={{ padding: '5px 20px', height: 25, ...this.getStripedStyle(index) }}>
           ....Columns
     </TableRow>
))}
</TableBody>

Get Striped Style

  getStripedStyle(index) {
    return { background: index % 2 ? '#fafafa' : 'white' };
  }

[ayoola-moore]

From the above, while the background color changes, it doesn't change to the appropriate color specified. For example -

getStripedStyle(index) {
    return { background: index % 2 ? '#fafafa' : '#323' };
}

changed the color, but displayed a different color order than the one specified above.

[jboron]

This is my solution

table.component.html

<mat-table #table class="striped" [dataSource]="dataSource">
    <!-- Position Column -->
    <ng-container matColumnDef="position">
        <mat-header-cell *matHeaderCellDef> No.</mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.position}}</mat-cell>
    </ng-container>


    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row [ngClass]="{'highlight': index%2 == 1}" *matRowDef="let row; columns: displayedColumns;let index = index"></mat-row>
</mat-table>

table.component.scss

.highlight {
    background: #42A948; /* green */
}

[franverona]

I've solved it by assigning a root class to TableBody, then a root class to each TableRow, and use CSS. I think it's a better solution as I can control the background color using CSS (as I'm using a SCSS variable).

Component.tsx

<TableContainer id="movies-table" component={Box}>
  <Table className="table" aria-label="simple table">
    <TableHead classes={{ root: 'table-header' }}>
      <TableRow>
        <TableCell>Movie</TableCell>
        <TableCell>Rate</TableCell>
          Registered at
        </TableCell>
      </TableRow>
    </TableHead>
    <TableBody classes={{ root: 'table-body' }}>
      <TableRow classes={{ root: 'table-row' }}>
        <TableCell>
          The Godfather
        </TableCell>
        <TableCell>
          5/5
        </TableCell>
      </TableRow>
      <TableRow classes={{ root: 'table-row' }}>
        <TableCell>
          Marvel Avengers: Endgame
        </TableCell>
        <TableCell>
          4.5/5
        </TableCell>
      </TableRow>
      <TableRow classes={{ root: 'table-row' }}>
        <TableCell>
          The Mask
        </TableCell>
        <TableCell>
          3/5
        </TableCell>
      </TableRow>
    </TableBody>
  </Table>
</TableContainer>

Component.scss

.table-body {
  .table-row {
    background-color: #fff;
  }

  .table-row:nth-child(2n) {
    background: #eee;
  }
}

Or if you are using CSS:

Component.css

.table-body > .table-row {
  background-color: #fff;
}

.table-body > .table-row:nth-child(2n) {
    background: #eee;
}