JSFiddle - React, Tailwind, and code Playground

by Jordan Enev

Babel + JSX

// Utilities for building Rows & Headings
const buildRows = (data, headings) => {
  let rows = []
  data.forEach(item => {
    let row = []
    headings.forEach(h => {
      row.push(item[h.key])
    })
    rows.push(row)
  })
  return rows
}
const buildHeadings = data => {
  const headings = data.map(item => ({ key: item.key, name: item.key.toUpperCase() }))
  return [...new Set(headings)]
}
// JSX Components
export const Heading = ({ headings }) => {
  return <thead>
    <tr>
      { headings.map(heading => <th>{ heading.name }</th>)}
    </tr>
  </thead>
}

export const Body = ({ rows }) => {
  return <tbody>
    { rows.map(row => <tr>
      <td> { row.map(td => td) } </td>
    </tr>)
  }
  </tbody>
}
// Table
export const Table = ({ data }) => {
  const headings = buildHeadings(data)
  const rows = buildRows(data, headings)
  return <table>
    <Heading headings={headings} />
    <Body rows={rows} />
  </table>
}