refactor table component

[vincerubinetti]

Currently the <Table> component works like this:

<Table
  data={[
    { name: 'cat', id: 2 },
    { name: 'dog', id: 3 }
  ]}
  fields={['name', 'id']}
  head={['Name', 'ID']}
  widths={['75%', '25%']}
/>

This is roughly the same way it worked for hetmech. I want to make it work like this instead:

<TableContainer>
  <Table>
    <TableHead>
      <TableRow>
        <TableCell>Calories</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {rows.map((row) => (
        <TableRow>
          <TableCell align='right'>{row.calories}</TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>
</TableContainer>

This should be more flexible and easier to read, and most third party table libraries seem to work this way too: https://material-ui.com/components/tables/

Making a generic table component I'm happy with will also benefit future Greene Lab projects. I will make sure to fully explore third party options to see if any of them meet my needs and standards before writing my own.

[vincerubinetti]

https://www.npmjs.com/package/rc-table https://github.com/tannerlinsley/react-table

[vincerubinetti]

closed by #78