Skip to content

Instantly share code, notes, and snippets.

@maxmckenzie
Last active July 30, 2019 15:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maxmckenzie/5bbaa31d946fb5f7b40006487a36f44b to your computer and use it in GitHub Desktop.
Save maxmckenzie/5bbaa31d946fb5f7b40006487a36f44b to your computer and use it in GitHub Desktop.
No thrills React table component
import React from 'react';
import classes from './Table.module.css';
const Row = props => {
return props.keys.map((key) => {
return <td key={props.data[key]}>{props.data[key]}</td>
})
}
const Table = ({
data
}) => {
return (
<table>
<thead>
<tr className={classes.tableHeader}>
{Object.keys(data[0]).map((key) => {
return <td key={key}>{key}</td>
})}
</tr>
</thead>
<tbody>
{data.map((row, index) => {
return <tr key={index}>
<Row key={index} data={row} keys={Object.keys(row)}/>
</tr>
})}
</tbody>
<tfoot>
</tfoot>
</table>
)
}
export default Table
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment