Skip to content

Instantly share code, notes, and snippets.

@maxmckenzie
Created September 14, 2021 12:42
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/2b317210cb042dc7badcf0f3b38691f9 to your computer and use it in GitHub Desktop.
Save maxmckenzie/2b317210cb042dc7badcf0f3b38691f9 to your computer and use it in GitHub Desktop.
React; Basic table from array of Objects
const TableWrapper = ({
title,
isHidden,
data
}: { title, isHidden, data }) => {
if (!data || data.length <= 0) return
const headers = Object.keys(data[0]).filter(key => !isHidden.includes(key))
return (
<>
<h3>{title}</h3>
<table>
<thead>
<tr>
{headers.map((label: String) => (
<th>{ label }</th>
))}
</tr>
</thead>
<tbody>
{data.map((row) => (
<tr>
{Object.keys(row)
.filter(key => !isHidden.includes(key))
.map((key) => (
<td>{row[key]}</td>
)
)}
</tr>
))}
</tbody>
</table>
</>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment