index.js

import React, { Component } from 'react'
import styles from './style.scss'

export default class Table extends Component {
  render() {
    const { data } = this.props

    if(data.length === 0) {
      return (
        <div>No data to show in table.</div>
      )
    }

    let columns = Object.keys(data[0])
    return (
      <table className={styles.Table}>
        <thead>
          <tr>
            {columns.map((col) => <th>{col}</th>)}
          </tr>
        </thead>
        <tbody>
          {data.map((item) => {
            return (
              <tr>
                {columns.map((col) => <td>{item[col]}</td>)}
              </tr>
            )
          })}
        </tbody>
      </table>
    )
  }
}

style.scss

.Table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  border-spacing: 0;
  border-collapse: collapse;
}
.Table > thead > tr > th,
.Table > tbody > tr > th,
.Table > tfoot > tr > th,
.Table > thead > tr > td,
.Table > tbody > tr > td,
.Table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
.Table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}
.Table > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}
.Table > tbody > tr:hover {
  background-color: #f5f5f5;
}