DataTable.js

import React from 'react';
import DataTableField from './DataTableField.js';
import { groupBy } from './helpers';

class DataTable extends React.Component {
  constructor(props) {
    super(props);
    this.data = this.props.data;
    this.categorizedData = groupBy(this.data, "category");
    console.log(this.categorizedData);
    // this.state = {

    // }
  }

  render() { 
    return ( 
      <div>
        <pre>
          {JSON.stringify(this.categorizedData, null, 2)}
        </pre>
        <table>
            <thead>
              <tr>
                <td><DataTableField name="Name" /></td>
                <td><DataTableField name="Price" /></td>
              </tr>
            </thead>
            <tbody>
              {
                this.categorizedData.map(
                  (catgGroup) => (
                    <>
                      <tr>
                        <td>{catgGroup}</td>
                      </tr>
                      {this.categorizedData[catgGroup].map(
                        (item) => (
                          <tr>
                            <td>{item.name}</td>
                            <td>{item.price}</td>
                          </tr>
                        )
                      )}
                    </>
                  )
                )
              }
            </tbody>
        </table>
      </div>
     );
  }
}

export default DataTable;