DataTableShowcaseForBasicReact.jsx

import React, { Component } from 'react';
 
// schema = {name: 'Name', position: 'Position', office: 'Office', age: 'Age', startDate: 'Start date', salary: 'Salary'}
// data = [{ name: 'Tiger Nixon', position: 'System Architect', office: 'Edinburgh', age: 61, startDate: '2011/04/25', salary: '$320,800'}, ...]

export const DataTableHeader = ({ name }) => (
  <div className="card-header">
    <i className="fa fa-table"></i>{name}
  </div>
);

export const DataTableBody = ({ schema, data }) => (
  <div className="card-body">
    <div className="table-responsive">
      <table className="table table-bordered" id="dataTable" width="100%" cellspacing="0">
        <thead>
          <tr>
            {Object.keys(schema).map(key =>
              <th>{schema[key]}</th>
            )}
          </tr>
        </thead>
        <tfoot>
          <tr>
            {Object.keys(schema).map(key =>
              <th>{schema[key]}</th>
            )}
          </tr>
        </tfoot>
        <tbody>
          {data.map(element =>
          <tr>
            {Object.keys(schema).map(key =>
              <td>{element[key]}</td>
            )}
          </tr>
        </tbody>
      </table>
    </div>
  </div>
);
                    
const DataTableActivity = ({ updateTime }) => (
  <div className="card-footer small text-muted">Updated {updateTime}</div>
);

const DataTable = ({ schema, data, tableName, updateTime  }) => (
  <div className="App">
    <div className="card mb-3">
      <DataTableHeader name={tableName} />
      <DataTableBody />
      <DataTableActivity updateTime={updateTime} />
    </div>
  </div>
);

  export default DataTable;