adding data table to frontend roles component

frontend/src/components/people-item/index.js

@@ -1,31 +0,0 @@
-const React = require('react');
-
-const PropTypes = require('@root/prop-types');
-// const List = require('@ui/components/list');
-
-// const {
-//   ListItem,
-//   ListItemView,
-//   ListItemMeta,
-//   ListItemTitle,
-//   ListItemOptions
-// } = List;
-
-const PersonItem = ({
-  person = {},
-}) => {
-
-  return (
-    <tr>
-      <td>{person.uuid}</td>
-      <td>{person.uuid}</td>
-      <td>{person.uuid}</td>
-    </tr>
-  );
-};
-
-PersonItem.propTypes = {
-  person: PropTypes.person,
-};
-
-module.exports = PersonItem;

frontend/src/components/people-list/index.js

@@ -1,34 +1,36 @@
 const React = require('react');
 
-const PersonItem = require('@components/people-item');
 const PropTypes = require('@root/prop-types');
+const Table = require('@ui/components/table-data-table');
 
 const PeopleList = ({
   people = []
 }) => {
+  const columns = [{
+    title: 'Memeber',
+  }, {
+    title: 'Status',
+  }, {
+    title: 'Role',
+  }, {
+    title: '', // Empty title for delete
+  }];
 
-  const peopleList = people.map((person) => (
-    <PersonItem
-      key={person.uuid}
-      person={person}
-    />
-  ));
+  const data = [];
+
+  people.forEach( (person) => {
+    data.push({
+      name: person.uuid,
+      status: person.uuid,
+      role: person.uuid,
+    });
+  });
 
   return (
-    <div>
-      <table>
-        <thead>
-          <tr>
-            <th>Member</th>
-            <th>Status</th>
-            <th>Role</th>
-          </tr>
-        </thead>
-        <tbody>
-          {peopleList}
-        </tbody>
-      </table>
-    </div>
+    <Table
+      columns={columns}
+      data={data}
+    />
   );
 };
 

frontend/src/containers/org/people.js

@@ -43,7 +43,7 @@ const People = (props) => {
       </Row>
 
       <Row>
-        <Column>
+        <Column xs={12}>
           <PeopleList
             people={people}
           />