title: How to pass data to Material UI 'Table' component in ReactJS
body: <p>I am using one of materialUI's built-in components to display data on one of my sites. Currently, the code that was implemented is very closely based off of the examples on the MaterialUI API site. With that said, I have made a few adjustments for my own personal use case. This is how each of the columns that I need are labeled (5 total). I've also included my code below.</p>
  <p><a href="https://i.stack.imgur.com/2iyFQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2iyFQ.png" alt="CustomTable" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import {
    withStyles,
    Theme,
    createStyles,
    makeStyles,
  } from '@material-ui/core/styles';
  import Table from '@material-ui/core/Table';
  import TableBody from '@material-ui/core/TableBody';
  import TableCell from '@material-ui/core/TableCell';
  import TableContainer from '@material-ui/core/TableContainer';
  import TableHead from '@material-ui/core/TableHead';
  import TableRow from '@material-ui/core/TableRow';
  import Paper from '@material-ui/core/Paper';
  
  const StyledTableCell = withStyles((theme: Theme) =&gt;
    createStyles({
      head: {
        backgroundColor: '#533cf8',
        color: theme.palette.common.white,
        fontSize: 11,
      },
      body: {
        fontSize: 10,
      },
    }),
  )(TableCell);
  
  const StyledTableRow = withStyles((theme: Theme) =&gt;
    createStyles({
      root: {
        '&amp;:nth-of-type(odd)': {
          backgroundColor: theme.palette.action.hover,
        },
      },
    }),
  )(TableRow);
  
  function createData(
    parameters: string,
    required: string,
    description: string,
    defaults: string,
    type: string,
  ) {
    return { parameters, required, description, defaults, type };
  }
  
  const rows = [
    createData('id', 'yes', 'id to update', 'n/a', 'string'),
    // eslint-disable-next-line prettier/prettier
    createData('start', 'no', 'datetime in YYYY-MM-DD HH:mm:ss format that specifies the start', 'n/a', 'string',),
    // eslint-disable-next-line prettier/prettier
    createData('end', 'no', 'datetime string in YYYY-MM-DD HH:mm:ss format that specifies the end', 'n/a', 'string',),
    // eslint-disable-next-line prettier/prettier
    createData('provider', 'no', 'subdomain of the provider this affects', 'n/a', 'string',),
    createData('resources', 'no', 'list of ids for resources', 'n/a', 'string[]'),
  ];
  
  const useStyles = makeStyles({
    main: {
      maxWidth: '90%',
      marginRight: 'auto',
      marginBottom: '75px',
      marginLeft: '25px',
      borderRadius: '8px',
    },
  });
  
  export default function CustomTable(): JSX.Element {
    const classes = useStyles();
  
    return (
      &lt;TableContainer
        component={Paper}
        className={classes.main}
        elevation={0}
        style={{
          borderRight: '0.3px solid lightgray',
          borderLeft: '0.3px solid lightgray',
        }}
      &gt;
        &lt;Table aria-label="customized table"&gt;
          &lt;TableHead&gt;
            &lt;TableRow&gt;
              &lt;StyledTableCell&gt;Parameters&lt;/StyledTableCell&gt;
              &lt;StyledTableCell align="right"&gt;Required&lt;/StyledTableCell&gt;
              &lt;StyledTableCell align="right"&gt;Description&amp;nbsp;&lt;/StyledTableCell&gt;
              &lt;StyledTableCell align="right"&gt;Defaults&amp;nbsp;&lt;/StyledTableCell&gt;
              &lt;StyledTableCell align="right"&gt;Type&amp;nbsp;&lt;/StyledTableCell&gt;
            &lt;/TableRow&gt;
          &lt;/TableHead&gt;
          &lt;TableBody&gt;
            {rows.map((row) =&gt; (
              &lt;StyledTableRow key={row.parameters}&gt;
                &lt;StyledTableCell component="th" scope="row"&gt;
                  {row.parameters}
                &lt;/StyledTableCell&gt;
                &lt;StyledTableCell align="right"&gt;{row.required}&lt;/StyledTableCell&gt;
                &lt;StyledTableCell align="right"&gt;{row.description}&lt;/StyledTableCell&gt;
                &lt;StyledTableCell align="right"&gt;{row.defaults}&lt;/StyledTableCell&gt;
                &lt;StyledTableCell align="right"&gt;{row.type}&lt;/StyledTableCell&gt;
              &lt;/StyledTableRow&gt;
            ))}
          &lt;/TableBody&gt;
        &lt;/Table&gt;
      &lt;/TableContainer&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>
  <p>For my project, I am going to be using this table many, many times. The column headings won't be changing, but the number of rows/parameters will definitely be changing. For example, there might be a table with only 2 rows, while another could have up to 8.</p>
  <p>In my current code, the table is being populated using the 'const rows' variable, but since I am using this component throughout my site, I want to pass something similar using props/variables, instead of having to create a new component each time I want to fill a table with data. I am relatively new to ReactJS, so any help is much appreciated. Thank you.</p>