Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TableBody] Add new property: stripedRowsStyles #5325

Closed
wants to merge 1 commit into from

Conversation

diedsmiling
Copy link

  • PR has tests / docs demo, and is linted.
  • Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
  • Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).

This resolves issue #5286. Description:

One can set stripedRows prop for a 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.

Demo:

import React from 'react';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';


const TableExampleSimple = () => (
  <Table>
    <TableHeader>
      <TableRow>
        <TableHeaderColumn>ID</TableHeaderColumn>
        <TableHeaderColumn>Name</TableHeaderColumn>
        <TableHeaderColumn>Status</TableHeaderColumn>
      </TableRow>
    </TableHeader>
    <TableBody stripedRows={true} stripedRowsStyle={{backgroundColor: 'red', color: 'blue'}}>
      <TableRow>
        <TableRowColumn >1</TableRowColumn>
        <TableRowColumn>John Smith</TableRowColumn>
        <TableRowColumn>Employed</TableRowColumn>
      </TableRow>
      <TableRow>
        <TableRowColumn>2</TableRowColumn>
        <TableRowColumn>Randal White</TableRowColumn>
        <TableRowColumn>Unemployed</TableRowColumn>
      </TableRow>
      <TableRow>
        <TableRowColumn>3</TableRowColumn>
        <TableRowColumn>Stephanie Sanders</TableRowColumn>
        <TableRowColumn>Employed</TableRowColumn>
      </TableRow>
      <TableRow>
        <TableRowColumn>4</TableRowColumn>
        <TableRowColumn>Steve Brown</TableRowColumn>
        <TableRowColumn>Employed</TableRowColumn>
      </TableRow>
    </TableBody>
  </Table>
);

export default TableExampleSimple;

table - material-ui 2016-10-03 22-31-31

@oliviertassinari
Copy link
Member

The Table component was partially / fully migrated on the next branch.
We are now focusing on releasing out the next branch.
We plan to stop the support of the migrated components.
I'm gonna close this PR. Thanks for your time.
Would be great if you check out the new component. Any PR is welcomed.

@diedsmiling
Copy link
Author

Ok, I'll have a look at the new component. Thanks.

@zannager zannager added the component: table This is the name of the generic UI component, not the React module! label Mar 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: table This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants