title: How to add a button to every row in Material-UI?
body: <p>I'm creating a virtualized table in react using Material-UI. In every last column of every row, there should be a button to extend that particular row. I understand how to do the extending of a row, but I have not managed to figure out how to add the buttons correctly.</p>
  
  <p>I'm trying to integrate this in the example of virtualized tables provided by the documentation, the exact code is given below from: <a href="https://material-ui.com/components/tables/" rel="nofollow noreferrer">https://material-ui.com/components/tables/</a>. However, as this example provides one generalized function to create all of the data cells and because I don't think I can access the index of a particular row, I cannot figure out how to add the actual buttons.</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import clsx from 'clsx';
  import { withStyles } from '@material-ui/core/styles';
  import TableCell from '@material-ui/core/TableCell';
  import Paper from '@material-ui/core/Paper';
  import { AutoSizer, Column, Table } from 'react-virtualized';
  
  const styles = theme =&gt; ({
    flexContainer: {
      display: 'flex',
      alignItems: 'center',
      boxSizing: 'border-box',
    },
    tableRow: {
      cursor: 'pointer',
    },
    tableRowHover: {
      '&amp;:hover': {
        backgroundColor: theme.palette.grey[200],
      },
    },
    tableCell: {
      flex: 1,
    },
    noClick: {
      cursor: 'initial',
    },
  });
  
  class MuiVirtualizedTable extends React.PureComponent {
    static defaultProps = {
      headerHeight: 48,
      rowHeight: 48,
    };
  
    getRowClassName = ({ index }) =&gt; {
      const { classes, onRowClick } = this.props;
  
      return clsx(classes.tableRow, classes.flexContainer, {
        [classes.tableRowHover]: index !== -1 &amp;&amp; onRowClick != null,
      });
    };
  
    cellRenderer = ({ cellData, columnIndex }) =&gt; {
      const { columns, classes, rowHeight, onRowClick } = this.props;
      return (
        &lt;TableCell
          component="div"
          className={clsx(classes.tableCell, classes.flexContainer, {
            [classes.noClick]: onRowClick == null,
          })}
          variant="body"
          style={{ height: rowHeight }}
          align={(columnIndex != null &amp;&amp; columns[columnIndex].numeric) || false ? 'right' : 'left'}
        &gt;
          {cellData}
        &lt;/TableCell&gt;
      );
    };
  
    headerRenderer = ({ label, columnIndex }) =&gt; {
      const { headerHeight, columns, classes } = this.props;
  
      return (
        &lt;TableCell
          component="div"
          className={clsx(classes.tableCell, classes.flexContainer, classes.noClick)}
          variant="head"
          style={{ height: headerHeight }}
          align={columns[columnIndex].numeric || false ? 'right' : 'left'}
        &gt;
          &lt;span&gt;{label}&lt;/span&gt;
        &lt;/TableCell&gt;
      );
    };
  
    render() {
      const { classes, columns, ...tableProps } = this.props;
      return (
        &lt;AutoSizer&gt;
          {({ height, width }) =&gt; (
            &lt;Table height={height} width={width} {...tableProps} rowClassName={this.getRowClassName}&gt;
              {columns.map(({ dataKey, ...other }, index) =&gt; {
                return (
                  &lt;Column
                    key={dataKey}
                    headerRenderer={headerProps =&gt;
                      this.headerRenderer({
                        ...headerProps,
                        columnIndex: index,
                      })
                    }
                    className={classes.flexContainer}
                    cellRenderer={this.cellRenderer}
                    dataKey={dataKey}
                    {...other}
                  /&gt;
                );
              })}
            &lt;/Table&gt;
          )}
        &lt;/AutoSizer&gt;
      );
    }
  }
  
  MuiVirtualizedTable.propTypes = {
    classes: PropTypes.object.isRequired,
    columns: PropTypes.arrayOf(PropTypes.object).isRequired,
    headerHeight: PropTypes.number,
    onRowClick: PropTypes.func,
    rowHeight: PropTypes.number,
  };
  
  const VirtualizedTable = withStyles(styles)(MuiVirtualizedTable);
  
  // ---
  
  const sample = [
    ['Frozen yoghurt', 159, 6.0, 24, 4.0],
    ['Ice cream sandwich', 237, 9.0, 37, 4.3],
    ['Eclair', 262, 16.0, 24, 6.0],
    ['Cupcake', 305, 3.7, 67, 4.3],
    ['Gingerbread', 356, 16.0, 49, 3.9],
  ];
  
  function createData(id, dessert, calories, fat, carbs, protein) {
    return { id, dessert, calories, fat, carbs, protein };
  }
  
  const rows = [];
  
  for (let i = 0; i &lt; 200; i += 1) {
    const randomSelection = sample[Math.floor(Math.random() * sample.length)];
    rows.push(createData(i, ...randomSelection));
  }
  
  function ReactVirtualizedTable() {
    return (
      &lt;Paper style={{ height: 400, width: '100%' }}&gt;
        &lt;VirtualizedTable
          rowCount={rows.length}
          rowGetter={({ index }) =&gt; rows[index]}
          columns={[
            {
              width: 200,
              label: 'Dessert',
              dataKey: 'dessert',
            },
            {
              width: 120,
              label: 'Calories\u00A0(g)',
              dataKey: 'calories',
              numeric: true,
            },
            {
              width: 120,
              label: 'Fat\u00A0(g)',
              dataKey: 'fat',
              numeric: true,
            },
            {
              width: 120,
              label: 'Carbs\u00A0(g)',
              dataKey: 'carbs',
              numeric: true,
            },
            {
              width: 120,
              label: 'Protein\u00A0(g)',
              dataKey: 'protein',
              numeric: true,
            },
          ]}
        /&gt;
      &lt;/Paper&gt;
    );
  }
  
  export default ReactVirtualizedTable;
  </code></pre>