стиль заголовков таблиц в React - PullRequest
Новая
       4

стиль заголовков таблиц в React

1 голос
/ 22 января 2020

Моя задача - покрасить заголовки столбцов в соответствии с функцией, которая должна быть выполнена на них. например, если это столбец 0, и мы решили выполнить сложение в этом столбце, тогда он должен быть красным. Если мы выберем столбец 5 и выберем умножение, то он должен быть зеленым. еще раз, если мы выберем 2, и мы решим сделать дополнение в этом, то он должен быть красным. как это оформить? 

<TableRow className={classes.tableRow}>
    {location.state.columnsData.map(column => (
    <TableCell className={classes.tableCell_header} key={column.orderPosition}>
        <div>
            <Button 
                className={ column.orderPosition in [0,1,2] ? classes.buttonSelected : classes.buttonNormal } 
                aria-controls="simple-menu" 
                aria-haspopup="true" 
                onClick={()=> handleClickOpen(column.orderPosition)}
                variant="outlined"
            >
            </Button>
        </div>
    </TableCell>
</TableRow>

1 Ответ

1 голос
/ 26 января 2020

Мне пришлось сделать много предположений относительно вашего кода на основе предоставленной ограниченной информации (используя Material-UI, <Button> в <TableHead> вместо <TableBody>, et c.), Но я думаю, это должно дать вам то, что вы ищете: 

const {
  Button,
  Menu,
  MenuItem,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  withStyles
} = MaterialUI;

class App extends React.Component {
  constructor(props) {
super(props);
this.state = {
  columnsData: [
    { orderPosition: "0" },
    { orderPosition: "1" },
    { orderPosition: "2" },
    { orderPosition: "3" },
    { orderPosition: "4" },
    { orderPosition: "5" }
  ],
  anchorEl: null
};
  }

  state = {
columnsData: [
  { orderPosition: "0" },
  { orderPosition: "1" },
  { orderPosition: "2" },
  { orderPosition: "3" },
  { orderPosition: "4" },
  { orderPosition: "5" }
],
anchorEl: null
  };

  handleClickOpen = (event, orderPosition) => {
const columnsData = this.state.columnsData.map(column => {
  column.clicked = false;
  return column;
});
columnsData[orderPosition].clicked = true;
this.setState({ columnsData });

const anchorEl = event.currentTarget;
this.setState({ anchorEl });
  };

  handleClose = styleClass => {
const { classes } = this.props;

if (this.state.anchorEl !== null) {
  var headerEl = this.state.anchorEl.parentElement.parentElement;
  headerEl.classList.remove(
    classes.addition,
    classes.subtraction,
    classes.multiplication
  );
  headerEl.classList.add(styleClass);

  const anchorEl = null;
  this.setState({ anchorEl });
}
  };

  render() {
const { classes } = this.props;
return (
  <div>
    <Table>
      <TableHead>
        <TableRow className={classes.tableRow}>
          {this.state.columnsData.map(column => (
            <TableCell
              className={classes.tableCell_header}
              key={column.orderPosition}
            >
              <div>
                <Button
                  className=""
                  aria-controls="simple-menu"
                  aria-haspopup="true"
                  onClick={event =>
                    this.handleClickOpen(event, column.orderPosition)
                  }
                  variant="outlined"
                  children=""
                >
                  Button
                </Button>
              </div>
            </TableCell>
          ))}
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          {this.state.columnsData.map(column => (
            <TableCell key={column.orderPosition}>
              Column {column.orderPosition}
            </TableCell>
          ))}
        </TableRow>
      </TableBody>
    </Table>
    <Menu
      id="simple-menu"
      anchorEl={this.state.anchorEl}
      keepMounted
      open={Boolean(this.state.anchorEl)}
      onClose={() => this.handleClose}
    >
      <MenuItem onClick={() => this.handleClose(classes.addition)}>
        Addition
      </MenuItem>
      <MenuItem onClick={() => this.handleClose(classes.subtraction)}>
        Subtraction
      </MenuItem>
      <MenuItem onClick={() => this.handleClose(classes.multiplication)}>
        Multiplication
      </MenuItem>
    </Menu>
  </div>
);
  }
}

const styles = theme => ({
  tableRow: {
width: "100%"
  },
  tableCell_header: {
padding: "10px",
textAlign: "center"
  },
  addition: {
background: "red"
  },
  subtraction: {
background: "blue"
  },
  multiplication: {
background: "green"
  }
});

App = withStyles(styles)(App);
ReactDOM.render(<App />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@4.9.0/umd/material-ui.production.min.js"></script>
...