Skip to content

Instantly share code, notes, and snippets.

@aderchox
Last active January 18, 2022 15:44
Show Gist options
  • Save aderchox/4791c4ac57afd6170a92d1e57d1888e0 to your computer and use it in GitHub Desktop.
Save aderchox/4791c4ac57afd6170a92d1e57d1888e0 to your computer and use it in GitHub Desktop.
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment